@extends('layouts.master')
@section('title', pageTitle('Onboard Passenger'))
@section('content')
    @include('sections.breadcrumb')

    <div class="container-fluid" id="driver-page">
        <div class="row justify-content-center">
            <div class="col-xl-8 pt-5">
                <div class="card height-equal">
                    <div class="card-header pb-0">
                        <h1 class="font-weight-bold">Passenger's Information</h1>
                    </div>
                    <div class="card-body">
                        @include('sections.messages')

                        <form class="row g-3 needs-validation custom-input form-loader"
                            action="{{ route('admin.passengers.store') }}" method="POST">
                            @csrf

                            <div class="col-md-6 theme-form">
                                <label for="first_name" class="sr-only">First Name</label>
                                <input class="form-control @error('first_name') is-invalid @enderror form-control-lg"
                                    type="text" name="first_name" id="first_name" required
                                    value="{{ old('first_name') }}" placeholder="First Name">
                            </div>

                            <div class="col-md-6 mb-3 theme-form">
                                <label for="last_name" class="sr-only">Last Name</label>
                                <input class="form-control @error('last_name') is-invalid @enderror form-control-lg"
                                    type="text" name="last_name" id="last_name" required value="{{ old('last_name') }}"
                                    placeholder="Surname/Last Name">
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="address" class="sr-only">Address</label>
                                <textarea class="form-control @error('address') is-invalid @enderror form-control-lg" name="address" id="address"
                                    placeholder="Parmanent Address" rows="5">{{ old('address') }}</textarea>
                            </div>

                            <div class="col-md-6 mb-1">
                                <div class="row">
                                    <div class="col-md-12 mb-3 theme-form">
                                        <label for="phone" class="sr-only">Phone Number</label>
                                        <input class="form-control @error('phone') is-invalid @enderror form-control-lg"
                                            type="number" 
                                            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                            pattern="\d*" maxlength="11" 
                                            name="phone" id="phone" required value="{{ old('phone') }}"
                                            placeholder="Phone Number">
                                    </div>

                                    <div class="col-md-12 theme-form">
                                        <label for="email" class="sr-only">Email Address (optional)</label>
                                            <input class="form-control @error('email') is-invalid @enderror form-control-lg"
                                                type="email" name="email" id="email"
                                                value="{{ old('email') }}" placeholder="Email Address">
                                    </div>
                                </div>
                            </div>

                            </hr>

                            <div class="card-header pb-0 mb-5 mt-5">
                                <h1 class="font-weight-bold">Next of Kin's Information</h1>
                                <hr>
                            </div>

                            <div class="col-md-6 theme-form">
                                <label for="nok_first_name" class="sr-only">First Name</label>
                                <input class="form-control @error('nok_first_name') is-invalid @enderror form-control-lg"
                                    type="text" name="nok_first_name" id="nok_first_name" required
                                    value="{{ old('nok_first_name') }}" placeholder="Next of Kin First Name">
                            </div>

                            <div class="col-md-6 mb-3 theme-form">
                                <label for="nok_last_name" class="sr-only">Last Name/Surname</label>
                                <input class="form-control @error('nok_last_name') is-invalid @enderror form-control-lg"
                                    type="text" name="nok_last_name" id="nok_last_name" required
                                    value="{{ old('nok_last_name') }}" placeholder="Next of Kin Name/Surname">
                            </div>
                            <div class="col-md-12 mb-3 theme-form">
                                <label for="nok_phone" class="sr-only">Phone Number</label>
                                <input class="form-control @error('nok_phone') is-invalid @enderror form-control-lg"
                                    type="number"
                                    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                    pattern="\d*" maxlength="11"  
                                    name="nok_phone" id="nok_phone" required
                                    value="{{ old('nok_phone') }}" placeholder="Phone Number">
                            </div>
                            
                            <div class="col-md-12 mb-3 theme-form">
                                <label for="nok_address" class="sr-only">Address</label>
                                <textarea class="form-control @error('nok_address') is-invalid @enderror form-control-lg"
                                    name="nok_address" id="nok_address" required placeholder="Address" rows="3">{{ old('nok_address') }}</textarea>

                            </div>


                            <div class="col-12 ">
                                <button class="btn btn-primary" type="submit">Submit form <i
                                        class="fa-regular fa-arrow-right-to-arc"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
@section('page-styles')
    <style>
        .select2-container--default .select2-selection--single {
            height: 48px !important;
            border-radius: 10px !important;
        }

        .select2-container .select2-selection--single {
            height: 48px !important;
            padding: 4px;
        }
    </style>
@stop
@section('page-scripts')
    <!-- Select2 js-->
    <script src="{{ asset('/assets/plugins/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('/assets/js/select2.js') }}"></script>
@stop