@extends('admin.dashboard.layouts.app')
@section('main')

<style>
.select2-container--default .select2-selection--single {
    height: 38px !important;
    padding: 5px 12px !important;
}

.select2-container--default .select2-selection__rendered {
    line-height: 28px !important;
}

.select2-container--default .select2-selection__arrow {
    height: 38px !important;
}
</style>

<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">
                <div class="d-flex justify-content-end items-center">
    <a href="{{ route('doctor-schedules.index') }}">
        <button type="button" class="btn btn-light">Doctors Schedule List</button>
    </a>
</div>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              
<div class="container">
    <h4 class="mb-4 text-primary">Organize Appointment Schedule</h4>

    <form action="{{ route('doctors.store_appointment') }}" method="POST">
        @csrf

     <!-- In your head section -->

<!-- Your form -->
<div class="form-group">
    <label for="doctor_id">Doctor</label>
    <select name="doctor_id" id="doctor-search" class="form-control select2">
        <option value="">Select Doctor</option>
        @foreach($doctors as $doctor)
            <option value="{{ $doctor->doctor_id }}">{{ $doctor->d_name }}</option>
        @endforeach
    </select>
</div>

<!-- Before closing body -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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: "Type to search doctors...",
        minimumInputLength: 1,
        ajax: {
            url: "{{ route('search.doctors') }}",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term // 'q' is what Select2 sends by default
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        }
    });
});
</script>


  <!-- Initialize Select2 -->
  <script>
    $(document).ready(function() {
      $('.select2').select2({
        placeholder: "Select Parlour",
        allowClear: true,
        width: '100%'
      });

      // Show/hide schedule table
      $('#showScheduleBtn').click(function() {
        $('#scheduleTable').toggle();
      });
    });
  </script>
        <div class="form-group">
            <label for="organization_id">Organization</label>
            <select name="organization_id" class="form-control select2">
                <option value="">Select Organization</option>
                @foreach($organizations as $organization)
                    <option value="{{ $organization->id }}">{{ $organization->name }}</option>
                @endforeach
            </select>
        </div>

        {{-- You can now paste your full appointment form fields below --}}
        {{-- or @include a partial if you prefer --}}
        <div id="appointmentContainer">
                   <div class="appointment-block">
                   <div class="mt-5">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="text-info">Appointment</h5>
                        </div>

                        

                        <div>
                            <div class="form-group">
                                <div class="custom-control custom-switch">
                                  <input type="checkbox" name="online_switch" class="custom-control-input" id="customSwitch1">
                                  <label class="custom-control-label" for="customSwitch1"></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="onlineAvailableDiv">
        <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="onlineCheckboxAll" value="all" onchange="toggleAllDays()">
                <label for="onlineCheckboxAll" class="custom-control-label">All</label>
            </div>
            <div class="custom-control custom-checkbox m-1">
                <input class="custom-control-input day-checkbox" type="checkbox" id="onlineCheckboxSat" value="Sat" onchange="updateAllCheckbox()">
                <label for="onlineCheckboxSat" class="custom-control-label">Sat</label>
            </div>
            <div class="custom-control custom-checkbox m-1">
                <input class="custom-control-input day-checkbox" type="checkbox" id="onlineCheckboxSun" value="Sun" onchange="updateAllCheckbox()">
                <label for="onlineCheckboxSun" class="custom-control-label">Sun</label>
            </div>
            <div class="custom-control custom-checkbox m-1">
                <input class="custom-control-input day-checkbox" type="checkbox" id="onlineCheckboxMon" value="Mon" onchange="updateAllCheckbox()">
                <label for="onlineCheckboxMon" class="custom-control-label">Mon</label>
            </div>
            <div class="custom-control custom-checkbox m-1">
                <input class="custom-control-input day-checkbox" type="checkbox" id="onlineCheckboxTue" value="Tue" onchange="updateAllCheckbox()">
                <label for="onlineCheckboxTue" class="custom-control-label">Tue</label>
            </div>
            <div class="custom-control custom-checkbox m-1">
                <input class="custom-control-input day-checkbox" type="checkbox" id="onlineCheckboxWed" value="Wed" onchange="updateAllCheckbox()">
                <label for="onlineCheckboxWed" class="custom-control-label">Wed</label>
            </div>
            <div class="custom-control custom-checkbox m-1">
                <input class="custom-control-input day-checkbox" type="checkbox" id="onlineCheckboxThu" value="Thu" onchange="updateAllCheckbox()">
                <label for="onlineCheckboxThu" class="custom-control-label">Thu</label>
            </div>
            <div class="custom-control custom-checkbox m-1">
                <input class="custom-control-input day-checkbox" type="checkbox" id="onlineCheckboxFri" value="Fri" onchange="updateAllCheckbox()">
                <label for="onlineCheckboxFri" 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="available_on" value="" class="form-control" id="online_selected_date">
            @error('available_on')
            <span class="text-danger">{{$message}}</span>
            @enderror
        </div>
    </div>
</div>

<!-- The rest of your form remains the same -->

<script>
    function toggleAllDays() {
        const allCheckbox = document.getElementById('onlineCheckboxAll');
        const dayCheckboxes = document.querySelectorAll('.day-checkbox');
        const isChecked = allCheckbox.checked;
        
        dayCheckboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
        });
        
        updateSelectedDate();
    }
    
    function updateAllCheckbox() {
        const allCheckbox = document.getElementById('onlineCheckboxAll');
        const dayCheckboxes = document.querySelectorAll('.day-checkbox');
        const allChecked = Array.from(dayCheckboxes).every(checkbox => checkbox.checked);
        const noneChecked = Array.from(dayCheckboxes).every(checkbox => !checkbox.checked);
        
        if (allChecked) {
            allCheckbox.checked = true;
        } else if (noneChecked) {
            allCheckbox.checked = false;
        } else {
            // When some but not all are checked, set the all checkbox to indeterminate state
            allCheckbox.indeterminate = true;
        }
        
        updateSelectedDate();
    }
    
    function updateSelectedDate() {
        const selectedDays = [];
        const dayCheckboxes = document.querySelectorAll('.day-checkbox:checked');
        
        dayCheckboxes.forEach(checkbox => {
            selectedDays.push(checkbox.value);
        });
        
        document.getElementById('online_selected_date').value = selectedDays.join(', ');
    }
    
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        updateSelectedDate();
    });
</script>

                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="hidden" name="d_starting_time" value="test" class="form-control"  >

                          
                            </div>
                            @error('d_starting_time')
                                <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_starting_time">Starting Time</label>
                            <div class="input-group">
                                <input type="text" name="d_starting_time" value="{{old('d_starting_time')}}" class="form-control" id="onlineStartTimePicker" >

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

                            </div>
                            @error('d_ending_time')
                            <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_fee">Fee</label>
                            <input type="number" name="d_fee" value="{{old('d_fee')}}" class="form-control" id="d_fee" >
                            @error('d_fee')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                         
                    </div>
                    
                    
                    
 
                      
                      
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="avg_delay">Consultation Time</label>
                                <select id="avg_delay" name="avg_delay" class="form-control " >
                                    <option selected="selected" value=0 disabled>Select Consultation Time</option>
                                    <option value=5>5 Minutes</option>
                                    <option value=10>10 Minutes</option>
                                    <option value=15>15 Minutes</option>
                                    <option value=20>20 Minutes</option>
                                    <option value=25>25 Minutes</option>
                                    <option value=30>30 Minutes</option>
                                    <option value=35>35 Minutes</option>
                                    <option value=40>40 Minutes</option>
                                    <option value=45>45 Minutes</option>
                                    <option value=50>50 Minutes</option>
                                    <option value=55>55 Minutes</option>
                                    <option value=60>60 Minutes</option>
                                </select>
                                @error('avg_delay')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="form-group">
                              <input type="hidden" value="0" name="appointment_web" class="form-control" id="appointment_web" >
                              @error('appointment_web')
                              <span class="text-danger">{{$message}}</span>
                              @enderror
                            </div>
                          </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                              <input type="hidden" value="0" name="appointment_app" class="form-control" id="appointment_app" >
                              @error('appointment_app')
                              <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_fee">Additional Time</label>
                            <input type="text" name="additional_time" value="{{old('additional_time')}}" class="form-control" id="additional_time" >
                            @error('additional_time')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                        </div>
                        <div class="col-lg-6">
                         <div class="form-group">
                            <label for="d_fee">Black Time</label>
                            <input type="text" name="black_time" value="{{old('black_time')}}" class="form-control" id="black_time" >
                            @error('black_time')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                        </div>
                      </div>
                  </div>

                  </div>
                  </div>

                 
        {{-- Example --}}

      

        <button type="submit" class="btn btn-success">Save Appointment Slot</button>
    </form>
</div>
            </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>
    function onlineUpdateDateValue() {
        let selectedDays = [];
        $("#onlineAvailableDiv input[type=checkbox]:checked").each(function () {
            let label = $(this).next("label").text().trim();
            if (label !== "All") {
                selectedDays.push(label);
            }
        });
        $("#online_selected_date").val(selectedDays.join(", "));
    }

    $(document).ready(function () {
        const allCheckbox = $("#onlineCheckbox1");
        const dayCheckboxes = $("#onlineAvailableDiv input[type=checkbox]").not(allCheckbox);

        // Toggle all days when "All" is clicked
        allCheckbox.on("change", function () {
            const isChecked = $(this).prop("checked");
            dayCheckboxes.prop("checked", isChecked);
            onlineUpdateDateValue();
        });

        // Update "All" when individual days are toggled
        dayCheckboxes.on("change", function () {
            if (dayCheckboxes.length === dayCheckboxes.filter(":checked").length) {
                allCheckbox.prop("checked", true);
            } else {
                allCheckbox.prop("checked", false);
            }
            onlineUpdateDateValue();
        });
    });
</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