@extends('operations.layout.mainlayout')

@section('content')
{{--    @if(session('role') != 4 && session('role') != 2 && session('role') != 5 && session('role') != 9 && session('role') != 1 && session('role') != 19 && session('role') != 14 && session('role') != 10)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
<link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">


    <style>
        .cards tbody tr {
            float: left;
            width: 19rem;
            margin: 0.5rem;
            border: 0.0625rem solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
        }

        .cards tbody td {
            display: block;
        }

        .cards thead {
            display: none;
        }

        .cards td:before {
            content: attr(data-label);
            position: relative;
            float: left;
            color: #808080;
            min-width: 4rem;
            margin-left: 0;
            margin-right: 1rem;
            text-align: left;
        }

        tr.selected td:before {
            color: #CCC;
        }

        .table .avatar {
            width: 50px;
        }

        .cards .avatar {
            width: 110px;
            margin: 15px;
        }

        #booking-users-table td {
            padding-bottom: 0;
        }
        #booking-users-table td:last-child  {
            padding-bottom: 10px;
        }

        #description {
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
        }

        #infowindow-content .title {
            font-weight: bold;
        }

        #infowindow-content {
            display: none;
        }

        #map #infowindow-content {
            display: inline;
        }

        .pac-card {
            margin: 10px 10px 0 0;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            background-color: #fff;
            font-family: Roboto;
        }

        #pac-container {
            padding-bottom: 12px;
            margin-right: 12px;
        }

        .pac-controls {
            display: inline-block;
            padding: 5px 11px;
        }

        .pac-controls label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }

        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 400px;
        }

        #pac-input:focus {
            border-color: #4d90fe;
        }
        #modal-cancel:focus {
            border-color: #4d90fe;
        }
        #cod_order:focus {
            border-color: #4d90fe;
        }
        #credit_order:focus {
            border-color: #4d90fe;
        }

        #title {
            color: #fff;
            background-color: #4d90fe;
            font-size: 25px;
            font-weight: 500;
            padding: 6px 12px;
        }

        #target {
            width: 345px;
        }
        .pac-container {
            z-index: 10000 !important;
        }

        .btn-blazma{
            /* position: absolute; */
            /* top: 90.8%; */
            /* right: 47%; */
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: #FFF;
            padding: 0;
            font-size: .9rem;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(140.37deg, var(--blazma-pastel) -59.16%, var(--blazma-primary) 49.95%);
            /* transform: translateY(-148%); */
            /* margin-top: 2rem; */
        }
        .btn-blazma:hover{
            color: white;
        }
        select:focus,input:focus,.btn-info:focus{
            box-shadow: 0 0 0 2px #ffffff, 0 0 3px 5px #3a97f9 !important;
            outline: 2px dotted transparent !important;
            outline-offset: 2px !important;
        }

        .card-body{
            padding:0px
        }
        .select2-search__field{
            border-radius: 10px;
        }
        .select2-container--default .select2-dropdown.select2-dropdown--below{
            border-radius: 10px ;
        }

        .sw-btn-next{
            width: 100%;
            max-width: 173px;
            height:  40px;
            padding: 4px 16px 4px 16px;
            border-radius: 30px !important;
            border: 1px solid var(--blazma-primary) !important;
            background-color: var(--blazma-primary) !important;
            color:white !important;
        }
        .sw-btn-next:hover{
            border: 1px solid var(--blazma-primary) !important;
            background-color: transparent !important;
            color:var(--blazma-primary) !important;
        }
        .btn-booking-details{
            width: 100%;
            max-width: 173px;
            height:  40px;
            padding: 4px 16px 4px 16px;
            border-radius: 30px !important;
            border: 1px solid var(--blazma-primary) !important;
            background-color: var(--blazma-primary) !important;
            color:white !important;
            margin-left:16px !important;
        }
        .btn-booking-details:hover{
            border: 1px solid var(--blazma-primary) !important;
            background-color: transparent !important;
            color:var(--blazma-primary) !important;
        }
        .btn-remove-all{
            width: 100%;
            max-width: 173px;
            height:  40px;
            padding: 4px 16px 4px 16px;
            border-radius: 30px !important;
            border: 1px solid black !important;
            background-color: transparent !important;
            color:black !important;
        }
        .btn-remove-all:hover{
            border: 1px solid var(--blazma-primary) !important;
            background-color: var(--blazma-primary) !important;
            color:white !important;
        }
        .sw-btn-prev{
            width: 100%;
            max-width: 173px;
            height:  40px;
            padding: 4px 16px 4px 16px;
            border-radius: 30px !important;
            border: 1px solid var(--blazma-primary) !important;
            background-color: transparent !important;
            color:var(--blazma-primary) !important;
            margin-right:20px !important;
        }
        .sw-btn-prev:hover{
            border: 1px solid var(--blazma-primary) !important;
            background-color: var(--blazma-primary) !important;
            color:white !important;
            opacity: 1 !important;
        }
        .sw .toolbar {
            margin-top:20px !important;
        }
        input:not(.select2-search__field){
            border-radius: 30px !important;
            height: 40px!important;
            padding: 10px 15px 10px 18px!important;
            border: 1px solid #E6E6E6 !important;
            }
        input .select2-search__field{
                padding: 10px 15px 10px 18px!important;
            }
        select:not(.select2-search__field){
            background-color:white !important;
            border-radius: 30px !important;
            height: 40px!important;
            padding: 10px 15px 10px 18px!important;
            border: 1px solid #E6E6E6 !important;
            }
        textarea:not(.select2-search__field){
            border-radius: 10px !important;
            padding: 10px 15px 10px 18px!important;
            border: 1px solid #E6E6E6 !important;
            }
        .datepicker table tr td{
            padding:3px !important;
        }
        .bootstrap-datetimepicker-widget table th{
            padding: 12px 0px 12px 0px !important;
        }
        .bootstrap-datetimepicker-widget.dropdown-menu{
            padding:8px;
        }
        #booking-members-table tbody tr td:first-child{
            padding:0px;
            border-left: 1px solid white !important;
        }
        #booking-members-table tbody tr td:last-child{
            border-right: 1px solid white !important;
        }
        #booking-members-table tbody tr td{
            text-align: left;
        }
        #booking-tests-table tbody tr td:not(:last-child){
            text-align: left;
        }
        .card-modal-header{
            border-radius: 30px;
            background: #F9FAFB;
            height: 68px;
            padding: 20px 30px 20px 30px;
            margin-bottom: 54px;
            box-shadow: 0px 2px 30px 0px #0000000F;
        }
        #modal-tests .select2-selection {
            max-height: 60px;
            border-radius: 30px;
            overflow:scroll;
        }
        #booking-tests-table tbody tr:first-child td:first-child{
            border-top-left-radius: 30px;
        }
        #booking-tests-table tbody tr:first-child td:last-child{
            border-top-right-radius: 30px;
        }
        .dataTables_filter{
            margin-bottom: 12px !important;
        }

        #booking-cart-table tbody tr td:not(:last-child){
            text-align: left;
        }
        .modal-footer{
            padding-left:0px;
            padding-right:0px;
        }
        #modal-booking .modal-body{
            background: white;
            border-radius: 30px;
            padding: 30px 20px;
        }
        #modal-booking .modal-footer{
            display: flex;
            justify-content: space-between;
        }

        #existing-members option.added-member {
            background-color: #d4edda; /* Light green */
            color: #155724; /* Dark green text for better contrast */
            font-weight: bold;
        }

        /* Make patient modals scrollable */
        #modal-lg .modal-dialog,
        #modal-lg-add-member .modal-dialog {
            max-height: 90vh;
            margin: 0 auto;
        }

        #modal-lg .modal-content,
        #modal-lg-add-member .modal-content {
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #modal-lg .modal-header,
        #modal-lg-add-member .modal-header {
            flex-shrink: 0;
            border-bottom: 1px solid #dee2e6;
        }

        #modal-lg .modal-body,
        #modal-lg-add-member .modal-body {
            overflow-y: auto;
            overflow-x: hidden;
        }

        #modal-lg .modal-footer,
        #modal-lg-add-member .modal-footer {
            border-top: 1px solid #dee2e6;
            margin-top: auto; /* Push footer to bottom of scroll area */
        }

        /* Improve modal scrolling experience */
        #modal-lg .modal-content::-webkit-scrollbar,
        #modal-lg-add-member .modal-content::-webkit-scrollbar {
            width: 6px;
        }

        #modal-lg .modal-content::-webkit-scrollbar-track,
        #modal-lg-add-member .modal-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        #modal-lg .modal-content::-webkit-scrollbar-thumb,
        #modal-lg-add-member .modal-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        #modal-lg .modal-content::-webkit-scrollbar-thumb:hover,
        #modal-lg-add-member .modal-content::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Contracts</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">

                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">

                    <!-- /.card -->

                    <div class="card">

                        <!-- /.card-header -->
                        <div class="card-body">
                            <button style="display:none;" id="loading" class="btn btn-primary float-right" type="button" disabled>
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                Loading...
                            </button>
                            <br />
                            @if(!empty($error))
                                <div class="alert alert-danger" role="alert">
                                    {{$error}}
                                </div>
                            @endif
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="row">
                                        <div class="col-4" @if((empty(session('is_primary') ) && empty(session('is_branch') )) || !empty(session('org_id'))) style="display: none;" @endif>
                                            <span style="color:var(--blazma-primary)"><b>Client</b></span>
                                            <select tabindex="0" id="hospital_id" name="hospital_id" class="form-control rhospital_id hospital_select steps" style="margin-top:5px;">
                                                <option value="0">Select Account</option>

                                                @foreach($companies as $company)
                                                    <option @if(((empty(session('is_primary') ) && empty(session('is_branch') )) || !empty(session('org_id'))) && ((session('hospital_id') == $company->HOSPITAL_ID && empty(session('org_id'))) || (!empty(session('org_id')) && session('org_id') == $company->ID)) && ((empty(session('is_primary'))  && empty(session('is_branch') )) || !empty(session('org_id')))) selected @endif value="{{$company->ID}}">{{$company->COMPANY_NAME}}{{!empty($company->CLIENT_CODE)?' ('.$company->CLIENT_CODE.')':''}}</option>
                                                @endforeach
                                            </select>
                                            <br />
                                        </div>
                                        <div class="col-4">
                                            <span style="color:var(--blazma-primary)"><b>Booking Type</b></span>
                                            <select id="booking_type" name="booking_type" class="form-control rhospital_id steps">
                                                <option value="1">Normal Booking</option>
                                                <option value="2">Home Visit</option>
                                            </select>
                                        </div>
                                        <div class="col-4" style="display: none" id="patient-search-display">
                                            <span style="color:var(--blazma-primary)"><b>Search Patient</b></span>
                                            <select id="patient-contract-id"  class="form-control patient_client_select steps">
                                                <option value="0" selected="selected">Search Account</option>
                                            </select>
                                        </div>
                                    </div>


                                </div>
                                <div class="col-md-5" style="text-align: center">

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


                            <div class="row">
                                <div class="col-md-12">
                                    <span style="color:var(--blazma-primary)"><b>Included Patients</b></span>
                                    <button style="margin-left:5px" data-toggle="modal" data-target="#modal-lg" disabled="disabled" id="add-follower" class="btn btn-info float-right steps">Add Patient</button>
                                    <button data-toggle="modal" data-target="#modal-import" disabled="disabled" id="import-follower" class="btn btn-info float-right">Excel Importing</button><br /><br />

                                    <table tabindex="-1" id="booking-cart-table" class="table table-bordered table-striped" style="border: none;">
                                        <thead>
                                        <tr>
                                            <th>Test</th>
                                            <th>Sample Conditions</th>
                                            <th>Name</th>
                                            <th>Mobile</th>
                                            <th>Identity</th>
                                            <th>ID No.</th>
                                            <th>Country</th>
                                            <th>Dob</th>
                                            <th>Gender</th>
                                            <th>Questionnaire</th>
                                            <th>Remove</th>
                                        </tr>
                                        </thead>

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

                            <div class="row">
                                <div class="col-6">
                                    <div class="alert alert-danger alert-danger-booking" role="alert" style="display: none;"></div>
                                </div>
                                <div class="col-6">
                                    <div class="alert alert-success alert-success-booking" role="alert" style="display: none;"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col" style="text-align: center"><br />
                                    <button style="min-width:130px" id="clear-booking-cart" disabled="disabled" type="button" class="btn transparent-black-btn" >Remove All</button>
                                    <button style="min-width:130px" id="checkout" disabled="disabled" type="submit" class="btn btn-info steps" >Continue</button>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <div class="col-md-1"></div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<div class="modal fade" id="show-sample-condition-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Sample Conditions</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <table id="show-sample-condition-table" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>Conditions</th>
                            </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default" data-dismiss="modal" id="items-cancel">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


<div class="modal fade" id="modal-lg" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Add Patient</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="collection-form" method="post"  action="/operations/samples/">
                <div class="modal-body">
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-person" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-md-3">
                            <p style="font-size:14px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.full_name")}}</p>
                            <input style="padding:15px" class="form-control steps" type="text" id="full-name" name="full-name" />
                        </div>
                        <div class="col-md-3">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.nationality")}}</p>
                            <select  class="form-control rhospital_id steps" type="text" id="nationality" name="nationality" >
                                @foreach($countries as $country)
                                    <option @if($country->id == 140) selected @endif value="{{$country->id}}" >{{$country->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Passport No. (Optional)</p>
                            <input  class="form-control steps" type="text" id="passport_number" name="passport_number"/>
                        </div>
                        <div class="col-md-3">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Reference MRN# (Optional)</p>
                                <input  type="text" name="mrn" id="mrn" class="form-control steps" placeholder=""/>
                            </div>
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Mobile (555xxxxxx)</p>
                            <input style="padding:15px" class="form-control steps" type="text" id="mobile" name="mobile" />
                        </div>
                        <div class="col-md-4">
                        <p class="d-flex justify-content-between" style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;"><span>{{trans("web.dob")}}</span><i id="tooltip-contract-age" title="Click to switch" class="far fa-question-circle"></i></p>
                            <input style="padding:15px" class="form-control steps" type="date" id="dob" name="dob" />
                            <input style="padding:15px;display:none" class="form-control steps" type="number" placeholder="Enter Age" id="age" name="age" />
                        </div>
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.gender")}}</p>
                            <select id="gender" name="gender" class="form-control steps" style="border-radius: 30px;height: 40px;padding: 10px 15px 10px 18px;border: 1px solid #E6E6E6;">
                                <option value="0" selected>Select a Gender</option>
                                <option value="1">{{trans("web.male")}}</option>
                                <option value="2">{{trans("web.female")}}</option>
                                <option value="3">{{trans("web.unknown")}}</option>
                            </select>
                        </div>

                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.identity_type")}}</p>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="col-md-6" style="padding:0">
                                        <select id="identification-type" class="form-control steps" name="">
                                            <option value="" >Select ID Type</option>
                                            <option value="national_id" >{{trans("web.national_id")}}</option>
                                            <option value="res_no">{{trans("web.res_no")}}</option>
                                            <option value="border_no">{{trans("web.border_no")}}</option>
                                            <option value="gulf_id">{{trans("web.gulf_id")}}</option>
                                            <option value="file_no">{{trans("web.file_no")}}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6" style="padding:0">
                                        <input placeholder="ID No." style="width:100%;padding:15px;border-top-left-radius: 0;border-bottom-left-radius: 0;" type="text" class="form-control steps" name="identification" id="identification" value="" >
                                    </div>
                                    {{-- Marks whether this patient was picked from the client's existing
                                         records (1) vs typed as a new patient (''). Used to skip the
                                         identification duplicate check for already-existing patients. --}}
                                    <input type="hidden" id="is-existing-patient" value="">
                                    <input type="hidden" id="existing-patient-identification" value="">
                                    {{-- The END_USER_LAB_ORDER_PACKAGE.ID of the selected existing patient.
                                         The server uses it to confirm the submitted identification still
                                         belongs to that exact record before skipping the duplicate check. --}}
                                    <input type="hidden" id="existing-patient-package-id" value="">
                                </div>

                            </div>
                        </div>
                        <div class="col-md-3">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Reason of testing ? (Optional)</p>
                            <select required id="outside-case" name="outside-case" class="form-control steps">
                                <option value="">Select Reason</option>
                                <option selected value="0">Diagnoses</option>
                                <option value="1">Travelling to Outside KSA</option>
                                <option value="2">Public Quarantine (Hotel) - حجر مؤسسي</option>
                                <option value="3">Home Quarantine - حجر في المنزل</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Email (Optional)</p>
                            <input style="padding:15px;" class="form-control steps" type="email" id="email" name="email" />
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-12">
                        <div class="custom-control custom-switch mt-3">
                                <input type="checkbox" class="custom-control-input" name="only_tests" value="" id="only_tests">
                                <label class="custom-control-label" for="only_tests" style="margin-right: 10px;font-weight: 300;"> Only Tests</label>
                            </div>
                        </div>
                        <div class="col-md-12">

                            <table id="booking-tests-table" class="table table-bordered table-striped">
                                <thead>
                                <tr style="display: none;">
                                    <th>Test</th>
                                    <th>Type</th>
                                    <th>Price</th>
                                    <th>Action</th>
                                </tr>
                                </thead>

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

                </div>
                <div class="modal-footer justify-content-between">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default" data-dismiss="modal">{{trans("web.cancel")}}</button>
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="add-new-person-contract" disabled="disabled" type="button" class="btn btn-info steps">{{trans("web.save")}}</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="modal-lg-add-member">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-lg-add-member-title">Add Patient</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="collection-form" method="post"  action="/operations/samples/">
                <div class="modal-body">
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-person" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row" id="existing-members-container" style="display: none;">
                        <div class="col-md-12">
                            <label for="existing-members" style="font-size:15px;color:#1F3E61;font-weight: 600;">Select Existing Member</label>
                            <select class="form-control rhospital_id" id="existing-members" name="existing-members">
                                <option value="">-- Select a Member --</option>
                                <!-- Options will be dynamically populated -->
                            </select>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.full_name")}}</p>
                            <input style="padding:15px" class="form-control" type="text" id="full-name" name="full-name" />
                        </div>
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.nationality")}}</p>
                            <select  class="form-control nationality-id rhospital_id" type="text" id="nationality" name="nationality" >
                                @foreach($countries as $country)
                                    <option @if($country->id == 140) selected @endif value="{{$country->id}}" >{{$country->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.identity_type")}}</p>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="col-md-6" style="padding:0">
                                        <select id="identification-type" class="form-control" name="">
                                            <option value="" >Select ID Type</option>
                                            <option value="national_id" >{{trans("web.national_id")}}</option>
                                            <option value="res_no">{{trans("web.res_no")}}</option>
                                            <option value="border_no">{{trans("web.border_no")}}</option>
                                            <option value="gulf_id">{{trans("web.gulf_id")}}</option>
                                            <option value="file_no">{{trans("web.file_no")}}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6" style="padding:0">
                                        <input placeholder="ID No." style="width:100%;padding:15px;border-top-left-radius: 0;border-bottom-left-radius: 0;" type="text" class="form-control" name="identification" id="identification" value="" >
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.gender")}}</p>
                            <select id="gender" name="gender" class="form-control" style="background-color: var(--blazma-primary) !important; color: white !important; border-radius: 30px;height: 40px;padding: 10px 15px 10px 18px;border: 1px solid #E6E6E6;">
                                <option value="0" selected>Select a Gender</option>
                                <option value="1">{{trans("web.male")}}</option>
                                <option value="2">{{trans("web.female")}}</option>
                                <option value="3">{{trans("web.unknown")}}</option>
                            </select>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Mobile (555xxxxxx)</p>
                            <input style="padding:15px" class="form-control" type="text" id="mobile" name="mobile" />
                        </div>
                        <div class="col-md-6">
                        <p class="d-flex justify-content-between" style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;"><span>{{trans("web.dob")}}</span><i id="tooltip-age-1" title="Click to switch" class="far fa-question-circle"></i></p>
                            <input style="padding:15px" class="form-control" type="date" id="mdob" name="dob" />
                            <input style="padding:15px;display:none" class="form-control" type="number" placeholder="Enter Age" id="mage" name="age" />
                        </div>
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Passport No. (Optional)</p>
                            <input  class="form-control" type="text" id="passport_number" name="passport_number"/>
                        </div>
{{--                        <div class="col-md-4">--}}
{{--                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Email (Optional)</p>--}}
{{--                            <input style="padding:15px" class="form-control" type="email" id="email-member" name="email" />--}}
{{--                        </div>--}}
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Reason of testing ? (Optional)</p>
                            <select required id="outside-case" name="outside-case" class="form-control">
                                <option value="">Select Reason</option>
                                <option selected value="0">Diagnoses</option>
                                <option value="1">Travelling to Outside KSA</option>
                                <option value="2">Public Quarantine (Hotel) - حجر مؤسسي</option>
                                <option value="3">Home Quarantine - حجر في المنزل</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Reference MRN# (Optional)</p>
                                <input  type="text" name="mrn" id="mrn" class="form-control" placeholder=""/>
                            </div>

                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;" >Address (Optional)</p>
                            <textarea name="patient-address" id="patient-address" class="form-control"  placeholder="Address"></textarea>
                        </div>
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Patient History (Optional)</p>
                            <textarea   name="patient-history" id="patient-history" class="form-control" placeholder="Patient History" ></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer justify-content-between">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default" data-dismiss="modal">{{trans("web.cancel")}}</button>
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="add-new-member"  type="button" class="btn btn-info">{{trans("web.save")}}</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

    <div class="modal fade" id="modal-contract-questionnaire">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Questionnaire</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body modal-contract-questionnaire-body">

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

<div class="modal fade" id="modal-booking">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Booking Quotation</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="collection-form" method="post"  action="/operations/samples/">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <div class="alert alert-danger alert-danger-booking-quote" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-order" role="alert" style="display: none;"></div>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col-8">
                            <span style="font-size:18px;color:#706967;font-weight: 500;margin-bottom: 10px;"><span id="packages_count"></span> {{trans("web.test_count")}}</span>
                        </div>
                        <div class="col-4" style="text-align: center">
                            <span style="font-size:18px;color:#112F53;text-align: center">@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                    {!! $global_symbol['currency'] !!}
                                @else
                                    {{ $global_symbol['currency'] ?? 'SAR' }}
                                @endif <span id="packages_amount"></span></span>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-8">
                            <span style="font-size:18px;color:#706967;font-weight: 500;margin-bottom: 10px;">{{$global_symbol['vat'] ?? 'VAT'}}</span>
                        </div>
                        <div class="col-4" style="text-align: center">
                            <span style="font-size:18px;color:#112F53;text-align: center">@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                    {!! $global_symbol['currency'] !!}
                                @else
                                    {{ $global_symbol['currency'] ?? 'SAR' }}
                                @endif <span id="tax_amount"></span></span>
                        </div>
                    </div>
                    <div class="row" id="discount_container" style="margin-top:20px; display: none">
                        <div class="col-8">
                            <span style="font-size:18px;color: #706967;margin-bottom: 10px;">{{trans("web.discount")}}</span>
                        </div>
                        <div class="col-4" style="text-align: center">
                            <span style="font-size:18px;text-align: center;">@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                    {!! $global_symbol['currency'] !!}
                                @else
                                    {{ $global_symbol['currency'] ?? 'SAR' }}
                                @endif <span id="net_quotation_discount">0</span></span>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-8">
                            <span style="font-size:18px;color:#112F53;font-weight: 600;margin-bottom: 10px;">{{trans("web.total")}}</span>
                        </div>
                        <div class="col-4" style="text-align: center">
                            <span style="font-size:18px;color:#112F53;text-align: center;font-weight: 600">@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                    {!! $global_symbol['currency'] !!}
                                @else
                                    {{ $global_symbol['currency'] ?? 'SAR' }}
                                @endif <span id="net_total"></span></span>
                        </div>
                    </div>

                    <div class="form-group mt-3 d-flex">
                        <input id="coupon_contract_code" style="padding: .9rem 1rem; border-radius: 2rem; flex: 1" type="text" required class="form-control col-4" value="{{!empty($cart['coupon']) ? $cart['coupon'] : ''}}" name="coupon_code"
                               placeholder="{{trans('web.promo_code')}}">
                        <button type="button" id="coupon_contract_code_btn" style="position: relative;right: 35px;top: 3px;" class="btn btn-blazma"><i class="fa fa-percent"></i></button>
                    </div>
                    <label  style="display: none;" for="location" id="location-label">Location</label>
                    <select style="display: none;" class="form-control" id="hospital-location">
                        <option value="">Select Location</option>
                    </select>
                    <label  style="display: none;" for="booking-hospital" id="booking-hospital-label">Location</label>
                    <select style="display: none;" class="form-control" id="booking-hospital">
                        <option value="">Select Hospital</option>
                        @foreach($hospitals as $hospital)
                            <option value="{{$hospital->ID}}">{{$hospital->NAME_EN}}</option>
                        @endforeach
                    </select>
                    <div id="sample-password-div" class="row" style="margin-top:10px;display: none;">
                        <div class="col">
                            <label for="sample-password">Password</label>
                            <input id="sample-password" name="sample-password" class="form-control" value="" type="password" />
                        </div>
                    </div>
                    <div id="otp-verification-div" class="row" style="margin-top:10px;display: none;">
                        <div class="col-4">
                            <label for="booking-otp">Verification Code (OTP)</label>
                            <input id="booking-otp" name="booking-otp" class="form-control" value="" type="text" placeholder="Enter 4-digit OTP" maxlength="4" />
                            <button type="button" id="resend-otp-btn" class="btn btn-link" style="margin-top:5px;padding:0;">Resend OTP</button>
                            <span id="otp-timer" class="text-muted" style="margin-left:10px;"></span>
                        </div>
                    </div>
                    <div id="verification-reference-div" class="row" style="margin-top:10px;display: none;">
                        <div class="col-4">
                            <label for="verification-reference-order">Verification Reference Order</label>
                            <input id="verification-reference-order" name="verification_reference_order" class="form-control" value="" type="text" maxlength="255" placeholder="Enter Verification Reference Order" />
                        </div>
                    </div>
                    <div id="home-visit-cmp" style="display:none;">
                        <div class="row">
                            <div class="col">
                                <span style="font-size:18px;color:#706967;font-weight: 500;margin-bottom: 10px;">Home visit location</span>
                                <div id="map" style="width:100%;height:400px"></div>
                                <input id="pac-input" class="controls form-control" style="margin-top: 10px !important;" placeholder="{{trans("web.search")}}"/>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="modal-footer ">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="modal-cancel" type="button" class="btn btn-default" data-dismiss="modal">{{trans("web.cancel")}}</button>
                    <div class="d-flex">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;margin-right:10px;" id="cod_order"  type="button" class="btn btn-info">Cash On Delivery</button>
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="credit_order"  type="button" class="btn btn-info">Credit Order</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="modal-import">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Excel Importing</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="collection-form" method="post"  action="/operations/samples/">
                <div class="modal-body">
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-import" role="alert" style="display: none;"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Upload Excel File (Maximum 500 persons)</p>
                            <input style="padding:3px" class="form-control" name="import-file" id="import-file" type="file" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default float-left" data-dismiss="modal">{{trans("web.cancel")}}</button>
                    <a style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-info" target="_blank" href="/operations/followers/template-multiple?{{time()}}">Template</a><br /><br />
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="import_contract_cart" type="button" class="btn btn-success">Import</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

@endsection

@section('footer-scripts')
    <script>
        $('#hospital_id').select2();
        let currentFocused = 0;
        let buttons = [];

        // Function to update the focus
        function updateFocus(newIndex) {
            // Check boundaries and if there are buttons
            if (newIndex >= 0 && newIndex < buttons.length && buttons.length > 0) {
                // Remove focus from the current button
                buttons[currentFocused].blur();

                // Update the current focused index and set focus to the new button
                currentFocused = newIndex;
                buttons[currentFocused].focus();
                console.log(currentFocused)
            }
        }

            // Function to initialize button navigation
            function initButtonNavigation(inside = null) {
                // Select buttons again in case they changed
                buttons = document.querySelectorAll('.steps');
                // Reset the current focused index
                if(!inside) currentFocused = 0;
                // Initially focus the first button if available
                if (buttons.length > 0) {
                    if(!inside) buttons[currentFocused].focus();
                }
            }

            // Keydown event listener for navigation
            document.addEventListener('keydown', function(event) {
                switch(event.key) {
                    case 'ArrowRight':
                        // Move focus to the right
                        updateFocus(currentFocused + 1);
                        break;
                    case 'ArrowLeft':
                        // Move focus to the left
                        updateFocus(currentFocused - 1);
                        break;
                    case 'Enter':
                        if(event.target.innerText == 'Add Service')
                        break;
                }
            });

            // Initialize button navigation on page load
            initButtonNavigation();

        $('#modal-booking').on('shown.bs.modal', function () {
            $('#modal-cancel').focus();
        });


        // Store patient data by ID for retrieval on selection
        var patientDataCache = {};
        // Store selected patient data for modal population
        var selectedPatientData = null;

        $('#patient-contract-id').select2({
            ajax: {
                url: '/operations/search-patient-contract',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        end_user_id : $('#hospital_id').val(),
                        q: params.term
                    };
                },
                processResults: function (data) {
                    // Store data in cache for retrieval on selection
                    data.results.forEach(function(item) {
                        patientDataCache[item.id] = {
                            packageId: item.package_id || item.PACKAGE_ID || item.packageId,
                            name: item.NAME || item.name,
                            mobileNumber: item.MOBILE_NUMBER || item.mobile_number || item.mobileNumber,
                            dateOfBirth: item.DATE_OF_BIRTH || item.date_of_birth || item.dateOfBirth,
                            mrn: item.MRN || item.mrn,
                            nationalityId: item.NATIONALITY_ID || item.nationality_id || item.nationalityId,
                            genderId: item.GENDER_ID || item.gender_id || item.genderId,
                            identificationType: item.IDENTIFICATION_TYPE || item.identification_type || item.identificationType,
                            identification: item.IDENTIFICATION || item.identification,
                            email: item.EMAIL || item.END_USER_EMAIL || item.email
                        };
                    });
                    return {
                        results: data.results.map(function(item) {
                            return {
                                id: item.id,
                                text: item.text
                            };
                        })
                    };
                }
            }
        });
        $("#patient-contract-id").change(function (){
            var selectedId = $(this).val();
            var patientData = patientDataCache[selectedId];

            if (patientData) {
                selectedPatientData = patientData;
                $('#is-existing-patient').val('1');
                $('#existing-patient-identification').val(patientData.identification || '');
                $('#existing-patient-package-id').val(patientData.packageId || '');
            }

            $('#add-follower').click();
        });

        // Typing a brand-new patient via the "Add Patient" button — clear the existing-patient flag.
        $('#add-follower').on('click', function () {
            if (!selectedPatientData) {
                $('#is-existing-patient').val('');
                $('#existing-patient-identification').val('');
                $('#existing-patient-package-id').val('');
            }
        });

        // Populate form when modal is shown
        $('#modal-lg').on('shown.bs.modal', function () {
            if (selectedPatientData) {
                // Populate patient data in modal forms
                $('#full-name').val(selectedPatientData.name || '');
                $('#mobile').val(selectedPatientData.mobileNumber || '');
                $('#mrn').val(selectedPatientData.mrn || '');
                $('#email').val(selectedPatientData.email || '');

                // Calculate age from DOB if available
                if (selectedPatientData.dateOfBirth) {
                    $('#dob').val(selectedPatientData.dateOfBirth);
                    var dob = new Date(selectedPatientData.dateOfBirth);
                    var today = new Date();
                    var age = today.getFullYear() - dob.getFullYear();
                    var m = today.getMonth() - dob.getMonth();
                    if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) {
                        age--;
                    }
                    $('#age').val(age);
                    $('#mdob').val(selectedPatientData.dateOfBirth);
                    $('#mage').val(age);
                }

                // Set nationality, gender, identification
                if (selectedPatientData.nationalityId) {
                    $('#nationality').val(selectedPatientData.nationalityId).trigger('change');
                }
                if (selectedPatientData.genderId) {
                    $('#gender').val(selectedPatientData.genderId).trigger('change');
                }
                if (selectedPatientData.identificationType) {
                    $('#identification-type').val(selectedPatientData.identificationType).trigger('change');
                }
                if (selectedPatientData.identification) {
                    $('#identification').val(selectedPatientData.identification);
                }
            }

            $('#full-name').focus();
            initButtonNavigation(1);
        });

        // Clear patient data when modal is closed
        $('#modal-lg').on('hidden.bs.modal', function () {
            selectedPatientData = null;
            $('#is-existing-patient').val('');
            $('#existing-patient-identification').val('');
            $('#existing-patient-package-id').val('');
        });
        $("#hospital_id").change(function(){
            if($("#hospital_id").val() && $("#hospital_id").val() > 0) {
                $('#patient-search-display').show();
            }else{
                $('#patient-search-display').hide();
            }
        });
        $(document).on('click', '#coupon_contract_code_btn', function (e) {
            e.preventDefault();
            var couponCode = $('#coupon_contract_code').val();
            if (couponCode === '')
            {
                toastr.error('Fill the discount code')
                return false;
            }
            $.ajax({
                url: '/operations/coupon',
                type: 'post',
                data: {
                    coupon_code: couponCode,
                    is_operation: 1,
                    is_contract_booking: 1,
                    patient_id: $("#hospital_id").val()
                },
                success: function (data) {
                    $('#net_total').text(data.response.net_total)
                    $("#net_quotation_discount").text(data.response.discount_amount)
                    $("#discount_container").css("display", "flex");
                    toastr.success('A coupon has been applied successfully')
                },
                error: function (response) {
                    toastr.error(response.responseJSON.errorMessage);
                }
            });
        })

        $(document).keydown(function(event) {
            if (event.ctrlKey && event.keyCode === 83) { // CTRL + S
                // Prevent the default action (like opening the save dialog)
                event.preventDefault();
                if($("#modal-lg").is(':visible')){
                    var $button = $('#add-new-person-contract');
                    if (!$button.is(':disabled')) {
                        $button.click();
                    }
                }else{
                    var $button = $('#checkout');
                    if (!$button.is(':disabled')) {
                        $button.click();
                    }
                }

            }
            if ((event.ctrlKey || event.metaKey) && event.key === 'x') { // CTRL + X
                event.preventDefault(); // Prevent default action of Ctrl+X

                // Focus on the search box of the DataTable
                $('#booking-tests-table_filter input').focus();
            }
            if (event.ctrlKey && event.keyCode === 66) { // CTRL + B
                // Prevent the default action (like opening the save dialog)
                event.preventDefault();
                var $button = $('#add-follower');
                if (!$button.is(':disabled')) {
                    $button.click();
                }
            }
            if (event.key === 'Escape') { // Check if the key is the Escape key
                $('.modal').modal('hide'); // Hide the modal if it's open
            }
        });

        $(document).ready(function() {
            // Initialize the tooltip
            $('#tooltip-age-1').tooltip();

            // Click handler to toggle DOB and Age input
            $('#tooltip-age-1').on('click', function (e) {
                e.preventDefault(); // prevent any default tooltip weird behavior

                const dobField = $('#mdob');
                const ageField = $('#mage');

                if (dobField.is(':visible')) {
                    dobField.hide().val('');
                    ageField.show().val('');
                } else {
                    ageField.hide().val('');
                    dobField.show().val('');
                }
            });
        });

        $(".rhospital_id").select2();
    </script>

@endsection