@extends('layouts.admin')

@section('title', 'Edit Supermarket')

@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">Edit Supermarket</h1>
        <p class="text-muted mb-0">Update {{ $supermarket->name }} information</p>
    </div>
    <div>
        <a href="{{ route('admin.supermarkets.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to Supermarkets
        </a>
    </div>
</div>

<!-- Edit Supermarket 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">Supermarket Information</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.supermarkets.update', $supermarket) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row g-3">
                        <!-- Supermarket Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label">Supermarket 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', $supermarket->name) }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Business Type (Hidden) -->
                        <input type="hidden" name="type" value="supermarket">

                        <!-- 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', $supermarket->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>

                        <!-- 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', $supermarket->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', $supermarket->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 update the exact location.</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', $supermarket->latitude) }}" 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', $supermarket->longitude) }}" 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', $supermarket->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', $supermarket->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', $supermarket->website) }}" 
                                   placeholder="https://example.com">
                            @error('website')
                                <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>
                            @if($supermarket->logo)
                                <img src="{{ asset('storage/' . $supermarket->logo) }}" alt="Current Logo" class="mt-2 rounded" style="max-width: 100px; max-height: 100px;">
                            @endif
                            @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>
                            @if($supermarket->cover_image)
                                <img src="{{ asset('storage/' . $supermarket->cover_image) }}" alt="Current Cover" class="mt-2 rounded" style="max-width: 200px; max-height: 80px;">
                            @endif
                            @error('cover_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Supermarket Specific Fields -->
                    <div class="supermarket-fields">
                        <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', $supermarket->supermarketDetail->store_size ?? '') == 'small' ? 'selected' : '' }}>Small (Under 2,000 sq ft)</option>
                                    <option value="medium" {{ old('store_size', $supermarket->supermarketDetail->store_size ?? '') == 'medium' ? 'selected' : '' }}>Medium (2,000-10,000 sq ft)</option>
                                    <option value="large" {{ old('store_size', $supermarket->supermarketDetail->store_size ?? '') == 'large' ? 'selected' : '' }}>Large (10,000-50,000 sq ft)</option>
                                    <option value="hypermarket" {{ old('store_size', $supermarket->supermarketDetail->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', $supermarket->supermarketDetail->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', $supermarket->supermarketDetail->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="text" class="form-control @error('opening_time') is-invalid @enderror" 
                                       id="opening_time" name="opening_time" value="{{ old('opening_time', $supermarket->supermarketDetail->opening_time ?? '') }}"
                                       placeholder="e.g., 9:00 AM">
                                @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="text" class="form-control @error('closing_time') is-invalid @enderror" 
                                       id="closing_time" name="closing_time" value="{{ old('closing_time', $supermarket->supermarketDetail->closing_time ?? '') }}"
                                       placeholder="e.g., 10:00 PM">
                                @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', $supermarket->supermarketDetail->open_24_hours ?? false) ? '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', $supermarket->supermarketDetail->delivery_available ?? false) ? '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', $supermarket->supermarketDetail->has_parking ?? false) ? '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', $supermarket->supermarketDetail->online_shopping_available ?? false) ? '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', $supermarket->supermarketDetail->delivery_available ?? false) ? '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', $supermarket->supermarketDetail->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', $supermarket->supermarketDetail->delivery_available ?? false) ? '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', $supermarket->supermarketDetail->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', $supermarket->supermarketDetail->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', $supermarket->supermarketDetail->customer_service_phone ?? '') }}">
                                @error('customer_service_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Facilities -->
                            @php
                                $currentFacilities = old('facilities', isset($supermarket->supermarketDetail->available_facilities) ? json_decode($supermarket->supermarketDetail->available_facilities, true) : []);
                                $allFacilities = ['pharmacy', 'bakery', 'deli', 'meat_department', 'seafood', 'florist', 'atm', 'cafe'];
                            @endphp
                            <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" 
                                                   {{ in_array('pharmacy', $currentFacilities) ? 'checked' : '' }}>
                                            <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" 
                                                   {{ in_array('bakery', $currentFacilities) ? 'checked' : '' }}>
                                            <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" 
                                                   {{ in_array('deli', $currentFacilities) ? 'checked' : '' }}>
                                            <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" 
                                                   {{ in_array('meat_department', $currentFacilities) ? 'checked' : '' }}>
                                            <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" 
                                                   {{ in_array('seafood', $currentFacilities) ? 'checked' : '' }}>
                                            <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" 
                                                   {{ in_array('florist', $currentFacilities) ? 'checked' : '' }}>
                                            <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" 
                                                   {{ in_array('atm', $currentFacilities) ? 'checked' : '' }}>
                                            <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" 
                                                   {{ in_array('cafe', $currentFacilities) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="facility_cafe">Café</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Payment Methods -->
                            @php
                                $currentPayments = old('payment_methods', isset($supermarket->supermarketDetail->accepted_payment_methods) ? json_decode($supermarket->supermarketDetail->accepted_payment_methods, true) : ['cash', 'card']);
                            @endphp
                            <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" 
                                                   {{ in_array('cash', $currentPayments) ? '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" 
                                                   {{ in_array('card', $currentPayments) ? '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" 
                                                   {{ in_array('mobile_pay', $currentPayments) ? 'checked' : '' }}>
                                            <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" 
                                                   {{ in_array('ebt', $currentPayments) ? 'checked' : '' }}>
                                            <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>
                                    Update Supermarket
                                </button>
                                <a href="{{ route('admin.supermarkets.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">
                <div class="mb-3">
                    <h6 class="fw-bold text-primary">Supermarket Settings</h6>
                    <ul class="list-unstyled small text-muted">
                        <li><strong>Location:</strong> Update coordinates using the map</li>
                        <li><strong>Store Size:</strong> Choose appropriate size category</li>
                        <li><strong>Services:</strong> Update delivery and parking options</li>
                        <li><strong>Facilities:</strong> Mark all departments available in store</li>
                    </ul>
                </div>

                <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 update exact location coordinates.
                    </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 with current coordinates
    const currentLat = {{ $supermarket->latitude ?? 40.7128 }};
    const currentLng = {{ $supermarket->longitude ?? -74.0060 }};
    
    let map = L.map('map').setView([currentLat, currentLng], 15);
    let marker = null;

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

    // Add current marker
    if (currentLat && currentLng) {
        marker = L.marker([currentLat, currentLng]).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);
        }
    }

    // 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);
        }
    });
</script>
@endsection