@extends('layouts.admin')

@section('title', 'Edit Vendor - ' . $vendor->vendor_name)

@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.show', $vendor) }}" class="btn btn-outline-secondary btn-sm me-3">
            <i class="bi bi-arrow-left me-1"></i>
            Back to Vendor
        </a>
        <div>
            <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Edit Vendor</h1>
            <p class="text-muted mb-0">Update {{ $vendor->vendor_name }} information</p>
        </div>
    </div>
</div>

<!-- Edit Form -->
<form action="{{ route('admin.vendors.update', $vendor) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <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', $vendor->vendor_name) }}" 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', $vendor->vendor_business_type) === 'freelancer' ? 'selected' : '' }}>
                                    👤 Freelancer / Solo Provider
                                </option>
                                <option value="home_based" {{ old('vendor_business_type', $vendor->vendor_business_type) === 'home_based' ? 'selected' : '' }}>
                                    🏠 Home-Based Business
                                </option>
                                <option value="licensed_company" {{ old('vendor_business_type', $vendor->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-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', $vendor->dubai_area) === $area ? 'selected' : '' }}>{{ $area }}</option>
                                @endforeach
                            </select>
                            @error('dubai_area')
                                <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>
                                        @foreach($businessTypes as $type)
                                            <option value="{{ $type->id }}" {{ old('bizspot_business_type_id', $vendor->bizspot_business_type_id) == $type->id ? 'selected' : '' }}>
                                                {{ $type->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @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>
                                        @foreach($mainCategories as $category)
                                            <option value="{{ $category->id }}" 
                                                    data-business-type="{{ $category->business_type_id }}"
                                                    {{ old('bizspot_main_category_id', $vendor->bizspot_main_category_id) == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </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>
                                        @foreach($subCategories as $subCategory)
                                            <option value="{{ $subCategory->id }}" 
                                                    data-main-category="{{ $subCategory->main_category_id }}"
                                                    {{ old('bizspot_sub_category_id', $vendor->bizspot_sub_category_id) == $subCategory->id ? 'selected' : '' }}>
                                                {{ $subCategory->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('bizspot_sub_category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </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', $vendor->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', $vendor->whatsapp_number) }}" required>
                            @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', $vendor->vendor_phone) }}">
                            @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', $vendor->instagram_handle) }}">
                            </div>
                            @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', $vendor->vendor_email) }}">
                            @error('vendor_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6">
                            <label for="website" class="form-label fw-medium">Website</label>
                            <input type="url" class="form-control @error('website') is-invalid @enderror" 
                                   id="website" name="website" value="{{ old('website', $vendor->website) }}">
                            @error('website')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Enhanced 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">
                        <!-- 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', $vendor->latitude) }}">
                            <input type="hidden" id="longitude" name="longitude" value="{{ old('longitude', $vendor->longitude) }}">
                        </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', $vendor->latitude) }}, {{ old('longitude', $vendor->longitude) }}">
                            </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', $vendor->map_location_url) }}">
                            @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', $vendor->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', $vendor->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_input" 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', is_array($vendor->tags) ? implode(', ', $vendor->tags) : '') }}" 
                                   placeholder="home service, nails, manicure, pedicure">
                            <input type="hidden" id="tags" name="tags" value="{{ old('tags', json_encode($vendor->tags ?? [])) }}">
                            @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', $vendor->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', $vendor->has_pickup) ? '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" {{ in_array('home service', $vendor->tags ?? []) ? 'checked' : '' }}>
                                        <label class="form-check-label fw-medium" for="offers_home_service">
                                            🏠 Home Service
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Current Media -->
            <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">📸 Current Media</h6>
                </div>
                <div class="card-body">
                    @if($vendor->logo)
                        <div class="mb-3">
                            <label class="form-label fw-medium">Current Logo</label>
                            <div class="text-center">
                                <img src="{{ Storage::url($vendor->logo) }}" alt="Current Logo" 
                                     class="img-thumbnail" style="max-height: 100px;">
                            </div>
                        </div>
                    @endif
                    
                    @if($vendor->cover_image)
                        <div class="mb-3">
                            <label class="form-label fw-medium">Current Cover Image</label>
                            <div class="text-center">
                                <img src="{{ Storage::url($vendor->cover_image) }}" alt="Current Cover" 
                                     class="img-thumbnail" style="max-height: 100px; max-width: 100%;">
                            </div>
                        </div>
                    @endif
                    
                    @if($vendor->gallery_images && is_array($vendor->gallery_images) && count($vendor->gallery_images) > 0)
                        <div class="mb-3">
                            <label class="form-label fw-medium">Current Gallery ({{ count($vendor->gallery_images) }} images)</label>
                            <div class="d-flex flex-wrap gap-2">
                                @foreach($vendor->gallery_images as $image)
                                    <img src="{{ Storage::url($image) }}" alt="Gallery" 
                                         class="img-thumbnail" style="width: 60px; height: 60px; object-fit: cover;">
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            
            <!-- Update Media -->
            <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">📸 Update Media</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="logo" class="form-label fw-medium">New Logo</label>
                        <input type="file" class="form-control @error('logo') is-invalid @enderror" 
                               id="logo" name="logo" accept="image/*">
                        <small class="text-muted">Leave empty to keep current logo</small>
                        @error('logo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="cover_image" class="form-label fw-medium">New 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">Leave empty to keep current cover</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">Add Gallery Images</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">Select multiple images to add to gallery</small>
                        @error('gallery_images')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            
            <!-- Admin 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">⚙️ Admin Settings</h6>
                </div>
                <div class="card-body">
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', $vendor->is_active) ? 'checked' : '' }}>
                        <label class="form-check-label fw-medium" for="is_active">
                            ✅ Active
                        </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', $vendor->is_verified) ? 'checked' : '' }}>
                        <label class="form-check-label fw-medium" for="is_verified">
                            🛡️ Verified
                        </label>
                    </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', $vendor->is_featured) ? 'checked' : '' }}>
                        <label class="form-check-label fw-medium" for="is_featured">
                            ⭐ Featured
                        </label>
                    </div>
                    
                    <div class="mb-3">
                        <label for="verification_status" class="form-label fw-medium">Verification Status</label>
                        <select class="form-select @error('verification_status') is-invalid @enderror" 
                                id="verification_status" name="verification_status">
                            <option value="pending" {{ old('verification_status', $vendor->verification_status) === 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="verified" {{ old('verification_status', $vendor->verification_status) === 'verified' ? 'selected' : '' }}>Verified</option>
                            <option value="rejected" {{ old('verification_status', $vendor->verification_status) === 'rejected' ? 'selected' : '' }}>Rejected</option>
                        </select>
                        @error('verification_status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="verification_notes" class="form-label fw-medium">Verification Notes</label>
                        <textarea class="form-control @error('verification_notes') is-invalid @enderror" 
                                  id="verification_notes" name="verification_notes" rows="3" 
                                  placeholder="Internal notes about verification status">{{ old('verification_notes', $vendor->verification_notes) }}</textarea>
                        @error('verification_notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </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-check-lg me-1"></i>
                            Update Vendor
                        </button>
                        <a href="{{ route('admin.vendors.show', $vendor) }}" 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 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');
    
    // Bizspot categories data
    const businessTypes = @json($businessTypes);
    const mainCategories = @json($mainCategories);
    const subCategories = @json($subCategories);
    
    // Initialize map
    let map;
    let marker;
    
    function initializeMap() {
        // Get current coordinates
        const currentLat = parseFloat(document.getElementById('latitude').value) || 25.2048;
        const currentLng = parseFloat(document.getElementById('longitude').value) || 55.2708;
        
        // Initialize map
        map = L.map('map').setView([currentLat, currentLng], 13);
        
        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        
        // Add marker at current position
        marker = L.marker([currentLat, currentLng]).addTo(map);
        
        // 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 and populate main categories
            mainCategorySelect.innerHTML = '<option value="">Select main category</option>';
            subCategorySelect.innerHTML = '<option value="">Select sub category</option>';
            
            if (selectedTypeId) {
                mainCategories.forEach(category => {
                    if (category.business_type_id == selectedTypeId) {
                        const option = document.createElement('option');
                        option.value = category.id;
                        option.textContent = category.name;
                        mainCategorySelect.appendChild(option);
                    }
                });
            }
        });
        
        mainCategorySelect.addEventListener('change', function() {
            const selectedMainCategoryId = this.value;
            
            // Clear and populate sub categories
            subCategorySelect.innerHTML = '<option value="">Select sub category</option>';
            
            if (selectedMainCategoryId) {
                subCategories.forEach(subCategory => {
                    if (subCategory.main_category_id == selectedMainCategoryId) {
                        const option = document.createElement('option');
                        option.value = subCategory.id;
                        option.textContent = subCategory.name;
                        subCategorySelect.appendChild(option);
                    }
                });
            }
        });
    }
    
    // Quick availability presets
    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
    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();
    updateTags();
});
</script>

@endsection