<style>
    .offcanvas-body {
        font-size: 15px;
    }

    .fs-12 {
        font-size: 11px !important;
    }

    /* select {
  color: #ced4da !important;
}
    option:not(:first-of-type) {
  color: #BBBBBB !important;
} */
</style>
@php
$bd_day = '';
$bd_month = '';
$bd_year = '';
$age = '';
if (isset($patient->birthdate)) {
    $bd = $patient->birthdate;
    $exp = explode('-', $bd);

    // if(@$feature->year_thai){
    //      $bd_year = isset($exp[0]) ? intval($exp[0]) : '';
    // }else{
    //     $bd_year = isset($exp[0]) ? intval($exp[0]) - 543 : '';
    //     }
    $bd_year = isset($exp[0]) ? intval($exp[0]) + 543 : '';
    $bd_month = isset($exp[1]) ? intval($exp[1]) : '';
    $bd_day = isset($exp[2]) ? intval($exp[2]) : '';

    $dob = strtotime(str_replace('/', '-', $bd));
    $tdate = time();
    $age = date('Y', $tdate) - date('Y', $dob);
}
@endphp
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcavnas_confirmbook" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header pb-2">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Confirm Booking</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="row ">
            <div class="col-12">
                Booking Detail
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-3">
                Date :
            </div>
            <div class="col-9">
                <span class="badge text-bg-danger fw-normal " id="txt_date_modal"></span>
                <input type="hidden" name="date" id="input_date" value="">
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-3">
                Period :
            </div>
            <div class="col-9">
               <span id="time_type"></span>
            </div>
        </div>

        {{-- <div class="row mt-2">
            <div class="col-3">
                Patient Type :
            </div>
            <div class="col-9">
               <span id="txt_patienttype"></span>
            </div>
        </div> --}}

        <div class="row mt-2">
            <div class="col-3">
                Urgent :
            </div>
            <div class="col-9">
             <span id="txt_urgent"></span>
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-3">
                Physician :
            </div>
            <div class="col-9">
                <span id="txt_physician">{{fullname($doctor[0])}}</span>
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-3">
                Anesthesia :
            </div>
            <div class="col-9">
                <span id="txt_anes_ga"></span>
                <span id="txt_anes_sedation"></span>
                <span id="txt_anes_la"></span>
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-3">
                Special :
            </div>
            <div class="col-9">
                <span id="special_txt_display"></span>

            </div>
        </div>

        <div class="row mt-2">
            <div class="col-3">
                Procedure :
            </div>
            <div class="col-9">
                <span class="badge text-bg-danger fw-normal">
                    <span id="txt_procedure01"></span>
                    <span id="txt_procedure02"></span>
                    <span id="txt_procedure03"></span>
                </span>
            </div>
        </div>


        <div class="row mt-3 ">
            <div class="col-3 align-self-center">
                Patient ID <span class="text-danger">* </span>:
            </div>
            <div class="col-9">
                <input type="text" id="hn_check" name="hn" placeholder="HN" class="form-control bg-gray auto_detect_hn" required autocomplete="off">
                <script>
                    document.getElementById('hn_check').addEventListener('input', function (event) {
                        const input = event.target;
                        const value = input.value;
                        // อนุญาตเฉพาะ a-z, A-Z, 0-9, และ -
                        const regex = /^[a-zA-Z0-9-]*$/;

                        if (!regex.test(value)) {
                            // ลบตัวอักษรที่ไม่อนุญาต
                            input.value = value.replace(/[^a-zA-Z0-9-]/g, '');
                        }
                    });
                </script>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-3 text-nowrap align-self-center">
                Patient Name <span class="text-danger">* </span>:
            </div>
            <div class="col-9">
                <div class="row">
                    <div class="col-4">
                        <input type="text" class="form-control" id="prefixname" placeholder="Prefix"  name="prefix" required>
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" placeholder="First name" required id="firstname" name="firstname">
                    </div>

                    <div class="col-4">
                        <input type="text" class="form-control" placeholder="Last name" required id="lastname" name="lastname">
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-3 text-nowrap align-self-center">
                Date of birth <span class="text-danger">* </span>:
            </div>
            <div class="col-9">
                <div class="row">
                    <div class="col-3">
                        <select class='form-select' name='birthday' id="birthday" required>
                            @foreach ($day_all as $day)
                                <option @if($bd_day == $day) selected @endif value="{{ $day }}">{{ $day }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-3">
                        <select class='form-select' name='birthmonth' id="birthmonth" required>
                            @foreach ($month_all as $month)
                                <option @if($bd_month == $month) selected @endif value="{{ $month }}">{{ $month }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-3">
                        <select class='form-select age_text' name='birthyear' id="birthyear" required>
                            @foreach ($year_all as $year)

                        @php
                        $feature    = getCONFIG("feature");
                        $yearval = $year;
                            if(@$feature->year_thai){
                                $year_custom = $year + 543;
                            }else{
                                $year_custom = $year;
                            }

                        @endphp
                                <option @if ($bd_year == $yearval) selected @endif
                                    value="{{ $yearval }}">{{ $year_custom }}</option>
                            @endforeach
                               </select>
                    </div>

                    <div class="col-3">
                        <input type="number" id="" class="form-control bg-gray age_calculate" name="age" placeholder="Age" required>

                    </div>
                </div>
            </div>
        </div>

         <div class="row mt-3 ">
            <div class="col-3 align-self-center">
                Gender <span class="text-danger">* </span>:
            </div>

            <div class="col-9">
                <div class="row">
                    <div class="col-12">
                        <select class="form-select "aria-label="Default select example" name="gender" id="gender">
                            <option value="4">N/A</option>
                            <option value="3">Prefer not to say</option>
                            <option value="1">Male</option>
                            <option value="2">Female</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3 ">
            <div class="col-3 align-self-center">
                Contact <span class="text-danger" >* </span>:
            </div>

            <div class="col-9">
                <div class="row">
                    <div class="col-12">
                      <input type="text" class="form-control" placeholder="Phone Number" name="contact" id="phone">
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3 ">
            <div class="col-3 align-self-center">
                Description :
            </div>
            <div class="col-9">
                <input type="text" name="desciption" class="form-control bg-gray" autocomplete="off" placeholder="Description">
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-3 align-self-center">
                Type of Patient Care :
            </div>
            <div class="col-9">
                <select name="patienttype" class="form-select" id="">
                    <option value="" selected>Select</option>

                    <option value="IPD">IPD</option>
                    <option value="OPD">OPD</option>
                    <option value="รพช">รพช.</option>

                </select>
            </div>
        </div>
        <div class="row mt-3 ">
            <div class="col-3 text-nowrap">
                Treatment Coverage :
            </div>
            <div class="col-9">
                <div class="row">
                    <div class="col-12">
                        <select class="select2" name="treatmentcoverage" id="sel_treatmentcoverage">
                            <option value="">Select</option>
                            @foreach ($treatment as $data)
                                <option value="{{ $data['code'] }}">{{ $data['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3 ">
            <div class="col-3 align-self-center" >
                Booking By :
            </div>
            <div class="col-9">
                <div class="row">
                    <div class="col-12">
                        <select class="select2" name="booker" id="select_user">
                            <option value="">Select</option>
                            @foreach ($users as $data)
                                @if (uid() == $data['id'])
                                    <option value="{{ $data['id'] }}" selected>{{ $data['user_prefix'] }}
                                        {{ $data['user_firstname'] }} {{ $data['user_lastname'] }}</option>
                                @else
                                    <option value="{{ $data['id'] }}">{{ $data['user_prefix'] }}
                                        {{ $data['user_firstname'] }} {{ $data['user_lastname'] }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12 text-end ">
                <button  type="submit" name="returnhome" class="btn btn-primary btn-label waves-effect right waves-light"><i
                        class="ri-check-double-line label-icon  fs-16 "></i> Confirm </button>
            </div>
        </div>

    </div>
</div>

@include("EndoBOOK.bookingviewer.component.js_age")



<script>
    $(document).ready(function() {
          $('#sel_treatmentcoverage').select2({
              placeholder: "Select Treatment Coverage",
              dropdownParent: $('#offcavnas_confirmbook'),
              allowClear: true
          });

          $('#sel_treatmentcoverage').on('select2:open', function(e) {
              $('.select2-dropdown').hide();
              setTimeout(function() {
                  jQuery('.select2-dropdown').slideDown(300);
              });
          });

      });


      $(document).ready(function() {
          $('#select_user').select2({
              placeholder: "Select User",
              dropdownParent: $('#offcavnas_confirmbook'),
              allowClear: true
          });

          $('#select_user').on('select2:open', function(e) {
              $('.select2-dropdown').hide();
              setTimeout(function() {
                  jQuery('.select2-dropdown').slideDown(300);
              });
          });

      });
  </script>


