@extends('Front.PatientLayout.mainLayout')
@section('title', ' Edit Profile')
@section('css')
    <link href="{{ asset('asset') }}/css/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('patientAssets') }}/css/datepicker-jquery-ui.css" rel="stylesheet">
@endsection
@section('content')
    <div class="container-fluid p-0 m-0 overflow-hidden">
        <nav class="navbar  ">
            <div class="d-flex ">
                <a href="{{ route('front.patient.editProfile.view') }}">
                    <i class="mt-2 p-2 fa fa-arrow-left  fs-4 float-start ms-2 ">
                    </i></a>
                <div class="container-fluid m-3 ">
                    <span class=" mb-0 fs-3 ms-3 ">
                        {{ __('setting.setting_edit') }}
                        @switch($slug)
                            @case('Username')
                                {{ __('setting.setting_username') }}
                            @break

                            @case('email')
                                {{ __('setting.setting_email') }}
                            @break

                            @case('phone_number')
                                {{ __('setting.setting_number') }}
                            @break

                            @case('birthdate')
                                {{ __('setting.setting_date_og_birth') }}
                            @break

                            @case('height')
                                {{ __('setting.setting_height') }}
                            @break

                            @case('weight')
                                {{ __('setting.setting_weight') }}
                            @break

                            @case('District')
                                {{ __('setting.setting_gp_surgery') }}
                            @break

                            @default
                            @break
                        @endswitch
                    </span>
                </div>
            </div>
        </nav>
        <div class="text-center mt-5 mb-3 col-12">
            <p id="errorMsg" class="text-break text-white"></p>
        </div>
        <div class="row">
            <div class="col-sm-12 mt-5">
                <div class="d-flex justify-content-center">
                    <div class=" col-sm-6 col-md-8 col-lg-6 mt-2">
                        @if ($errors->any())
                            <div class="row">
                                <div class="col-sm-12 col-sm-offset-3">
                                    {!! implode('', $errors->all('<div class="text-white alert alert-danger">:message</div>')) !!}
                                </div>
                            </div>
                        @endif
                        @php
                            $slug = $_GET['slug'];
                        @endphp
                        <div class="container-fluid">
                            <form method="post" action="{{ route('front.patient.profile.update', ['slug' => $slug]) }}">
                                {{ csrf_field() }}
                                {{-- {{pre($slug)}} --}}
                                @if ($slug == 'Username')
                                    <div class="mb-4">
                                        <input class="form-control mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                            placeholder="{{ __('setting.reset_first_name') }}" type="text"
                                            name="firstname" value="{{ $profileEdit->name }}">
                                        </input>
                                    </div>
                                    <div class="mb-4">
                                        <input class="form-control mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                            placeholder="{{ __('setting.reset_last_name') }}" type="text"
                                            name="last_name" value="{{ $profileEdit->last_name }}">
                                        </input>
                                    </div>
                                @endif
                                @if ($slug == 'email')
                                    <div class="mb-4">
                                        <input class="form-control mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                            placeholder="{{ __('setting.reset_old_email') }} " type="email"
                                            name="old_email" maxlength="30" required>
                                    </div>
                                    <div class="mb-4">
                                        <input class="form-control mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                            placeholder="{{ __('setting.reset_new_email') }} (name@example.com)"
                                            type="text" name="email" maxlength="30" required>
                                        </input>
                                    </div>
                                @endif
                                @if ($slug == 'phone_number')
                                    <div class=" mb-3">
                                        <input class="form-control mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                            placeholder="{{ __('setting.phone_number_optional') }}" type="tel"
                                            id="phone" value="{{ $profileEdit->phone_number }}" name="phone_number"
                                            maxlength="15">
                                        </input>
                                    </div>
                                @endif
                                @if ($slug == 'birthdate')
                                    <div class=" form-floating mb-4">
                                        <input class="form-control mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                            id="dateofbirth" name="birthdate"
                                            placeholder="{{ __('setting.setting_date_og_birth') }}" type="text"
                                            value="{{ $profileEdit->birthdate }}">
                                        <label for="dateofbirth" class="text-dark p-2 ">
                                            {{ __('register.dateOfBirth') }}
                                        </label>
                                    </div>
                                @endif

                                @if ($slug == 'height')
                                    <div class="mb-4">
                                        <input class="form-control mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                            name="height" placeholder="{{ __('setting.setting_current_height') }} "
                                            type="number" step="any" min="1"
                                            value="{{ $profileEdit->height }}">
                                        </input>
                                    </div>
                                @endif
                                @if ($slug == 'weight')
                                    <div class="mb-4">
                                        <input class="form-control mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                            name="weight" placeholder="{{ __('setting.setting_current_weight') }}"
                                            type="number" min="1" step="any"
                                            value="{{ $profileEdit->weight }}">
                                        </input>
                                    </div>
                                @endif
                                @if ($slug == 'District')
                                    {{-- <div class="form-floating mb-4">
                                        <select
                                            class="form-select custom-select mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                            name="surgery" id="surgery" data-plugin="customselect">
                                            <option value="" selected>
                                                -- {{ __('setting.setting_gp_surgery') }} --
                                            </option>
                                            @foreach ($data as $key => $value)
                                                <option value="{{ $value->id }}">{{ $value->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label for="surgery" class="text-dark p-2 ">
                                            {{ __('setting.setting_gp_surgery') }} .....
                                        </label>
                                    </div> --}}

                                    <input
                                        class="form-select custom-select mt-2 p-3 fs-5 rounded-3 text-muted border border-2"
                                        list="surgerys" name="surgery" id="surgery"
                                        placeholder=" {{ __('setting.txt_choose_surgery') }}">


                                    <datalist id="surgerys">
                                        @foreach ($data as $key => $value)
                                            <option value="{{ $value->name }}">
                                            </option>
                                        @endforeach
                                    </datalist>

                                @endif
                                <div align="center" class="d-grid gap-2 col-5 mx-auto mt-5 mb-5">
                                    <button id="subbtn"
                                        class="fs-5 btn btn-dark text-white rounded-pill border-0 p-2 mb-5"
                                        style=" background-color:#0d3675;" name="update" type="submit">
                                        {{ __('dashboard.update') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @section('js')
        <script src="{{ asset('patientAssets') }}/js/datepicker-jquery.min.js"></script>
        <script src="{{ asset('patientAssets') }}/js/datepicker-jquery-ui.min.js"></script>
        <script nonce="{{ $cspNonce }}">
            const inputElement = document.getElementById('phone');

            if (inputElement) {
                inputElement.addEventListener('input', () => DigitOnly(inputElement));
            }
            const date = new Date();
            $(function() {
                $("#dateofbirth").removeClass('hasDatepicker');
                $("#dateofbirth").datepicker({
                    dateFormat: 'dd-mm-yy',
                    changeMonth: true,
                    changeYear: true,
                    yearRange: '-120y:c+nn',
                    maxDate: date,
                });
            });
            // @if ($slug == 'District')
            //     let html, errorMsg, error;
            //     errorMsg = $('#errorMsg');
            //     subbtn = $('#subbtn');
            //     $("#surgery").change(function(e) {
            //         e.preventDefault();

            //         let val = $("#surgery").val();
            //         let obj = $("#surgerys").find("option[value='" + val + "']");
            //         if (obj != null && obj.length > 0) {
            //             errorMsg.removeClass("alert alert-secondary");
            //             errorMsg.html("");
            //             subbtn.attr('type', 'submit');
            //             // allow form submission
            //         } else {
            //             html = "{{ __('setting.txt_error_surgery') }}";
            //             errorMsg.addClass("alert alert-secondary");
            //             errorMsg.html(html);
            //             subbtn.attr('type', 'button');
            //         }
            //     });
            // @endif
        </script>


    @endsection
@endsection