@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">
            <h1>Appointments</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">DataTables</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content" style="overflow-x: hidden">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">

                @if (Auth::user()->role == 'receptionist')
                        <div class="row">
                            <div class="col-6 col-md-3 " style="margin: 0 !important;padding:0 !important;">
                                {{-- <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" placeholder="Select date"/>
                                      <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>
                                  @error('appointment_date')
                                    <span class="text-danger">{{$message}}</span>
                                @enderror
                              </div>
                            <div class="col-6 col-md-4" >
                                {{-- <label>Appointment Date</label> --}}
                                <div class="form-group">
                                    {{-- <label>Doctor Name</label> --}}
                                    <select id="doctorName" name="doctor_name" class="form-control select2bs4" >
                                      <option selected="selected" disabled>Select Doctor</option>
                                      @foreach ($doctors as $doctor)
                                          <option value="{{$doctor->doctor_id}}">{{$doctor->d_name}}</option>
                                      @endforeach
                                    </select>
                                    @error('doctor_name')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                  </div>
                              </div>
                              <div class="col-6 col-md-5 ">
                                <div class="d-flex justify-content-end">
                                    <a href="{{route('make-appointments.create')}}">
                                        <button class="btn btn-primary ">Make Appointment</button>
                                    </a>
                                </div>
                              </div>
                        </div>

                <form id="pdfGenerateForm" action="{{ route('pdf-generate') }}" method="POST" style="display: none;">
                    @csrf
                    <input type="hidden" name="doctor_name" id="doctorId">
                    <input type="hidden" name="appointment_date" id="appointmentDate">
                </form>

                @endif
              </div>
              <!-- /.card-header -->
              <div class="card-body" >





                <div id="full-table" style="overflow-x: auto">
                    <table id="example" class="table table-bordered table-hover ">
                        <thead >

                        <tr >
                            <th>#SL</th>
                            <th>Doctor Name</th>
                            <th>Doctor BMDC</th>
                            <th>Total Appointments</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody id="appointmentTableBody">
                          @php
                              $sl = 1;
                          @endphp
                        @foreach ($appointments as $appointment)

                        <tr>
                            <td>{{$sl++}}</td>
                            <td>{{$appointment->doctor->d_name}}</td>
                            <td>{{$appointment->doctor->d_bmdc}}</td>
                            <td>{{$appointment->total_appointments}}</td>
                            <td>
                                <div class="dropdown">
                                    <button class="btn" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                                        <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
                                      </svg>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                      <li><a class="dropdown-item pdfDownDoctorId" data-id="{{$appointment->doctor->doctor_id}}" href="#">Download</a></li>
                                      <li><a class="dropdown-item viewMorePage" data-id={{$appointment->doctor->doctor_id}} href="#">View More</a></li>
                                    </ul>
                                  </div>

                            </td>
                          </tr>
                        @endforeach
                        </tbody>
                        <tfoot>
                            <tr >
                                <th>#SL</th>
                                <th>Doctor Name</th>
                                <th>Doctor BMDC</th>
                                <th>Total Appointments</th>
                                <th>Action</th>
                              </tr>
                        </tfoot>
                      </table>
                </div>
                {{-- {{ $appointments->links() }} --}}
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>

  <script>

    $(document).ready(function(){

        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });



        $('#reservationdate').datetimepicker({
            format : 'MM/DD/YYYY',
            defaultDate: '{{$currentDate}}'
        });
        function fetchFilterAppointment(){
            var doctorId = $('#doctorName').val();
            var selectedDate = $('#selectedDate').val();
            // console.log(doctorId);
            // console.log(selectedDate);

            $.ajax({
                url : '{{route('filter.appointment-filter')}}',
                method : "GET",
                data : {doctorId:doctorId,selectedDate:selectedDate},
                success : function(response){
                    console.log(response);
                    var appointmentRecord = response.appointments;
                    var appointmentTable = $('#appointmentTableBody');
                    appointmentTable.empty();

                    $.each(appointmentRecord, function(index,item){
                        var singleAppointment = `
                        <tr>
                            <td>${index+1}</td>

                            <td>${item.doctor.d_name}</td>
                            <td>${item.doctor.d_bmdc}</td>
                            <td>${item.total_appointments}</td>
                            <td>
                                <div class="dropdown">
                                    <button class="btn" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                                        <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
                                      </svg>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                      <li><a class="dropdown-item pdfDownDoctorId" data-id="${item.doctor.doctor_id}" href="#">Download</a></li>
                                      <li><a class="dropdown-item viewMorePage" data-id="${item.doctor.doctor_id}" href="#">View More</a></li>
                                    </ul>
                                  </div>
                            </td>

                        </tr>
                        `;
                        appointmentTable.append(singleAppointment);

                    });




                }
            })
        }

        $(document).on('click', '.pdfDownDoctorId', function() {
            const doctorId = $(this).data('id');
            const selectedDate = $('#selectedDate').val();

            // Set form input values
            $('#doctorId').val(doctorId);
            $('#appointmentDate').val(selectedDate);

            // Submit the form
            $('#pdfGenerateForm').submit();
        });

        $(document).on('click','.viewMorePage',function(){
            const doctorId = $(this).data('id');
            const selectedDate = $('#selectedDate').val();
            const url = `doctor/${doctorId}?date=${encodeURIComponent(selectedDate)}`;
            window.location.href = url ;
        })





        $('#doctorName').on('change', ()=>{
            fetchFilterAppointment();

        });
        $('#reservationdate').on('change.datetimepicker', ()=>{
            fetchFilterAppointment();
        })
    })

  </script>

@endsection