<?php if (isset($component)) { $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\AppLayout::class, []); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
    <script src="https://cdn.tailwindcss.com"></script>


<body class="bg-gray-100 p-6">

    <div class="max-w-3xl mx-auto bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-2xl font-bold mb-6 text-center">Registration Form</h2>

       <form action="<?php echo e(route('drivers.store')); ?>" method="POST" enctype="multipart/form-data" class="space-y-4">
    <?php echo csrf_field(); ?>


            <div class="space-y-4">

               <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Name
                        </label>
                    <input type="text" name="name" id="name" required
                        maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">Email
                        </label>
                    <input type="text" name="email" id="email" required
                        maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                 <div>
                    <label for="phone_number" class="block text-sm font-medium text-gray-700">Phone Number
                        </label>
                    <input type="text" name="phone_number" id="phone_number" required
                        maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="driving_license_number" class="block text-sm font-medium text-gray-700">Driving License
                        Number</label>
                    <input type="text" name="driving_license_number" id="driving_license_number" required
                        maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="driving_license_expiry" class="block text-sm font-medium text-gray-700">Driving License
                        Expiry</label>
                    <input type="date" name="driving_license_expiry" id="driving_license_expiry" required
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="pan_card_number" class="block text-sm font-medium text-gray-700">PAN Card Number</label>
                    <input type="text" name="pan_card_number" id="pan_card_number" required maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="aadhar_card_number" class="block text-sm font-medium text-gray-700">Aadhar Card
                        Number</label>
                    <input type="text" name="aadhar_card_number" id="aadhar_card_number" required maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="bike_brand" class="block text-sm font-medium text-gray-700">Bike Brand</label>
                    <input type="text" name="bike_brand" id="bike_brand" required maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="bike_model" class="block text-sm font-medium text-gray-700">Bike Model</label>
                    <input type="text" name="bike_model" id="bike_model" required maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="bike_year" class="block text-sm font-medium text-gray-700">Bike Year</label>
                    <input type="number" name="bike_year" id="bike_year" required min="1900" max="2099"
                        step="1"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="bike_registration_plate" class="block text-sm font-medium text-gray-700">Bike
                        Registration Plate</label>
                    <input type="text" name="bike_registration_plate" id="bike_registration_plate" required
                        maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="vehicle_number" class="block text-sm font-medium text-gray-700">Vehicle Number</label>
                    <input type="text" name="vehicle_number" id="vehicle_number" required maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="chassis_number" class="block text-sm font-medium text-gray-700">Chassis Number</label>
                    <input type="text" name="chassis_number" id="chassis_number" required maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="insurance_number" class="block text-sm font-medium text-gray-700">Insurance
                        Number</label>
                    <input type="text" name="insurance_number" id="insurance_number" required maxlength="255"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="insurance_expiry" class="block text-sm font-medium text-gray-700">Insurance
                        Expiry</label>
                    <input type="date" name="insurance_expiry" id="insurance_expiry" required
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="vehicle_inspection_date" class="block text-sm font-medium text-gray-700">Vehicle
                        Inspection Date</label>
                    <input type="date" name="vehicle_inspection_date" id="vehicle_inspection_date" required
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="inspection_expiry_date" class="block text-sm font-medium text-gray-700">Inspection
                        Expiry Date</label>
                    <input type="date" name="inspection_expiry_date" id="inspection_expiry_date" required
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="location" class="block text-sm font-medium text-gray-700">Location</label>
                    <input type="text" name="location" id="location" required
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="longitude" class="block text-sm font-medium text-gray-700">Longitude</label>
                    <input type="number" name="longitude" id="longitude" required min="-180" max="180"
                        step="0.000001"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="latitude" class="block text-sm font-medium text-gray-700">Latitude</label>
                    <input type="number" name="latitude" id="latitude" required min="-90" max="90"
                        step="0.000001"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>





                <div>
                    <div>
                        <label for="driving_license_front" class="block text-sm font-medium text-gray-700">Driving
                            License
                            Front</label>

                        <input type="file" accept="image/*" name="driving_license_front"
                            id="driving_license_front" class="mt-1 block w-full"
                            onchange="previewImage(event, 'driving_license_front_preview')">
                        <img id="driving_license_front_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="driving_license_back" class="block text-sm font-medium text-gray-700">Driving
                            License
                            Back</label>


                        <input type="file" accept="image/*" name="driving_license_back" id="driving_license_back"
                            class="mt-1 block w-full" onchange="previewImage(event, 'driving_license_back_preview')">
                        <img id="driving_license_back_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="pan_card_photo" class="block text-sm font-medium text-gray-700">PAN Card
                            Photo</label>
                        <input type="file" accept="image/*" name="pan_card_photo" id="pan_card_photo"
                            class="mt-1 block w-full" onchange="previewImage(event, 'pan_card_photo_preview')">
                        <img id="pan_card_photo_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="aadhar_card_front" class="block text-sm font-medium text-gray-700">Aadhar Card
                            Front</label>

                        <input type="file" accept="image/*" name="aadhar_card_front" id="aadhar_card_front"
                            class="mt-1 block w-full" onchange="previewImage(event, 'aadhar_card_front_preview')">
                        <img id="aadhar_card_front_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="aadhar_card_back" class="block text-sm font-medium text-gray-700">Aadhar Card
                            Back</label>

                        <input type="file" accept="image/*" name="aadhar_card_back" id="aadhar_card_back"
                            class="mt-1 block w-full" onchange="previewImage(event, 'aadhar_card_back_preview')">
                        <img id="aadhar_card_back_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="vehicle_picture_front" class="block text-sm font-medium text-gray-700">Vehicle
                            Picture
                            Front</label>

                        <input type="file" accept="image/*" name="vehicle_picture_front"
                            id="vehicle_picture_front" class="mt-1 block w-full"
                            onchange="previewImage(event, 'vehicle_picture_front_preview')">
                        <img id="vehicle_picture_front_preview" class="mt-2 hidden w-32 h-32 object-cover border" />

                    </div>

                    <div>
                        <label for="vehicle_picture_back" class="block text-sm font-medium text-gray-700">Vehicle
                            Picture
                            Back</label>

                        <input type="file" accept="image/*" name="vehicle_picture_back" id="vehicle_picture_back"
                            class="mt-1 block w-full" onchange="previewImage(event, 'vehicle_picture_back_preview')">
                        <img id="vehicle_picture_back_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="vehicle_picture_left" class="block text-sm font-medium text-gray-700">Vehicle
                            Picture
                            Left</label>

                        <input type="file" accept="image/*" name="vehicle_picture_left" id="vehicle_picture_left"
                            class="mt-1 block w-full" onchange="previewImage(event, 'vehicle_picture_left_preview')">
                        <img id="vehicle_picture_left_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="vehicle_picture_right" class="block text-sm font-medium text-gray-700">Vehicle
                            Picture
                            Right</label>

                        <input type="file" accept="image/*" name="vehicle_picture_right"
                            id="vehicle_picture_right" class="mt-1 block w-full"
                            onchange="previewImage(event, 'vehicle_picture_right_preview')">
                        <img id="vehicle_picture_right_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="vehicle_document_1" class="block text-sm font-medium text-gray-700">Vehicle
                            Document
                            1</label>

                        <input type="file" accept="image/*" name="vehicle_document_1" id="vehicle_document_1"
                            class="mt-1 block w-full" onchange="previewImage(event, 'vehicle_document_1_preview')">
                        <img id="vehicle_document_1_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="vehicle_document_2" class="block text-sm font-medium text-gray-700">Vehicle
                            Document
                            2</label>

                        <input type="file" accept="image/*" name="vehicle_document_2" id="vehicle_document_2"
                            class="mt-1 block w-full" onchange="previewImage(event, 'vehicle_document_2_preview')">
                        <img id="vehicle_document_2_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <label for="vehicle_document_3" class="block text-sm font-medium text-gray-700">Vehicle
                            Document
                            3</label>

                        <input type="file" accept="image/*" name="vehicle_document_3" id="vehicle_document_3"
                            class="mt-1 block w-full" onchange="previewImage(event, 'vehicle_document_3_preview')">
                        <img id="vehicle_document_3_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                    </div>

                    <div>
                        <div>
                            <label for="vehicle_document_4" class="block text-sm font-medium text-gray-700">Vehicle
                                Document
                                4</label>
                            <input type="file" accept="image/*" name="vehicle_document_4" id="vehicle_document_4"
                                class="mt-1 block w-full"
                                onchange="previewImage(event, 'vehicle_document_4_preview')">
                            <img id="vehicle_document_4_preview" class="mt-2 hidden w-32 h-32 object-cover border" />
                        </div>

                    </div>
                </div>


            </div>
            <script>
                function previewImage(event, previewId) {
                    const file = event.target.files[0];
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const preview = document.getElementById(previewId);
                        preview.src = e.target.result;
                        preview.classList.remove('hidden');
                    }
                    reader.readAsDataURL(file);
                }
            </script>


            <div class="text-center">
                <button type="submit"
                    class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Submit</button>
            </div>
        </form>
    </div>
</body>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?><?php /**PATH C:\php\xampp\htdocs\admin\resources\views/components/delivery_add.blade.php ENDPATH**/ ?>