@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;
        }

        #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;
        }
        .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;
        }
        @media (max-width: 500px) {
            .toolbar{
                display: flex;
            }
            .mr-b{
                margin-bottom:4px;
            }
        }
    </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;">Simple 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-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">
                                    <span style="color:var(--blazma-primary)"><b>Included Patients</b></span>
                                    <button style="margin-left:5px" id="follower-remove-all" class="transparent-black-btn float-right">Remove all</button>
                                    <button style="margin-left:5px" data-toggle="modal" data-target="#modal-lg" disabled="disabled" id="add-follower" class="btn btn-info float-right">Add Patient</button>
                                    <br /><br />
                                    <table id="booking-users-table" class="table table-bordered table-striped" style="border:none;">
                                        <thead>
                                        <tr>
                                            <th>MRN</th>
                                            <th>Dob</th>
                                            <th>Gender</th>
                                            <th>Remove</th>
                                        </tr>
                                        </thead>

                                    </table>
                                </div>
                            </div>
                            <br /><br />
                                <div class="row">
                                    <div class="col-md-7">
                                        <div class="row mb-5">
                                            {{--<div class="col-6" @if(!empty(session('role')) && session('role') == 1  && empty(session('is_primary') ) && empty(session('is_branch') ) || session('role') == 14) style="display: none;" @endif>--}}
                                            <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>Medical Complex Account</b></span>
                                                <select id="hospital_id" name="hospital_id" class="form-control rhospital_id" 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" style="display: none">
                                                <span style="color:var(--blazma-primary)"><b>Booking Type</b></span>
                                                <select id="booking_type" name="booking_type" class="form-control rhospital_id">
                                                    <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">
                                                    <option value="0" selected="selected">Search Account</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row" style="display: none;">
                                            <span style="color:var(--blazma-primary)"><b>Test Selection</b></span>
                                            <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="col-md-5" style="text-align: center;display: none">
                                        <img style="width:350px" class="img-circle" src="/img/booking.jpg" />
                                    </div>
                                </div><br />




                            <div class="row">
                                <div class="col-6">
                                    <div class="alert alert-danger alert-danger-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="quote" disabled="disabled" type="submit" class="btn btn-info" >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="modal-lg">
    <div class="modal-dialog modal-lg">
        <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-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Reference MRN#</p>
                            <input  type="text" name="mrn" id="mrn" class="form-control" placeholder=""/>
                        </div>
                        <div class="col-md-6" style="display: none;">
                            <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" style="display: none;">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">{{trans("web.nationality")}}</p>
                            <select  class="form-control 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 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-contract-age" title="Click to switch" class="far fa-question-circle"></i></p>
                            <input style="padding:15px;display:none" class="form-control" type="date" id="dob" name="dob" />
                            <input style="padding:15px;" class="form-control" type="number" placeholder="Enter Age" id="age" name="age" />
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px;display: none;">
                        <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 selected 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>

                    <div class="row" style="margin-top:20px;display: none;">
                        <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" value="500000000" />
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px">
                        <div class="col">
                            <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="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>
                <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"  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/">
                <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="">
                        <div class="col-8">
                            <span style="font-size:18px;color:#706967;font-weight: 700;margin-bottom: 10px;">No. of tests</span>
                        </div>
                        <div class="col-4" style="text-align: center;">
                            <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;display: none;">
                            <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;">
                        <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;display: none;">
                        <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" style="display: none !important;">
                        <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="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;" 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?{{time()}}">Template</a><br /><br />
                    <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="import_followers" 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();
        $('#patient-contract-id').select2({
            ajax: {
                url: '/operations/search-patient-contract', // Replace with the actual endpoint that fetches patients
                dataType: 'json',
                delay: 250, // Delay before sending the AJAX request
                data: function (params) {
                    return {
                        end_user_id : $('#hospital_id').val(),
                        q: params.term // Search term (if you want to implement search)
                    };
                }
            }
        });
        $("#patient-contract-id").change(function (){
            $('#add-follower').click();
        });
        $("#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: (window.location.pathname === "/operations/contracts/booking" || new URLSearchParams(window.location.search).get("from_contract") === "1") ? 1 : 0,
                    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).ready(function() {
            $("#tooltip-contract-age").trigger("click");
        });
    </script>

@endsection