@extends('admin.dashboard.layouts.app')
@section('main')
      <!-- Content Wrapper. Contains page content -->
      
      @push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
  $(document).ready(function() {
    $('.select2').select2({
      placeholder: 'Select an option',
      allowClear: true,
    });
  });
</script>
@endpush



  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Doctor</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Validation</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <!-- left column -->
          <div class="col-md-12">
            <!-- jquery validation -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Add Doctor</h3>
                <div class="d-flex justify-content-end items-center">
                    <a href="{{route('doctors.index')}}">
                        <button type="button" class="btn btn-light">Doctor List</button>
                    </a>
                </div>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form id="quickForm" action="{{route('doctors.store')}}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="card-body">
                    <h5 class="text-info">Add Doctor</h5><hr class="mb-3" style="border:1px solid rgb(25, 147, 247)">
                  <div class="row">
                      
                       <input type="hidden"   id="d_category" name="d_category" class="form-control" value="w" >
                  
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Category</label>
                            
                            <select id="d_subcategory" name="d_subcategory" class="form-control select2" >
                                <option selected="selected" disabled>Select Category</option>
                                @foreach ($sub_categories as $sub_category)
                                    <option {{old('d_subcategory')==$sub_category->id ? 'selected':''}} value="{{$sub_category->id}} ">{{$sub_category->subcategory_name}}</option>
                                @endforeach
                            </select>
                            
                            
                            @error('d_subcategory')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="d_name">Name</label>
                            <input type="text" name="d_name" value="{{old('d_name')}}" class="form-control" id="d_name">
                            @error('d_name')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                    
                    
                    
                  <!-- Foreign Degree Dropdown -->
<!-- Foreign Degree Dropdown -->
<div class="col-lg-6">
  <div class="form-group">
    <label for="d_foreign_degree">Foreign Degree</label>
    <select name="d_foreign_degree" id="d_foreign_degree" class="form-control select2">
      <option value="">-- Select Foreign Degree --</option>
      @foreach ($foreignDegrees as $foreignDegree)
        <option value="{{ $foreignDegree->foreign_degrees_name }}" {{ old('d_foreign_degree') == $foreignDegree->foreign_degrees_name ? 'selected' : '' }}>
          {{ $foreignDegree->foreign_degrees_name }}
        </option>
      @endforeach
    </select>
    @error('d_foreign_degree')
      <span class="text-danger">{{ $message }}</span>
    @enderror
  </div>
</div>


                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="d_image">Image</label>
                            <div class="input-group">
                              <div class="custom-file">
                                <input type="file" name="d_image" class="custom-file-input" id="fileInputDoctorImage">
                                <label class="custom-file-label" for="d_image">Choose file</label>
                              </div>
                              <div class="input-group-append">
                                <span class="input-group-text">Upload</span>
                              </div>
                            </div>
                            @error('d_image')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                          </div>

                          <div id="previewDoctorImageArea" class="d-none">
                            <img id="previewDoctorImage" class="" style="width: 100px">
                          </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <div class="input-group">
                              <div class="custom-file">
                                <input type="hidden"value="ii" name="d_signature" class="custom-file-input" id="fileInputSignatureImage">
                              </div>
                             
                            </div>
                            @error('d_signature')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                            <div id="previewSignatureImageArea" class="d-none">
                                <img id="previewSignatureImage" class="" style="width: 100px">
                            </div>
                          </div>
                    </div>
                  </div>

                  <div class="row">
                
<div class="col-lg-6">
  <div class="form-group">
    <label for="d_degree">Degree</label>
    <select name="d_degree" id="d_degree" class="form-control select2" required>
      <option value="">-- Select Degree --</option>
      @foreach ($degrees as $degree)
        <option value="{{ $degree->degree_name }}" {{ old('d_degree') == $degree->degree_name ? 'selected' : '' }}>
          {{ $degree->degree_name }}
        </option>
      @endforeach
    </select>
    @error('d_degree')
      <span class="text-danger">{{ $message }}</span>
    @enderror
  </div>
</div>
                    
                  

                   <!-- Higher Degree Dropdown -->
<div class="col-lg-6">
  <div class="form-group">
    <label for="d_higher_degree">Higher Degree</label>
    <select name="d_higher_degree" id="d_higher_degree" class="form-control select2">
      <option value="">-- Select Higher Degree --</option>
      @foreach ($higherDegrees as $higherDegree)
        <option value="{{ $higherDegree->higher_degrees_name }}" {{ old('d_higher_degree') == $higherDegree->higher_degrees_name ? 'selected' : '' }}>
          {{ $higherDegree->higher_degrees_name }}
        </option>
      @endforeach
    </select>
    @error('d_higher_degree')
      <span class="text-danger">{{ $message }}</span>
    @enderror
  </div>
</div>

                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="d_phone">Phone</label>
                            <input type="text" name="d_phone" value="{{old('d_phone')}}" class="form-control" id="d_phone" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            @error('d_phone')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                      <!-- Specialist In Dropdown -->
<!-- Specialist In Dropdown -->
<div class="col-lg-6">
  <div class="form-group">
    <label for="specialist_in">Specialist In</label>
    <select name="specialist_in[]" id="specialist_in" class="form-control select2" multiple>
      @foreach ($specialists as $specialist)
        <option value="{{ $specialist->specialist_in_name }}"
          @if(collect(old('specialist_in'))->contains($specialist->specialist_in_name)) selected @endif>
          {{ $specialist->specialist_in_name }}
        </option>
      @endforeach
    </select>
    @error('specialist_in')
      <span class="text-danger">{{ $message }}</span>
    @enderror
  </div>
</div>



                    <div class="col-lg-6">
                        <div class="form-group">
                            <input type="hidden" name="d_bmdc" value="{{old('d_bmdc')}}" value="01001"class="form-control" id="d_bmdc" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            @error('d_bmdc')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                  </div>
                  
                   <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="d_phone">Assistance Name</label>
                            <input type="text" name="assistance_name" value="{{old('assistance_name')}}" class="form-control" id="assistance_name">
                            @error('assistance_name')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="d_bmdc">Assistance Contact</label>
                            <input type="text" name="assistance_contact" value="{{old('assistance_contact')}}" class="form-control" id="assistance_contact" >
                            @error('assistance_contact')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <input type="hidden" value="test@hmail.com" name="d_email" value="{{old('d_email')}}" class="form-control" id="d_email">
                            @error('d_email')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="work_place">Work Place</label>
                            <input type="text" name="work_place" value="{{old('work_place')}}" class="form-control" id="work_place">
                            @error('work_place')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="d_password">Password</label>
                            <input type="password" name="d_password" value="{{old('d_password')}}" class="form-control" id="d_password">
                            @error('d_password')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                     <div class="col-lg-6">
                        <div class="form-group">
                            <label for="d_password">Re-enterPassword</label>
                            <input type="password" name="d_password" value="{{old('d_password')}}" class="form-control" id="d_password">
                            @error('d_password')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                    
                  </div>
                  
                  <div class="row">
                    
                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                      <div class="form-group">
                        <label for="d_experience">Doctor Experience</label>
                        <input type="text" value="{{old('d_experience')}}" name="d_experience" class="form-control" id="d_experience" >
                        @error('d_experience')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <input type="hidden"   value="100" name="charge" class="form-control" id="charge" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                        @error('charge')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="d_about">About Doctor</label>
                    <textarea name="d_about" class="form-control" id="d_about" cols="30" rows="5">{{old('d_about')}}</textarea>
                    @error('d_about')
                    <span class="text-danger">{{$message}}</span>
                    @enderror
                  </div>

                  <div class="col-lg-6">
                    <div class="form-group">
                      <input type="hidden" value="1" name="categorize_priority" class="form-control" id="categorize_priority" >
                      @error('categorize_priority')
                      <span class="text-danger">{{$message}}</span>
                      @enderror
                    </div>
                  </div>

                 




                  {{-- <div class="mt-5">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="text-info">Offline Appointment</h5>
                        </div>
                        <div>
                            <div class="form-group">
                                <div class="custom-control custom-switch">
                                  <input type="checkbox" name="offline_switch" class="custom-control-input" id="customSwitch2">
                                  <label class="custom-control-label" for="customSwitch2"></label>
                                </div>
                              </div>
                        </div>
                      </div>
                      <hr class="" style="border:1px solid rgb(25, 147, 247)">
                  </div>
                  <div class="row mb-3">
                    <div class="col-12 col-md-6" id="offlineAvailableDiv">
                        <label for="">Available on</label>
                        <div class="d-flex flex-wrap">
                          <div class="custom-control custom-checkbox m-1">
                            <input class="custom-control-input" type="checkbox" id="offlineCheckbox1" value="option1" onchange="offlineUpdateDateValue()" disabled>
                            <label for="offlineCheckbox1" class="custom-control-label">All</label>
                        </div>
                        <div class="custom-control custom-checkbox m-1">
                            <input class="custom-control-input" type="checkbox" id="offlineCheckbox2" value="option1" onchange="offlineUpdateDateValue()" disabled>
                            <label for="offlineCheckbox2" class="custom-control-label">Sat</label>
                        </div>
                        <div class="custom-control custom-checkbox m-1">
                            <input class="custom-control-input" type="checkbox" id="offlineCheckbox3" value="option1" onchange="offlineUpdateDateValue()" disabled>
                            <label for="offlineCheckbox3" class="custom-control-label">Sun</label>
                        </div>
                        <div class="custom-control custom-checkbox m-1">
                            <input class="custom-control-input" type="checkbox" id="offlineCheckbox4" value="option1" onchange="offlineUpdateDateValue()" disabled>
                            <label for="offlineCheckbox4" class="custom-control-label">Mon</label>
                        </div>
                        <div class="custom-control custom-checkbox m-1">
                            <input class="custom-control-input" type="checkbox" id="offlineCheckbox5" value="option1" onchange="offlineUpdateDateValue()" disabled>
                            <label for="offlineCheckbox5" class="custom-control-label">Tues</label>
                        </div>
                        <div class="custom-control custom-checkbox m-1">
                            <input class="custom-control-input" type="checkbox" id="offlineCheckbox6" value="option1" onchange="offlineUpdateDateValue()" disabled>
                            <label for="offlineCheckbox6" class="custom-control-label">Wed</label>
                        </div>
                        <div class="custom-control custom-checkbox m-1">
                            <input class="custom-control-input" type="checkbox" id="offlineCheckbox7" value="option1" onchange="offlineUpdateDateValue()" disabled>
                            <label for="offlineCheckbox7" class="custom-control-label">Thur</label>
                        </div>
                        <div class="custom-control custom-checkbox m-1">
                            <input class="custom-control-input" type="checkbox" id="offlineCheckbox8" value="option1" onchange="offlineUpdateDateValue()" disabled>
                            <label for="offlineCheckbox8" class="custom-control-label">Fri</label>
                        </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="online_selected_date">Selected Date</label>
                          <input type="text" readonly name="offline_avail_days" value="" class="form-control" id="offline_selected_date">
                          @error('offline_avail_days')
                          <span class="text-danger">{{$message}}</span>
                          @enderror
                      </div>
                      </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="offline_starting_time">Starting Time</label>
                            <div class="input-group">
                                <input type="text" name="offline_starting_time" value="{{old('offline_starting_time')}}" class="form-control" id="offlineStartTimePicker" disabled>
                            <div class="input-group-append">
                                <span class="input-group-text"><ion-icon name="time-outline"></ion-icon></span>
                              </div>
                            @error('offline_starting_time')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="offline_ending_time">Ending Time</label>
                            <div class="input-group">
                                <input type="text" name="offline_ending_time" value="{{old('offline_ending_time')}}" class="form-control" id="offlineEndTimePicker" disabled>
                            <div class="input-group-append">
                                <span class="input-group-text"><ion-icon name="time-outline"></ion-icon></span>
                              </div>
                            @error('offline_ending_time')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                            </div>
                        </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="offline_fees">Fee</label>
                            <input type="number" name="offline_fees" value="{{old('offline_fees')}}" class="form-control" id="offline_fees" disabled>
                            @error('offline_fees')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="offline_commission">Commission</label>
                            <input type="number" name="offline_comission" value="{{old('offline_comission')}}" class="form-control" id="offline_commission" disabled>
                            @error('offline_comission')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="offline_work_place">Work Place</label>
                            <input type="text" name="offline_work_place" value="{{old('offline_work_place')}}" class="form-control" id="offline_work_place" disabled>
                            @error('offline_work_place')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="offline_location">Location</label>
                            <input type="text" name="offline_location" value="{{old('offline_location')}}" class="form-control" id="offline_location" disabled>
                            @error('offline_location')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                  </div>
                </div> --}}








                <!-- /.card-body -->
                <div class="card-footer">
                  <button type="submit" class="btn btn-primary ">Submit</button>
                </div>
              </form>
            </div>
            <!-- /.card -->
            </div>
          <!--/.col (left) -->
          <!-- right column -->
          <div class="col-md-6">

          </div>
          <!--/.col (right) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <script>
let appointmentCount = 1;

document.getElementById('addAppointmentBtn').addEventListener('click', function () {
    let container = document.getElementById('appointmentContainer');
    let original = container.querySelector('.appointment-block');
    let clone = original.cloneNode(true);

    appointmentCount++;

    // Reset and update all input/select fields in the clone
    clone.querySelectorAll('input, select, textarea').forEach((input, index) => {
        // Generate a unique ID
        if (input.id) {
            const newId = input.id + '_clone_' + appointmentCount;
            // Update label 'for' attribute if it exists
            let label = clone.querySelector(`label[for="${input.id}"]`);
            if (label) {
                label.setAttribute('for', newId);
            }

            input.id = newId;
        }

        // Reset values
        if (input.type === 'checkbox' || input.type === 'radio') {
            input.checked = false;
        } else {
            input.value = '';
        }
    });

    // You may need to reinitialize Select2 or date/time pickers here
    // Example for Select2:
    $(clone).find('.select2').select2({
        theme: 'bootstrap4' // or whatever your theme is
    });

    container.appendChild(clone);
});
</script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
  const fileInput = document.getElementById("fileInputDoctorImage");
  const previewContainer = document.getElementById("previewDoctorImageArea");
  const previewImage = document.getElementById("previewDoctorImage");
  imagePreview(fileInput,previewContainer,previewImage);

  const fileInput2 = document.getElementById("fileInputSignatureImage");
  const previewContainer2 = document.getElementById("previewSignatureImageArea");
  const previewImage2 = document.getElementById("previewSignatureImage");
  imagePreview(fileInput2,previewContainer2,previewImage2);

});
</script>

  <script>
    $(document).ready(function(){
        $("#d_category").on("change", function(){
            var category = $(this).val();
            // alert(category);
            $.ajax({
                url: "{{route('doctor-category-filter')}}",
                type: "GET",
                data : {'category':category},
                success : function(data){
                    var subcategory = data.subcategory;
                    var html = '';
                    if(subcategory.length > 0){
                        for(let i=0; i<subcategory.length; i++){
                            html +=`<option value=`+subcategory[i]['id']+`>`+subcategory[i]['subcategory_name']+`</option>`
                        }
                    }else{

                    }
                    $('#d_subcategory').html(html);
                }
            })
        })
    })
  </script>
@endsection