@extends('layouts.admin')

@section('title', 'Edit Business - ' . $shop->store_name)

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Edit Business</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.index') }}">Malls</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.show', $mall) }}">{{ $mall->name }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.shops', $mall) }}">Businesses</a></li>
                    <li class="breadcrumb-item active">Edit {{ $shop->store_name }}</li>
                </ol>
            </nav>
        </div>
        <a href="{{ route('admin.malls.shops', $mall) }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to Businesses
        </a>
    </div>

    <!-- Edit Form -->
    <form id="editShopForm" method="POST" action="{{ route('admin.malls.shops.update', [$mall, $shop]) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row">
            <div class="col-lg-8">
                <!-- Basic Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Basic Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="store_name" class="form-label">Business Name *</label>
                                    <input type="text" class="form-control" id="store_name" name="store_name" 
                                           value="{{ old('store_name', $shop->store_name) }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="brand_name" class="form-label">Brand Name</label>
                                    <input type="text" class="form-control" id="brand_name" name="brand_name" 
                                           value="{{ old('brand_name', $shop->brand_name) }}">
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="store_description" class="form-label">Business Description *</label>
                            <textarea class="form-control" id="store_description" name="store_description" rows="4" 
                                      placeholder="Describe the business, products, or services offered..." required>{{ old('store_description', $shop->store_description) }}</textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="store_size_category" class="form-label">Store Size *</label>
                                    <select class="form-control" id="store_size_category" name="store_size_category" required>
                                        <option value="">Select Size</option>
                                        <option value="kiosk" {{ old('store_size_category', $shop->store_size_category) == 'kiosk' ? 'selected' : '' }}>Kiosk</option>
                                        <option value="small" {{ old('store_size_category', $shop->store_size_category) == 'small' ? 'selected' : '' }}>Small</option>
                                        <option value="medium" {{ old('store_size_category', $shop->store_size_category) == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="large" {{ old('store_size_category', $shop->store_size_category) == 'large' ? 'selected' : '' }}>Large</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="store_area_sqft" class="form-label">Store Area (sq ft)</label>
                                    <input type="number" class="form-control" id="store_area_sqft" name="store_area_sqft" 
                                           value="{{ old('store_area_sqft', $shop->store_area_sqft) }}" step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="planned_employees" class="form-label">Planned Employees</label>
                                    <input type="number" class="form-control" id="planned_employees" name="planned_employees" 
                                           value="{{ old('planned_employees', $shop->planned_employees) }}" min="1">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="franchise_store" name="franchise_store" 
                                           value="1" {{ old('franchise_store', $shop->franchise_store) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="franchise_store">
                                        This is a franchise store
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="opening_date" class="form-label">Opening Date</label>
                                    <input type="date" class="form-control" id="opening_date" name="opening_date" 
                                           value="{{ old('opening_date', $shop->opening_date ? $shop->opening_date->format('Y-m-d') : '') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- BizSpot Categories -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-tags me-2"></i>BizSpot Categories</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="bizspot_business_type_id" class="form-label">Business Type *</label>
                                    <select class="form-control" id="bizspot_business_type_id" name="bizspot_business_type_id" required>
                                        <option value="">Select Business Type</option>
                                        @foreach($bizspotBusinessTypes as $businessType)
                                            <option value="{{ $businessType->id }}" 
                                                    {{ old('bizspot_business_type_id', $shop->bizspot_business_type_id) == $businessType->id ? 'selected' : '' }}>
                                                {{ $businessType->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="bizspot_main_category_id" class="form-label">Main Category *</label>
                                    <select class="form-control" id="bizspot_main_category_id" name="bizspot_main_category_id" required>
                                        <option value="">Select Main Category</option>
                                        @if($shop->bizspot_business_type_id)
                                            @foreach($bizspotBusinessTypes->where('id', $shop->bizspot_business_type_id)->first()->mainCategories ?? [] as $mainCategory)
                                                <option value="{{ $mainCategory->id }}" 
                                                        {{ old('bizspot_main_category_id', $shop->bizspot_main_category_id) == $mainCategory->id ? 'selected' : '' }}>
                                                    {{ $mainCategory->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="bizspot_sub_category_id" class="form-label">Sub Category *</label>
                                    <select class="form-control" id="bizspot_sub_category_id" name="bizspot_sub_category_id" required>
                                        <option value="">Select Sub Category</option>
                                        @if($shop->bizspot_main_category_id)
                                            @foreach($bizspotBusinessTypes->where('id', $shop->bizspot_business_type_id)->first()->mainCategories->where('id', $shop->bizspot_main_category_id)->first()->subCategories ?? [] as $subCategory)
                                                <option value="{{ $subCategory->id }}" 
                                                        {{ old('bizspot_sub_category_id', $shop->bizspot_sub_category_id) == $subCategory->id ? 'selected' : '' }}>
                                                    {{ $subCategory->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>

                        @if($shop->bizspotSubCategory)
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle me-1"></i>
                                    <strong>Current Category Path:</strong> {{ $shop->bizspotSubCategory->getFullPath() }}
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Location Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-geo-alt me-2"></i>Location Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="unit_number" class="form-label">Unit Number *</label>
                                    <input type="text" class="form-control" id="unit_number" name="unit_number" 
                                           value="{{ old('unit_number', $shop->unit_number) }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="floor_number" class="form-label">Floor Number *</label>
                                    <input type="number" class="form-control" id="floor_number" name="floor_number" 
                                           value="{{ old('floor_number', $shop->floor_number) }}" min="1" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="wing_section" class="form-label">Wing/Section</label>
                                    <input type="text" class="form-control" id="wing_section" name="wing_section" 
                                           value="{{ old('wing_section', $shop->wing_section) }}" placeholder="e.g., North Wing, East Section">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="location_description" class="form-label">Location Description</label>
                                    <input type="text" class="form-control" id="location_description" name="location_description" 
                                           value="{{ old('location_description', $shop->location_description) }}" placeholder="e.g., Near main entrance">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-person-lines-fill me-2"></i>Contact Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="primary_contact_name" class="form-label">Contact Name *</label>
                                    <input type="text" class="form-control" id="primary_contact_name" name="primary_contact_name" 
                                           value="{{ old('primary_contact_name', $shop->primary_contact_name) }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="primary_contact_phone" class="form-label">Phone *</label>
                                    <input type="tel" class="form-control" id="primary_contact_phone" name="primary_contact_phone" 
                                           value="{{ old('primary_contact_phone', $shop->primary_contact_phone) }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="primary_contact_email" class="form-label">Email *</label>
                                    <input type="email" class="form-control" id="primary_contact_email" name="primary_contact_email" 
                                           value="{{ old('primary_contact_email', $shop->primary_contact_email) }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="whatsapp_number" class="form-label">WhatsApp Number</label>
                                    <input type="tel" class="form-control" id="whatsapp_number" name="whatsapp_number" 
                                           value="{{ old('whatsapp_number', $shop->whatsapp_number) }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="website_url" class="form-label">Website URL</label>
                                    <input type="url" class="form-control" id="website_url" name="website_url" 
                                           value="{{ old('website_url', $shop->website_url) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="instagram_handle" class="form-label">Instagram Handle</label>
                                    <div class="input-group">
                                        <span class="input-group-text">@</span>
                                        <input type="text" class="form-control" id="instagram_handle" name="instagram_handle" 
                                               value="{{ old('instagram_handle', $shop->instagram_handle) }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="facebook_page" class="form-label">Facebook Page</label>
                                    <input type="url" class="form-control" id="facebook_page" name="facebook_page" 
                                           value="{{ old('facebook_page', $shop->facebook_page) }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Business Images -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-images me-2"></i>Business Images</h5>
                    </div>
                    <div class="card-body">
                        <!-- Current Logo -->
                        @if($shop->logo_image)
                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label">Current Logo</label>
                                <div class="d-flex align-items-center">
                                    <img src="{{ asset('storage/' . $shop->logo_image) }}" alt="Current Logo" class="img-thumbnail me-3" style="max-height: 80px;">
                                    <div>
                                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeCurrentLogo()">Remove Logo</button>
                                        <input type="hidden" name="remove_logo" id="remove_logo" value="0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Upload New Logo -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="logo_image" class="form-label">Business Logo</label>
                                <input type="file" class="form-control" id="logo_image" name="logo_image" accept="image/*">
                                <small class="text-muted">Max size: 2MB. Formats: JPEG, PNG, JPG</small>
                            </div>
                            <div class="col-md-6">
                                <label for="store_images" class="form-label">Store Images</label>
                                <input type="file" class="form-control" id="store_images" name="store_images[]" multiple accept="image/*">
                                <small class="text-muted">Max size: 5MB each. Multiple images allowed</small>
                            </div>
                        </div>

                        <!-- Current Store Images -->
                        @if($shop->store_images && is_array($shop->store_images) && count($shop->store_images) > 0)
                        <div class="row">
                            <div class="col-12">
                                <label class="form-label">Current Store Images</label>
                                <div class="row g-2">
                                    @foreach($shop->store_images as $index => $image)
                                    <div class="col-md-3 mb-2">
                                        <div class="position-relative">
                                            <img src="{{ asset('storage/' . $image) }}" alt="Store Image {{ $index + 1 }}" 
                                                 class="img-thumbnail w-100" style="height: 120px; object-fit: cover;">
                                            <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1" 
                                                    onclick="removeStoreImage({{ $index }})">
                                                <i class="bi bi-x"></i>
                                            </button>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <input type="hidden" name="remove_store_images" id="remove_store_images" value="">
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Business Features -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-star me-2"></i>Business Features</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Store Features</h6>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="storefront_signage" name="storefront_signage" 
                                           value="1" {{ old('storefront_signage', $shop->storefront_signage) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="storefront_signage">Storefront Signage</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="window_display" name="window_display" 
                                           value="1" {{ old('window_display', $shop->window_display) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="window_display">Window Display</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="fitting_rooms" name="fitting_rooms" 
                                           value="1" {{ old('fitting_rooms', $shop->fitting_rooms) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="fitting_rooms">Fitting Rooms</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="customer_seating" name="customer_seating" 
                                           value="1" {{ old('customer_seating', $shop->customer_seating) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="customer_seating">Customer Seating</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6>Services</h6>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="takeaway_service" name="takeaway_service" 
                                           value="1" {{ old('takeaway_service', $shop->takeaway_service) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="takeaway_service">Takeaway Service</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="delivery_service" name="delivery_service" 
                                           value="1" {{ old('delivery_service', $shop->delivery_service) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="delivery_service">Delivery Service</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="wheelchair_accessible" name="wheelchair_accessible" 
                                           value="1" {{ old('wheelchair_accessible', $shop->wheelchair_accessible) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="wheelchair_accessible">Wheelchair Accessible</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="family_friendly" name="family_friendly" 
                                           value="1" {{ old('family_friendly', $shop->family_friendly) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="family_friendly">Family Friendly</label>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Methods -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <h6>Payment Methods</h6>
                                <div class="row">
                                    @php
                                        $paymentMethods = old('payment_methods', $shop->payment_methods ?? []);
                                    @endphp
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]" value="cash" 
                                                   id="payment_cash" {{ in_array('cash', $paymentMethods) ? '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" name="payment_methods[]" value="credit_card" 
                                                   id="payment_credit" {{ in_array('credit_card', $paymentMethods) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="payment_credit">Credit Card</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]" value="debit_card" 
                                                   id="payment_debit" {{ in_array('debit_card', $paymentMethods) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="payment_debit">Debit Card</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]" value="digital_wallet" 
                                                   id="payment_digital" {{ in_array('digital_wallet', $paymentMethods) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="payment_digital">Digital Wallet</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Business Documents -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Business Documents & Licenses</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="business_license_number" class="form-label">Business License Number</label>
                                    <input type="text" class="form-control" id="business_license_number" name="business_license_number" 
                                           value="{{ old('business_license_number', $shop->business_license_number) }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="trade_license_number" class="form-label">Trade License Number</label>
                                    <input type="text" class="form-control" id="trade_license_number" name="trade_license_number" 
                                           value="{{ old('trade_license_number', $shop->trade_license_number) }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <label for="business_documents" class="form-label">Business Documents</label>
                                <input type="file" class="form-control" id="business_documents" name="business_documents[]" 
                                       multiple accept=".pdf,.jpg,.jpeg,.png">
                                <small class="text-muted">Upload licenses, permits, etc. Max 10MB each</small>
                            </div>
                        </div>

                        <!-- Current Documents -->
                        @if($shop->business_documents && count($shop->business_documents) > 0)
                        <div class="row mt-3">
                            <div class="col-12">
                                <label class="form-label">Current Documents</label>
                                <div class="list-group">
                                    @foreach($shop->business_documents as $index => $document)
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <i class="bi bi-file-earmark-pdf text-danger me-2"></i>
                                            Document {{ $index + 1 }}
                                            <a href="{{ asset('storage/' . $document) }}" target="_blank" class="btn btn-sm btn-outline-primary ms-2">
                                                <i class="bi bi-download"></i> Download
                                            </a>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeDocument({{ $index }})">
                                            <i class="bi bi-trash"></i> Remove
                                        </button>
                                    </div>
                                    @endforeach
                                </div>
                                <input type="hidden" name="remove_documents" id="remove_documents" value="">
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Status Card -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Business Status</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Registration Status</label>
                            <br>
                            @php
                                $statusColors = [
                                    'pending' => 'warning',
                                    'approved' => 'success',
                                    'rejected' => 'danger',
                                    'suspended' => 'secondary'
                                ];
                                $statusColor = $statusColors[$shop->registration_status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $statusColor }} fs-6">{{ ucfirst($shop->registration_status) }}</span>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Occupancy Status</label>
                            <select class="form-control" name="occupancy_status">
                                <option value="coming_soon" {{ old('occupancy_status', $shop->occupancy_status) == 'coming_soon' ? 'selected' : '' }}>Coming Soon</option>
                                <option value="operational" {{ old('occupancy_status', $shop->occupancy_status) == 'operational' ? 'selected' : '' }}>Operational</option>
                                <option value="temporarily_closed" {{ old('occupancy_status', $shop->occupancy_status) == 'temporarily_closed' ? 'selected' : '' }}>Temporarily Closed</option>
                                <option value="permanently_closed" {{ old('occupancy_status', $shop->occupancy_status) == 'permanently_closed' ? 'selected' : '' }}>Permanently Closed</option>
                            </select>
                        </div>

                        @if($shop->store_number)
                        <div class="mb-3">
                            <label class="form-label">Store Number</label>
                            <p class="mb-0">{{ $shop->store_number }}</p>
                        </div>
                        @endif

                        @if($shop->application_date)
                        <div class="mb-3">
                            <label class="form-label">Application Date</label>
                            <p class="mb-0">{{ $shop->application_date->format('M d, Y') }}</p>
                        </div>
                        @endif

                        @if($shop->approved_at)
                        <div class="mb-3">
                            <label class="form-label">Approved Date</label>
                            <p class="mb-0">{{ $shop->approved_at->format('M d, Y') }}</p>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Actions -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save me-1"></i>
                                Update Business
                            </button>
                            <a href="{{ route('admin.malls.shops', $mall) }}" class="btn btn-secondary">
                                Cancel
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
let removedStoreImages = [];
let removedDocuments = [];

function removeCurrentLogo() {
    document.getElementById('remove_logo').value = '1';
    // Hide the current logo section
    event.target.closest('.row').style.display = 'none';
}

function removeStoreImage(index) {
    removedStoreImages.push(index);
    document.getElementById('remove_store_images').value = removedStoreImages.join(',');
    // Hide the image
    event.target.closest('.col-md-3').style.display = 'none';
}

function removeDocument(index) {
    removedDocuments.push(index);
    document.getElementById('remove_documents').value = removedDocuments.join(',');
    // Hide the document
    event.target.closest('.list-group-item').style.display = 'none';
}

document.addEventListener('DOMContentLoaded', function() {
    const editForm = document.getElementById('editShopForm');
    
    if (editForm) {
        editForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const submitBtn = editForm.querySelector('button[type="submit"]');
            const formData = new FormData(editForm);
            
            // Show loading state
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="spinner-border spinner-border-sm me-1"></i> Updating...';
            
            fetch(editForm.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Show success message
                    const alert = document.createElement('div');
                    alert.className = 'alert alert-success alert-dismissible fade show';
                    alert.innerHTML = '<i class="bi bi-check-circle me-1"></i>' + data.message +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>';
                    
                    editForm.insertBefore(alert, editForm.firstChild);
                    
                    // Scroll to top
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                    
                    // Auto-dismiss after 5 seconds
                    setTimeout(function() {
                        alert.style.display = 'none';
                    }, 5000);
                } else {
                    throw new Error(data.message || 'Update failed');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                let errorMessage = 'An error occurred while updating the business.';
                
                const alert = document.createElement('div');
                alert.className = 'alert alert-danger alert-dismissible fade show';
                alert.innerHTML = '<i class="bi bi-exclamation-triangle me-1"></i>' + errorMessage +
                    '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>';
                
                editForm.insertBefore(alert, editForm.firstChild);
                window.scrollTo({ top: 0, behavior: 'smooth' });
            })
            .finally(function() {
                // Reset button state
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="bi bi-save me-1"></i> Update Business';
            });
        });
    }
});

// BizSpot Category Cascading Dropdowns
document.addEventListener('DOMContentLoaded', function() {
    const businessTypeSelect = document.getElementById('bizspot_business_type_id');
    const mainCategorySelect = document.getElementById('bizspot_main_category_id');
    const subCategorySelect = document.getElementById('bizspot_sub_category_id');

    // Store all categories data
    const categoriesData = @json($bizspotBusinessTypes);

    function updateMainCategories() {
        const selectedBusinessTypeId = businessTypeSelect.value;
        mainCategorySelect.innerHTML = '<option value="">Select Main Category</option>';
        subCategorySelect.innerHTML = '<option value="">Select Sub Category</option>';

        if (selectedBusinessTypeId) {
            const businessType = categoriesData.find(bt => bt.id == selectedBusinessTypeId);
            if (businessType && businessType.mainCategories) {
                businessType.mainCategories.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.id;
                    option.textContent = category.name;
                    mainCategorySelect.appendChild(option);
                });
            }
        }
    }

    function updateSubCategories() {
        const selectedMainCategoryId = mainCategorySelect.value;
        subCategorySelect.innerHTML = '<option value="">Select Sub Category</option>';

        if (selectedMainCategoryId) {
            const selectedBusinessTypeId = businessTypeSelect.value;
            const businessType = categoriesData.find(bt => bt.id == selectedBusinessTypeId);
            if (businessType && businessType.mainCategories) {
                const mainCategory = businessType.mainCategories.find(mc => mc.id == selectedMainCategoryId);
                if (mainCategory && mainCategory.subCategories) {
                    mainCategory.subCategories.forEach(subCategory => {
                        const option = document.createElement('option');
                        option.value = subCategory.id;
                        option.textContent = subCategory.name;
                        subCategorySelect.appendChild(option);
                    });
                }
            }
        }
    }

    // Event listeners
    businessTypeSelect.addEventListener('change', updateMainCategories);
    mainCategorySelect.addEventListener('change', updateSubCategories);
});
</script>
@endsection