@extends('layouts.admin')

@section('title', 'Create Business')

@section('head')
<!-- Leaflet CSS for OpenStreetMap -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""/>
<style>
    #map {
        height: 400px;
        width: 100%;
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }
    .supermarket-fields {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
    }
</style>
@endsection

@section('content')
<!-- 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">
            @if(request('type') == 'supermarket')
                Create New Supermarket
            @else
                Create New Business
            @endif
        </h1>
        <p class="text-muted mb-0">
            @if(request('type') == 'supermarket')
                Add a new supermarket to the platform with detailed information
            @else
                Add a new business to the platform
            @endif
        </p>
    </div>
    <div>
        <a href="{{ route('admin.businesses.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to List
        </a>
    </div>
</div>

<!-- Create Business 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">
                    @if(request('type') == 'supermarket')
                        Supermarket Information
                    @else
                        Business Information
                    @endif
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.businesses.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3">
                        <!-- Business Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label">
                                @if(request('type') == 'supermarket')
                                    Supermarket Name
                                @else
                                    Business Name
                                @endif
                                <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>

                        <!-- Business Type -->
                        <div class="col-md-6">
                            <label for="type" class="form-label">Business Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                                <option value="">Select Business Type</option>
                                <option value="mall" {{ (old('type') ?? request('type')) == 'mall' ? 'selected' : '' }}>Mall</option>
                                <option value="market" {{ (old('type') ?? request('type')) == 'market' ? 'selected' : '' }}>Market</option>
                                <option value="supermarket" {{ (old('type') ?? request('type')) == 'supermarket' ? 'selected' : '' }}>Supermarket</option>
                                <option value="other" {{ (old('type') ?? request('type')) == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('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 and Map -->
                        <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
                        </div>

                        <!-- Map Container -->
                        <div class="col-12">
                            <label class="form-label">Location on Map</label>
                            <div id="map"></div>
                            <div class="form-text">Click on the map to set the exact location, or search for an address.</div>
                        </div>

                        <!-- Coordinates -->
                        <div class="col-md-6">
                            <label for="latitude" class="form-label">Latitude <span class="text-danger">*</span></label>
                            <input type="number" step="any" class="form-control @error('latitude') is-invalid @enderror" 
                                   id="latitude" name="latitude" value="{{ old('latitude') }}" 
                                   placeholder="e.g., 40.7128" required>
                            @error('latitude')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="longitude" class="form-label">Longitude <span class="text-danger">*</span></label>
                            <input type="number" step="any" class="form-control @error('longitude') is-invalid @enderror" 
                                   id="longitude" name="longitude" value="{{ old('longitude') }}" 
                                   placeholder="e.g., -74.0060" required>
                            @error('longitude')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </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>

                        <!-- Business Owner -->
                        <div class="col-md-6">
                            <label for="user_id" class="form-label">Business 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>
                                @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>

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

                        <!-- Cover Image Upload -->
                        <div class="col-md-6">
                            <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">Wide format recommended (1200x400px). Max size: 5MB</div>
                            @error('cover_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Supermarket Specific Fields -->
                    <div id="supermarket-fields" class="supermarket-fields" style="display: {{ (old('type') ?? request('type')) == 'supermarket' ? 'block' : 'none' }};">
                        <h6 class="fw-bold text-primary mb-3">
                            <i class="bi bi-shop me-2"></i>
                            Supermarket Details
                        </h6>
                        
                        <div class="row g-3">
                            <!-- Store Size -->
                            <div class="col-md-6">
                                <label for="store_size" class="form-label">Store Size <span class="text-danger">*</span></label>
                                <select class="form-select @error('store_size') is-invalid @enderror" id="store_size" name="store_size">
                                    <option value="">Select Store Size</option>
                                    <option value="small" {{ old('store_size') == 'small' ? 'selected' : '' }}>Small (Under 2,000 sq ft)</option>
                                    <option value="medium" {{ old('store_size') == 'medium' ? 'selected' : '' }}>Medium (2,000-10,000 sq ft)</option>
                                    <option value="large" {{ old('store_size') == 'large' ? 'selected' : '' }}>Large (10,000-50,000 sq ft)</option>
                                    <option value="hypermarket" {{ old('store_size') == 'hypermarket' ? 'selected' : '' }}>Hypermarket (50,000+ sq ft)</option>
                                </select>
                                @error('store_size')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Number of Aisles -->
                            <div class="col-md-6">
                                <label for="total_aisles" class="form-label">Number of Aisles</label>
                                <input type="number" class="form-control @error('total_aisles') is-invalid @enderror" 
                                       id="total_aisles" name="total_aisles" value="{{ old('total_aisles', 0) }}" min="0">
                                @error('total_aisles')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Parking Spaces -->
                            <div class="col-md-6">
                                <label for="parking_spaces" class="form-label">Parking Spaces</label>
                                <input type="number" class="form-control @error('parking_spaces') is-invalid @enderror" 
                                       id="parking_spaces" name="parking_spaces" value="{{ old('parking_spaces') }}" min="0">
                                @error('parking_spaces')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Operating Hours -->
                            <div class="col-md-6">
                                <label for="opening_time" class="form-label">Opening Time</label>
                                <input type="time" class="form-control @error('opening_time') is-invalid @enderror" 
                                       id="opening_time" name="opening_time" value="{{ old('opening_time') }}">
                                @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</label>
                                <input type="time" class="form-control @error('closing_time') is-invalid @enderror" 
                                       id="closing_time" name="closing_time" value="{{ old('closing_time') }}">
                                @error('closing_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Checkboxes for services -->
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="open_24_hours" name="open_24_hours" value="1" {{ old('open_24_hours') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="open_24_hours">
                                        Open 24 Hours
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <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" for="has_delivery">
                                        Has Delivery Service
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="has_parking" name="has_parking" value="1" {{ old('has_parking') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="has_parking">
                                        Has Parking
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="online_shopping" name="online_shopping" value="1" {{ old('online_shopping') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="online_shopping">
                                        Online Shopping Available
                                    </label>
                                </div>
                            </div>

                            <!-- Delivery Details -->
                            <div class="col-md-6" id="delivery-fields" style="display: {{ old('has_delivery') ? 'block' : 'none' }};">
                                <label for="delivery_radius" class="form-label">Delivery Radius (km)</label>
                                <input type="number" step="0.1" class="form-control @error('delivery_radius') is-invalid @enderror" 
                                       id="delivery_radius" name="delivery_radius" value="{{ old('delivery_radius') }}" min="0">
                                @error('delivery_radius')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6" id="delivery-fee-fields" style="display: {{ old('has_delivery') ? 'block' : 'none' }};">
                                <label for="delivery_fee" class="form-label">Delivery Fee ($)</label>
                                <input type="number" step="0.01" class="form-control @error('delivery_fee') is-invalid @enderror" 
                                       id="delivery_fee" name="delivery_fee" value="{{ old('delivery_fee') }}" min="0">
                                @error('delivery_fee')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Contact Information -->
                            <div class="col-md-6">
                                <label for="contact_manager" class="form-label">Manager Name</label>
                                <input type="text" class="form-control @error('contact_manager') is-invalid @enderror" 
                                       id="contact_manager" name="contact_manager" value="{{ old('contact_manager') }}">
                                @error('contact_manager')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                                <label for="customer_service_phone" class="form-label">Customer Service Phone</label>
                                <input type="tel" class="form-control @error('customer_service_phone') is-invalid @enderror" 
                                       id="customer_service_phone" name="customer_service_phone" value="{{ old('customer_service_phone') }}">
                                @error('customer_service_phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            </div>

                            <!-- Facilities -->
                            <div class="col-12">
                                <label class="form-label">Available Facilities</label>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="facility_pharmacy" name="facilities[]" value="pharmacy">
                                            <label class="form-check-label" for="facility_pharmacy">Pharmacy</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="facility_bakery" name="facilities[]" value="bakery">
                                            <label class="form-check-label" for="facility_bakery">Bakery</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="facility_deli" name="facilities[]" value="deli">
                                            <label class="form-check-label" for="facility_deli">Deli</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="facility_meat" name="facilities[]" value="meat_department">
                                            <label class="form-check-label" for="facility_meat">Meat Department</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="facility_seafood" name="facilities[]" value="seafood">
                                            <label class="form-check-label" for="facility_seafood">Seafood</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="facility_florist" name="facilities[]" value="florist">
                                            <label class="form-check-label" for="facility_florist">Florist</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="facility_atm" name="facilities[]" value="atm">
                                            <label class="form-check-label" for="facility_atm">ATM</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="facility_cafe" name="facilities[]" value="cafe">
                                            <label class="form-check-label" for="facility_cafe">Café</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Payment Methods -->
                            <div class="col-12">
                                <label class="form-label">Accepted Payment Methods</label>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="payment_cash" name="payment_methods[]" value="cash" checked>
                                            <label class="form-check-label" for="payment_cash">Cash</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="payment_card" name="payment_methods[]" value="card" checked>
                                            <label class="form-check-label" for="payment_card">Credit/Debit Card</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="payment_mobile" name="payment_methods[]" value="mobile_pay">
                                            <label class="form-check-label" for="payment_mobile">Mobile Pay</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="payment_ebt" name="payment_methods[]" value="ebt">
                                            <label class="form-check-label" for="payment_ebt">EBT/SNAP</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-lg me-1"></i>
                                    @if(request('type') == 'supermarket')
                                        Create Supermarket
                                    @else
                                    Create Business
                                    @endif
                                </button>
                                <a href="{{ route('admin.businesses.index') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-lg me-1"></i>
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Help Panel -->
    <div class="col-lg-4">
        <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">
                    <i class="bi bi-info-circle me-2"></i>
                    Quick Guide
                </h5>
            </div>
            <div class="card-body">
                @if(request('type') == 'supermarket')
                <div class="mb-3">
                    <h6 class="fw-bold text-primary">Supermarket Setup</h6>
                    <ul class="list-unstyled small text-muted">
                        <li><strong>Location:</strong> Use the map to set exact coordinates</li>
                        <li><strong>Store Size:</strong> Choose appropriate size category</li>
                        <li><strong>Services:</strong> Select available delivery and parking options</li>
                        <li><strong>Facilities:</strong> Mark all departments available in store</li>
                    </ul>
                </div>
                @else
                <div class="mb-3">
                    <h6 class="fw-bold text-primary">Business Types</h6>
                    <ul class="list-unstyled small text-muted">
                        <li><strong>Mall:</strong> Shopping centers with multiple stores</li>
                        <li><strong>Market:</strong> Traditional markets with stalls</li>
                        <li><strong>Supermarket:</strong> Large retail stores</li>
                        <li><strong>Other:</strong> Any other business type</li>
                    </ul>
                </div>
                @endif

                <div class="mb-3">
                    <h6 class="fw-bold text-primary">Required Fields</h6>
                    <p class="small text-muted">
                        All fields marked with <span class="text-danger">*</span> are required. 
                        Make sure to provide accurate contact information.
                    </p>
                </div>

                <div class="mb-3">
                    <h6 class="fw-bold text-primary">Image Guidelines</h6>
                    <ul class="list-unstyled small text-muted">
                        <li><strong>Logo:</strong> Square format (300x300px min)</li>
                        <li><strong>Cover:</strong> Wide format (1200x400px recommended)</li>
                        <li>• High resolution, professional images</li>
                        <li>• Logo max: 2MB, Cover max: 5MB</li>
                    </ul>
                </div>

                <div class="alert alert-info">
                    <small>
                        <i class="bi bi-lightbulb me-1"></i>
                        <strong>Tip:</strong> Click on the map to set exact location coordinates automatically.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

<script>
    // Initialize map
    let map = L.map('map').setView([40.7128, -74.0060], 10); // Default to NYC
    let marker = null;

    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Function to add/update marker
    function addMarker(lat, lng) {
        if (marker) {
            map.removeLayer(marker);
        }
        marker = L.marker([lat, lng]).addTo(map);
        document.getElementById('latitude').value = lat;
        document.getElementById('longitude').value = lng;
    }

    // Map click event
    map.on('click', function(e) {
        addMarker(e.latlng.lat, e.latlng.lng);
    });

    // Update map when coordinates are manually entered
    document.getElementById('latitude').addEventListener('input', updateMapFromCoordinates);
    document.getElementById('longitude').addEventListener('input', updateMapFromCoordinates);

    function updateMapFromCoordinates() {
        const lat = parseFloat(document.getElementById('latitude').value);
        const lng = parseFloat(document.getElementById('longitude').value);
        
        if (!isNaN(lat) && !isNaN(lng)) {
            map.setView([lat, lng], 15);
            addMarker(lat, lng);
        }
    }

    // Geolocation
    if (navigator.geolocation && !document.getElementById('latitude').value) {
        navigator.geolocation.getCurrentPosition(function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            map.setView([lat, lng], 15);
            if (confirm('Would you like to use your current location as business coordinates?')) {
                addMarker(lat, lng);
            }
        });
    }

    // Show/hide supermarket fields based on type selection
    document.getElementById('type').addEventListener('change', function() {
        const supermarketFields = document.getElementById('supermarket-fields');
        
        if (this.value === 'supermarket') {
            supermarketFields.style.display = 'block';
        } else {
            supermarketFields.style.display = 'none';
        }
    });

    // Show/hide delivery fields based on delivery checkbox
    document.getElementById('has_delivery').addEventListener('change', function() {
        const deliveryFields = document.getElementById('delivery-fields');
        const deliveryFeeFields = document.getElementById('delivery-fee-fields');
        
        if (this.checked) {
            deliveryFields.style.display = 'block';
            deliveryFeeFields.style.display = 'block';
        } else {
            deliveryFields.style.display = 'none';
            deliveryFeeFields.style.display = 'none';
        }
    });

    // Preview logo upload
    document.getElementById('logo').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // Create preview if doesn't exist
                let preview = document.getElementById('logo-preview');
                if (!preview) {
                    preview = document.createElement('img');
                    preview.id = 'logo-preview';
                    preview.className = 'mt-2 rounded';
                    preview.style.maxWidth = '150px';
                    preview.style.maxHeight = '150px';
                    document.getElementById('logo').parentNode.appendChild(preview);
                }
                preview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    // Preview cover image upload
    document.getElementById('cover_image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // Create preview if doesn't exist
                let preview = document.getElementById('cover-preview');
                if (!preview) {
                    preview = document.createElement('img');
                    preview.id = 'cover-preview';
                    preview.className = 'mt-2 rounded';
                    preview.style.maxWidth = '300px';
                    preview.style.maxHeight = '100px';
                    document.getElementById('cover_image').parentNode.appendChild(preview);
                }
                preview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM Content Loaded - Form initialized');
        
        // Add form submission debugging
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function(e) {
                console.log('Form submission started');
                console.log('Form data:', new FormData(form));
                
                // Check required fields
                const requiredFields = form.querySelectorAll('[required]');
                let missingFields = [];
                
                requiredFields.forEach(function(field) {
                    if (!field.value.trim()) {
                        missingFields.push(field.name || field.id);
                    }
                });
                
                if (missingFields.length > 0) {
                    console.log('Missing required fields:', missingFields);
                    alert('Please fill in all required fields: ' + missingFields.join(', '));
                    e.preventDefault();
                    return false;
                }
                
                // For supermarkets, check store_size is selected
                const typeField = document.getElementById('type');
                if (typeField && typeField.value === 'supermarket') {
                    const storeSizeField = document.getElementById('store_size');
                    if (!storeSizeField || !storeSizeField.value) {
                        console.log('Store size is required for supermarkets');
                        alert('Store size is required for supermarkets');
                        e.preventDefault();
                        return false;
                    }
                }
                
                console.log('Form validation passed, submitting...');
            });
        } else {
            console.error('Form not found!');
        }
        
        // Trigger type change event if type is already selected
        const typeSelect = document.getElementById('type');
        if (typeSelect) {
            if (typeSelect.value) {
                console.log('Triggering type change for:', typeSelect.value);
                typeSelect.dispatchEvent(new Event('change'));
            }
        } else {
            console.error('Type select not found!');
        }
        
        // Trigger delivery change event if delivery is checked
        const deliveryCheckbox = document.getElementById('has_delivery');
        if (deliveryCheckbox) {
            if (deliveryCheckbox.checked) {
                console.log('Triggering delivery change');
                deliveryCheckbox.dispatchEvent(new Event('change'));
            }
        } else {
            console.error('Delivery checkbox not found!');
        }
    });
</script>
@endsection