@extends('admin.main')

@section('content')

<style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f4f4f4;
    }
    input {
      width: 90%;
      padding: 4px;
      text-align: center;
    }
    div#exportModal .modal-dialog{
        max-width: 1000px;
    }
div#exportModal .modal-dialog th, div#exportModal .modal-dialog td {
    padding: 8px;
    text-align: left;
    color: #653796;  
}

div#exportModal .modal-dialog input {
    text-align: left;
}
div#exportModal .modal-dialog table input {
    border: none;
}
.form-group-with-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.form-group-with-flex .form-group {
    width: 50%;
}
input#skip_billing {
    width: 20px;
}
#editAppointmentModal .modal-dialog input,#appointmentModal .modal-dialog input {
    text-align: left;
}
#patient_table_filter input {
  text-align: left;
}
  </style>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                         <div class="card-header">
                            <h4 class="card-title">Patients
                            @can('create.patient')
                              <a href="{{ route('patient.create') }}" class="btn btn-primary float-right">Create Patient</a>
                            @endcan
                          </h4>
                        </div>
                        <!-- <div class="card-body sales_new_table"> -->
                             <div class="card-body">
                          @include('admin.msg')
                             <div class="table-responsive">
                                    <!-- <table class="display table-striped table table-bordered" id="zero_configuration_table"> -->
                                   <table class="display table-striped table table-bordered" id="patient_table" width="100%">
                                        <thead class="">
                                            <tr>
                                                <th>Pid</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Phone</th>
                                                <th>Dob</th>
                                                <th>Created</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
@include('admin.appointment-modal')
<script type="text/javascript">
    var doctor_name_err = 1;
    var date_appoiment_err = 1;
    var time_appoiment_err = 1;
    var booking_status_err = 1;
    var err = 1;

     $(document).ready(function() {

        $("#bookappoiment").click(function() {
            let doctor_id = $('#doctor_id').val();
            let date_appoiment = $('#date_appoiment').val();
            let time_appoiment = $('#time_appoiment').val();
            let booking_status = $('#booking_status').val();

            if(doctor_id == ''){
                doctor_name_err = 1;
                $("#doctor_name_error").show();
            }else{
                doctor_name_err = 0;
                $("#doctor_name_error").hide();
            }

            if(date_appoiment == ''){
                date_appoiment_err = 1;
                $("#date_appoiment_error").show();
            }else{
                date_appoiment_err = 0;
                $("#date_appoiment_error").hide();
            }

            if(time_appoiment == ''){
                time_appoiment_err = 1;
                $("#time_appoiment_error").show();
            }else{
                time_appoiment_err = 0;
                $("#time_appoiment_error").hide();
            }

            if(booking_status == ''){console.log(booking_status);
                booking_status_err = 1;
                $("#booking_status_error").show();
            }else{
                booking_status_err = 0;
                $("#booking_status_error").hide();
            }
            console.log(doctor_name_err,date_appoiment_err,time_appoiment_err,booking_status_err)
            if(doctor_name_err || date_appoiment_err || time_appoiment_err || booking_status_err){ console.log('ddd')
                err = 1;
                return false;
            }else{console.log('ww');
                err = 0;
                $("#booking_status_error").hide();
                $("#time_appoiment_error").hide();
                $("#date_appoiment_error").hide();
                $("#doctor_name_error").hide();
            }

            
            if(err == 0){
                $("#bookAppointmentForm").submit();
            }
        });

        $('body').on('click','.patientmodel',function(event){
            var patientId = $(this).attr("data-patientid");
            // $('#patient_id').val(patientId);
            // $('#exportModal').modal('show');
            $('#appointment_date').val("{{ date('Y-m-d') }}");
            $('#appointmentModal').modal('show');
            $('#create_existing_id').val(patientId).change();
        });

        // Set default time dynamically
        // const inputTime = document.getElementById('time_appoiment');
        // const now = new Date();
        // const hours = String(now.getHours()).padStart(2, '0'); // Get hours, padded to 2 digits
        // const minutes = String(now.getMinutes()).padStart(2, '0'); // Get minutes, padded to 2 digits
        // inputTime.value = `${hours}:${minutes}`; // Set the default time
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip(); // Initialize tooltip
        });
        $('#patient_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('get-patients') }}",
                type: "POST",
                data: function (data) {
                    data._token = "{{ csrf_token() }}";
                    data.search = $('input[type="search"]').val();
                },
                complete: function (xhr, status) {
                       $('[data-toggle="tooltip"]').tooltip({ container: 'body' });
                }
            },
            order: [['0', 'DESC']],
            pageLength: 10,
            searching: true,
            columns: [
                { data: 'id' }, { data: 'name' }, { data: 'email' }, { data: 'phone' }, { data: 'dob_or_age' }, { data: 'created_at_date' },{ data: 'status' }, { data: 'action' }
            ]
        });
    });
</script>

@endsection