@extends('layouts.front_layout')
    @section('content')
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-md-8 col-12">
                    <div class="flash_messages">
                        @include('flash_messages.admin_message')
                    </div>
                    <div class="py-4 px-xl-5 px-md-5 px-3 bg-white shadow">
                        <div class="logo mb-3"><img src="{{ asset('storage/'.getSettingData('company_logo')) }}" class="img-fluid m-auto d-block" alt=""></div>
                        <hr>
                        <!-- <h3 class="p-2 text-center mb-4 sub-heading">GIC Re</h3> -->
                        <h5 class="text-center mb-4 login-title">Login for Registered Users</h5>
                        <div class="row justify-content-center">
                            <div class="col-md-12">
                                {!! Form::open(['method' => 'post', 'route' => ['account_login'], 'class' => 'custom-form login-form LoginFormValidate']) !!}
                                    <div class="row">
                                        <div class="form_group col-md-12 mb-3">
                                            <div class="form-floating">
                                                <div class="form-floating">
                                                    {!! Form::select('id_type', id_type_list(), null, ['class' => 'form-select']) !!}
                                                    <label for="floatingidtype">Identify By</label>
                                                </div>
                                                <span class="error">{{ $errors->first('id_type') }}</span>
                                            </div>
                                        </div>
                                        <div class="form_group col-md-12 mb-3">
                                            <div class="form-floating">
                                                {!! Form::text('id_number', null, ['class' => 'form-control']) !!}
                                                <label for="floatingidNumber">Enter ID Number</label>
                                                <span class="error">{{ $errors->first('id_number') }}</span>
                                            </div>
                                        </div>
                                        <div class="form_group col-md-12 mb-3">
                                            <div class="form-floating">
                                                {!! Form::date('dob', null, ['class' => 'form-control', 'max' => date('Y-m-d')]) !!}
                                                <label for="floatingDate">DOB</label>
                                                <span class="error">{{ $errors->first('dob') }}</span>
                                            </div>
                                        </div>
                                        <!-- <div class="col-md-12">
                                            <div class="mb-3">
                                                <div class="row">
                                                    <div class="col-5">
                                                        <div id="captcha-img">
                                                            <img src="images/captcha-code.png" class="img-fluid" alt="">
                                                            <a class="mt-2 d-inline-block text-decoration-underline" href="javascript:void(0);">Refresh Captcha</a>
                                                        </div>
                                                    </div>
                                                    <div class="col-7">
                                                        <input type="text" class="form-control" placeholder="Enter Captcha">
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                        <div class="col-md-12">
                                            <div class="btn-wrapper text-center mt-2">
                                                <button type="submit" class="custom-btn btn mx-1 mb-4">Login </button>
                                                <button type="reset" class="btn btn-secondary mx-1 mb-4">Clear</button>
                                                <!-- <a href="forget-password.html">Clear</a> -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center">
                                    </div>
                                    <div class="text-center my-4">
                                        <h6>If you are a first time user, please <a href="{{ route('registration') }}">click here</a> to register</h6>
                                    </div>
                                    <div class="text-center">
                                        <span>{{ getSettingData('config_company_name') }}</span>
                                    </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="{{ asset('frontend/js/validation/jquery.validate.js') }}"></script>

        <script type="text/javascript">
            $('.LoginFormValidate').validate({
                rules: {
                    "id_type": {
                        required : true,
                    },
                    "id_number": {
                        required : true,
                    },
                    "dob": {
                        required : true,
                    },
                },
                messages: {
                    "id_type": {
                        required: "Please Select Identity",
                    },
                    "id_number": {
                        required: "Please Enter Id Number",
                    },
                    "dob": {
                        required: "Please Select DOB",
                    },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form_group').append(error);
                },
            });
        </script>
    @endsection