@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') != 10)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
<link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">
    <style>
        .select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-search, .select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-search .select2-search__field, .select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-search, .select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-search .select2-search__field{
            height: 21 !important;
            padding-left:10px;
        }
        .nav-link.active{
            color: #495057 !important;
        }
        #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;
        }
        .p-r{
            position: relative;
        }
        .btn-blazma{
            position: absolute;
            top: 50%;
            right: 3%;
            min-width: 32px !important;
            width: 32px !important;
            height: 32px !important;
            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;
        }
        #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;
        }

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

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

        .wizard > .content > .body{ position: relative !important;}
    </style>
    <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;
        }

        .buttons-csv{
            display: none !important;
        }

        .sw-theme-dots>.nav .nav-link.done {
            color: var(--blazma-primary);
            cursor: pointer;
        }
        .sw-theme-dots>.nav .nav-link.done::after{
            background-color: var(--blazma-primary);
        }
        .modal-title{
            width: 90%;
        }

        blinkid-in-browser {
        /* Customization of UI - see variables in src/components/shared/styles/_globals.scss */
        /* --mb-component-background: red; */
        }
        .tab-content{
            background:white;
            padding: 20px 30px 20px 30px;
            border-radius: 30px;
        }
        #step-1{
            padding:0px;
        }
        .add-patient-icon{
            width:30px;
            height:30px;
        }
        #add-upatient{
            color: black !important;
            background-color: white !important;
            padding:4px 16px 4px 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 203px;
        }
        #add-upatient:hover{
            background-color: var(--blazma-primary) !important;
            color: white !important;
        }
        .container{
            max-width: 1325px;
        }
        .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;
            min-height: 68px;
            padding: 20px 30px 20px 30px;
            margin-bottom: 54px;
            box-shadow: 0px 2px 30px 0px #0000000F;
        }
        #modal-tests .select2-selection {
            border-radius: 30px;

        }
        #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;
        }
        .nav{
            margin-bottom:50px !important;
        }

        .step-indicator {
            border-collapse: separate;
            display: table;
            margin-left: 0px;
            position: relative;
            table-layout: fixed;
            vertical-align: middle;
        li {
            display: table-cell;
            float: none;
            padding: 0;
            width: 1%;
            &:before {
            background-color: #e5e5e5;
            content: "";
            display: block;
            height: 1px;
            position: relative;
            top: 18px;
            }
            &:first-child {
            &:before {
                left: 50%;
            }
            }
            &:last-child {
            &:before {
                right: 50%;
            }
            }
        }
    .active {
        .step {
        border-color: var(--blazma-primary);
        color: var(--blazma-primary);
        }
        .caption a{
        color: var(--blazma-primary) !important;
        }
    }
  .complete {
    .step {
      border-color:var(--blazma-primary);
      color: var(--blazma-primary);
    }
    .caption a {
      color: var(--blazma-primary);
    }
  }
  .incomplete {
    .step {
      border-color: #999;
      color: #999;
    }
    .caption a{
      color: #999;
    }
  }
  .step {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    color: #e5e5e5;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .caption {
    box-sizing: border-box;
    color: #e5e5e5;
    padding: 11px 16px;
  }
}    @media (max-width: 800px) {
            .toolbar{
                display: flex;
            }
            .mr-b{
                margin-bottom:19px;
            }
            #smartwizard li {
                width:100%;
            }
        }

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

        .points-balance {
            display: inline-flex;
            align-items: center;
            background: #fff8e1; /* light gold background */
            border: 1px solid #ffeb3b; /* gold border */
            border-radius: 20px; /* pill shape */
            padding: 5px 12px;
            font-weight: 600;
            color: #f9a825; /* golden text */
        }

        .points-balance .balance {
            margin-right: 6px;
            font-size: 14px;
        }

        .points-balance i {
            font-size: 16px;
            color: #fbc02d; /* golden icon */
        }

    </style>

    <style>
        .insurance-action-container {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 10px;
            margin-top: 10px;
        }

        #add-insurance-btn {
            background-color: #fff;
            border: 1px solid var(--blazma-primary);
            color: var(--blazma-primary);
            white-space: nowrap;
            border-radius: 30px !important;
            padding: 4px 12px;
            height: 30px;
            transition: all 0.3s ease;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 130px;
            margin-right: 10px;
        }

        #add-insurance-btn:hover {
            background-color: var(--blazma-primary);
            color: #fff;
        }

        #add-insurance-btn.insurance-added {
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
            color: #fff;
            min-width: 140px;
        }
        #add-insurance-btn.insurance-added:hover {
            background-color: #a13154;
            border-color: #a13154;
        }

        #add-insurance-btn i {
            margin-right: 5px;
        }
        .insurance-badge {
            white-space: nowrap;
        }

        .insurance-details-section-pbooking .info-box{
            max-width: 280px !important;
        }

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

        .nafees-field-warning {
            border: 2px solid #D97706 !important;
            background-color: #FFF7E6 !important;
        }

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

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

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

        #modal-lg .modal-footer,
        #modal-user .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-user .modal-content::-webkit-scrollbar {
            width: 6px;
        }

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

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

        #modal-lg .modal-content::-webkit-scrollbar-thumb:hover,
        #modal-user .modal-content::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>

  <!--<script src="https://unpkg.com/@microblink/blinkid-in-browser-sdk/dist/blinkid-sdk.min.js"></script>
  <script type="module" src=" https://unpkg.com/@microblink/blinkid-in-browser-sdk@5.15.0/ui/dist/blinkid-in-browser/blinkid-in-browser.esm.js"></script>-->


<script src="/js/scan.js"></script>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header p-0">
        <div class="container-fluid card m-0">
            <div class="row">
                <div class="col-sm-6 m-0 card ">
                    <h1 class="card-body m-0 text-dark" style="color: var(--blazma-text)!important;">Out Patient Booking</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">
            <div class="row">
                <div class="col-md-12 p-0">

                    <!-- /.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-12">
                                    <div id="smartwizard">
                                    <ul class="nav list-inline text-center step-indicator">
                                        <li class="active">
                                        <div class="step"><span class="fa fa-circle"></span></div>
                                        <div class="caption hidden-xs hidden-sm">
                                            <a class="nav-link" href="#step-1">
                                                    Select Account
                                                </a>
                                        </div>
                                        </li>
                                        <li class="incomplete">
                                        <div class="step"><span class="fa fa-circle"></span></div>
                                        <div class="caption hidden-xs hidden-sm">
                                        <a class="nav-link" href="#step-2">
                                                    Add Tests
                                                </a>
                                        </div>
                                        </li>
                                        <li class="incomplete">
                                        <div class="step"><span class="fa fa-circle"></span></div>
                                        <div class="caption hidden-xs hidden-sm">
                                        <a class="nav-link" href="#step-5" >
                                                    Questionnaire
                                                </a>
                                        </div>
                                        </li>
                                        <li class="incomplete">
                                        <div class="step"><span class="fa fa-circle"></span></div>
                                        <div class="caption hidden-xs hidden-sm">
                                        <a class="nav-link" href="#step-3">
                                                   Review Booking
                                                </a>
                                        </div>
                                        </li>
                                    </ul>
                                        <div class="tab-content">
                                            <div id="step-1" class="tab-pane" role="tabpanel">

                                                <div class="row d-flex justify-content-between align-items-center">
                                                    <div class="col-sm-8 col-md-5 mr-b">
                                                        <select id="hospital_id" name="patient_id" class="form-control patient_select">
                                                            <option value="0" selected="selected">Search Account</option>
                                                        </select>
                                                        <br />
                                                    </div>
                                                    <div class="points-balance">
                                                        <i class="fas fa-coins mr-2"></i>
                                                        <span class="balance" id="balance-points">0 pts</span>
                                                    </div>


                                                    @permission('booking_add_patient')
                                                    <div class="col-sm-4 col-md-2 mr-b">
                                                        <button data-toggle="modal" data-target="#modal-user" id="add-upatient" class="btn btn-info"><img class="add-patient-icon" src="/img/add-patient.png"  alt="add-patient"><span class="add-patient-title">Add Patient Account<span></button>
                                                    </div>
                                                    @endpermission
                                                    <div class="col-sm-8 col-md-3">
                                                        <select id="booking_type" name="booking_type" class="form-control">
                                                        <option disabled value="">Booking Type</option>
                                                            <option value="1">Normal Booking</option>
                                                            <option value="2">Home Visit</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-sm-4 col-md-3 d-flex align-items-end">
                                                        <div class="insurance-action-container">
                                                            <button id="add-insurance-btn" class="btn" type="button" data-toggle="modal" data-target="#modal-insurance" disabled>
                                                                <i class="fa fa-plus"></i> Add Insurance
                                                            </button>
                                                            <div id="insurance-indicator" style="display: none;"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="step-2" class="tab-pane" role="tabpanel">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <span style="color:var(--blazma-primary);"><b>Family Members</b></span>
                                                        <br /><br />
                                                        @if(isset($profile->DISABLE_MEMBERS) && !$profile->DISABLE_MEMBERS)
                                                        @permission('booking_add_member')
                                                        <button style="margin-left:5px;" data-toggle="modal" data-target="#modal-lg" disabled="disabled" id="add-member" class="btn btn-info float-right"><i class="fas fa-lg fa-plus-circle"></i> Add Member</button><br /><br />
                                                        @endpermission
                                                        @endif
                                                        <table id="booking-members-table" class="table table-bordered table-striped" data-disable-members="{{ $profile->DISABLE_MEMBERS ? 1 : 0 }}">
                                                            <thead>
                                                            <tr style="display: none;">
                                                                <th>Name</th>
                                                                <th>Relation</th>
                                                                <th>Gender</th>
                                                                <th>Mobile Number</th>
                                                                <th>Action</th>
                                                            </tr>
                                                            </thead>

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

                                            <div id="step-5" class="tab-pane" role="tabpanel">
                                                <div class="col-12" id="patient-questionnaire-panel">

                                                </div>
                                            </div>
                                            <div id="step-3" class="tab-pane" role="tabpanel">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <span style="color:var(--blazma-primary)"><b>Included Patients</b></span>
                                                        {{-- <button data-toggle="modal" data-target="#modal-import" disabled="disabled" id="import-follower" class="btn btn-info float-right">Import Patients</button>--}}<br /><br />
                                                        <table 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>Remove</th>
                                                            </tr>
                                                            </thead>

                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="step-4" class="tab-pane" role="tabpanel">
                                                <div class="col">
                                                    <div class="alert alert-danger alert-danger-booking" role="alert" style="display: none;"></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 btn-danger" >Remove All</button>
                                                        <button style="min-width:130px" id="checkout" disabled="disabled" type="submit" class="btn btn-info" >Get Booking Details</button>
                                                    </div>
                                                </div>
                                            </div>

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




                            <div class="row">


                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<div class="modal fade" id="modal-lg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-lg-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" 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" 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-4">
                            <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-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-age-1" title="Click to switch" class="far fa-question-circle"></i></p>
                            <input style="padding:15px" class="form-control" type="date" id="dob" name="dob" />
                            <input style="padding:15px;display:none" class="form-control" type="number" placeholder="Enter Age" id="age" name="age" />
                        </div>
                        @if(!empty(session('enable_nbs')) && session('enable_nbs'))
                            <div class="col-md-4">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.tof")}} (Optional)</p>
                                <input autocomplete="off" name="utob" type="text" placeholder="HH:mm" class="form-control datetimepicker-input" id="timepicker-tob" data-target="#timepicker-tob"/>
                            </div>
                        @endif
                        <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" name="email" />
                        </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>

                    <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 class="col-md-6">
                            <label>District</label>
                            <input required type="text" name="district" id="district" class="form-control" placeholder=""/>
                        </div>--}}

                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-md-12">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Address (Optional)</p>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="col-md-6">
                                        <select id="member-city-id" class="form-control rhospital_id" name="member-city-id">
                                            <option value="" >Select City</option>
                                            @foreach($cities as $city)
                                                <option value="{{$city->CITY_ID}}">{{$city->ENG_NAME}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <input placeholder="District" maxlength="30" style="width:100%;padding:15px;border-top-left-radius: 0;border-bottom-left-radius: 0;" type="text" class="form-control" name="patient-address" id="patient-address" value="" >
                                    </div>
                                </div>

                            </div>
                        </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;">Patient History (Optional)</p>
                            <textarea   name="patient-history" id="patient-history" class="form-control" placeholder="Patient History" ></textarea>
                        </div>
                    </div>
                  {{--  <div class="row" style="margin-top:20px">
                        <div class="col-md-4">
                            <label>Occupation</label>
                            <select required name="occupation" id="occupation" class="form-control">
                                <option value=""></option>
                                <option value="1">Healthcare worker</option>
                                <option value="2">Employee (Government sector)</option>
                                <option value="3">Employee (Private sector)</option>
                                <option value="4">Worker (Government sector)</option>
                                <option value="5">Worker (Private sector)</option>
                                <option value="6">Worker (Individuals)</option>
                                <option value="7">Unemployed</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label>Have Symptoms ?</label>
                            <select required name="symptoms" id="symptoms" class="form-control">
                                <option value="0">No</option>
                                <option value="1">Yes</option>
                            </select>
                        </div>
                        <div class="col-md-4">

                        </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-user">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Patient Account</h3>
                    <div style="width:100%;">
                  <!-- It's possible to obtain a free trial license key on microblink.com -->
                    <blinkid-in-browser
                        style="width: 100%;"
                        license-key="{{config('services.ID_SCAN_TOKEN')}}"
                        recognizers="BlinkIdRecognizer"
                        engine-location="https://unpkg.com/@microblink/blinkid-in-browser-sdk@5.15.0/resources/"
                    ></blinkid-in-browser>
                    <script>
                        const el = document.querySelector('blinkid-in-browser');

                        // See src/utils/translations.ts for possible translation keys
                        el.translations = {
                            'action-message': 'Scan from camera'
                        };
                        </script>
                    </div>
                    <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-uperson" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div id="nafees-warning" role="alert" style="display:none; text-align:start; background:#FFF7E6; border:1px solid #F0D9A8; border-inline-start:4px solid #D97706; border-radius:8px; padding:14px 16px; margin-bottom:6px;">
                                    <p style="margin:0 0 4px; font-weight:700; color:#92400E; font-size:15px;">&#9888; {{trans("web.nafees_warning_title")}}</p>
                                    <p id="nafees-warning-text" style="margin:0 0 10px; color:#7A5410; font-size:14px;"></p>
                                    <label for="nafees-confirm-checkbox" style="margin:0; color:#92400E; font-weight:600; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:8px;">
                                        <input type="checkbox" id="nafees-confirm-checkbox" style="margin:0; flex-shrink:0; width:16px; height:16px;">
                                        <span>{{trans("web.nafees_confirm_continue")}}</span>
                                    </label>
                                </div>
                            </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" placeholder="Enter Full Name" id="ufull-name" name="ufull-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"  type="text" id="unationality" name="unationality" >
                                    @foreach($countries as $country)
                                        <option @if($country->id == 140)  selected @endif value="{{$country->id}}" iso2="{{$country->code}}">{{$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="uidentification-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="uidentification" id="uidentification" 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="ugender" name="ugender" 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-4">
                                <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="umobile" name="umobile" placeholder="Enter 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-age-2" title="Click to switch" class="far fa-question-circle"></i></p>
                                <input style="padding:15px" class="form-control" type="text" id="hijri-date"  placeholder="Enter Date" />
                                <input style="padding:15px" class="form-control" type="hidden" id="udob" name="udob" />
                                <input style="padding:15px;display:none" class="form-control" type="number" placeholder="Enter Age" id="uage" name="uage" />
                            </div>
                            @if(!empty(session('enable_nbs')) && session('enable_nbs'))
                            <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.tof")}} (Optional)</p>
                             <input autocomplete="off" name="utob" type="text" placeholder="HH:mm" class="form-control datetimepicker-input" id="timepicker-utob" data-target="#timepicker-utob"/>
                            </div>
                            @endif
                            <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="uemail"  placeholder="Enter Email" name="uemail" />
                            </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="upassport_number" placeholder="Enter Passport Number" name="passport_number"/>
                            </div>
                            <div class="col-md-4">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.preferred_language")}}</p>
                                <select id="ulanguage" name="ulanguage" 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="en" selected>English</option>
                                    <option value="ar">Arabic</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;">Reason of testing ? (Optional)</p>
                                <select required id="uoutside-case" name="uoutside-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="umrn" id="umrn" placeholder="Enter MRN" class="form-control" placeholder=""/>
                            </div>
                            </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col-md-12">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Address (Optional)</p>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="col-md-6">
                                            <select id="patient-city-id" class="form-control rhospital_id" name="patient-city-id">
                                                <option value="" >Select City</option>
                                                @foreach($cities as $city)
                                                    <option value="{{$city->CITY_ID}}">{{$city->ENG_NAME}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <input placeholder="District" maxlength="30" style="width:100%;padding:15px;border-top-left-radius: 0;border-bottom-left-radius: 0;" type="text" class="form-control" name="patient-address-account" id="patient-address-account" value="" >
                                        </div>
                                    </div>

                                </div>
                            </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</p>
                                <textarea name="patient-address-account" id="patient-address-account" 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-account" id="patient-history-account" class="form-control" placeholder="Patient History" ></textarea>
                            </div>
                        </div>
                       {{-- <div class="row" style="margin-top:20px">
                            <div class="col-md-4">
                                <label>Occupation</label>
                                <select required name="uoccupation" id="uoccupation" class="form-control">
                                    <option value=""></option>
                                    <option value="1">Healthcare worker</option>
                                    <option value="2">Employee (Government sector)</option>
                                    <option value="3">Employee (Private sector)</option>
                                    <option value="4">Worker (Government sector)</option>
                                    <option value="5">Worker (Private sector)</option>
                                    <option value="6">Worker (Individuals)</option>
                                    <option value="7">Unemployed</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label>Have Symptoms ?</label>
                                <select required name="usymptoms" id="usymptoms" class="form-control">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="col-md-4" style="display: none;">
                                <label for="cert" class="d-block">Seha Certificate</label>
                                <select name="ucert" id="ucert" class="form-control" style="-webkit-appearance: menulist;">
                                    <option value="0">{{trans("web.no")}}</option>
                                    <option value="1">{{trans("web.yes")}}</option>
                                </select>
                            </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-account"  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-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/" autocomplete="off">
                <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;display: none" id="home_visit_fee_active">
                            <div class="col-8">
                                <span style="font-size:18px;color:#706967;font-weight: 500;margin-bottom: 10px;">{{trans("web.home_visit")}}</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="home_visit_fee"></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" 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="row" style="margin-top:20px">
                        <div class="col-8">
                            <span style="font-size:18px;color:#112F53;font-weight: 600;margin-bottom: 10px;">Order Reference ID</span>
                        </div>
                        <div class="col-4" style="text-align: center">
                            <input type="text" class="form-control" placeholder="Order Reference ID" autocomplete="nope" name="reference-id" id="reference-id"
                                   style="padding: .9rem 1rem;border-radius: 0.5rem;border-color: #ced4da;">
                        </div>
                    </div>
                    @permission('reservations_reference_doctor')
                    @if(!$doctors->isEmpty())
                        <div class="row" style="margin-top:20px">
                            <div class="col-8">
                                <span style="font-size:18px;color:#112F53;font-weight: 600;margin-bottom: 10px;">Reference Doctor</span>
                            </div>
                            <div class="col-4" style="text-align: left">
                                <select class="form-control rhospital_id" id="patient-reference-doctor" style="padding: .9rem 1rem;border-radius: 0.5rem;border-color: #ced4da;">
                                    <option value=""> Select Reference Doctor</option>
                                    @foreach($doctors as $doctor)
                                        <option value="{{$doctor->ID}}">{{$doctor->NAME}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif
                    @endpermission
                        <label  style="display:none;"  for="sample-cash">Cash Amount</label>
                        <input  style="display:none;"  id="sample-cash" name="sample-cash" class="form-control" value="0" type="number" step="0.01" />
                        <label  style="display:none;"  for="sample-visa">Visa Amount</label>
                        <input  style="display:none;"  id="sample-visa" name="sample-visa" class="form-control" value="0" type="number" step="0.01" />
                    <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>
                    <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="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>
                        <hr/>
                        <div class="row mt-2">
                            <div class="col-12 col-md-5">
                                <label for="hv-gender-collector"><strong>Collector Gender</strong></label>
                                <select id="hv-gender-collector" class="form-control">
                                    <option value="">-- Select Gender --</option>
                                    <option value="1">Male</option>
                                    <option value="2">Female</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-12 col-md-5">
                                <label for="hv-date"><strong>Visit Date</strong></label>
                                <input type="date" id="hv-date" class="form-control" />
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col">
                                <label><strong>Available Time Slots</strong></label>
                                <p id="hv-slots-placeholder" class="text-muted small">Please select a date to load available time slots.</p>
                                <div class="row" id="hv-times-slots"></div>
                                <div class="alert alert-danger mt-2" id="hv-error" style="display:none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer ">
                    <div class="promo-code">
                    {{--<form action="/operations/coupon" method="POST" id="coupon_operations_code_form" class="form promo-code">
                        <div class="form-group" >
                            <input style="padding: .9rem 1rem; border-radius: 2rem;" type="text" required class="form-control" value="{{!empty($cart['coupon']) ? $cart['coupon'] : ''}}" name="coupon_code" id="promo-code"
                                   placeholder="{{trans('web.promo_code')}}">
                            <button type="submit" class="btn btn-blazma"><i class="fa fa-percent"></i></button>
                        </div>
                    </form>--}}
                        <div class="form-group p-r" >
                            <input id="coupon_operations_code" style="padding: .9rem 1rem; border-radius: 2rem;" type="text" required class="form-control" value="{{!empty($cart['coupon']) ? $cart['coupon'] : ''}}" name="coupon_code"
                                   placeholder="{{trans('web.promo_code')}}">
                            <button type="button" id="coupon_operations_code_btn" class="btn btn-blazma"><i class="fa fa-percent"></i></button>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between">
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default mr-4" 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 mr-4">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>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

    <div class="modal fade" id="modal-tests">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Service</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" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-member" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="card-modal-header d-flex justify-content-between align-items-center">

                                        <div style="width:100%;max-width:430px;">
                                            <select class="form-control select_category" multiple="multiple" id="booking-category-id" name="package_id">
                                                @foreach($packages as $package)
                                                    <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="d-flex">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" name="only_packages" value="" id="only_packages">
                                                <label class="custom-control-label" for="only_packages" style="margin-right: 10px;font-weight: 300;"> Only Packages</label>
                                            </div>
                                            <div class="custom-control custom-switch">
                                                <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 class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" name="only_services" value="" id="only_services">
                                                <label class="custom-control-label" for="only_services" style="margin-right: 10px;font-weight: 300;">Only Services</label>
                                            </div>
                                        </div>
                                    </div>
                        <div class="row">
                            <div class="col">
                                <input id="member-id" type="hidden" />
                                <input id="is-member" type="hidden" />
                                <table id="booking-tests-table" class="table table-bordered table-striped">
                                    <thead>
                                    <tr style="display: none;">
                                        <th>Test</th>
                                        <th>Service Type</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" id="tests-cancel">{{trans("web.cancel")}}</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;font-color: white !important;" id="add_tests" type="button" class="btn btn-info">Continue</button>
                    </div>
            </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">Import Patients</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">
                            <a class="btn btn-secondary" target="_blank" href="/operations/followers/template?{{time()}}">Download Template</a><br /><br />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Upload Patients File</p>
                            <input style="padding:3px" class="form-control" name="import-file" id="import-file" type="file" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <br />
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Identification Types : 1=NationalID, 2=IqamehNo, 3=BorderNo, 4=GulfID</p>
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Genders : 1,2 (Male = 1 / Female = 2)</p>
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Nationality, Use the ID of the following file : <a class="btn btn-secondary" target="_blank" href="/operations/countries/template">Download Countries</a></p>
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Date of birth must be in the following format : YYYY-MM-DD</p>
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Mobile Number must start with 00 (example : 00966500xxxxxx)</p>
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">All fields are required, in case any column is missing or incorrect, the patient will be ignored</p>
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;color: red">Format the cells as text when modifying using excel, as excel tends to format the date, and mobile number differently</p>
                        </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="import_followers" type="button" class="btn btn-success">Import Patients</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<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>

<!-- Insurance Modal -->
<div class="modal fade" id="modal-insurance">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Patient Insurance</h4>
                <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" style="text-align: center;">
                        <div class="alert alert-danger alert-danger-insurance" role="alert" style="display: none;"></div>
                    </div>
                </div>

                <!-- Insurance section content -->
                @include('operations.insurance.insurance-pbooking-section')

                <!-- Hidden fields for storing insurance data -->
                <input type="hidden" id="selected-insurance-id" name="insurance_id" value="">
                <input type="hidden" id="selected-policy-id" name="policy_id" value="">
                <input type="hidden" id="selected-policy-number" name="policy_number" value="">
                <input type="hidden" id="selected-coverage-percentage" name="coverage_percentage" value="">
                <input type="hidden" id="selected-fixed-copay" name="fixed_copay" value="">
                <input type="hidden" id="selected-policy-name" name="policy_name" value="">
                <input type="hidden" id="total-order-amount" name="total_order_amount" value="0">
                <input type="hidden" id="total-insurance-coverage" name="total_insurance_coverage" value="0">
                <input type="hidden" id="total-patient-responsibility" name="total_patient_responsibility" value="0">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="clear-insurance-pbooking">Clear</button>
                <button type="button" class="btn btn-info" id="save-insurance-pbooking" disabled>Save</button>
            </div>
        </div>
    </div>
</div>

{{-- Hidden fields to carry selected HV date, timeslot & gender into cod_order / credit_order --}}
<input type="hidden" id="hv-timeslot-id" value="" />
<input type="hidden" id="hv-date-value" value="" />

@endsection

@section('footer-scripts')
        <script src="/js/bootstrap-hijri-datetimepicker.min.js"></script>
<script>
         $("#hijri-date").hijriDatePicker({
            locale: "en-us",
            hijri: false,
            viewMode: 'months',
            showClose: true,
            showClear: true,
            showTodayButton: true,
            useCurrent: false,
            minDate:'1920-01-01',
            icons: {
                previous: '<i class="fa fa-arrow-left"></i>',
                next: '<i class="fa fa-arrow-right"></i>',
                today: 'Today',
                clear: 'Clear',
                close: 'Close'
            },
            hijriText: "Hijri",
            gregorianText: "Gregorian"
        });

        $("#hijri-date").on('dp.change', function (arg) {
            if (!arg.date) {
                $("#udob").html('');
                return;
            };
            let date = arg.date;
            $("#udob").val(date.format("YYYY-M-D"));
        });

        $(".nationality-id").select2({
           placeholder:"Select Nationality"
        });
    </script>

    {{-- Home Visit Date & Time Slot Logic (pbooking only) --}}
    <script>
        // SHOW_APPOINTMENT flag for the current hospital. When != 1, the visit date/time slot is not mandatory.
        window.hvShowAppointment = {{ (int) ($showAppointment ?? 0) }};
        (function () {
            // Set today as the minimum selectable date
            var todayStr = new Date().toISOString().split('T')[0];
            $('#hv-date').attr('min', todayStr).val(todayStr);

            // Load available time slots from the operations endpoint
            function loadHvTimeSlots(date) {
                var hospitalId = '{{session('hospital_id') ?? ""}}';
                if (!date || !hospitalId) return;

                $('#hv-slots-placeholder').hide();
                $('#hv-times-slots').html('<p class="text-muted small">Loading...</p>');

                $.ajax({
                    url: '/operations/' + hospitalId + '/available-times',
                    data: { date: date },
                    type: 'GET'
                }).done(function (response) {
                    var container = $('#hv-times-slots');
                    container.empty();
                    if (response && response.length > 0) {
                        $.each(response, function (i, slot) {
                            container.append(
                                '<div class="col-6 col-sm-4 mb-2">' +
                                '<input type="radio" id="hv-slot-' + slot.ID + '" name="hv-time" value="' + slot.ID + '" style="display:none;" />' +
                                '<label for="hv-slot-' + slot.ID + '" class="btn btn-outline-secondary w-100 hv-slot-label">' + slot.FROM_TIME + '</label>' +
                                '</div>'
                            );
                        });
                        $(document).off('click.hvSlot').on('click.hvSlot', '.hv-slot-label', function () {
                            var radioId = $(this).attr('for');
                            var slotId = radioId.replace('hv-slot-', '');
                            $('.hv-slot-label').removeClass('btn-info').addClass('btn-outline-secondary');
                            $(this).removeClass('btn-outline-secondary').addClass('btn-info');
                            $('#' + radioId).prop('checked', true);
                            $('#hv-timeslot-id').val(slotId);
                            $('#hv-date-value').val($('#hv-date').val());
                            $('#hv-error').hide();
                        });
                    } else {
                        container.html('<p class="text-muted small">No available time slots for this date.</p>');
                    }
                }).fail(function () {
                    $('#hv-times-slots').html('<p class="text-danger small">Failed to load time slots.</p>');
                });
            }

            // Reload slots when date changes
            $('#hv-date').on('change', function () {
                $('#hv-timeslot-id').val('');
                $('#hv-date-value').val('');
                $('.hv-slot-label').removeClass('btn-info').addClass('btn-outline-secondary');
                loadHvTimeSlots($(this).val());
            });

            // When modal-booking opens and type=2, reset and load today's slots
            $('#modal-booking').on('show.bs.modal', function () {
                if ($("#booking_type").val() == 2) {
                    $('#hv-timeslot-id').val('');
                    $('#hv-date-value').val('');
                    $('#hv-gender-collector').val('');
                    $('#hv-error').hide();
                    $('.hv-slot-label').removeClass('btn-info').addClass('btn-outline-secondary');
                    var date = $('#hv-date').val() || todayStr;
                    $('#hv-date').val(date);
                    loadHvTimeSlots(date);
                }
            });
        })();
    </script>
@include('operations.insurance.insurance-pbooking-scripts')
@endsection