@extends('admin.dashboard.layouts.app')
@section('main')
      <!-- Content Wrapper. Contains page content -->
  <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 d-flex">
            <h1>Appointment</h1>
            @if (session('serial'))
                <div class="" id="appointment-success-msg">
                    <div class=" rounded bg-success ml-3 d-flex" >

                        <div class="px-4  py-2">
                            <div>
                                <sppan><strong >Patient Name</strong> :  {{data_get(session('serial'),('patient_name'))}}</sppan>
                            </div>

                            <div>
                                <span><strong>Appointment Serial</strong> : {{data_get(session('serial'),('patient_serial'))}}</span>
                            </div>
                            <div>
                                <span><strong>Appointment Time</strong> : {{data_get(session('serial'),('time'))}}</span>
                            </div>
                        </div>
                        <div id="appointment-success-close-btn">
                            <ion-icon name="close-outline" class="text-lg text-danger bg-light m-1 rounded"></ion-icon>
                        </div>
                    </div>
                </div>
            @endif
          </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">Create Appointment</h3>
                <div class="d-flex justify-content-end items-center">
                    <a href="{{route('appointment.appointment')}}">
                        <button type="button" class="btn btn-light">Appointments List</button>
                    </a>
                </div>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form id="quickForm" action="{{route('make-appointments.store')}}" method="POST">
                @csrf
                @csrf
                @if($isWithinTimeRange==false)
                <div class="bg-danger">
                    <p class="text-center py-2 text-white">{{$isWithinTimeRange==false?'Appointment scheduling is currently unavailable. Please check back between 8:00 AM and 6:00 PM': ''}}</p>
                </div>
                <div class="d-flex justify-content-center items-center " style="cursor: pointer" onclick="location.reload();">
                <i class="fas fa-sync-alt mt-1 mr-1"></i>
                <p>Refresh</p>
                </div>
                @endif
                <div class="card-body">
                  <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Doctor Name</label>
                            <select id="doctorName" {{$isWithinTimeRange==false?'disabled':''}} name="doctor_name" class="form-control select2bs4" style="width: 100%;">
                              <option selected="selected" disabled>Select Doctor</option>
                              @foreach ($doctors as $doctor)
                                  <option value="{{$doctor->doctor_id}}">{{$doctor->d_name}} ({{$doctor->d_designation}})</option>
                              @endforeach
                            </select>
                            @error('doctor_name')
                                <span class="text-danger">{{$message}}</span>
                            @enderror
                          </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Appointment Date</label>
                              {{-- <div class="input-group date" id="reservationdate" data-target-input="nearest">
                                  <input id="selectedDate" name="appointment_date" type="text" class="form-control datetimepicker-input" data-target="#reservationdate" />
                                  <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
                                      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                  </div>
                              </div> --}}
                              <input readonly value="{{$currentDate}}" id="selectedDate" name="appointment_date" class="form-control">
                              @error('appointment_date')
                                <span class="text-danger">{{$message}}</span>
                            @enderror
                          </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="patient_name">Patient Name</label>
                            <input {{$isWithinTimeRange==false?'disabled':''}} type="text" name="patient_name" value="{{old('patient_name')}}" class="form-control" id="patient_name">
                            @error('patient_name')
                                <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>


                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="patient_mobile">Patient Mobile</label>
                            <input {{$isWithinTimeRange==false?'disabled':''}} type="text" maxlength="11" name="patient_mobile" value="{{old('patient_mobile')}}" class="form-control" id="patient_mobile" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            @error('patient_mobile')
                                <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="patient_name">Patient Gender</label>
                            {{-- <input type="text" name="patient_name" value="{{old('patient_name')}}" class="form-control" id="patient_name"> --}}
                            <select name="patient_gender" id="gender" {{$isWithinTimeRange==false?'disabled':''}} class="form-control">
                                <option value="" selected disabled>Select</option>
                                <option value="male" {{ old('patient_gender') == 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ old('patient_gender') == 'female' ? 'selected' : '' }}>Female</option>
                            </select>

                            @error('patient_gender')
                                <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>


                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="patient_age">Patient Age</label>
                            <input type="text" {{$isWithinTimeRange==false?'disabled':''}} maxlength="3" name="patient_age" value="{{old('patient_age')}}" class="form-control" id="patient_age" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            @error('patient_age')
                                <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-12">
                        <label>Doctor Availability</label>
                        <p class="availableMessage"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <label>Doctor Appointment Time Schedule</label>
                        <p class="timeSchedule"></p>
                    </div>
                </div>

                <div class="row" id="timeSlotsBox">

                </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                  <button type="submit" class="btn btn-primary submitBtn" disabled>Create</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 -->

  <style>
.time-slot-selector-bg {
    background-color: #007bff;
    color: #fff;
}

.selected-bg {
    background-color: #dc3545;
    color: #fff;
}

  </style>

  <script>
    $(document).ready(function(){
    $('#appointment-success-close-btn').on('click', function(){
        $('#appointment-success-msg').addClass('d-none');
    });
});

  </script>
  <script>
    $(document).ready(function() {
    // Initialize Bootstrap DateTimePicker
    $('#reservationdate').datetimepicker({
        format: 'MM/DD/YYYY', // Set the desired date format
        // Add any other configuration options as needed
        defaultDate: '{{$currentDate}}',
    });

    // Function to fetch time slots
    function fetchTimeSlots() {
        var doctorId = $('#doctorName').val();
        var selectedDate = $('#selectedDate').val();


        // Make AJAX request to get time slots
        $.ajax({
            url: '{{ route('filter.check-slot') }}',
            method: 'GET',
            data: {
                doctorName: doctorId,
                selectedDate: selectedDate
            },
            success: function(response) {
                console.log(response);
                if(response.status == 1){
                    $('.availableMessage').css('color','green').text(response.message);
                    $('.timeSchedule').text(response.timeSchedule);
                    $('.submitBtn').removeAttr('disabled');
                }if(response.status == 0){
                    $('.availableMessage').css('color','red').text(response.message);
                    $('.timeSchedule').text("");
                    $('.submitBtn').attr('disabled',true);
                }


            },
            error: function(xhr, status, error) {
                console.log(error);

            }
        });
    }

    $('#doctorName').on('change', function() {
        fetchTimeSlots();
    });

    $('#reservationdate').on('change.datetimepicker', function() {
        fetchTimeSlots();
    });

    $('#quickForm').on('submit',function(){
        $('.submitBtn').prop('disabled',true);
    });

    // Trigger fetchTimeSlots when the page loads initially
    //fetchTimeSlots();
});

  </script>
@endsection