@extends('layouts.user-inner')
@push('custom-styles')
    <style>
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0;
        }

        .error {
            color: red;
        }
    </style>
@endpush
@section('content')
    <!-- Ec breadcrumb start -->
    <div class="sticky-header-next-sec  ec-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row ec_breadcrumb_inner">
                        <div class="col-md-12 col-sm-12">
                            <!-- ec-breadcrumb-list start -->
                            <ul class="ec-breadcrumb-list">
                                <li class="ec-breadcrumb-item"><a href="/">Home</a></li>
                                <li class="ec-breadcrumb-item active">MOI Eye Test</li>
                            </ul>
                            <!-- ec-breadcrumb-list end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Ec breadcrumb end -->

    <!-- Mou starts-->
    <div class="container-fluid py-5" id="mou">
        <div class="container px-0">
            <div class="col-md-12 text-center">
                <div class="section-title">
                    <h2 class="ec-bg-title">MOI Eye Test</h2>
                    <h2 class="ec-title">MOI Eye Test</h2>

                </div>
            </div>
            <form action="/send-moi-mail" method="post" class="border rounded shadow p-2 p-md-4 col-12 col-md-8 mx-auto"
                id="moi-form">
                @csrf
                <div class="row px-0 mx-0">
                    <div class="col-12 col-sm-6 p-3">
                        <p>First name</p>
                        <input type="text" class="form-control" placeholder="First name" aria-label="First name"
                            name="first_name" id="first_name" value="{{ old('first_name') }}" required>
                    </div>
                    <div class="col-12 col-sm-6  p-3">
                        <p>Last name</p>
                        <input type="text" class="form-control" placeholder="Last name" aria-label="Last name"
                            name="last_name" id="last_name" value="{{ old('last_name') }}" required>
                    </div>
                    <div class="col-12 col-sm-6 p-3">
                        <p>Gender</p>
                        <select id="inputState" class="form-select form-control  border" name="gender" id="gender"
                            required>
                            <option selected>Gender</option>
                            <option value="Female" @if (old('gender') == 'Female') selected @endif>Female</option>
                            <option value="Male" @if (old('gender') == 'Male') selected @endif>Male</option>
                            <option value="Other" @if (old('gender') == 'other') selected @endif>Other</option>
                        </select>
                    </div>
                    <div class="col-12 col-sm-6 p-3">
                        <p>Date of Birth</p>
                        <input type="date" class="form-control" placeholder="Date of Birth" aria-label="Date of Birth"
                            name="dob" id="dob" value="{{ old('dob') }}" style="padding-right: 8px;" required>
                    </div>
                    <div class="col-12 col-sm-6 p-3">
                        @php
                            $nationalities = getNationalities();
                        @endphp
                        <p>Nationality</p>
                        <select id="inputState" class="form-select form-control  border" name="nationality" id="nationality"
                            required>
                            <option selected>Nationality</option>
                            @foreach ($nationalities as $nationality)
                                <option value="{{ $nationality->nationality_name }}"
                                    @if (old('nationality') == $nationality->nationality_name) selected @endif>{{ $nationality->nationality_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-sm-6 p-3">
                        <p>Phone Number</p>
                        <input type="number" class="form-control" id="Phone" placeholder="Phone Number" name="phone"
                            id="phone" value="{{ old('phone') }}" required>
                    </div>
                    <div class="col-12 col-sm-6 p-3">
                        <p>Branch</p>
                        <select id="inputbranch" class="form-select form-control  border" name="branch" id="branch"
                            required>
                            <option selected value="">Select Branch</option>
                            @foreach ($locations as $locs)
                                <option value="{{ $locs->location_name }}"
                                    @if (old('branch') == $locs->location_name) selected @endif>{{ $locs->location_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-sm-6 p-3">
                        <p>Email Address</p>
                        <input type="email" class="form-control" id="email" placeholder="Email Address" name="email"
                            id="email" value="{{ old('email') }}" required>
                    </div>

                    <div class="col-12 p-3  mx-auto text-center">
                        <button type="submit" class="login-button"> Submit</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12 mt-3">
                        @if ($errors->any())
                            {!! implode(
                                '',
                                $errors->all('<div style="" class="alert alert-fail btn-danger">&nbsp;&nbsp;&nbsp;<span class="closebtn"
                                                                                    onclick="this.parentElement.style.display=\'none\';">&times;</span>&nbsp;&nbsp;&nbsp;:message
                                                                            </div>'),
                            ) !!}
                        @endif
                        @if (Session::has('errorcust'))
                            <div style="" class="alert alert-fail btn-danger">&nbsp;&nbsp;&nbsp;<span class="closebtn"
                                    onclick="this.parentElement.style.display='none';">&times;</span>&nbsp;&nbsp;&nbsp;{{ Session::get('errorcust') }}
                            </div>
                        @endif
                        @if (Session::has('success'))
                            <script>
                                swal("Request Send Successfully!",
                                    "We have received your request. We will get back to you shortly",
                                    "success");
                            </script>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Mou ends-->
@endsection
@push('custom-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
    <script>
        // Validation
        $.validator.addMethod("customemail", function(value, element) {
                return /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
            },
            "Please enter a valid email"
        );
        $.validator.addMethod("minDate", function(value, element) {
                var now = new Date().getFullYear();
                var myDate = new Date(value).getFullYear();
                return this.optional(element) || myDate < now;
            },
            "Please enter a valid date"
        );


        $("#moi-form").validate({
            rules: {
                email: {
                    required: true,
                    maxlength: 150,
                    customemail: true
                },
                first_name: {
                    required: true,
                    maxlength: 150
                },
                last_name: {
                    required: true,
                    maxlength: 150
                },
                dob:{
                    minDate: true
                },
                phone: {
                    required: true,
                    maxlength: 11,
                    minlength: 8
                }

            },

        });
    </script>
@endpush