@extends('layouts/main')

@section('body')
    @include('layouts.navbar')

    <div class="container mx-auto sm:px-5">
        <section class="bg-gray-50 dark:bg-gray-900 sm:pt-5">
            <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0">
                {{-- <a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
                <img class="w-8 h-8 mr-2" src="{{ asset('images/amardriver-logo.png') }}" alt="logo">
                AmarDriver
            </a> --}}
                <div
                    class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-2xl xl:p-0 dark:bg-gray-800 dark:border-gray-700">
                    <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                        <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                            Apply Driving Job
                        </h1>
                        <p>If you need a driving job. Fill this form than submit.</p>
                        <x-validation-errors />
                        <form action="{{ route('applyJob.store') }}" class="space-y-4 md:space-y-6" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @guest
                                <div>
                                    <label for="name" class="block mb-2 text-sm font-medium text-red-500">Your
                                        Name</label>
                                    <input type="text" name="name" id="name"
                                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                        placeholder="enter your full name" required="" value="{{ old('name') }}">
                                </div>

                                <div>
                                    <label for="mobile" class="block mb-2 text-sm font-medium text-red-500">
                                        Mobile Number</label>
                                    <input type="number" name="mobile" id="mobile"
                                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                        placeholder="your mobile number" required="" value="{{ old('mobile') }}">
                                </div>

                                <div>
                                    <label for="email" class="block mb-2 text-sm font-medium text-red-500">
                                        Email Address</label>
                                    <input type="email" name="email" id="email"
                                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                        placeholder="your email address" required="" value="{{ old('email') }}">
                                </div>
                            @endguest

                            <div>
                                <label for="religion" class="block mb-2 text-sm font-medium text-red-500">
                                    Religion</label>
                                <select id="religion" name="religion" required
                                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                    <option value="" selected>Choose a religion</option>
                                    <option>Islam</option>
                                    <option>Hinduism</option>
                                    <option>Buddhism</option>
                                    <option>Christianity</option>
                                    <option>Others</option>
                                </select>

                            </div>

                            <div>
                                <label for="birthday" class="block mb-2 text-sm font-medium text-red-500">
                                    Birthday</label>
                                <input type="date" name="birthday" id="birthday"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                    required="" value="{{ old('birthday') }}">
                            </div>

                            <div>
                                <label for="driving_experience" class="block mb-2 text-sm font-medium text-red-500">
                                    Driving Experience</label>
                                <div class="relative w-full">
                                    <input type="number" name="driving_experience" id="driving_experience"
                                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                        required="" placeholder="Driving experience"
                                        value="{{ old('driving_experience') }}">
                                    <span
                                        class="absolute top-0 right-0 p-2.5 text-sm font-medium text-white bg-primary-700 rounded-r-lg border border-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                                        Years
                                    </span>
                                </div>
                            </div>

                            <div>
                                <label for="present_region" class="block mb-2 text-sm font-medium text-red-500">Present
                                    Region</label>
                                <select id="present_region" name="present_region" required
                                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                    <option value="" selected>Choose a region</option>
                                    <option>barisal</option>
                                    <option>chittagong</option>
                                    <option>dhaka</option>
                                    <option>khulna</option>
                                    <option>mymensingh</option>
                                    <option>rajshahi</option>
                                    <option>rangpur</option>
                                    <option>sylhet</option>
                                </select>
                            </div>

                            <div>
                                <label for="present_district" class="block mb-2 text-sm font-medium text-red-500">Present
                                    District</label>
                                <select id="present_district" name="present_district" required
                                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                    <option value="" selected>Choose a district</option>
                                </select>
                            </div>

                            <div>
                                <label for="present_sub_district"
                                    class="block mb-2 text-sm font-medium text-red-500">Present Sub
                                    District</label>
                                <select id="present_sub_district" name="present_sub_district" required
                                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                    <option value="" selected>Choose a sub district</option>
                                </select>
                            </div>

                            <div>
                                <label for="present_area" class="block mb-2 text-sm font-medium text-red-500">Present
                                    Address
                                    Area</label>
                                <input type="text" name="present_area" id="present_area"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                    placeholder="address area" required="">
                            </div>

                            <div>
                                <label for="home_region" class="block mb-2 text-sm font-medium text-red-500">Home
                                    Region</label>
                                <select id="home_region" name="home_region" required
                                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                    <option value="" selected>Choose a region</option>
                                    <option>barisal</option>
                                    <option>chittagong</option>
                                    <option>dhaka</option>
                                    <option>khulna</option>
                                    <option>mymensingh</option>
                                    <option>rajshahi</option>
                                    <option>rangpur</option>
                                    <option>sylhet</option>
                                </select>
                            </div>

                            <div>
                                <label for="home_district" class="block mb-2 text-sm font-medium text-red-500">Home
                                    District</label>
                                <select id="home_district" name="home_district" required
                                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                    <option value="" selected>Choose a district</option>
                                </select>
                            </div>

                            <div>
                                <label for="home_sub_district" class="block mb-2 text-sm font-medium text-red-500">Home
                                    Sub
                                    District</label>
                                <select id="home_sub_district" name="home_sub_district" required
                                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                    <option value="" selected>Choose a sub district</option>
                                </select>
                            </div>

                            <div>
                                <label for="home_area" class="block mb-2 text-sm font-medium text-red-500">Home Address
                                    Area</label>
                                <input type="text" name="home_area" id="home_area"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                    placeholder="address area" required="">
                            </div>

                            <div>
                                <label for="bio" class="block mb-2 text-sm font-medium text-red-500">Your
                                    Bio</label>
                                <textarea id="bio" name="bio" rows="4"
                                    class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                    placeholder="Write your self..."></textarea>
                            </div>

                            @guest
                                <div x-data="{ show: false }">
                                    <label for="password" class="block mb-2 text-sm font-medium text-red-500">Password</label>
                                    <div class="relative">
                                        <input :type="show ? 'text' : 'password'" name="password" id="password"
                                            placeholder="type a strong password"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                            required="">
                                        <div class="absolute inset-y-0 right-1 pr-3 flex items-center text-sm leading-5">

                                            <svg class="h-6 text-gray-700 dark:text-gray-300" fill="none"
                                                @click="show = !show" :class="{ 'hidden': !show, 'block': show }"
                                                xmlns="http://www.w3.org/2000/svg" viewbox="0 0 576 512">
                                                <path fill="currentColor"
                                                    d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                                                </path>
                                            </svg>

                                            <svg class="h-6 text-gray-700 dark:text-gray-300" fill="none"
                                                @click="show = !show" :class="{ 'block': !show, 'hidden': show }"
                                                xmlns="http://www.w3.org/2000/svg" viewbox="0 0 640 512">
                                                <path fill="currentColor"
                                                    d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z">
                                                </path>
                                            </svg>

                                        </div>
                                    </div>
                                </div>

                                <div x-data="{ show: false }">
                                    <label for="password_confirmation"
                                        class="block mb-2 text-sm font-medium text-red-500">Confirm
                                        Password</label>
                                    <div class="relative">
                                        <input :type="show ? 'text' : 'password'" name="password_confirmation"
                                            id="password_confirmation" placeholder="confirm strong password"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                            required="">
                                        <div class="absolute inset-y-0 right-1 pr-3 flex items-center text-sm leading-5">

                                            <svg class="h-6 text-gray-700 dark:text-gray-300" fill="none"
                                                @click="show = !show" :class="{ 'hidden': !show, 'block': show }"
                                                xmlns="http://www.w3.org/2000/svg" viewbox="0 0 576 512">
                                                <path fill="currentColor"
                                                    d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                                                </path>
                                            </svg>

                                            <svg class="h-6 text-gray-700 dark:text-gray-300" fill="none"
                                                @click="show = !show" :class="{ 'block': !show, 'hidden': show }"
                                                xmlns="http://www.w3.org/2000/svg" viewbox="0 0 640 512">
                                                <path fill="currentColor"
                                                    d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z">
                                                </path>
                                            </svg>

                                        </div>
                                    </div>
                                </div>
                            @endguest

                            <div>
                                <label class="block mb-2 text-sm font-medium text-red-500" for="photo">Your
                                    Photo</label>
                                <input width="1" height="1"
                                    class="crop-image block w-full mb-5 text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                                    id="photo" name="photo" type="file" accept="image/*">
                            </div>

                            <div>
                                <label class="block mb-2 text-sm font-medium text-red-500"
                                    for="driving_license_front_part">Driving License Front Part</label>
                                <input width="16" height="10"
                                    class="crop-image block w-full mb-5 text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                                    id="driving_license_front_part" name="driving_license_front_part" type="file"
                                    accept="image/*">
                            </div>

                            <div>
                                <label class="block mb-2 text-sm font-medium text-red-500"
                                    for="driving_license_back_part">Driving License Back Part</label>
                                <input width="16" height="10"
                                    class="crop-image block w-full mb-5 text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                                    id="driving_license_back_part" name="driving_license_back_part" type="file"
                                    accept="image/*">
                            </div>

                            <div>
                                <p class="dark:text-gray-200 text-sm font-medium">Read Our <a href="#"
                                        class="text-primary-600 hover:underline dark:text-primary-500">
                                        Trams & Comdition </a></p>
                            </div>

                            <button type="submit"
                                class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Submit</button>
                            @guest
                                <p class="text-sm font-light text-gray-500 dark:text-gray-400">
                                    You have an account? <a href="{{ route('login') }}"
                                        class="font-medium text-primary-600 hover:underline dark:text-primary-500">Login</a>
                                </p>
                            @endguest
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
    @vite(['resources/js/apply-job.js'])
@endsection