<?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([]); ?>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vendor Registration</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body class="">

    <div class="max-w-4xl mx-auto p-8 bg-white shadow-xl rounded-lg my-10">
        <h1 class="text-3xl font-extrabold mb-6 text-center text-gray-800">Vendor Registration Form</h1>
        
        <!-- Success or Error Alert -->
        <?php if(session('success')): ?>
            <div class="alert alert-success p-4 mb-6 bg-green-100 text-green-700 rounded-lg">
                <?php echo e(session('success')); ?>

            </div>
        <?php elseif(session('error')): ?>
            <div class="alert alert-danger p-4 mb-6 bg-red-100 text-red-700 rounded-lg">
                <?php echo e(session('error')); ?>

            </div>
        <?php endif; ?>

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

            <!-- User Information -->
            <section class="space-y-4">
                <h3 class="text-xl font-semibold text-indigo-700">User Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-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 p-3 w-full border border-gray-300 rounded-lg 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="email" name="email" id="email" required class="mt-1 p-3 w-full border border-gray-300 rounded-lg 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 pattern="[0-9]{10}" class="mt-1 p-3 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
                    </div>

                    <div style="display: none;">
                        <label for="role" class="block text-sm font-medium text-gray-700">Role</label>
                        <select name="role" id="role" class="mt-1 p-3 w-full border border-gray-300 rounded-lg">
                            <option value="vendor">Vendor</option>
                            <option value="user">User</option>
                            <option value="driver">Driver</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>
                </div>
            </section>

            <!-- Vendor Information -->
            <section class="space-y-4">
                <h3 class="text-xl font-semibold text-indigo-700">Vendor Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="store_name" class="block text-sm font-medium text-gray-700">Store Name</label>
                        <input type="text" name="store_name" id="store_name" required maxlength="255" class="mt-1 p-3 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
                    </div>

                    <div>
                        <label for="complete_address" class="block text-sm font-medium text-gray-700">Complete Address</label>
                        <textarea name="complete_address" id="complete_address" required class="mt-1 p-3 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"></textarea>
                        
        
                    </div>

                    <div>
                        <label for="gstin" class="block text-sm font-medium text-gray-700">GSTIN</label>
                        <input type="text" name="gstin" id="gstin" required class="mt-1 p-3 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
                    </div>

                    <div>
                        <label for="pan" class="block text-sm font-medium text-gray-700">PAN</label>
                        <input type="text" name="pan" id="pan" required maxlength="10" class="mt-1 p-3 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
                    </div>

                    
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map {
            height: 300px;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
    </style>

  

        <div>
            <label for="longitude" class="block text-sm font-medium text-gray-700">Longitude</label>
            <input type="text" name="longitude" id="longitude" readonly 
                class="mt-1 p-3 w-full border border-gray-300 rounded-lg 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="text" name="latitude" id="latitude" readonly 
                class="mt-1 p-3 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
        </div>

        <div id="map"></div>
   

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        // Initialize the map
        const map = L.map('map').setView([30.3165, 78.0322], 13); // Default to Dehradun

        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Draggable marker
        let marker = L.marker([30.3165, 78.0322], { draggable: true }).addTo(map);

        // Update latitude and longitude fields on marker drag
        marker.on('dragend', function (event) {
            const position = marker.getLatLng();
            document.getElementById('latitude').value = position.lat.toFixed(6);
            document.getElementById('longitude').value = position.lng.toFixed(6);
            map.setView([position.lat, position.lng], map.getZoom());
        });

        // Fetch coordinates from Nominatim API on address input
        document.getElementById('complete_address').addEventListener('input', async function () {
            const address = this.value.trim(); // Trim extra spaces
            if (address.length < 5) return; // Avoid short or incomplete queries

            const url = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address)}&format=json&addressdetails=1&limit=1`;

            try {
                const response = await fetch(url);
                const data = await response.json();

                if (data.length > 0) {
                    const lat = parseFloat(data[0].lat);
                    const lon = parseFloat(data[0].lon);

                    // Update latitude and longitude inputs
                    document.getElementById('latitude').value = lat.toFixed(6);
                    document.getElementById('longitude').value = lon.toFixed(6);

                    // Update marker and map center
                    marker.setLatLng([lat, lon]);
                    map.setView([lat, lon], 13);
                } else {
                    console.log("No results found for the entered address.");
                }
            } catch (error) {
                console.error('Error fetching geocoding data:', error);
            }
        });
    </script>


                    <div class="col-span-2">
                        <label for="services" class="block text-sm font-medium text-gray-700">Services</label>
                        <textarea name="services" id="services-json" hidden required class="mt-1 p-2 w-full border border-gray-300 rounded-lg" placeholder='{"service1": "Dry Clean", "service2": "Laundry by kg"}'></textarea>
                    </div>

                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="flex items-center">
                                <input type="checkbox" name="services[]" value="<?php echo e($service->name); ?>" id="service-<?php echo e($service->id); ?>" class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-2 focus:ring-indigo-500" onchange="updateServicesJSON()">
                                <label for="service-<?php echo e($service->id); ?>" class="ml-2 text-sm text-gray-700 flex items-center">
                                    <?php if($service->image): ?>
                                        <img src="<?php echo e(asset('storage/app/public/' . $service->image)); ?>" alt="<?php echo e($service->name); ?> icon" class="w-5 h-5 mr-2">
                                    <?php endif; ?>
                                    <?php echo e($service->name); ?>

                                </label>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
            </section>

            <!-- File Uploads -->
            <section class="space-y-4">
                <h3 class="text-xl font-semibold text-indigo-700">File Uploads</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="store_adhar" class="block text-sm font-medium text-gray-700">Store Adhar</label>
                        <input type="file" name="store_adhar[]" id="store_adhar" multiple class="mt-1 p-3 w-full border border-gray-300 rounded-lg">
                    </div>

                    <div>
                        <label for="store_documents" class="block text-sm font-medium text-gray-700">Store Documents</label>
                        <input type="file" name="store_documents[]" id="store_documents" multiple class="mt-1 p-3 w-full border border-gray-300 rounded-lg">
                    </div>

                    <div>
                        <label for="store_pictures" class="block text-sm font-medium text-gray-700">Store Pictures</label>
                        <input type="file" name="store_pictures[]" id="store_pictures" multiple class="mt-1 p-3 w-full border border-gray-300 rounded-lg">
                    </div>

                    <div>
                        <label for="store_selfies" class="block text-sm font-medium text-gray-700">Store Selfies</label>
                        <input type="file" name="store_selfies[]" id="store_selfies" multiple class="mt-1 p-3 w-full border border-gray-300 rounded-lg">
                    </div>

                    <div>
                        <label for="profile_image" class="block text-sm font-medium text-gray-700">Profile Image</label>
                        <input type="file" name="profile_image" id="profile_image" class="mt-1 p-3 w-full border border-gray-300 rounded-lg">
                    </div>
                </div>
            </section>

            <!-- Submit Button -->
            <div class="text-center mt-8">
                <button type="submit" class="px-6 py-2 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    Register Vendor
                </button>
            </div>
        </form>
    </div>

    <script>
        function updateServicesJSON() {
            let services = {};
            document.querySelectorAll("input[name='services[]']:checked").forEach((checkbox) => {
                services[checkbox.value] = checkbox.value;
            });
            document.getElementById('services-json').value = JSON.stringify(services);
        }
    </script>

</body>
</html>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?><?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/vendor_registration.blade.php ENDPATH**/ ?>