@extends('layouts.admin')

@section('title', 'Add New BizSpot DXB Vendor')

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center">
        <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline-secondary btn-sm me-3">
            <i class="bi bi-arrow-left me-1"></i>
            Back to Vendors
        </a>
        <div>
            <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Add New Vendor</h1>
            <p class="text-muted mb-0">Quick setup for Dubai-based service providers</p>
        </div>
    </div>
</div>

<!-- Simplified Create Form -->
<form action="{{ route('admin.vendors.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    
    <div class="row g-4">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Basic Info -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">✨ Basic Information</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="vendor_name" class="form-label fw-medium">Business Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('vendor_name') is-invalid @enderror" 
                                   id="vendor_name" name="vendor_name" value="{{ old('vendor_name') }}" 
                                   placeholder="e.g. Sarah's Beauty Studio" required>
                            @error('vendor_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="vendor_business_type" class="form-label fw-medium">Business Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('vendor_business_type') is-invalid @enderror" 
                                    id="vendor_business_type" name="vendor_business_type" required>
                                <option value="">What describes your business?</option>
                                <option value="freelancer" {{ old('vendor_business_type') === 'freelancer' ? 'selected' : '' }}>
                                    👤 Freelancer / Solo Provider
                                </option>
                                <option value="home_based" {{ old('vendor_business_type') === 'home_based' ? 'selected' : '' }}>
                                    🏠 Home-Based Business
                                </option>
                                <option value="licensed_company" {{ old('vendor_business_type') === 'licensed_company' ? 'selected' : '' }}>
                                    🏢 Licensed Company
                                </option>
                            </select>
                            @error('vendor_business_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-12">
                            <label class="form-label fw-medium">Business Category <span class="text-danger">*</span></label>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label for="bizspot_business_type_id" class="form-label fw-medium">Business Type</label>
                                    <select class="form-select @error('bizspot_business_type_id') is-invalid @enderror" 
                                            id="bizspot_business_type_id" name="bizspot_business_type_id" required>
                                        <option value="">Select business type</option>
                                        @if($businessTypes->count() > 0)
                                            @foreach($businessTypes as $type)
                                                <option value="{{ $type->id }}" 
                                                        data-image="{{ $type->image }}"
                                                        {{ old('bizspot_business_type_id') == $type->id ? 'selected' : '' }}>
                                                    {{ $type->name }}
                                                </option>
                                            @endforeach
                                        @else
                                            <option value="" disabled>No business types available</option>
                                        @endif
                                    </select>
                                    <small class="text-muted">{{ $businessTypes->count() }} business types available</small>
                                    @error('bizspot_business_type_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="col-md-4">
                                    <label for="bizspot_main_category_id" class="form-label fw-medium">Main Category</label>
                                    <select class="form-select @error('bizspot_main_category_id') is-invalid @enderror" 
                                            id="bizspot_main_category_id" name="bizspot_main_category_id" required>
                                        <option value="">Select main category</option>
                                    </select>
                                    @error('bizspot_main_category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="col-md-4">
                                    <label for="bizspot_sub_category_id" class="form-label fw-medium">Sub Category</label>
                                    <select class="form-select @error('bizspot_sub_category_id') is-invalid @enderror" 
                                            id="bizspot_sub_category_id" name="bizspot_sub_category_id" required>
                                        <option value="">Select sub category</option>
                                    </select>
                                    @error('bizspot_sub_category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="dubai_area" class="form-label fw-medium">Dubai Area <span class="text-danger">*</span></label>
                            <select class="form-select @error('dubai_area') is-invalid @enderror" id="dubai_area" name="dubai_area" required>
                                <option value="">Where are you located?</option>
                                @foreach(\App\Models\Vendor::getDubaiAreas() as $area)
                                    <option value="{{ $area }}" {{ old('dubai_area') === $area ? 'selected' : '' }}>{{ $area }}</option>
                                @endforeach
                            </select>
                            @error('dubai_area')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-12">
                            <label for="vendor_description" class="form-label fw-medium">About Your Business</label>
                            <textarea class="form-control @error('vendor_description') is-invalid @enderror" 
                                      id="vendor_description" name="vendor_description" rows="3" 
                                      placeholder="Tell customers what makes your service special...">{{ old('vendor_description') }}</textarea>
                            @error('vendor_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Contact & Social -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">📱 Contact & Social</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="whatsapp_number" class="form-label fw-medium">WhatsApp Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('whatsapp_number') is-invalid @enderror" 
                                   id="whatsapp_number" name="whatsapp_number" value="{{ old('whatsapp_number') }}" 
                                   placeholder="+971 50 123 4567" required>
                            <small class="text-muted">Main contact method for customers</small>
                            @error('whatsapp_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="vendor_phone" class="form-label fw-medium">Phone Number</label>
                            <input type="text" class="form-control @error('vendor_phone') is-invalid @enderror" 
                                   id="vendor_phone" name="vendor_phone" value="{{ old('vendor_phone') }}" 
                                   placeholder="+971 4 123 4567">
                            <small class="text-muted">Optional alternative number</small>
                            @error('vendor_phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="instagram_handle" class="form-label fw-medium">Instagram Handle</label>
                            <div class="input-group">
                                <span class="input-group-text">@</span>
                                <input type="text" class="form-control @error('instagram_handle') is-invalid @enderror" 
                                       id="instagram_handle" name="instagram_handle" value="{{ old('instagram_handle') }}" 
                                       placeholder="sarahbeauty_dubai">
                            </div>
                            <small class="text-muted">Show your work portfolio</small>
                            @error('instagram_handle')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="vendor_email" class="form-label fw-medium">Email Address</label>
                            <input type="email" class="form-control @error('vendor_email') is-invalid @enderror" 
                                   id="vendor_email" name="vendor_email" value="{{ old('vendor_email') }}" 
                                   placeholder="sarah@example.com">
                            <small class="text-muted">Optional for notifications</small>
                            @error('vendor_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Location & Service Details -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">📍 Location & Service Details</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <!-- Enhanced Location Search -->
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label fw-medium mb-0">Business Location on Map</label>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="detect_location">
                                        <i class="bi bi-geo-alt me-1"></i>
                                        Detect Location
                                    </button>
                                    <button type="button" class="btn btn-outline-info btn-sm" id="search_toggle">
                                        <i class="bi bi-search me-1"></i>
                                        Search Location
                                    </button>
                                </div>
                            </div>
                            
                            <!-- Search Box -->
                            <div id="search_container" class="mb-3" style="display: none;">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                                    <input type="text" class="form-control" id="location_search" 
                                           placeholder="Search for places in Dubai (e.g., Dubai Mall, Business Bay)">
                                    <button type="button" class="btn btn-outline-secondary" id="clear_search">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                                <div id="search_results" class="mt-2"></div>
                            </div>
                            
                            <div id="map" style="height: 350px; border-radius: 8px; border: 1px solid #e3e6f0;"></div>
                            <small class="text-muted">
                                <i class="bi bi-info-circle me-1"></i>
                                Click on the map to set location, or use search/GPS detection
                            </small>
                            <input type="hidden" id="latitude" name="latitude" value="{{ old('latitude', '25.2048') }}">
                            <input type="hidden" id="longitude" name="longitude" value="{{ old('longitude', '55.2708') }}">
                        </div>
                        
                        <!-- Selected Coordinates Display -->
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Selected Coordinates</label>
                            <div class="input-group">
                                <span class="input-group-text">📍</span>
                                <input type="text" class="form-control" id="coordinates_display" readonly 
                                       value="{{ old('latitude', '25.2048') }}, {{ old('longitude', '55.2708') }}">
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="map_location_url" class="form-label fw-medium">Google Maps Link (Optional)</label>
                            <input type="url" class="form-control @error('map_location_url') is-invalid @enderror" 
                                   id="map_location_url" name="map_location_url" value="{{ old('map_location_url') }}" 
                                   placeholder="https://maps.google.com/...">
                            @error('map_location_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-12">
                            <label for="location_notes" class="form-label fw-medium">Location Details</label>
                            <textarea class="form-control @error('location_notes') is-invalid @enderror" 
                                      id="location_notes" name="location_notes" rows="2" 
                                      placeholder="Building name, nearby landmarks, or pickup instructions...">{{ old('location_notes') }}</textarea>
                            @error('location_notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <!-- Enhanced Availability Options -->
                        <div class="col-12">
                            <label class="form-label fw-medium">Availability & Working Hours</label>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="open_hours_text" class="form-label fw-medium">Simple Hours Text</label>
                                    <input type="text" class="form-control @error('open_hours_text') is-invalid @enderror" 
                                           id="open_hours_text" name="open_hours_text" value="{{ old('open_hours_text') }}" 
                                           placeholder="e.g., 9 AM - 6 PM, Closed Fridays">
                                    @error('open_hours_text')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="col-md-6">
                                    <label class="form-label fw-medium">Quick Availability</label>
                                    <select class="form-select" id="quick_availability">
                                        <option value="">Select preset hours</option>
                                        <option value="24/7">24/7 Available</option>
                                        <option value="9-5">9 AM - 5 PM (Mon-Fri)</option>
                                        <option value="9-6">9 AM - 6 PM (Mon-Sat)</option>
                                        <option value="10-8">10 AM - 8 PM (Daily)</option>
                                        <option value="weekends">Weekends Only</option>
                                        <option value="by-appointment">By Appointment Only</option>
                                        <option value="flexible">Flexible Hours</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="tags" class="form-label fw-medium">Service Tags</label>
                            <input type="text" class="form-control @error('tags') is-invalid @enderror" 
                                   id="tags_input" name="tags_input" value="{{ old('tags_input') }}" 
                                   placeholder="home service, nails, manicure, pedicure">
                            <input type="hidden" id="tags" name="tags" value="{{ old('tags') }}">
                            <small class="text-muted">Separate with commas</small>
                            @error('tags')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <div class="row g-2">
                                <div class="col-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="has_delivery" name="has_delivery" value="1" {{ old('has_delivery') ? 'checked' : '' }}>
                                        <label class="form-check-label fw-medium" for="has_delivery">
                                            🚗 Delivery
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="col-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="has_pickup" name="has_pickup" value="1" {{ old('has_pickup', true) ? 'checked' : '' }}>
                                        <label class="form-check-label fw-medium" for="has_pickup">
                                            📍 Pickup
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="col-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="offers_home_service" name="offers_home_service" value="1" {{ old('offers_home_service') ? 'checked' : '' }}>
                                        <label class="form-check-label fw-medium" for="offers_home_service">
                                            🏠 Home Service
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Business Details (Conditional) -->
            <div class="card border-0 shadow-sm mt-4" id="business_details_card" style="display: none;">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">🏢 Business Details</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="business_license_number" class="form-label fw-medium">Business License Number</label>
                            <input type="text" class="form-control @error('business_license_number') is-invalid @enderror" 
                                   id="business_license_number" name="business_license_number" value="{{ old('business_license_number') }}">
                            @error('business_license_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="tax_id_number" class="form-label fw-medium">Tax ID Number</label>
                            <input type="text" class="form-control @error('tax_id_number') is-invalid @enderror" 
                                   id="tax_id_number" name="tax_id_number" value="{{ old('tax_id_number') }}">
                            @error('tax_id_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="years_in_business" class="form-label fw-medium">Years in Business</label>
                            <input type="number" class="form-control @error('years_in_business') is-invalid @enderror" 
                                   id="years_in_business" name="years_in_business" value="{{ old('years_in_business') }}" min="0" max="50">
                            @error('years_in_business')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="employee_count" class="form-label fw-medium">Number of Employees</label>
                            <input type="number" class="form-control @error('employee_count') is-invalid @enderror" 
                                   id="employee_count" name="employee_count" value="{{ old('employee_count', 1) }}" min="1" max="1000">
                            @error('employee_count')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Media Uploads -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">📸 Showcase Your Work</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="logo" class="form-label fw-medium">Logo / Profile Picture</label>
                        <input type="file" class="form-control @error('logo') is-invalid @enderror" 
                               id="logo" name="logo" accept="image/*">
                        <small class="text-muted">Square image works best</small>
                        @error('logo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="cover_image" class="form-label fw-medium">Cover Image</label>
                        <input type="file" class="form-control @error('cover_image') is-invalid @enderror" 
                               id="cover_image" name="cover_image" accept="image/*">
                        <small class="text-muted">Wide image for profile header</small>
                        @error('cover_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="gallery_images" class="form-label fw-medium">Work Gallery</label>
                        <input type="file" class="form-control @error('gallery_images') is-invalid @enderror" 
                               id="gallery_images" name="gallery_images[]" accept="image/*" multiple>
                        <small class="text-muted">Show examples of your work (max 5 images)</small>
                        @error('gallery_images')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            
            <!-- Quick Settings -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-white border-0 pt-4 pb-3">
                    <h6 class="card-title mb-0 fw-bold">⚙️ Quick Settings</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="user_id" class="form-label fw-medium">Owner Account <span class="text-danger">*</span></label>
                        <select class="form-select @error('user_id') is-invalid @enderror" id="user_id" name="user_id" required>
                            <option value="">Select account owner</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                    {{ $user->name }} ({{ $user->email }}) - {{ ucfirst($user->role) }}
                                </option>
                            @endforeach
                        </select>
                        @error('user_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                        <label class="form-check-label fw-medium" for="is_featured">
                            ⭐ Feature this vendor
                        </label>
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="is_verified" name="is_verified" value="1" {{ old('is_verified') ? 'checked' : '' }}>
                        <label class="form-check-label fw-medium" for="is_verified">
                            ✅ Mark as verified
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-lg me-1"></i>
                            Add Vendor to BizSpot DXB
                        </button>
                        <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-1"></i>
                            Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Leaflet CSS and JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" 
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<style>
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin {
    animation: spin 1s linear infinite;
}
.search-result {
    padding: 8px 12px;
    border: 1px solid #e3e6f0;
    border-radius: 4px;
    cursor: pointer;
    background: white;
}
.search-result:hover {
    background: #f8f9fa;
}
.search-result + .search-result {
    border-top: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const businessTypeSelect = document.getElementById('vendor_business_type');
    const businessDetailsCard = document.getElementById('business_details_card');
    const tagsInput = document.getElementById('tags_input');
    const tagsHidden = document.getElementById('tags');
    const homeServiceCheck = document.getElementById('offers_home_service');
    const quickAvailabilitySelect = document.getElementById('quick_availability');
    const openHoursTextInput = document.getElementById('open_hours_text');
    
    // Category dropdowns will be populated via API calls
    
    // Initialize map
    let map;
    let marker;
    
    function initializeMap() {
        // Initialize map centered on Dubai
        map = L.map('map').setView([25.2048, 55.2708], 11);
        
        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        
        // Get initial coordinates
        const initialLat = parseFloat(document.getElementById('latitude').value) || 25.2048;
        const initialLng = parseFloat(document.getElementById('longitude').value) || 55.2708;
        
        // Add initial marker
        marker = L.marker([initialLat, initialLng]).addTo(map);
        map.setView([initialLat, initialLng], 13);
        
        // Handle map clicks
        map.on('click', function(e) {
            updateLocation(e.latlng.lat, e.latlng.lng);
        });
        
        // Handle detect location button
        document.getElementById('detect_location').addEventListener('click', function() {
            if (navigator.geolocation) {
                this.innerHTML = '<i class="bi bi-arrow-repeat spin"></i> Detecting...';
                this.disabled = true;
                
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        updateLocation(position.coords.latitude, position.coords.longitude);
                        document.getElementById('detect_location').innerHTML = '<i class="bi bi-geo-alt me-1"></i> Detect Location';
                        document.getElementById('detect_location').disabled = false;
                        map.setView([position.coords.latitude, position.coords.longitude], 15);
                    },
                    function(error) {
                        alert('Unable to detect your location. Please click on the map to set your location manually.');
                        document.getElementById('detect_location').innerHTML = '<i class="bi bi-geo-alt me-1"></i> Detect Location';
                        document.getElementById('detect_location').disabled = false;
                    }
                );
            } else {
                alert('Geolocation is not supported by this browser.');
            }
        });
        
        // Handle search toggle
        document.getElementById('search_toggle').addEventListener('click', function() {
            const searchContainer = document.getElementById('search_container');
            if (searchContainer.style.display === 'none') {
                searchContainer.style.display = 'block';
                document.getElementById('location_search').focus();
            } else {
                searchContainer.style.display = 'none';
                document.getElementById('search_results').innerHTML = '';
            }
        });
        
        // Handle location search
        let searchTimeout;
        document.getElementById('location_search').addEventListener('input', function(e) {
            clearTimeout(searchTimeout);
            const query = e.target.value.trim();
            
            if (query.length < 3) {
                document.getElementById('search_results').innerHTML = '';
                return;
            }
            
            searchTimeout = setTimeout(() => {
                searchLocation(query);
            }, 500);
        });
        
        // Handle clear search
        document.getElementById('clear_search').addEventListener('click', function() {
            document.getElementById('location_search').value = '';
            document.getElementById('search_results').innerHTML = '';
        });
    }
    
    function updateLocation(lat, lng) {
        // Update marker position
        marker.setLatLng([lat, lng]);
        
        // Update form fields
        document.getElementById('latitude').value = lat.toFixed(6);
        document.getElementById('longitude').value = lng.toFixed(6);
        document.getElementById('coordinates_display').value = `${lat.toFixed(6)}, ${lng.toFixed(6)}`;
    }
    
    function searchLocation(query) {
        // Using Nominatim for location search (OpenStreetMap's geocoding service)
        const url = `https://nominatim.openstreetmap.org/search?format=json&countrycodes=ae&city=dubai&q=${encodeURIComponent(query)}&limit=5`;
        
        fetch(url)
            .then(response => response.json())
            .then(data => {
                displaySearchResults(data);
            })
            .catch(error => {
                console.error('Search error:', error);
                document.getElementById('search_results').innerHTML = '<div class="text-danger">Search failed. Please try again.</div>';
            });
    }
    
    function displaySearchResults(results) {
        const resultsContainer = document.getElementById('search_results');
        
        if (results.length === 0) {
            resultsContainer.innerHTML = '<div class="text-muted">No results found</div>';
            return;
        }
        
        let html = '';
        results.forEach(result => {
            html += `
                <div class="search-result" onclick="selectSearchResult(${result.lat}, ${result.lon}, '${result.display_name.replace(/'/g, "\\'")}')">
                    <div class="fw-medium">${result.display_name.split(',')[0]}</div>
                    <div class="small text-muted">${result.display_name}</div>
                </div>
            `;
        });
        
        resultsContainer.innerHTML = html;
    }
    
    window.selectSearchResult = function(lat, lng, name) {
        updateLocation(lat, lng);
        map.setView([lat, lng], 15);
        document.getElementById('search_container').style.display = 'none';
        document.getElementById('location_search').value = name.split(',')[0];
        document.getElementById('search_results').innerHTML = '';
    };
    
    // Category handling
    function setupCategoryDropdowns() {
        const businessTypeSelect = document.getElementById('bizspot_business_type_id');
        const mainCategorySelect = document.getElementById('bizspot_main_category_id');
        const subCategorySelect = document.getElementById('bizspot_sub_category_id');
        
        businessTypeSelect.addEventListener('change', function() {
            const selectedTypeId = this.value;
            
            // Clear dependent dropdowns
            mainCategorySelect.innerHTML = '<option value="">Select main category</option>';
            subCategorySelect.innerHTML = '<option value="">Select sub category</option>';
            
            if (selectedTypeId) {
                // Fetch main categories via API
                console.log('Fetching main categories for business type:', selectedTypeId);
                fetch(`/api/vendor-form/main-categories/${selectedTypeId}`)
                    .then(response => {
                        console.log('Response status:', response.status);
                        return response.json();
                    })
                    .then(data => {
                        console.log('Main categories data:', data);
                        if (data.data && data.data.length > 0) {
                            data.data.forEach(category => {
                                const option = document.createElement('option');
                                option.value = category.id;
                                option.textContent = category.name;
                                option.setAttribute('data-image', category.image || '');
                                option.setAttribute('data-description', category.description || '');
                                mainCategorySelect.appendChild(option);
                            });
                        } else {
                            const option = document.createElement('option');
                            option.value = '';
                            option.textContent = 'No main categories found';
                            option.disabled = true;
                            mainCategorySelect.appendChild(option);
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching main categories:', error);
                        const option = document.createElement('option');
                        option.value = '';
                        option.textContent = 'Error loading categories';
                        option.disabled = true;
                        mainCategorySelect.appendChild(option);
                    });
            }
        });
        
        mainCategorySelect.addEventListener('change', function() {
            const selectedMainCategoryId = this.value;
            
            // Clear sub category dropdown
            subCategorySelect.innerHTML = '<option value="">Select sub category</option>';
            
            if (selectedMainCategoryId) {
                // Fetch sub categories via API
                fetch(`/api/vendor-form/sub-categories/${selectedMainCategoryId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.data) {
                            data.data.forEach(subCategory => {
                                const option = document.createElement('option');
                                option.value = subCategory.id;
                                option.textContent = subCategory.name;
                                option.setAttribute('data-image', subCategory.image || '');
                                option.setAttribute('data-description', subCategory.description || '');
                                subCategorySelect.appendChild(option);
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching sub categories:', error);
                    });
            }
        });
    }
    
    // Display category images and descriptions
    function setupCategoryImageDisplay() {
        const businessTypeSelect = document.getElementById('bizspot_business_type_id');
        const mainCategorySelect = document.getElementById('bizspot_main_category_id');
        const subCategorySelect = document.getElementById('bizspot_sub_category_id');
        
        // Create image preview containers if they don't exist
        function createImagePreview(selectElement, containerId) {
            let container = document.getElementById(containerId);
            if (!container) {
                container = document.createElement('div');
                container.id = containerId;
                container.className = 'mt-2 category-image-preview';
                container.style.display = 'none';
                selectElement.parentNode.appendChild(container);
            }
            return container;
        }
        
        const businessTypePreview = createImagePreview(businessTypeSelect, 'business-type-preview');
        const mainCategoryPreview = createImagePreview(mainCategorySelect, 'main-category-preview');
        const subCategoryPreview = createImagePreview(subCategorySelect, 'sub-category-preview');
        
        // Function to show category preview
        function showCategoryPreview(selectElement, previewContainer) {
            const selectedOption = selectElement.options[selectElement.selectedIndex];
            if (selectedOption && selectedOption.value) {
                const image = selectedOption.getAttribute('data-image');
                const description = selectedOption.getAttribute('data-description');
                
                if (image) {
                    previewContainer.innerHTML = `
                        <div class="d-flex align-items-start gap-3 p-3 bg-light rounded border">
                            <img src="${image}" alt="${selectedOption.textContent}" 
                                 class="rounded" style="width: 60px; height: 45px; object-fit: cover;">
                            <div class="flex-grow-1">
                                <h6 class="mb-1 fw-semibold text-dark">${selectedOption.textContent}</h6>
                                ${description ? `<p class="mb-0 text-muted small">${description}</p>` : ''}
                            </div>
                        </div>
                    `;
                    previewContainer.style.display = 'block';
                } else {
                    previewContainer.style.display = 'none';
                }
            } else {
                previewContainer.style.display = 'none';
            }
        }
        
        // Add event listeners
        businessTypeSelect.addEventListener('change', function() {
            showCategoryPreview(this, businessTypePreview);
        });
        
        mainCategorySelect.addEventListener('change', function() {
            showCategoryPreview(this, mainCategoryPreview);
        });
        
        subCategorySelect.addEventListener('change', function() {
            showCategoryPreview(this, subCategoryPreview);
        });
        
        // Show initial previews if there are selected values
        if (businessTypeSelect.value) showCategoryPreview(businessTypeSelect, businessTypePreview);
        if (mainCategorySelect.value) showCategoryPreview(mainCategorySelect, mainCategoryPreview);
        if (subCategorySelect.value) showCategoryPreview(subCategorySelect, subCategoryPreview);
    }
    
    // Show/hide business details based on business type
    function toggleBusinessDetails() {
        const selectedType = businessTypeSelect.value;
        if (selectedType === 'licensed_company') {
            businessDetailsCard.style.display = 'block';
        } else {
            businessDetailsCard.style.display = 'none';
        }
    }
    
    // Quick availability presets
    function setupAvailabilityPresets() {
        quickAvailabilitySelect.addEventListener('change', function() {
            const value = this.value;
            let text = '';
            
            switch(value) {
                case '24/7':
                    text = '24/7 Available';
                    break;
                case '9-5':
                    text = '9 AM - 5 PM (Monday to Friday)';
                    break;
                case '9-6':
                    text = '9 AM - 6 PM (Monday to Saturday)';
                    break;
                case '10-8':
                    text = '10 AM - 8 PM (Daily)';
                    break;
                case 'weekends':
                    text = 'Weekends Only (Friday & Saturday)';
                    break;
                case 'by-appointment':
                    text = 'By Appointment Only';
                    break;
                case 'flexible':
                    text = 'Flexible Hours - Contact to Schedule';
                    break;
            }
            
            if (text) {
                openHoursTextInput.value = text;
            }
        });
    }
    
    // Convert tags input to JSON array
    function updateTags() {
        const tags = tagsInput.value.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
        tagsHidden.value = JSON.stringify(tags);
        
        // Add 'home service' tag if checkbox is checked
        if (homeServiceCheck.checked && !tags.includes('home service')) {
            tags.push('home service');
            tagsHidden.value = JSON.stringify(tags);
        }
    }
    
    // Event listeners
    businessTypeSelect.addEventListener('change', toggleBusinessDetails);
    tagsInput.addEventListener('input', updateTags);
    homeServiceCheck.addEventListener('change', function() {
        updateTags();
        if (this.checked && !tagsInput.value.includes('home service')) {
            const currentTags = tagsInput.value ? tagsInput.value + ', ' : '';
            tagsInput.value = currentTags + 'home service';
            updateTags();
        }
    });
    
    // Initialize everything
    initializeMap();
    setupCategoryDropdowns();
    setupCategoryImageDisplay();
    setupAvailabilityPresets();
    toggleBusinessDetails();
    updateTags();
});
</script>

@endsection