<!DOCTYPE html>
<html>
<title>ស្នើសុំសេវាមន្ទីរពិសោធន៍</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="{{ url(env("APP_URL").'storage/assets/vendors/typicons/typicons.css') }}">
<link rel="stylesheet" href="{{url(env("APP_URL").'storage/assets/vendors/mdi/css/materialdesignicons.min.css')}}">
<link rel="stylesheet" href="{{ url(env("APP_URL").'storage/assets/vendors/css/vendor.bundle.base.css') }}">
<link rel="stylesheet" href="{{ url(env("APP_URL").'storage/assets/css/vertical-layout-light/style.css') }}">
<link rel="stylesheet" href="{{ url(env("APP_URL").'storage/assets/css/overwrite.css') }}">

  <link rel="stylesheet" href="{{url(env("APP_URL").'storage/assets/vendors/select2/select2.min.css')}}">
      <link rel="stylesheet" href="{{url(env("APP_URL").'storage/assets/css/overwrite.select2.css')}}">

<link rel="stylesheet" href="{{url(env("APP_URL").'storage/assets/libs/alertifyjs/build/css/alertify.min.css')}}" type="text/css" />
<link rel="stylesheet" href="{{url(env("APP_URL").'storage/assets/libs/sweetalert2/sweetalert2.min.css')}}" type="text/css" />

<style>
    body,h1,h2,h3,h4,h5,h6 {font-family: "Arial", sans-serif}
    .py-2{
        padding: 5px 0;
    }
    .table tr td, .table tr th{
        padding: 5px;
        font-size: 13px;
    }
    .text-center{
        text-align: center;
    }
    .select2-container .select2-selection--single, .select2-selection--multiple {
        min-height: 50px !important;
    }
    .select2-selection__rendered{
        font-size: 20px !important;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field {
        height: 40px !important;
        font-size: 20px !important;
    }
    .select2-results__option {
        font-size: 15px !important;
    }

</style>
<body class="w3-white w3-content" style="max-width:1600px">

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:000px">

    <!-- Header -->
    <header id="portfolio">
        <br>
        <div class="w3-container" style="overflow: auto">
            <table cellpadding="0" cellspacing="0" style="min-width: 100%">
                <tr>
                    <th style="width:100%" class="text-center">
						@if(!empty($labSettings->alternative_logo))
							<img width="98%" height="140px" class="rounded-0" src="{{ url(env("APP_URL").'storage/images/avatars/labs/alternative_logo/'.$labSettings->alternative_logo) }}"  />
                        @else 
                        <table width="100%" cellpadding="0" cellspacing="0" style="min-width: 100%">
                            <tr>
                                <td style="vertical-align: top;" class="text-center">
                                    <img src="{{url(env("APP_URL").'storage/images/avatars/labs/'.$labSettings->logo)}}" alt="Logo" style="width: 70px;">
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center" align="center">
                                    <p style="line-height: 13px !important; font-size: 11pt; font-weight: bold; color: #3b86d1;" class="KhmerMoulLight py-1">{{$labSettings->name_kh}}</p>
                                    <p style="line-height: 13px !important; font-size: 9pt; font-weight: bold; color: #3b86d1;" class="text-uppercase py-1">{{$labSettings->name_en}}</p>
                                </td>
                            </tr>
                        </table>
						@endif
                    </th>
                </tr>
            </table>
            <hr style="margin: 10px 0;">
            <br>
            <h5 style="font-size: 18px"><b>គ្រប់គ្រង និងស្នើសុំសេវាមន្ទីរពិសោធន៍</b></h5>
            <br>
        </div>
    </header>

    <!-- First Photo Grid-->

        <div class=" w3-container w3-margin-bottom" style="overflow-x: auto; margin-bottom: 20px">
            <div class="row">
                <div id="old-patient-section" class="col-sm-6 pr-4 pl-4 py-4" style="background: aliceblue;">
                    <h6 style="font-size: 18px; line-height: 35px;"><b id="old-patient" style="padding: 6px; border-radius: 5px; color: #1676cb;"> អតិថិជនចាស់ - Existing Customer <i class="fa fa-hand-o-down" aria-hidden="true"></i></b></h6>
                    <form enctype="multipart/form-data" action="{{url('customer/login/'.request()->route()->parameter('hashLabId'))}}" method="post">
                        @csrf
                        <div class="row">
                            <div class="col-sm-12">
                                <label style="font-size: 16px">សូមបញ្ចូលលេខទូរស័ព្ទរបស់អ្នក-Input your phone number:</label><br>
                                <!--<input autocomplete="off" onclick="toogleSection(0)" placeholder="{{session()->has('message')? 'មិនមានលេខនេះនៅក្នុងប្រព័ន្ធយើងខ្ញុំទេ':'999 999 9999'}}" type=" text" id="phonenumber-login" name="phone_number" style="height: 50px;font-size:20px; width: 100%; border-radius: 0px; border: 1px solid #b1b1b1; outline: none; {{session()->has('message')? ' border:1px solid red; ':''}}" class="form-control phonenumber rounded" minlength="6" />-->
                                
                                <select id="phonenumber-login" name="phone_number" onclick="toogleSection(0)" required style="height: 50px; font-size:18px; width: 100%; border-radius: 0px; border: 1px solid #b1b1b1; outline: none;" class="form-control select2-tags rounded">
                                    <option value="0"></option>
                                </select>
                                
            				</div>
            				<div class="col-sm-12">
                                <label style="font-size: 16px">ឬ ឈ្មោះរបស់អ្នក - Customer Name:</label><br>
                                <select name="patient_id" id="patient_live_search" required style="height: 50px; font-size:18px; width: 100%; border-radius: 0px; border: 1px solid #b1b1b1; outline: none;" class="form-control select2-tags rounded">
                                    <option value="0"></option>
                                </select>
                                <!--<input autocomplete="off" type="text" required onclick="toogleSection(0)" name="name_en" style="height: 50px;font-size:20px; width: 100%; border-radius: 0px; border: 1px solid #b1b1b1; outline: none;text-transform: UPPERCASE;" class="form-control rounded" />-->
                            </div>
                            <div class="col-sm-12">
                                <button class="btn btn-sm btn-success w-100" type="submit" style="width: 150px; height: 36px; float: right; margin: 10px 0; outline: none; border: none; font-size: 16px">ចូលប្រើប្រាស់ - Login</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="new-patient-section" class="col-sm-6 pl-4 pr-4 py-4" style="border-left:2px solid #002d9b; background: white;">
                    <h6 style="font-size: 18px; line-height: 35px;"><b id="new-patient" style="padding: 6px; border-radius: 5px; color: #1676cb;"> អតិថិជនថ្មី - New Customer <i class="fa fa-hand-o-down" aria-hidden="true"></i></b></h6>
                    <form enctype="multipart/form-data" id="register-patient" action="{{url('customer/register/'.request()->route()->parameter('hashLabId'))}}" method="post">
                    @csrf
                    
                    <div class="row">
                        <div class="col-sm-6">
                            <label style="font-size: 16px">ឈ្មោះរបស់អ្នក - Customer Name:<code>*</code></label><br>
                            <input autocomplete="off" type="text" required onclick="toogleSection(1)" name="name_en" style="height: 50px;font-size:20px; width: 100%; border-radius: 0px; border: 1px solid #b1b1b1; outline: none;text-transform: UPPERCASE;" class="form-control rounded" />
                            <input type="hidden" required value="{{$labSettings->id}}" name="lab_id">
                            <input type="hidden" required value="{{$labSettings->short_name}}" name="short_name">
                        </div>
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label style="font-size: 16px">ភេទ - Gender: <code>*</code></label><br>
                                    <select name="gender" required style="height: 50px; font-size:18px; width: 100%; border-radius: 0px; border: 1px solid #b1b1b1; outline: none;" class="form-control rounded">
                                        <option value="1">ប្រុស - Male</option>
                                        <option value="2">ស្រី - Female</option>
                                    </select>
                                </div>
                                <div class="col-sm-6">
                                    <label style="font-size: 16px">អាយុ (ជាឆ្នាំ) - Age:<code>*</code></label><br>
                                    <input autocomplete="off" required type="number" id="year" style="height: 50px;font-size:20px; width: 100%; border-radius: 0px; border: 1px solid #b1b1b1; outline: none;" class="form-control rounded" />
                                    <input type="hidden" value="{{date('d-m-Y')}}" id="dob" name="dob">
                                </div>
                            </div>
                            
                        </div>
                        <div class="col-sm-6">
                            <label style="font-size: 16px">លេខទូរស័ព្ធ - Phone Number:<code>*</code></label><br>
                            <input autocomplete="off" type="text" required name="phone_number" id="phonenumber" minlength="6" placeholder="999 999 9999" style="height: 50px;font-size:20px; width: 100%; border-radius: 0px; border: 1px solid #b1b1b1; outline: none;" class="form-control phonenumber rounded" />
                        </div>
                        <div class="col-sm-6">
                            <label style="font-size: 16px">ខេត្ត - Province:</label><br>
                            <select name="province_id" style="height: 50px; font-size:18px; width: 100%; border-radius: 0px; border: 1px solid #b1b1b1; outline: none;" class="form-control rounded">
                                <option value="0"> - </option>
                                @foreach($provinces as $province)
                                    <option value="{{$province->id}}">{{$province->name_kh}} - {{$province->name_en}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
    				<button type="submit" class="btn btn-sm btn-info w-100" style="width: 150px; height: 36px; float: right; margin: 10px 0; outline: none; border: none; font-size: 16px">ចុះឈ្មោះថ្មី - Register</button>
                </form>
            </div>
            
        </div>


    

    <!-- End page content -->
</div>

</body>
<div class="w3-light w3-center" style="font-size: 13px; position: fixed; bottom: 0; width:80%; padding: 10px 0;">{{$labSettings->name_kh}}</div>


@include('layout.common_script')

<script src="{{url(env("APP_URL").'storage/assets/libs/moment/moment.js')}}"></script>
<script src="{{url(env("APP_URL").'storage/assets/libs/moment/moment-precise-range.js')}}"></script>

<script>
    
    /*
    var phoneInput = document.getElementById('phonenumber');
    phoneInput.addEventListener('input', function (e) {
      var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
      e.target.value = !x[2] ? x[1] : '' + x[1] + ' ' + x[2] + (x[3] ? ' ' + x[3] : '');
    });
    
    var phoneLogin = document.getElementById('phonenumber-login');
    phoneLogin.addEventListener('input', function (e) {
      var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
      e.target.value = !x[2] ? x[1] : '' + x[1] + ' ' + x[2] + (x[3] ? ' ' + x[3] : '');
    });
    */
    let labId = "{{$labSettings->id}}";
    
    $('#patient_live_search').select2({
        tags: true,
        ajax: {
            url: '{{url('shared/patient')}}/'+labId+'/search',
            dataType: 'json',
            delay: 250
        },
        placeholder: '',
    });
    
    $('#phonenumber-login').select2({
        tags: true,
        ajax: {
            url: '{{url('shared/patient')}}/'+labId+'/search-by-phone',
            data: function (params) {
                if(params.term.length >=9) {
                    var query = {
                    term: params.term
                    }
                }
        
              // Query parameters will be ?search=[term]&type=public
              return query;
            },
            dataType: 'json',
            delay: 250
        },
        placeholder: '',
    });
    
    
    // 0 login, 1 register
    function toogleSection(sectionId = 0){
        if(sectionId == 0){
            /*$('#old-patient-section').removeClass("col-sm-6");
            $('#old-patient-section').removeClass("col-sm-5");
            $('#old-patient-section').addClass("col-sm-7");
            $('#new-patient-section').removeClass("col-sm-6");
            $('#new-patient-section').removeClass("col-sm-7");
            $('#new-patient-section').addClass("col-sm-5");*/
            $('#old-patient-section').css('background-color', 'aliceblue');
            $('#new-patient-section').css('background-color', 'white');
        }
        else{
            /*$('#old-patient-section').removeClass("col-sm-6");
            $('#old-patient-section').removeClass("col-sm-7");
            $('#old-patient-section').addClass("col-sm-5");
            $('#new-patient-section').removeClass("col-sm-6");
            $('#new-patient-section').removeClass("col-sm-5");
            $('#new-patient-section').addClass("col-sm-7");*/
            $('#old-patient-section').css('background-color', 'white');
            $('#new-patient-section').css('background-color', 'aliceblue');
        }
    }
    
    $('#register-patient').on("keyup change", "#year", function (evt) {
        var years  = $("#year").val() || 0;
        var months = 0;
        var days   = 0;
        var dob = moment();
        dob.subtract(days, 'days');
        dob.subtract(months, 'months');
        dob.subtract(years, 'years');
        var dob_split = dob.toDate().toLocaleDateString().split("/")
        var dob = dob_split[1].padStart(2,"0")+'-'+dob_split[0].padStart(2,"0")+'-'+dob_split[2];
        $("#dob").val(dob);
    });
    
    
</script>
</script>

</html>
