@extends('layouts.master')
@section('title', pageTitle('Create Driver'))
@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">Driver'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.drivers.store') }}" enctype="multipart/form-data" 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="6">{{ 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 mb-3 theme-form">
                                        <label for="nin" class="sr-only">NIN</label>
                                        <input class="form-control @error('nin') is-invalid @enderror form-control-lg"
                                            type="number" name="nin" id="nin" required value="{{ old('nin') }}"
                                            placeholder="NIN">
                                    </div>

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

                            <div class="col-md-12">
                                <label for="avatar">Upload Driver Image</label>
                                        <input type="file" class="dropify"
                                        data-height="200"
                                        data-max-file-size="1M"
                                        data-allowed-file-extensions="jpeg png jpg"
                                        name="avatar"/>
                            </div>
                            </hr>

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

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

                            <div class="col-md-6 mb-3 theme-form">
                                <label for="guarantor_lname" class="sr-only">Last Name/Surname</label>
                                <input class="form-control @error('guarantor_lname') is-invalid @enderror form-control-lg"
                                    type="text" name="guarantor_lname" id="guarantor_lname" required
                                    value="{{ old('guarantor_lname') }}" placeholder="Last Name/Surname">
                            </div>
                            <div class="col-md-6 mb-3 theme-form">
                                <label for="guarantor_phone" class="sr-only">Phone Number</label>
                                <input class="form-control @error('guarantor_phone') is-invalid @enderror form-control-lg"
                                    type="number" name="guarantor_phone" id="guarantor_phone" required
                                    value="{{ old('guarantor_phone') }}" placeholder="Phone Number">
                            </div>

                            <div class="col-md-6 mb-3 theme-form">
                                <label for="guarantor_nin" class="sr-only">NIN</label>
                                <input class="form-control @error('guarantor_nin') is-invalid @enderror form-control-lg"
                                    type="number" name="guarantor_nin" id="guarantor_nin" required
                                    value="{{ old('guarantor_nin') }}" placeholder="NIN">
                            </div>
                            <div class="col-md-12 mb-3 theme-form">
                                <label for="guarantor_address" class="sr-only">Parmanent Address</label>
                                <textarea class="form-control @error('guarantor_address') is-invalid @enderror form-control-lg"
                                    name="guarantor_address" id="guarantor_address" required placeholder="Parmanent Address" rows="3">{{ old('guarantor_address') }}</textarea>
                            </div>
                            <div class=" col-md-12 theme-form">
                                <label for="relationship_id" class="sr-only">Relationship</label>
                                <select name="relationship_id" id="relationship_id" class="form-control select2 form-control-lg" aria-placeholder="Relationship">
                                    <option value="0">Select Relationship</option>
                                    @if (isset($relationships) && count($relationships) > 0)
                                      @foreach ($relationships as $relationship)
                                        <option value="{{ $relationship->id }}">{{ $relationship->name  }}</option>
                                      @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-md-12 mb-3 theme-form">
                                <label for="guarantor_waddress" class="sr-only">Work Address</label>
                                <textarea class="form-control @error('guarantor_waddress') is-invalid @enderror form-control-lg"
                                    name="guarantor_waddress" id="guarantor_waddress" required placeholder="Work Address" rows="3">{{ old('guarantor_waddress') }}</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')
    <script type="text/javascript" src="{{ asset('/assets/js/fileuploads/js/fileupload.js') }}"></script>
    <script type="text/javascript" src="{{ asset('/assets/js/fileuploads/js/file-upload.js') }}"></script>
    <!-- Select2 js-->
    <script src="{{ asset('/assets/plugins/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('/assets/js/select2.js') }}"></script>
@stop