@extends('frontend.layouts.app')
@section('main')
    <section id="master" class="pt-24 lg:pt-28 font-poppins bg-gradient-to-b from-white to-[#DFEAFD]">
        @if (session('success'))
        <div class="flex justify-center lg:justify-end px-14">
            <div id="toast-success" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
                <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
                    </svg>
                    <span class="sr-only">Check icon</span>
                </div>
                <div class="ms-3 text-sm font-normal">{{session('success')}}</div>
                <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-success" aria-label="Close">
                    <span class="sr-only">Close</span>
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                </button>
            </div>
        </div>
        @endif


        <div class="grid grid-cols-12">
            <div class="lg:col-span-6">
                <div class="hidden lg:block ">
                    <img src="{{asset('frontend/image/doctor-reg-1.jpg')}}" alt="" srcset="" class="w-full rounded-lg h-full">
                </div>
            </div>
            <div class="col-span-12 lg:col-span-6">
                <h2 class="text-center text-2xl lg:text-4xl lg:mt-5 font-semibold">Doctor Registration</h2>
        <div class="px-10 lg:px-0 py-10">
            <form class="max-w-lg mx-auto" method="POST" action="{{route('doctor.registration')}}" enctype="multipart/form-data">
                @csrf
                <div class="mb-5">
                    <select id="title" name="title" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                    <option selected disabled>Title</option>
                    <option @if (old('title') == 'Dr.') selected @endif value="Dr.">Dr.</option>
                    <option @if (old('title') == 'Pro. Dr.') selected @endif value="Pro. Dr.">Pro. Dr.</option>
                    <option @if (old('title') == 'Assoc. Pro. Dr.') selected @endif value="Assoc. Pro. Dr.">Assoc. Pro. Dr.</option>
                    <option @if (old('title') == 'Asst. Pro. Dr.') selected @endif value="Asst. Pro. Dr.">Asst. Pro. Dr.</option>
                    </select>
                    @error('title')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-5">
                <input type="text" id="name" name="name" value="{{old('name')}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 " placeholder="Your Name">
                @error('name')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="mb-5">
                    <div class="mb-5">
                        <div class="relative max-w-lg">
                            <div class="absolute inset-y-0 end-5 flex items-center pointer-events-none">
                              <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
                              </svg>
                            </div>
                            <input datepicker type="text" name="dob" value="{{old('dob')}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Date of Birth" autocomplete="off">
                            {{-- <div inline-datepicker data-date="02/25/2022"></div> --}}
                          </div>

                    </div>
                    @error('dob')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="mb-5">
                    <select id="gender" name="gender" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                    <option selected disabled>Gender</option>
                    <option @if (old('gender') == 'Male') selected @endif value="Male">Male</option>
                    <option @if (old('gender') == 'Female') selected @endif value="Female">Female</option>
                    <option @if (old('gender') == 'Others') selected @endif value="Others">Others</option>
                    </select>
                    @error('gender')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="mb-5">
                    <select id="division" name="division" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                    <option selected disabled>Division</option>
                    <option @if (old('division') == 'Chittagong') selected @endif value="Chittagong">Chittagong</option>
                    <option @if (old('division') == 'Dhaka') selected @endif value="Dhaka">Dhaka</option>
                    <option @if (old('division') == 'Khulna') selected @endif value="Khulna">Khulna</option>
                    <option @if (old('division') == 'Rajshahi') selected @endif value="Rajshahi">Rajshahi</option>
                    <option @if (old('division') == 'Barishal') selected @endif value="Barishal">Barishal</option>
                    <option @if (old('division') == 'Rangpur') selected @endif value="Rangpur">Rangpur</option>
                    <option @if (old('division') == 'Mymensingh') selected @endif value="Mymensingh">Mymensingh</option>
                    <option @if (old('division') == 'Sylhet') selected @endif value="Sylhet">Sylhet</option>
                    </select>
                    @error('division')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-5">
                    <textarea id="address" name="address" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 " placeholder="Address">{{old('address')}}</textarea>
                    @error('address')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-5">
                    <input type="number" id="nid" name="nid" value="{{old('nid')}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 " placeholder="Nation ID">
                    @error('nid')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-5">
                    <input type="number" id="bmdc" name="bmdc" value="{{old('bmdc')}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 " placeholder="Registration Number (BMDC)">
                    @error('bmdc')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-5">
                    <select id="type" name="type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                    <option selected disabled>Doctor Type</option>
                    <option @if (old('type') == 'Medical') selected @endif value="Medical">Medical</option>
                    <option @if (old('type') == 'Dental') selected @endif value="Dental">Dental</option>
                    <option @if (old('type') == 'Veterinary') selected @endif value="Veterinary">Veterinary</option>
                    </select>
                    @error('type')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="mb-5">
                    <input type="number" id="mobile" name="mobile" value="{{old('mobile')}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 " placeholder="Mobile Number">
                    @error('mobile')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-5">
                    <input type="email" id="email" name="email" value="{{old('email')}}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 " placeholder="Email">
                    @error('email')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- <div class="mb-5 relative">
                    <input type="password" id="password" name="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 " placeholder="Password">
                    <span class="absolute inset-y-0 right-5 pl-3 flex items-center">
                        <ion-icon id="pass-eye" onclick="typeHandler()" name="eye-off-outline"></ion-icon>
                      </span>
                      @error('password')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror

                </div> --}}
                <div class="mb-5">
                    <div class=" bg-white p-6 rounded-md shadow-md">
                        <h2 class="text-xl font-semibold mb-4">Add Attachments</h2>

                        <div class="mb-4">
                          <input type="file" name="image" id="fileInput" class="hidden">
                          <label for="fileInput" class="cursor-pointer bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">Choose File</label>
                        </div>

                        <div id="preview" class="hidden">
                          <img id="previewImage" class="max-w-full h-auto mb-4">
                          <button id="removeBtn" class="text-red-500 hover:text-red-700">Remove</button>
                        </div>
                      </div>
                </div>

                <h2 class="text-lg font-semibold">Accepting Terms & conditions</h2>
                <div class="flex items-start mb-5 mt-3">

                    <div class="flex items-center h-5">
                      <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required>
                    </div>
                    <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">I accept and agree <span class="text-[#EF4040]"><a href="">Terms Conditions</a></span> and <span class="text-[#EF4040]"><a href="">Privacy Policy</a></span></label>
                  </div>

                <div class="px-10">
                    <button type="submit" class="text-white bg-gradient-to-r from-[#05B4E3]  to-[#6734FF] font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center ">Submit</button>
                </div>


            </form>


        </div>
            </div>
        </div>
    </section>


<script>

function typeHandler(){
    var passField = document.getElementById('password');
    var currentType = passField.getAttribute('type');
    var newType = (currentType === 'password') ? 'text' : 'password';
    passField.setAttribute('type', newType);

    var icon = document.getElementById('pass-eye');
    var currentIcon = icon.getAttribute('name');
    var newIcon = (currentIcon === 'eye-off-outline') ? 'eye-outline' : 'eye-off-outline';
    icon.setAttribute('name',newIcon);
}
//Image Preview
document.addEventListener("DOMContentLoaded", function () {
  const fileInput = document.getElementById("fileInput");
  const previewContainer = document.getElementById("preview");
  const previewImage = document.getElementById("previewImage");
  const removeBtn = document.getElementById("removeBtn");

  fileInput.addEventListener("change", function () {
    const file = this.files[0];

    if (file) {
      const reader = new FileReader();

      reader.addEventListener("load", function () {
        previewImage.src = reader.result;
        previewContainer.classList.remove("hidden");
      });

      reader.readAsDataURL(file);
    }
  });

  removeBtn.addEventListener("click", function () {
    fileInput.value = null;
    previewImage.src = "";
    previewContainer.classList.add("hidden");
  });
});

</script>
@endsection