@extends('layouts.admin')

@section('title', 'Create New Market')

@section('styles')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
      crossorigin="" />
<!-- Leaflet Geocoder CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<style>
    .leaflet-control-geocoder {
        width: 100%;
        max-width: 300px;
    }
    
    /* Map container fixes */
    #map {
        height: 300px !important;
        width: 100% !important;
        position: relative !important;
        background: #e5e5e5 !important;
        border-radius: 0.25rem;
        border: 1px solid #dee2e6;
        z-index: 1;
    }
    
    /* Leaflet container fixes */
    .leaflet-container {
        height: 100% !important;
        width: 100% !important;
        position: relative !important;
        outline: 0;
        font-family: inherit;
        background: transparent !important;
    }
    
    /* Critical tile rendering fixes */
    .leaflet-tile-pane {
        position: absolute !important;
        left: 0;
        top: 0;
        z-index: 1;
    }
    
    .leaflet-tile {
        outline: 0 !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        max-height: none !important;
        position: absolute !important;
        user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        image-rendering: optimizeSpeed; /* Firefox */
        image-rendering: -moz-crisp-edges; /* Firefox */
        image-rendering: -o-crisp-edges; /* Opera */
        image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor; /* IE */
    }
    
    /* Prevent tile overlapping and gaps */
    .leaflet-tile-container {
        overflow: hidden !important;
        transform: translateZ(0); /* Hardware acceleration */
        -webkit-transform: translateZ(0);
    }
    
    /* Fix tile loading animations */
    .leaflet-zoom-animated .leaflet-zoom-hide {
        visibility: hidden;
    }
    
    .leaflet-zoom-animated .leaflet-tile {
        transition: none !important;
    }
    
    /* Controls positioning */
    .leaflet-control-container {
        pointer-events: none;
        position: relative;
        z-index: 1000;
    }
    
    .leaflet-control {
        pointer-events: auto;
        clear: both;
    }
    
    /* Prevent visual artifacts */
    .leaflet-fade-anim .leaflet-tile {
        will-change: auto !important;
        transition: opacity 0.2s;
    }
    
    /* Fix for retina displays */
    .leaflet-retina .leaflet-tile {
        image-rendering: auto !important;
    }
</style>
@endsection

@section('content')
<!-- Error and Success Messages -->
@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle me-2"></i>
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle me-2"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle me-2"></i>
        <strong>Please fix the following errors:</strong>
        <ul class="mb-0 mt-2">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Create New Market</h1>
        <p class="text-muted mb-0">Add a new traditional market to the platform</p>
    </div>
    <div>
        <a href="{{ route('admin.markets.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to List
        </a>
    </div>
</div>

<!-- Create Market Form -->
<div class="row">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">Basic Market Information</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.markets.store') }}" method="POST" enctype="multipart/form-data" id="market-form">
                    @csrf
                    
                    <!-- Debug Information (remove in production) -->
                    @if(app()->environment('local'))
                        <div class="alert alert-info mb-3">
                            <small>
                                <strong>Debug Info:</strong><br>
                                CSRF Token: {{ csrf_token() }}<br>
                                Form Action: {{ route('admin.markets.store') }}<br>
                                User: {{ auth()->user()->name ?? 'Not logged in' }} (ID: {{ auth()->id() ?? 'N/A' }})
                            </small>
                            <hr>
                            <button type="button" class="btn btn-sm btn-outline-info" onclick="testCSRF()">
                                Test CSRF Token
                            </button>
                        </div>
                    @endif

                    <div class="row g-3">
                        <!-- Market Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label">Market Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Market Type -->
                        <div class="col-md-6">
                            <label for="market_type" class="form-label">Market Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('market_type') is-invalid @enderror" id="market_type" name="market_type" required>
                                <option value="">Select Market Type</option>
                                @foreach($marketTypes as $key => $label)
                                    <option value="{{ $key }}" {{ old('market_type') == $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('market_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="col-12">
                            <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="4" required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Address -->
                        <div class="col-12">
                            <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('address') is-invalid @enderror" 
                                      id="address" name="address" rows="2" required>{{ old('address') }}</textarea>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            
                            <!-- Map for address selection -->
                            <div class="mt-2">
                                <div id="map" style="height: 300px; width: 100%; border-radius: 0.25rem; border: 1px solid #dee2e6; z-index: 1;"></div>
                                <div class="d-flex justify-content-between align-items-center mt-2">
                                    <small class="text-muted">Click on the map to set location or search for an address</small>
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="currentLocationBtn">
                                        <i class="bi bi-geo-alt"></i> Use Current Location
                                    </button>
                                </div>
                                <input type="hidden" id="latitude" name="latitude" value="{{ old('latitude') }}">
                                <input type="hidden" id="longitude" name="longitude" value="{{ old('longitude') }}">
                            </div>
                        </div>

                        <!-- Phone and Email -->
                        <div class="col-md-6">
                            <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror" 
                                   id="phone" name="phone" value="{{ old('phone') }}" required>
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                   id="email" name="email" value="{{ old('email') }}" required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Website -->
                        <div class="col-md-6">
                            <label for="website" class="form-label">Website</label>
                            <input type="url" class="form-control @error('website') is-invalid @enderror" 
                                   id="website" name="website" value="{{ old('website') }}" 
                                   placeholder="https://example.com">
                            @error('website')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Market Owner -->
                        <div class="col-md-6">
                            <label for="user_id" class="form-label">Market Owner <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 Owner</option>
                                @if(isset($users))
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} ({{ $user->email }}) - {{ ucfirst($user->role ?? 'User') }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @error('user_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            @if(!isset($users))
                                <div class="form-text text-warning">
                                    <i class="bi bi-exclamation-triangle"></i> User data not available. Please contact administrator.
                                </div>
                            @endif
                        </div>

                        <!-- Market Logo -->
                        <div class="col-md-6">
                            <label for="logo" class="form-label">Market Logo</label>
                            <input type="file" class="form-control @error('logo') is-invalid @enderror" 
                                   id="logo" name="logo" accept="image/*">
                            <div class="form-text">Upload market logo (JPG, PNG, max 2MB)</div>
                            @error('logo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Cover Image -->
                        <div class="col-12">
                            <label for="cover_image" class="form-label">Cover Image</label>
                            <input type="file" class="form-control @error('cover_image') is-invalid @enderror" 
                                   id="cover_image" name="cover_image" accept="image/*">
                            <div class="form-text">Upload market cover image (JPG, PNG, max 5MB) - This will be the main image shown on market listings</div>
                            @error('cover_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <!-- Market Details Card -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">Market Details</h5>
            </div>
            <div class="card-body">
                <div class="row g-3" form="market-form">
                    <!-- Total Stalls -->
                    <div class="col-12">
                        <label for="total_stalls" class="form-label">Total Number of Stalls <span class="text-danger">*</span></label>
                        <input type="number" class="form-control @error('total_stalls') is-invalid @enderror" 
                               id="total_stalls" name="total_stalls" value="{{ old('total_stalls', 10) }}" 
                               min="1" max="1000" form="market-form" required>
                        @error('total_stalls')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Opening and Closing Times -->
                    <div class="col-md-6">
                        <label for="opening_time" class="form-label">Opening Time <span class="text-danger">*</span></label>
                        <input type="time" class="form-control @error('opening_time') is-invalid @enderror" 
                               id="opening_time" name="opening_time" value="{{ old('opening_time', '06:00') }}" form="market-form" required>
                        @error('opening_time')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="closing_time" class="form-label">Closing Time <span class="text-danger">*</span></label>
                        <input type="time" class="form-control @error('closing_time') is-invalid @enderror" 
                               id="closing_time" name="closing_time" value="{{ old('closing_time', '18:00') }}" form="market-form" required>
                        @error('closing_time')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Operating Days -->
                    <div class="col-12">
                        <label class="form-label">Operating Days <span class="text-danger">*</span></label>
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="monday" name="operating_days[]" value="monday" 
                                           {{ in_array('monday', old('operating_days', ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'])) ? 'checked' : '' }} form="market-form">
                                    <label class="form-check-label" for="monday">Monday</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="tuesday" name="operating_days[]" value="tuesday" 
                                           {{ in_array('tuesday', old('operating_days', ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'])) ? 'checked' : '' }} form="market-form">
                                    <label class="form-check-label" for="tuesday">Tuesday</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="wednesday" name="operating_days[]" value="wednesday" 
                                           {{ in_array('wednesday', old('operating_days', ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'])) ? 'checked' : '' }} form="market-form">
                                    <label class="form-check-label" for="wednesday">Wednesday</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="thursday" name="operating_days[]" value="thursday" 
                                           {{ in_array('thursday', old('operating_days', ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'])) ? 'checked' : '' }} form="market-form">
                                    <label class="form-check-label" for="thursday">Thursday</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="friday" name="operating_days[]" value="friday" 
                                           {{ in_array('friday', old('operating_days', ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'])) ? 'checked' : '' }} form="market-form">
                                    <label class="form-check-label" for="friday">Friday</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="saturday" name="operating_days[]" value="saturday" 
                                           {{ in_array('saturday', old('operating_days', ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'])) ? 'checked' : '' }} form="market-form">
                                    <label class="form-check-label" for="saturday">Saturday</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="sunday" name="operating_days[]" value="sunday" 
                                           {{ in_array('sunday', old('operating_days', [])) ? 'checked' : '' }} form="market-form">
                                    <label class="form-check-label" for="sunday">Sunday</label>
                                </div>
                            </div>
                        </div>
                        @error('operating_days')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Market Manager Card -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">Market Manager (Optional)</h5>
            </div>
            <div class="card-body">
                <div class="row g-3" form="market-form">
                    <!-- Manager Name -->
                    <div class="col-12">
                        <label for="market_manager_name" class="form-label">Manager Name</label>
                        <input type="text" class="form-control @error('market_manager_name') is-invalid @enderror" 
                               id="market_manager_name" name="market_manager_name" value="{{ old('market_manager_name') }}" form="market-form">
                        @error('market_manager_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Manager Phone -->
                    <div class="col-12">
                        <label for="market_manager_phone" class="form-label">Manager Phone</label>
                        <input type="tel" class="form-control @error('market_manager_phone') is-invalid @enderror" 
                               id="market_manager_phone" name="market_manager_phone" value="{{ old('market_manager_phone') }}" form="market-form">
                        @error('market_manager_phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Manager Email -->
                    <div class="col-12">
                        <label for="market_manager_email" class="form-label">Manager Email</label>
                        <input type="email" class="form-control @error('market_manager_email') is-invalid @enderror" 
                               id="market_manager_email" name="market_manager_email" value="{{ old('market_manager_email') }}" form="market-form">
                        @error('market_manager_email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Form Buttons -->
<div class="row mt-4">
    <div class="col-12">
        <div class="d-flex justify-content-end gap-2">
            <a href="{{ route('admin.markets.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-x-circle me-1"></i>
                Cancel
            </a>
            <button type="submit" class="btn btn-primary" form="market-form">
                <i class="bi bi-check-circle me-1"></i>
                Create Market
            </button>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" 
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
        crossorigin=""></script>
<!-- Leaflet Geocoder -->
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

<script>
// Test CSRF token function
function testCSRF() {
    fetch('{{ route("admin.markets.store") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            test: true
        })
    })
    .then(response => {
        console.log('CSRF Test Response Status:', response.status);
        return response.text();
    })
    .then(data => {
        console.log('CSRF Test Response:', data);
        if (data.includes('login') || data.includes('logout')) {
            alert('CSRF Test FAILED - You were logged out!');
        } else {
            alert('CSRF Test PASSED - Token is working');
        }
    })
    .catch(error => {
        console.error('CSRF Test Error:', error);
        alert('CSRF Test ERROR: ' + error.message);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('market-form');
    const submitBtn = document.querySelector('button[type="submit"]');
    
    try {
        // Initialize map with safer defaults
        const defaultLat = {{ old('latitude', 6.5244) }};
        const defaultLng = {{ old('longitude', 3.3792) }};
        
        // Make sure map container exists
        const mapContainer = document.getElementById('map');
        if (!mapContainer) {
            console.error('Map container not found');
            return;
        }
        
        // Clear any existing map content
        mapContainer.innerHTML = '';
        
        // Initialize the map with optimized configuration
        console.log('Initializing map with coordinates:', defaultLat, defaultLng);
        const map = L.map('map', {
            center: [defaultLat, defaultLng],
            zoom: 12,
            scrollWheelZoom: true,
            zoomControl: true,
            attributionControl: true,
            preferCanvas: false,
            zoomAnimation: true,
            fadeAnimation: true,
            markerZoomAnimation: true,
            trackResize: true,
            worldCopyJump: false,
            closePopupOnClick: true,
            maxBoundsViscosity: 1.0
        });
        
        // Use OpenStreetMap as primary tile provider with optimized settings
        const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            subdomains: ['a', 'b', 'c'],
            maxZoom: 19,
            minZoom: 1,
            tileSize: 256,
            zoomOffset: 0,
            detectRetina: true,
            crossOrigin: true,
            updateWhenIdle: false,
            updateWhenZooming: false,
            keepBuffer: 2
        });
        
        tileLayer.addTo(map);
        
        // Wait for tiles to load before proceeding
        tileLayer.on('load', function() {
            console.log('Map tiles loaded successfully');
            setTimeout(function() {
                map.invalidateSize();
            }, 100);
        });
        
        // Add CartoDB as alternative tile layer
        const cartoLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
            subdomains: ['a', 'b', 'c', 'd'],
            maxZoom: 20,
            minZoom: 1,
            tileSize: 256,
            detectRetina: true
        });
        
        // Layer control to switch between map types
        const baseMaps = {
            "OpenStreetMap": tileLayer,
            "Light Theme": cartoLayer
        };
        
        L.control.layers(baseMaps).addTo(map);
        
        // Add geocoder with simpler configuration
        const geocoder = L.Control.geocoder({
            defaultMarkGeocode: false,
            placeholder: 'Search address...',
            collapsed: false,
            position: 'topright'
        }).on('markgeocode', function(e) {
            const center = e.geocode.center;
            
            if (marker) {
                marker.setLatLng(center);
            } else {
                marker = L.marker(center).addTo(map);
            }
            
            map.setView(center, 16);
            updateLocationFields(center.lat, center.lng, e.geocode.name);
        }).addTo(map);
        
        // Add marker if we have coordinates
        let marker = null;
        if (defaultLat && defaultLng && defaultLat != 6.5244) {
            try {
                marker = L.marker([defaultLat, defaultLng]).addTo(map);
            } catch (err) {
                console.error('Error adding initial marker:', err);
            }
        }
        
        // Handle map click
        map.on('click', function(e) {
            try {
                if (marker) {
                    marker.setLatLng(e.latlng);
                } else {
                    marker = L.marker(e.latlng).addTo(map);
                }
                
                // Reverse geocode to get address
                const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${e.latlng.lat}&lon=${e.latlng.lng}&zoom=18&addressdetails=1`;
                console.log('Geocoding URL:', url);
                
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        console.log('Geocoding response:', data);
                        updateLocationFields(e.latlng.lat, e.latlng.lng, data.display_name);
                    })
                    .catch(error => {
                        console.error('Error getting address:', error);
                        updateLocationFields(e.latlng.lat, e.latlng.lng);
                    });
            } catch (err) {
                console.error('Error handling map click:', err);
            }
        });
        
        // Current location button
        const currentLocationBtn = document.getElementById('currentLocationBtn');
        if (currentLocationBtn) {
            currentLocationBtn.addEventListener('click', function() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        try {
                            const lat = position.coords.latitude;
                            const lng = position.coords.longitude;
                            
                            console.log('Current location:', lat, lng);
                            map.setView([lat, lng], 16);
                            
                            if (marker) {
                                marker.setLatLng([lat, lng]);
                            } else {
                                marker = L.marker([lat, lng]).addTo(map);
                            }
                            
                            // Reverse geocode to get address
                            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`)
                                .then(response => response.json())
                                .then(data => {
                                    updateLocationFields(lat, lng, data.display_name);
                                })
                                .catch(error => {
                                    console.error('Error getting address:', error);
                                    updateLocationFields(lat, lng);
                                });
                        } catch (err) {
                            console.error('Error setting current location:', err);
                        }
                    }, function(error) {
                        console.error('Geolocation error:', error);
                        alert('Unable to get your location. Please allow location access or select manually.');
                    });
                } else {
                    alert('Geolocation is not supported by your browser.');
                }
            });
        }
        
        // Function to update location fields
        function updateLocationFields(lat, lng, address = null) {
            try {
                document.getElementById('latitude').value = lat;
                document.getElementById('longitude').value = lng;
                
                if (address) {
                    document.getElementById('address').value = address;
                }
                console.log('Location fields updated:', lat, lng, address);
            } catch (err) {
                console.error('Error updating location fields:', err);
            }
        }
        
        // Ensure map container is properly visible first
        mapContainer.style.display = 'block';
        mapContainer.style.visibility = 'visible';
        mapContainer.style.opacity = '1';
        
        // Progressive map size and view fixes
        setTimeout(function() {
            try {
                map.invalidateSize(true);
                console.log('Map size invalidated (first pass)');
            } catch (e) {
                console.warn('First invalidateSize failed:', e);
            }
        }, 100);
        
        setTimeout(function() {
            try {
                map.invalidateSize(true);
                map.setView([defaultLat, defaultLng], 12, {animate: false});
                console.log('Map refreshed and repositioned');
            } catch (e) {
                console.warn('Map refresh failed:', e);
            }
        }, 500);
        
        // Final adjustment after tile loading
        setTimeout(function() {
            try {
                map.invalidateSize(true);
                console.log('Final map size adjustment');
            } catch (e) {
                console.warn('Final size adjustment failed:', e);
            }
        }, 1500);
        
        // Add comprehensive resize handler
        const resizeHandler = function() {
            setTimeout(function() {
                try {
                    if (map && map.getContainer()) {
                        map.invalidateSize(true);
                    }
                } catch (e) {
                    console.warn('Resize invalidateSize failed:', e);
                }
            }, 100);
        };
        
        window.addEventListener('resize', resizeHandler);
        
        // Also handle when the container becomes visible
        const observer = new MutationObserver(function() {
            if (mapContainer.offsetWidth > 0 && mapContainer.offsetHeight > 0) {
                setTimeout(function() {
                    try {
                        map.invalidateSize(true);
                        console.log('Map invalidated after visibility change');
                    } catch (e) {
                        console.warn('Visibility change invalidation failed:', e);
                    }
                }, 100);
            }
        });
        
        observer.observe(mapContainer.parentElement, {
            attributes: true,
            attributeFilter: ['style', 'class']
        });
        
        console.log('Map initialized successfully');
    } catch (err) {
        console.error('Error initializing map:', err);
    }
    
    if (form && submitBtn) {
        // Add form validation and debugging
        form.addEventListener('submit', function(e) {
            console.log('Form submission started');
            
            // Check required fields
            const requiredFields = form.querySelectorAll('[required]');
            let hasErrors = false;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    console.log('Missing required field:', field.name);
                    hasErrors = true;
                }
            });
            
            // Check if at least one operating day is selected
            const operatingDays = form.querySelectorAll('input[name="operating_days[]"]:checked');
            if (operatingDays.length === 0) {
                console.log('No operating days selected');
                e.preventDefault();
                alert('Please select at least one operating day.');
                return;
            } else {
                console.log('Operating days selected:', operatingDays.length);
            }
            
            if (hasErrors) {
                e.preventDefault();
                alert('Please fill in all required fields before submitting.');
                return;
            }
            
            // Disable submit button to prevent double submission
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="bi bi-spinner-border me-1"></i> Creating...';
            
            // Log form data for debugging
            const formData = new FormData(form);
            console.log('Form data being submitted:');
            for (let [key, value] of formData.entries()) {
                console.log(key + ':', value);
            }
        });
        
        console.log('Market creation form initialized successfully');
    } else {
        console.error('Market form or submit button not found');
    }
});
</script>
@endsection