@extends('layout.mainlayout-without-img')
<style>
    input[type="date"]
    {
        display:block;

        /* Solution 1 */
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        min-height: 1.2em;

        /* Solution 2 */
        /* min-width: 96%; */
    }
    blinkid-in-browser {
        /* Customization of UI - see variables in src/components/shared/styles/_globals.scss */
        /* --mb-component-background: red; */
        --mb-component-background:transparent;
        --mb-font-family: inherit;
        --mb-component-font-color: #fff;
        --mb-component-border-color:transparent;
        }
    blinkid-in-browser::part(mb-component) {
        font-size: 17px;
    }
    blinkid-in-browser::part(mb-component-action-label) {
        color:red;f
    }
</style>
{{--<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/scanSignUp.js"></script>--}}
@section('content')
    <div class="full-page singup pb-4">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-sm-6 col-md-5 col-lg-4">
                    <div class="singup-form info-form">
                        <div class="form-cntnt text-center">
                            <h2 class="h2 logo-name" id="logo-h2"><img @if(!empty(config('services.PROFILE_ID'))) src="/images/{{config('services.PROFILE_LOGO')}}" @else src="/images/logo-white.png" @endif style="width:200px;" /></h2>
                        </div> <!-- Form Content -->
                         {{--<div class="mt-5" style="display:flex;">
                        <blinkid-in-browser
                            dir="rtl"
                            style="width: 100%;font-size: 17px;"
                            license-key="sRwAAAYKYmxhem1hLmRldjILwY7mlZA/V5T70VLviJpnJv2ojXRScF0LdCRZG2XcfbgOrT21QpT9oxrCK7Lz/+3Qa+26IafAMytHmCj4hr5rvrfI2yw9cYD0R6Wx6kM1ID+/JQhBfZSC713FC5qk9fbpbAg5lQHRWm/eSUNA6WIeSzjpM6L6kRdjScy70NLA2oCUupMQkL4NsGq9ZPizJwAHhPwPbFKbr/9K8MMeD7wRq5dBnxc9X9Fo"
                            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': 'املأ المعلومات من الكاميرا'
                        };
                        </script>
                     </div>--}}
                        <form class="main-form my-5" action="/">
                            <div class="form-desc">
                                <h3 class="h4 form-head mb-0">{{trans("web.sign_up")}}</h3> <br />
                            </div> <!-- Form Description -->
                            <div class="row">
                                <div class="col">
                                    <div class="alert alert-danger" role="alert" style="display: none;"></div>
                                </div>
                            </div>
                            <div class="all-form">
                                <div class="fields num my-4">
                                    <div class="name mb-3">
                                        <label for="user-name" class="d-block">{{trans("web.full_name")}}</label>
                                        <input type="text" id="full-name" class="d-block w-100">
                                    </div>
                                    <div class="natunality mb-3">
                                        <label for="natunality" class="d-block">{{trans("web.nationality")}}</label>
                                        <select name="natunality" id="nationality" class="d-block w-100" style="-webkit-appearance: menulist;">
                                            <option value=""></option>
                                            @foreach($countries as $country)
                                                <option value="{{$country->id}}"iso2="{{$country->code}}" >@if(app('translator')->getLocale() == "ar"){{$country->ar_name}}@else{{$country->name}}@endif</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="natunality mb-3">
                                        <label for="identification-type" class="d-block">{{trans("web.identity_type")}}</label>
                                        <select name="identification-type" id="identification-type" class="d-block w-100" style="-webkit-appearance: menulist;">
                                            <option value=""></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>
                                        </select>
                                    </div>
                                    <div class="id-num mb-3">
                                        <label for="id-num" class="d-block">{{trans("web.identity")}}</label>
                                        <input type="text" id="identification" class="d-block w-100">
                                    </div>
                                    <div class="id-num mb-3">
                                        <label for="id-num" class="d-block">{{trans("web.passport_number")}}</label>
                                        <input type="text" id="passport" class="d-block w-100">
                                    </div>
                                    <div class="gender mb-3">
                                        <label for="gender" class="d-block">{{trans("web.gender")}}</label>
                                        <select name="gender" id="gender" class="d-block w-100" style="-webkit-appearance: menulist;">
                                            <option value="">{{trans("web.please_select")}}</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 class="birthdate mb-5">
                                        <label for="birthdate" class="d-block">{{trans("web.dob")}}</label>
                                        <input type="date" id="dob" class="d-block w-100" >
                                    </div>
                                    <div class="field mb-5">
                                        <label for="reason" class="d-block">{{trans("web.reason")}}</label>
                                        <select name="test-reason" id="reason" class="d-block w-100" style="-webkit-appearance: menulist;">
                                            <option value=""></option>
                                            <option value="0">{{trans("web.diagnosis")}}</option>
                                            <option value="1">{{trans("web.out_ksa")}}</option>
                                            <option value="2">{{trans("web.in_umra")}}</option>
                                            <option value="3">{{trans("web.in_ksa")}}</option>
                                        </select>
                                    </div>
                                    @if(!empty(session('qr')))
                                       {{-- <div class="id-num mb-5">
                                            <label for="id-num" class="d-block">{{trans("web.district")}}</label>
                                            <input type="text" id="district" class="d-block w-100" placeholder=""/>
                                        </div>--}}
                                       {{-- <div class="field mb-5">
                                            <label for="occupation" class="d-block">{{trans("web.occupation")}}</label>
                                            <select name="occupation" id="occupation" class="d-block w-100" style="-webkit-appearance: menulist;">
                                                <option value=""></option>
                                                <option value="1">{{trans("web.hw")}}</option>
                                                <option value="2">{{trans("web.eg")}}</option>
                                                <option value="3">{{trans("web.ep")}}</option>
                                                <option value="4">{{trans("web.wg")}}</option>
                                                <option value="5">{{trans("web.wp")}}</option>
                                                <option value="6">{{trans("web.wi")}}</option>
                                                <option value="7">{{trans("web.un")}}</option>
                                            </select>
                                        </div>
                                        <div class="id-num mb-5" style="display: none;">
                                            <label for="workplace" class="d-block">{{trans("web.work_place")}}</label>
                                            <input type="text" id="workplace" class="d-block w-100" placeholder=""/>
                                        </div>
                                        <div class="birthdate field mb-5">
                                            <label for="symptoms" class="d-block">{{trans("web.symptoms")}}</label>
                                            <select name="symptoms" id="symptoms" class="d-block w-100" style="-webkit-appearance: menulist;">
                                                <option value="0">{{trans("web.no")}}</option>
                                                <option value="1">{{trans("web.yes")}}</option>
                                            </select>
                                        </div>--}}

                                        @if(!empty($enable_seha))
                                        <div class="field mb-5">
                                            <div class="birthdate field mb-5">
                                                <label for="cert" class="d-block">{{trans("web.seha_cert")}}</label>
                                                <select name="cert" id="cert" class="d-block w-100" style="-webkit-appearance: menulist;">
                                                    <option value="0">{{trans("web.no")}}</option>
                                                    <option value="1">{{trans("web.yes")}}</option>
                                                </select>
                                            </div> <!-- End Birthdate -->
                                        </div>
                                        @endif
                                    @endif
                                </div> <!-- End Fields Number-->
                            </div>
                            <div class="btns text-center my-3" style="bottom: -16px;">
                                <button id="next-signup-email" class="btn next-btn d-block w-100">{{trans("web.next")}}</button>
                            </div> <!-- End Buttons Div-->
                        </form> <!-- End Main Form -->
                        <footer class="form-footer text-center d-sm-block">
                            <p class="copy">{{trans("web.footer_stamp")}}</p>
                            <a href="#" class="link d-block">{{trans("web.policy")}}</a>
                            <a href="#" class="link d-block">{{trans("web.terms")}}</a>
                        </footer>
                    </div>
                </div> <!-- End column -->
            </div> <!-- End Row -->
        </div> <!-- End Container-->
    </div> <!-- End Full Page -->

@endsection






<b></b>