@section('externalcss')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@endsection

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-fluid">
        <!--begin::Navbar-->
        <div class="card mb-6">
            <div class="card-body pt-9 pb-0">
                <!--begin::Details-->
                <div class="d-flex flex-wrap flex-sm-nowrap mb-6">
                    <!--begin: Pic-->
                    <div class="me-7 mb-4">
                        <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
                            @if($image != null)
                                <img src="{{\Illuminate\Support\Facades\Storage::disk('s3')->url($image)}}" alt="{{$doctor_name}}"/>
                            @else
                                <img src="{{global_asset('assets/icons/no-pictures.png')}}" alt="{{$doctor_name}}"/>
                            @endif
                            <div
                                class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle h-15px w-15px"></div>
                        </div>
                    </div>
                    <!--end::Pic-->
                    <!--begin::Info-->
                    <div class="flex-grow-1">
                        <!--begin::Title-->
                        <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                            <!--begin::User-->
                            <div class="d-flex flex-column">
                                <div class="d-flex align-items-center mb-2">
                                    <a href="javascript:void(0);"
                                       class="text-gray-800 text-hover-primary fs-2 fw-bolder me-1">DR. {{$doctor_name}}</a>
                                    <a href="javascript:void(0);">
                                        <!--begin::Svg Icon | path: icons/duotune/general/gen026.svg-->
                                        <span class="svg-icon svg-icon-1 svg-icon-primary">
																<svg xmlns="http://www.w3.org/2000/svg" width="24px"
                                                                     height="24px" viewBox="0 0 24 24">
																	<path
                                                                        d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z"
                                                                        fill="#00A3FF"/>
																	<path class="permanent"
                                                                          d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z"
                                                                          fill="white"/>
																</svg>
															</span>
                                        <!--end::Svg Icon-->
                                    </a>
                                </div>
                                <div class="d-flex flex-wrap fw-bold fs-6 mb-4 pe-2">
                                    <a href="javascript:void(0);"
                                       class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
                                        <span class="svg-icon svg-icon-4 me-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                 height="24" viewBox="0 0 24 24" fill="none">
                                                <path opacity="0.3"
                                                      d="M20.284 3.71594C19.7401 3.17193 19.0944 2.74047 18.3837 2.44604C17.673 2.15162 16.9113 2 16.142 2C15.3727 2 14.611 2.15162 13.9003 2.44604C13.1896 2.74047 12.5439 3.17193 12 3.71594L7.858 7.85803L9.272 9.27197L13.414 5.13C13.7714 4.77055 14.1965 4.4856 14.6648 4.29163C15.133 4.09766 15.6351 3.99852 16.142 4C16.4072 4 16.6616 4.10531 16.8491 4.29285C17.0366 4.48038 17.142 4.73478 17.142 5C17.142 5.26522 17.0366 5.51962 16.8491 5.70715C16.6616 5.89469 16.4072 6 16.142 6C15.8979 5.99935 15.6561 6.04713 15.4305 6.1405C15.205 6.23388 15.0002 6.37094 14.828 6.54395L10.686 10.686L16.142 16.142L20.284 12C20.828 11.4561 21.2596 10.8104 21.554 10.0997C21.8484 9.38904 22 8.6273 22 7.85803C22 7.08877 21.8484 6.32702 21.554 5.61633C21.2596 4.90564 20.828 4.25983 20.284 3.71594Z"
                                                      fill="black"/>
                                                <path
                                                    d="M10.686 10.686L16.142 16.142L12 20.2841C10.8975 21.3635 9.41371 21.9643 7.87082 21.9562C6.32794 21.948 4.85056 21.3315 3.75956 20.2405C2.66856 19.1495 2.05203 17.672 2.04387 16.1292C2.03572 14.5863 2.63659 13.1025 3.716 12L7.858 7.85803L9.272 9.27197L8.972 9.57202C8.87649 9.66427 8.80031 9.7746 8.7479 9.89661C8.69549 10.0186 8.6679 10.1498 8.66675 10.2826C8.66559 10.4154 8.69089 10.547 8.74117 10.6699C8.79146 10.7928 8.86571 10.9045 8.9596 10.9984C9.0535 11.0923 9.16515 11.1665 9.28805 11.2168C9.41094 11.2671 9.54262 11.2924 9.6754 11.2913C9.80818 11.2901 9.9394 11.2625 10.0614 11.2101C10.1834 11.1577 10.2938 11.0815 10.386 10.986L10.686 10.686ZM7.326 14.046L7.895 13.478C7.99063 13.3859 8.06696 13.2756 8.11954 13.1537C8.17211 13.0318 8.19987 12.9006 8.20121 12.7678C8.20255 12.635 8.17743 12.5033 8.12733 12.3804C8.07722 12.2574 8.00312 12.1457 7.90937 12.0516C7.81561 11.9576 7.70407 11.8832 7.58125 11.8328C7.45843 11.7823 7.32679 11.7569 7.19402 11.7578C7.06124 11.7588 6.92999 11.7861 6.80791 11.8384C6.68583 11.8906 6.57538 11.9666 6.483 12.062L5.912 12.632C5.81649 12.7242 5.7403 12.8345 5.68789 12.9565C5.63549 13.0785 5.6079 13.2099 5.60675 13.3427C5.60559 13.4754 5.6309 13.6071 5.68118 13.73C5.73146 13.8529 5.80571 13.9645 5.8996 14.0583C5.9935 14.1522 6.10515 14.2266 6.22804 14.2769C6.35094 14.3271 6.48262 14.3524 6.6154 14.3512C6.74818 14.35 6.8794 14.3226 7.0014 14.2701C7.12341 14.2177 7.23375 14.1415 7.326 14.046Z"
                                                    fill="black"/>
                                            </svg>
										</span>
                                        <!--end::Svg Icon-->{{$specialist}}</a>
                                    <a href="javascript:void(0);"
                                       class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
                                        <!--begin::Svg Icon | path: icons/duotune/general/gen018.svg-->
                                        <span class="svg-icon svg-icon-4 me-1">
															<svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24" viewBox="0 0 24 24" fill="none">
																<path opacity="0.3"
                                                                      d="M18.0624 15.3453L13.1624 20.7453C12.5624 21.4453 11.5624 21.4453 10.9624 20.7453L6.06242 15.3453C4.56242 13.6453 3.76242 11.4453 4.06242 8.94534C4.56242 5.34534 7.46242 2.44534 11.0624 2.04534C15.8624 1.54534 19.9624 5.24534 19.9624 9.94534C20.0624 12.0453 19.2624 13.9453 18.0624 15.3453Z"
                                                                      fill="black"/>
																<path
                                                                    d="M12.0624 13.0453C13.7193 13.0453 15.0624 11.7022 15.0624 10.0453C15.0624 8.38849 13.7193 7.04535 12.0624 7.04535C10.4056 7.04535 9.06241 8.38849 9.06241 10.0453C9.06241 11.7022 10.4056 13.0453 12.0624 13.0453Z"
                                                                    fill="black"/>
															</svg>
														</span>
                                        <!--end::Svg Icon-->{{$city}}, {{$state}}</a>
                                    <a href="javascript:void(0);"
                                       class="d-flex align-items-center text-gray-400 text-hover-primary mb-2">
                                        <!--begin::Svg Icon | path: icons/duotune/communication/com011.svg-->
                                        <span class="svg-icon svg-icon-4 me-1">
															<svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24" viewBox="0 0 24 24" fill="none">
																<path opacity="0.3"
                                                                      d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19Z"
                                                                      fill="black"/>
																<path
                                                                    d="M21 5H2.99999C2.69999 5 2.49999 5.10005 2.29999 5.30005L11.2 13.3C11.7 13.7 12.4 13.7 12.8 13.3L21.7 5.30005C21.5 5.10005 21.3 5 21 5Z"
                                                                    fill="black"/>
															</svg>
														</span>
                                        <!--end::Svg Icon-->{{$email_id}}</a>
                                </div>
                            </div>

                        </div>
                        <!--end::Title-->
                        <!--begin::Stats-->
                        <div class="d-flex flex-wrap justify-content-between">
                            <!--begin::Info-->
                            <div class="d-flex flex-column flex-grow-1 pe-8">
                                <div class="d-flex flex-wrap">
                                    <a href="javascript:void(0);" class="btn btn-primary btn-sm mt-3 h-35px"
                                       style="margin-right:20px;"
                                       onclick="document.getElementById('fileInput').click();">
                                        Change Photo</a>
                                    <input type="file" id="fileInput" accept="image/png, image/gif, image/jpeg"
                                           name="image" wire:model.debounce:0ms="image" hidden>
                                    <div class="border border-dashed rounded min-w-125px py-2 px-4 me-6 mb-3"
                                         wire:ignore>
                                        <div class="fs-1 fw-bolder" data-kt-countup="true" data-kt-countup-value="{{$clinicCount}}">0</div>
                                        <div class="fw-bold fs-7 text-gray-400">Clinic</div>
                                    </div>

                                    <div class="border border-dashed rounded min-w-125px py-2 px-4 me-6 mb-3" wire:ignore>
                                        <div class="fs-1 fw-bolder" data-kt-countup="true" data-kt-countup-value="{{$experienceInYear}}">0</div>
                                        <div class="fw-bold fs-7 text-gray-400">Years of Experience</div>
                                    </div>

                                </div>
                            </div>

                            <div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
                                <div class="d-flex justify-content-between w-100 mt-auto mb-2">
                                    <span class="fw-bold fs-6 text-gray-400">Profile Status</span>
                                    <span class="fw-bolder fs-6">{{$profilePercentage}}%</span>
                                </div>
                                <div class="h-5px mx-3 w-100 bg-light rounded mb-3">
                                    <div class="bg-primary rounded h-5px" role="progressbar"
                                         style="width: {{$profilePercentage}}%;"
                                         aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="separator"></div>
                <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder">
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5 @if($tabClick == 1) active @endif" data-bs-toggle="tab"
                           href="#kt_tab_personal" wire:click="tabClick(1)" >Basic Info {{--<span
                                class="top-0 start-0 translate-middle bg-danger rounded-circle ml-2 h-7px w-7px"></span>--}}</a>
                    </li>
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5 @if($tabClick == 2) active @endif" data-bs-toggle="tab"
                           href="#kt_tab_pane_contact" wire:click="tabClick(2)">Contact Info</a>
                    </li>
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5 @if($tabClick == 3) active @endif" data-bs-toggle="tab"
                           href="#kt_tab_pane_education" wire:click="tabClick(3)">Education</a>
                    </li>
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5 @if($tabClick == 4) active @endif" data-bs-toggle="tab"
                           href="#kt_tab_pane_experience" wire:click="tabClick(4)">Experience</a>
                    </li>
                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5 @if($tabClick == 5) active @endif" data-bs-toggle="tab"
                           href="#kt_tab_pane_award" wire:click="tabClick(5)">Awards</a>
                    </li>

                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5 @if($tabClick == 6) active @endif" data-bs-toggle="tab"
                           href="#kt_tab_pane_registration" wire:click="tabClick(6)">Registration</a>
                    </li>

                    <li class="nav-item mt-2">
                        <a class="nav-link text-active-primary ms-0 me-10 py-5 @if($tabClick == 7) active @endif" data-bs-toggle="tab"
                           href="#kt_tab_pane_about" wire:click="tabClick(7)">About</a>
                    </li>

                    <li class="nav-item mt-2" style="margin-left: 110px;">
                            <a href="javascript:void(0);" class="btn btn-primary btn-sm mt-3" style="height: 35px;" wire:click="saveDoctor">Save Change
                                <span class="indicator-progress" wire:loading wire:target="saveDoctor">
														<span
                                                            class="spinner-border spinner-border-sm align-middle ms-2"></span></span></a>
                    </li>
                </ul>

            </div>
        </div>

        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade @if($tabClick == 1)show active @endif" id="kt_tab_personal" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">Name<span class="text-danger">*</span>
                                </label>
                                <input class="form-control form-control-solid" style="cursor:not-allowed;" disabled
                                       placeholder="Enter Name" name="doctor_name" wire:model="doctor_name"/>
                                @error('doctor_name') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-md-3 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">Phone Number<span
                                        class="text-danger">*</span>
                                </label>
                                <input class="form-control form-control-solid" type="text" style="cursor:not-allowed;" disabled
                                       onkeypress="return onlyNumberKey(event)" maxlength="10"
                                       placeholder="Enter Mobile Number" name="phone_no" wire:model="phone_no"/>
                                @error('phone_no') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-md-3 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">Email<span class="text-danger">*</span>
                                </label>
                                <input class="form-control form-control-solid" type="email" style="cursor:not-allowed;" disabled
                                       placeholder="Enter email address" name="email_id" wire:model="email_id"/>
                                @error('email_id') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-md-3 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">Gender<span class="text-danger">*</span>
                                </label>
                                <select class="form-control form-control-solid custominput"
                                        name="gender" wire:model="gender">
                                    <option>Select</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                                @error('gender') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-md-4 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">DOB<span class="text-danger">*</span>
                                </label>
                                <input type="date" class="form-control form-control-solid"
                                       max="{{ Carbon\Carbon::now()->subYears(18)->format('Y-m-d') }}"
                                       name="dob" wire:model.defer="dob" autocomplete="off">
                                @error('dob')
                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-4 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">Specialization <span
                                        class="text-danger">*</span></label>
                                <select class="form-control form-control-solid custominput" name="specialist"
                                        wire:model.defer="specialist">
                                    <option value="">Select</option>
                                    @foreach($specialists as $spec)
                                        <option
                                            value="{{$spec->specializations}}">{{$spec->specializations}}</option>
                                    @endforeach
                                </select>
                                @error('specialist')
                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-4 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">Type <span
                                        class="text-danger">*</span></label>
                                <select class="form-control form-control-solid custominput" name="type"
                                        wire:model.defer="type">
                                    <option value="">Select</option>
                                    @foreach($types as $typ)
                                        <option
                                            value="{{$typ}}">{{$typ}}</option>
                                    @endforeach
                                </select>
                                @error('type')
                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade @if($tabClick == 2)show active @endif" id="kt_tab_pane_contact" role="tabpanel">
                <div class="card ">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">Address<span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-solid" name="address"
                                       wire:model.defer="address" autocomplete="off">
                                @error('address')
                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-3 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">City<span
                                        class="text-danger">*</span></label>
                                <select class="form-control form-control-solid custominput" name="city"
                                        wire:model.defer="city">
                                    <option value="">Select</option>
                                    @foreach($cities as $city)
                                        <option value="{{$city}}">{{$city}}</option>
                                    @endforeach
                                </select>
                                @error('city')
                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-3 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">State / Province<span
                                        class="text-danger">*</span></label>
                                <select class="form-control form-control-solid custominput" name="state"
                                        wire:model.defer="state" autocomplete="off">
                                    <option value="">Select</option>
                                    @foreach($states as $state)
                                        <option
                                            value="{{$state['state_name']}}">{{$state['state_name']}}</option>
                                    @endforeach
                                </select>
                                @error('state')
                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-3 fv-row mb-6">
                                <label class="fs-6 fw-bold form-label mb-2">Postal Code<span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-solid" name="zip_code"
                                       onkeypress="return onlyNumberKey(event)"
                                       maxlength="6" wire:model.defer="zip_code" autocomplete="off">
                                @error('zip_code')
                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade @if($tabClick == 3)show active @endif" id="kt_tab_pane_education" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <div class="education-info">
                            <div class="row education-cont">
                                <div class="col-12 col-md-10 col-lg-11">
                                    @for($i=0; $i <= $educationCount; $i++)
                                        <div class="row">
                                            <div class="col-md-6 fv-row mb-6">
                                                <label class="fs-6 fw-bold form-label mb-2">Degree<span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control form-control-solid"
                                                       name="degree.{{$i}}"
                                                       wire:model.defer="degree.{{$i}}" autocomplete="off">
                                                @error("degree.$i")
                                                <span class="text-danger "
                                                      style="font-size: 14px;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 fv-row mb-6">
                                                <label class="fs-6 fw-bold form-label mb-2">College/Institute<span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control form-control-solid"
                                                       name="institute.{{$i}}"
                                                       wire:model.defer="institute.{{$i}}" autocomplete="off">
                                                @error("institute.$i")
                                                <span class="text-danger "
                                                      style="font-size: 14px;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 fv-row mb-6">
                                                <label class="fs-6 fw-bold form-label mb-2">Start Year<span
                                                        class="text-danger">*</span></label>
                                                <input type="month" class="form-control form-control-solid"
                                                       name="start_year.{{$i}}"
                                                       wire:model.defer="start_year.{{$i}}"
                                                       autocomplete="off">
                                                @error("start_year.$i")
                                                <span class="text-danger "
                                                      style="font-size: 14px;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 fv-row mb-6">
                                                <label class="fs-6 fw-bold form-label mb-2">Year of Completion<span
                                                        class="text-danger">*</span></label>
                                                <input type="month" class="form-control form-control-solid" name="comp_year.{{$i}}" @if(array_key_exists($i,$start_year))
                                                       min="{{ \Carbon\Carbon::parse($start_year[$i])->format('Y-m') }}" wire:model.defer="comp_year.{{$i}}" @endif
                                                       autocomplete="off">
                                                @error("comp_year.$i")
                                                <span class="text-danger "
                                                      style="font-size: 14px;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            @if($i!=0)
                                                <div class="col-lg-1">
                                                    <svg style="margin-top: 45px; color: red; cursor: pointer;"
                                                         wire:click="removeField(1,{{$i}})"
                                                         xmlns="http://www.w3.org/2000/svg" width="16"
                                                         height="16" fill="currentColor" class="bi bi-trash"
                                                         viewBox="0 0 16 16">
                                                        <path
                                                            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                                                        <path
                                                            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                                                    </svg>
                                                </div>
                                            @endif
                                        </div>
                                    @endfor
                                </div>
                            </div>
                        </div>
                        <div class="add-more">
                            <a href="javascript:void(0);" wire:click="addField(1)"><i
                                    class="fa fa-plus-circle"></i> <span class="fs-7 fw-bold"> Add More </span> </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade @if($tabClick == 4)show active @endif" id="kt_tab_pane_experience" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <div class="experience-info">
                            <div class="row experience-cont">
                                <div class="col-12 col-md-10 col-lg-11">
                                    @for($j=0; $j<=$experienceCount; $j++)
                                        <div class="row">
                                            @if($j == $experienceCount)
                                                <div class="mb-3 form-check-box">
                                                    <div
                                                        class="form-check form-check-custom form-check-solid form-check-sm">
                                                        <label class="fs-6 fw-bold form-check-label" for="flexRadioLg">
                                                            Currently
                                                            Working Here
                                                            <input type="checkbox" name="present.{{$j}}"
                                                                   class="form-check-input" id="flexRadioLg"
                                                                   wire:model.debounce:0ms="present.{{$j}}">
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="col-md-6 fv-row mb-6">
                                                <label class="fs-6 fw-bold form-label mb-2">Hospital Name</label>
                                                <input type="text" class="form-control form-control-solid"
                                                       name="hopital_name.{{$j}}"
                                                       wire:model.defer="hopital_name.{{$j}}"
                                                       autocomplete="off">
                                                @error("hopital_name.$j")
                                                <span class="text-danger "
                                                      style="font-size: 14px;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 fv-row mb-6">
                                                <label class="fs-6 fw-bold form-label mb-2">From</label>
                                                <input type="date" class="form-control form-control-solid"
                                                        name="from_date.{{$j}}"
                                                       wire:model.defer="from_date.{{$j}}"
                                                       autocomplete="off">
                                                @error("from_date.$j")
                                                <span class="text-danger "
                                                      style="font-size: 14px;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            @if(array_key_exists($j, $present) && $present[$j] == true)
                                            @else
                                                <div class="col-md-6 fv-row mb-6">
                                                    <label class="fs-6 fw-bold form-label mb-2">To</label>
                                                    <input type="date" class="form-control form-control-solid" @if(array_key_exists($j,$from_date))
                                                           name="to_date.{{$j}}" min="{{ \Carbon\Carbon::parse($from_date[$j])->format('Y-m-d') }}" @endif
                                                           wire:model.defer="to_date.{{$j}}"
                                                           autocomplete="off">
                                                    @error("to_date.$j")
                                                    <span class="text-danger"
                                                          style="font-size: 14px;">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            @endif
                                            <div class="col-md-6 fv-row mb-6">
                                                <label class="fs-6 fw-bold form-label mb-2">Designation</label>
                                                <input type="text" class="form-control form-control-solid"
                                                       name="designation.{{$j}}"
                                                       wire:model.defer="designation.{{$j}}"
                                                       autocomplete="off">
                                                @error("designation.$j")
                                                <span class="text-danger "
                                                      style="font-size: 14px;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            @if($j!=0)
                                                <div class="col-lg-2">
                                                    <svg style="margin-top: 45px; color: red; cursor: pointer;"
                                                         wire:click="removeField(2,{{$i}})"
                                                         xmlns="http://www.w3.org/2000/svg" width="16"
                                                         height="16" fill="currentColor" class="bi bi-trash"
                                                         viewBox="0 0 16 16">
                                                        <path
                                                            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                                                        <path
                                                            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                                                    </svg>
                                                </div>
                                            @endif
                                        </div>
                                    @endfor
                                </div>
                            </div>
                        </div>
                        @if($present && in_array(true, $present))
                        @else
                            <div class="add-more">
                                <a href="javascript:void(0);" wire:click="addField(2)"><i
                                        class="fa fa-plus-circle"></i> <span class="fs-7 fw-bold"> Add More </span> </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="tab-pane fade @if($tabClick == 5)show active @endif" id="kt_tab_pane_award" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <div class="awards-info">
                            @for($k=0;$k<=$awardCount;$k++)
                                <div class="row awards-cont">
                                    <div class="col-md-5 fv-row mb-6">
                                        <label class="fs-6 fw-bold form-label mb-2">Awards</label>
                                        <input type="text" class="form-control form-control-solid" name="award.{{$k}}"
                                               wire:model.defer="award.{{$k}}" autocomplete="off">
                                        @error("award.$k")
                                        <span class="text-danger "
                                              style="font-size: 14px;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-5 fv-row mb-6">
                                        <label class="fs-6 fw-bold form-label mb-2">Month/Year</label>
                                        <input type="month" class="form-control form-control-solid"
                                               name="award_month_year.{{$k}}"
                                               wire:model.defer="award_month_year.{{$k}}"
                                               autocomplete="off">
                                        @error("award_month_year.$k")
                                        <span class="text-danger "
                                              style="font-size: 14px;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-5 fv-row mb-6">
                                        <label class="fs-6 fw-bold form-label mb-2">Upload Document</label>
                                        <input type="file" class="form-control form-control-solid"
                                               name="award_upload.{{$k}}"
                                               wire:model.defer="award_upload.{{$k}}">
                                        @error("award_upload.$k")
                                        <span class="text-danger "
                                              style="font-size: 14px;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-5 fv-row mb-6">
                                        <label class="fs-6 fw-bold form-label mb-2">Description</label>
                                        <textarea type="text" class="form-control form-control-solid"
                                                  name="award_description.{{$k}}"
                                                  wire:model.defer="award_description.{{$k}}"
                                                  autocomplete="off"></textarea>
                                        @error("award_description.$k")
                                        <span class="text-danger "
                                              style="font-size: 14px;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    @if($k!=0)
                                        <div class="col-lg-2">
                                            <svg style="margin-top: 45px; color: red; cursor: pointer;"
                                                 wire:click="removeField(3,{{$k}})"
                                                 xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                 fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path
                                                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                                                <path
                                                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                                            </svg>
                                        </div>
                                    @endif
                                </div>
                            @endfor
                        </div>
                        <div class="add-more">
                            <a href="javascript:void(0);" wire:click="addField(3)"><i
                                    class="fa fa-plus-circle"></i><span class="fs-7 fw-bold"> Add More </span></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade @if($tabClick == 6)show active @endif" id="kt_tab_pane_registration" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <div class="registrations-info">
                            @for($r=0;$r<=$regCount;$r++)
                                <div class="row reg-cont">
                                    <div class="col-md-4 fv-row mb-6">
                                        <label class="fs-6 fw-bold form-label mb-2">Registrations No.<span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-solid" name="reg_no.{{$r}}"
                                               wire:model.defer="reg_no.{{$r}}" autocomplete="off">
                                        @error("reg_no.$r")
                                        <span class="text-danger "
                                              style="font-size: 14px;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 fv-row mb-6">
                                        <label class="fs-6 fw-bold form-label mb-2">Year<span
                                                class="text-danger">*</span></label>
                                        <input type="month" class="form-control form-control-solid"
                                               name="reg_year.{{$r}}"
                                               onkeypress="return onlyNumberKey(event)"
                                               maxlength="4" wire:model.defer="reg_year.{{$r}}"
                                               autocomplete="off">
                                        @error("reg_year.$r")
                                        <span class="text-danger "
                                              style="font-size: 14px;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-4 fv-row mb-6">
                                        <label class="fs-6 fw-bold form-label mb-2">Upload Document<span
                                                class="text-danger">*</span></label>
                                        <input type="file" class="form-control form-control-solid"
                                               name="reg_upload.{{$r}}"
                                               wire:model.defer="reg_upload.{{$r}}" autocomplete="off">
                                        @error("reg_upload.$r")
                                        <span class="text-danger "
                                              style="font-size: 14px;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    @if($r!=0)
                                        <div class="col-lg-2">
                                            <svg style="margin-top: 45px; color: red; cursor: pointer;"
                                                 wire:click="removeField(4,{{$r}})"
                                                 xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                 fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path
                                                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                                                <path
                                                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                                            </svg>
                                        </div>
                                    @endif
                                </div>
                            @endfor
                        </div>
                        <div class="add-more">
                            <a href="javascript:void(0);" wire:click="addField(4)"><i
                                    class="fa fa-plus-circle"></i> <span class="fs-7 fw-bold"> Add More </span> </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade @if($tabClick == 7)show active @endif" id="kt_tab_pane_about" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <div class="mb-0" wire:ignore>
                            <label class="fs-6 fw-bold form-label mb-2">Biography</label>
                            <textarea id="message" class="form-control" rows="5" name="about"></textarea>
                            @error('about')
                            <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
    <!--end::Container-->
</div>

@section('externaljs')
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    <script>
        $(document).ready(function () {

            $('#message').summernote({
                    height: 200,
                    tabsize: 2,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['table', ['table']],
                        ['insert', []],
                        ['view', []]
                    ],
                    callbacks: {
                        onChange: function (contents, $editable) {
                            console.log("Changed editor");
                        @this.set('about', contents);
                        }
                    }

                },
            );

            // Set the initial content of the Summernote editor
            $('#message').summernote('code', @this.about);

            // Update the editor content when the Livewire property changes
            Livewire.on('setAbout', about => {
                $('#message').summernote('code', about);
            });

        });

        function onlyNumberKey(evt) {
            var ASCIICode = (evt.which) ? evt.which : evt.keyCode
            if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
                return false;
            return true;
        }

        function showsuccessmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "success",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-success"
                }
            });
        }

        function showerrorsmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-danger"
                }
            });
        }

        window.addEventListener('showsuccessmsg', event => {
           if(event.detail.type =="success"){
               showsuccessmsg(event.detail.message);
           }else{
               showerrorsmsg(event.detail.message);
           }

       });

    </script>
@endsection