@extends('layouts.admin')

@section('title', 'Edit Store - ' . $store->store_name . ' - ' . $mall->name)

@section('content')
<!-- Debug Information (remove in production) -->
@if(config('app.debug'))
<div class="alert alert-info mb-4">
    <h6>Debug Information:</h6>
    <ul class="mb-0">
        <li>Store ID: {{ $store->id }}</li>
        <li>Store Name: {{ $store->store_name }}</li>
        <li>Business Types Count: {{ $businessTypes->count() }}</li>
        <li>Users Count: {{ $users->count() }}</li>
        <li>BizSpot Business Type ID: {{ $store->bizspot_business_type_id ?? 'Not set' }}</li>
        <li>BizSpot Main Category ID: {{ $store->bizspot_main_category_id ?? 'Not set' }}</li>
        <li>BizSpot Sub Category ID: {{ $store->bizspot_sub_category_id ?? 'Not set' }}</li>
        <li>Cover Image: {{ $store->cover_image ?? 'Not set' }}</li>
        <li>Operating Hours: {{ $store->operating_hours_text ?? 'Not set' }}</li>
        <li>Owner User ID: {{ $store->shop_owner_user_id ?? 'Not set' }}</li>
        <li>Franchise Store: {{ $store->franchise_store ? 'Yes' : 'No' }}</li>
        <li>Is Verified: {{ $store->is_verified ? 'Yes' : 'No' }}</li>
        <li>Is Featured: {{ $store->is_featured ? 'Yes' : 'No' }}</li>
    </ul>
</div>
@endif

<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Edit Store: {{ $store->store_name }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ url('/admin') }}">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.stores', $mall) }}">Stores</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit {{ $store->store_name }}</li>
            </ol>
        </nav>
    </div>
    <div>
        <a href="{{ route('admin.malls.stores', $mall) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to Stores
        </a>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <!-- Main Form -->
        <div class="col-lg-8">
            <form method="POST" action="{{ route('admin.malls.stores.update', [$mall, $store]) }}" enctype="multipart/form-data" id="storeForm">
                @csrf
                @method('PUT')
                
                <!-- Store Status -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="occupancy_status" class="form-label fw-bold">Store Status <span class="text-danger">*</span></label>
                        <select class="form-select @error('occupancy_status') is-invalid @enderror" 
                                id="occupancy_status" name="occupancy_status" required>
                            <option value="">Select Status</option>
                            <option value="operational" {{ old('occupancy_status', $store->occupancy_status) == 'operational' ? 'selected' : '' }}>🟢 Operational</option>
                            <option value="coming_soon" {{ old('occupancy_status', $store->occupancy_status) == 'coming_soon' ? 'selected' : '' }}>🟡 Coming Soon</option>
                            <option value="temporarily_closed" {{ old('occupancy_status', $store->occupancy_status) == 'temporarily_closed' ? 'selected' : '' }}>🔴 Temporarily Closed</option>
                            <option value="permanently_closed" {{ old('occupancy_status', $store->occupancy_status) == 'permanently_closed' ? 'selected' : '' }}>⚫ Permanently Closed</option>
                        </select>
                        @error('occupancy_status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                
                <!-- Store Identity Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-gradient-primary py-3">
                        <h6 class="m-0 font-weight-bold text-white">
                            <i class="bi bi-shop me-2"></i>
                            Store Identity
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="store_name" class="form-label fw-bold">Store Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-lg @error('store_name') is-invalid @enderror" 
                                               id="store_name" name="store_name" value="{{ old('store_name', $store->store_name) }}"
                                               placeholder="Enter store name" required>
                                        @error('store_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="store_number" class="form-label fw-bold">Store Number</label>
                                        <input type="text" class="form-control @error('store_number') is-invalid @enderror" 
                                               id="store_number" name="store_number" value="{{ old('store_number', $store->store_number) }}"
                                               placeholder="Auto-generated if empty">
                                        @error('store_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="floor_number" class="form-label fw-bold">Floor Number <span class="text-danger">*</span></label>
                                        <select class="form-select @error('floor_number') is-invalid @enderror" 
                                                id="floor_number" name="floor_number" required>
                                            <option value="">Select Floor</option>
                                            @for($i = 1; $i <= 10; $i++)
                                                <option value="{{ $i }}" {{ old('floor_number', $store->floor_number) == $i ? 'selected' : '' }}>
                                                    Floor {{ $i }}
                                                </option>
                                            @endfor
                                        </select>
                                        @error('floor_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="unit_number" class="form-label fw-bold">Unit Number <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('unit_number') is-invalid @enderror" 
                                               id="unit_number" name="unit_number" value="{{ old('unit_number', $store->unit_number) }}" 
                                               required placeholder="e.g., A-101, B-205">
                                        @error('unit_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Store Logo Upload -->
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Store Logo</label>
                                <div class="upload-container text-center">
                                    <div class="upload-area border border-2 border-dashed rounded p-4" id="logoUploadArea">
                                        <div class="upload-content">
                                            @if($store->logo_image)
                                                <img src="{{ asset('storage/' . $store->logo_image) }}" id="logoPreview" class="img-fluid rounded mb-2" style="max-height: 150px;">
                                            @else
                                                <i class="bi bi-cloud-upload display-4 text-muted mb-3"></i>
                                                <p class="mb-2 text-muted">Click to upload store logo</p>
                                                <small class="text-muted">PNG, JPG up to 2MB</small>
                                            @endif
                                        </div>
                                        <input type="file" id="logo_image" name="logo_image" accept="image/*" class="d-none">
                                    </div>
                                    @error('logo_image')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Business Classification Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-gradient-info py-3">
                        <h6 class="m-0 font-weight-bold text-white">
                            <i class="bi bi-tags me-2"></i>
                            Business Classification
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Business Type Selection -->
                            <div class="col-md-4">
                                <label for="bizspot_business_type_id" class="form-label fw-bold">Business Type</label>
                                <select class="form-control" id="bizspot_business_type_id" name="bizspot_business_type_id">
                                    <option value="">Select Business Type</option>
                                    @foreach($businessTypes as $type)
                                        <option value="{{ $type->id }}" {{ old('bizspot_business_type_id', $store->bizspot_business_type_id ?? '') == $type->id ? 'selected' : '' }}>
                                            {{ $type->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Main Category Selection -->
                            <div class="col-md-4 mb-3">
                                <label for="bizspot_main_category_id" class="form-label fw-bold">Main Category</label>
                                <select class="form-select @error('bizspot_main_category_id') is-invalid @enderror" 
                                        id="bizspot_main_category_id" name="bizspot_main_category_id">
                                    <option value="">Select Main Category</option>
                                </select>
                                @error('bizspot_main_category_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Sub Category Selection -->
                            <div class="col-md-4 mb-3">
                                <label for="bizspot_sub_category_id" class="form-label fw-bold">Sub Category</label>
                                <select class="form-select @error('bizspot_sub_category_id') is-invalid @enderror" 
                                        id="bizspot_sub_category_id" name="bizspot_sub_category_id">
                                    <option value="">Select Sub Category</option>
                                </select>
                                @error('bizspot_sub_category_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Store Description Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-gradient-success py-3">
                        <h6 class="m-0 font-weight-bold text-white">
                            <i class="bi bi-file-text me-2"></i>
                            Store Description
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="brand_name" class="form-label fw-bold">Brand Name</label>
                                <input type="text" class="form-control @error('brand_name') is-invalid @enderror" 
                                       id="brand_name" name="brand_name" value="{{ old('brand_name', $store->brand_name) }}"
                                       placeholder="Official brand name if different from store name">
                                @error('brand_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="store_size_category" class="form-label fw-bold">Store Size</label>
                                <select class="form-select @error('store_size_category') is-invalid @enderror" 
                                        id="store_size_category" name="store_size_category">
                                    <option value="">Select Size Category</option>
                                    <option value="kiosk" {{ old('store_size_category', $store->store_size_category) == 'kiosk' ? 'selected' : '' }}>🏪 Kiosk</option>
                                    <option value="small" {{ old('store_size_category', $store->store_size_category) == 'small' ? 'selected' : '' }}>🏬 Small</option>
                                    <option value="medium" {{ old('store_size_category', $store->store_size_category) == 'medium' ? 'selected' : '' }}>🏢 Medium</option>
                                    <option value="large" {{ old('store_size_category', $store->store_size_category) == 'large' ? 'selected' : '' }}>🏬 Large</option>
                                </select>
                                @error('store_size_category')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="store_description" class="form-label fw-bold">Business Description <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('store_description') is-invalid @enderror" 
                                      id="store_description" name="store_description" rows="4" required
                                      placeholder="Describe what this business offers, its specialty, target customers, and any unique features...">{{ old('store_description', $store->store_description) }}</textarea>
                            @error('store_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Help customers understand what makes your business special</div>
                        </div>
                    </div>
                </div>

                <!-- Contact Information Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-gradient-info py-3">
                        <h6 class="m-0 font-weight-bold text-white">
                            <i class="bi bi-person-lines-fill me-2"></i>
                            Contact Information
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="primary_contact_name" class="form-label fw-bold">Contact Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('primary_contact_name') is-invalid @enderror" 
                                       id="primary_contact_name" name="primary_contact_name" value="{{ old('primary_contact_name', $store->primary_contact_name) }}"
                                       placeholder="Manager or owner name" required>
                                @error('primary_contact_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="primary_contact_phone" class="form-label fw-bold">Phone Number <span class="text-danger">*</span></label>
                                <input type="tel" class="form-control @error('primary_contact_phone') is-invalid @enderror" 
                                       id="primary_contact_phone" name="primary_contact_phone" value="{{ old('primary_contact_phone', $store->primary_contact_phone) }}"
                                       placeholder="+1234567890" required>
                                @error('primary_contact_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="primary_contact_email" class="form-label fw-bold">Email Address <span class="text-danger">*</span></label>
                                <input type="email" class="form-control @error('primary_contact_email') is-invalid @enderror" 
                                       id="primary_contact_email" name="primary_contact_email" value="{{ old('primary_contact_email', $store->primary_contact_email) }}"
                                       placeholder="contact@business.com" required>
                                @error('primary_contact_email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="whatsapp_number" class="form-label fw-bold">WhatsApp Number</label>
                                <input type="tel" class="form-control @error('whatsapp_number') is-invalid @enderror" 
                                       id="whatsapp_number" name="whatsapp_number" value="{{ old('whatsapp_number', $store->whatsapp_number) }}"
                                       placeholder="+1234567890">
                                @error('whatsapp_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="website_url" class="form-label fw-bold">Website URL</label>
                                <input type="url" class="form-control @error('website_url') is-invalid @enderror" 
                                       id="website_url" name="website_url" value="{{ old('website_url', $store->website_url) }}"
                                       placeholder="https://www.business.com">
                                @error('website_url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="instagram_handle" class="form-label fw-bold">Instagram</label>
                                <div class="input-group">
                                    <span class="input-group-text">@</span>
                                    <input type="text" class="form-control @error('instagram_handle') is-invalid @enderror" 
                                           id="instagram_handle" name="instagram_handle" value="{{ old('instagram_handle', $store->instagram_handle) }}"
                                           placeholder="businessname">
                                </div>
                                @error('instagram_handle')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="facebook_page" class="form-label fw-bold">Facebook</label>
                                <input type="url" class="form-control @error('facebook_page') is-invalid @enderror" 
                                       id="facebook_page" name="facebook_page" value="{{ old('facebook_page', $store->facebook_page) }}"
                                       placeholder="facebook.com/page">
                                @error('facebook_page')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Location Information Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-gradient-warning py-3">
                        <h6 class="m-0 font-weight-bold text-white">
                            <i class="bi bi-geo-alt me-2"></i>
                            Location Information
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="wing_section" class="form-label fw-bold">Wing/Section</label>
                                <input type="text" class="form-control @error('wing_section') is-invalid @enderror" 
                                       id="wing_section" name="wing_section" value="{{ old('wing_section', $store->wing_section) }}"
                                       placeholder="e.g., North Wing, East Section">
                                @error('wing_section')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="location_description" class="form-label fw-bold">Location Description</label>
                                <input type="text" class="form-control @error('location_description') is-invalid @enderror" 
                                       id="location_description" name="location_description" value="{{ old('location_description', $store->location_description) }}"
                                       placeholder="e.g., Near main entrance, beside escalator">
                                @error('location_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="store_area_sqft" class="form-label fw-bold">Store Area</label>
                                <div class="input-group">
                                    <input type="number" step="0.01" class="form-control @error('store_area_sqft') is-invalid @enderror" 
                                           id="store_area_sqft" name="store_area_sqft" value="{{ old('store_area_sqft', $store->store_area_sqft) }}"
                                           placeholder="500">
                                    <span class="input-group-text">sq ft</span>
                                </div>
                                @error('store_area_sqft')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="planned_employees" class="form-label fw-bold">Planned Employees</label>
                                <input type="number" class="form-control @error('planned_employees') is-invalid @enderror" 
                                       id="planned_employees" name="planned_employees" value="{{ old('planned_employees', $store->planned_employees) }}"
                                       placeholder="Number of staff" min="1">
                                @error('planned_employees')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="opening_date" class="form-label fw-bold">Expected Opening Date</label>
                                <input type="date" class="form-control @error('opening_date') is-invalid @enderror" 
                                       id="opening_date" name="opening_date" value="{{ old('opening_date', $store->opening_date) }}">
                                @error('opening_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="google_maps_link" class="form-label fw-bold">Google Maps Link</label>
                                <input type="url" class="form-control @error('google_maps_link') is-invalid @enderror" 
                                       id="google_maps_link" name="google_maps_link" value="{{ old('google_maps_link', $store->google_maps_link) }}"
                                       placeholder="https://maps.google.com/...">
                                @error('google_maps_link')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="franchise_store" name="franchise_store" 
                                           value="1" {{ old('franchise_store', $store->franchise_store ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="franchise_store">
                                        This is a franchise store
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="is_verified" name="is_verified" 
                                           value="1" {{ old('is_verified', $store->is_verified ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="is_verified">
                                        Mark as verified
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" 
                                           value="1" {{ old('is_featured', $store->is_featured ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="is_featured">
                                        Feature this store
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Business Features Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-gradient-secondary py-3">
                        <h6 class="m-0 font-weight-bold text-white">
                            <i class="bi bi-star me-2"></i>
                            Business Features & Services
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="fw-bold mb-3">Store Features</h6>
                                <div class="row">
                                    <div class="col-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="storefront_signage" name="storefront_signage" 
                                                   value="1" {{ old('storefront_signage', $store->storefront_signage) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="storefront_signage">Storefront Signage</label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="window_display" name="window_display" 
                                                   value="1" {{ old('window_display', $store->window_display) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="window_display">Window Display</label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="fitting_rooms" name="fitting_rooms" 
                                                   value="1" {{ old('fitting_rooms', $store->fitting_rooms) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="fitting_rooms">Fitting Rooms</label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="customer_seating" name="customer_seating" 
                                                   value="1" {{ old('customer_seating', $store->customer_seating) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="customer_seating">Customer Seating Area</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="fw-bold mb-3">Service Options</h6>
                                <div class="row">
                                    <div class="col-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="takeaway_service" name="takeaway_service" 
                                                   value="1" {{ old('takeaway_service', $store->takeaway_service) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="takeaway_service">Takeaway Service</label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="delivery_service" name="delivery_service" 
                                                   value="1" {{ old('delivery_service', $store->delivery_service) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="delivery_service">Delivery Service</label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="wheelchair_accessible" name="wheelchair_accessible" 
                                                   value="1" {{ old('wheelchair_accessible', $store->wheelchair_accessible) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="wheelchair_accessible">Wheelchair Accessible</label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="family_friendly" name="family_friendly" 
                                                   value="1" {{ old('family_friendly', $store->family_friendly) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="family_friendly">Family Friendly</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <hr class="my-4">
                        
                        <!-- Payment Methods -->
                        <h6 class="fw-bold mb-3">Payment Methods Accepted</h6>
                        <div class="row">
                            <div class="col-md-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="payment_methods[]" value="cash" 
                                           id="payment_cash" {{ in_array('cash', old('payment_methods', $store->payment_methods ?? [])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="payment_cash">💵 Cash</label>
                                </div>
                            </div>
                            <div class="col-md-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="payment_methods[]" value="credit_card" 
                                           id="payment_credit" {{ in_array('credit_card', old('payment_methods', $store->payment_methods ?? [])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="payment_credit">💳 Credit Card</label>
                                </div>
                            </div>
                            <div class="col-md-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="payment_methods[]" value="debit_card" 
                                           id="payment_debit" {{ in_array('debit_card', old('payment_methods', $store->payment_methods ?? [])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="payment_debit">💳 Debit Card</label>
                                </div>
                            </div>
                            <div class="col-md-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="payment_methods[]" value="digital_wallet" 
                                           id="payment_digital" {{ in_array('digital_wallet', old('payment_methods', $store->payment_methods ?? [])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="payment_digital">📱 Digital Wallet</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Operating Hours Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-gradient-info py-3">
                        <h6 class="m-0 font-weight-bold text-white">
                            <i class="bi bi-clock me-2"></i>
                            Operating Hours
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="operating_hours_text" class="form-label fw-bold">Operating Hours</label>
                                <textarea class="form-control" id="operating_hours_text" name="operating_hours_text" rows="3" 
                                          placeholder="e.g., Mon-Fri: 10 AM - 9 PM, Sat-Sun: 11 AM - 10 PM">{{ old('operating_hours_text', $store->operating_hours_text ?? '') }}</textarea>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Quick Hours</label>
                                <select class="form-select" id="quick_hours">
                                    <option value="">Select preset hours</option>
                                    <option value="24/7">24/7 Available</option>
                                    <option value="9-5">9 AM - 5 PM (Mon-Fri)</option>
                                    <option value="9-6">9 AM - 6 PM (Mon-Sat)</option>
                                    <option value="10-8">10 AM - 8 PM (Daily)</option>
                                    <option value="weekends">Weekends Only</option>
                                    <option value="by-appointment">By Appointment Only</option>
                                    <option value="flexible">Flexible Hours</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Business Images Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-gradient-warning py-3">
                        <h6 class="m-0 font-weight-bold text-white">
                            <i class="bi bi-images me-2"></i>
                            Business Images
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="cover_image" class="form-label fw-bold">Cover Image</label>
                                <input type="file" class="form-control" id="cover_image" name="cover_image" accept="image/*">
                                @if($store->cover_image ?? false)
                                    <div class="mt-2">
                                        <small class="text-muted">Current cover image: {{ basename($store->cover_image) }}</small>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label for="store_images" class="form-label fw-bold">Store Images</label>
                                @if($store->store_images && count($store->store_images) > 0)
                                    <div class="mb-2">
                                        <div class="row">
                                            @foreach($store->store_images as $image)
                                                <div class="col-md-3 mb-2">
                                                    <img src="{{ asset('storage/' . $image) }}" alt="Store Image" class="img-fluid rounded">
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                <input type="file" class="form-control @error('store_images') is-invalid @enderror" 
                                       id="store_images" name="store_images[]" multiple accept="image/*">
                                <small class="text-muted">Max size: 5MB each. Multiple images allowed. Formats: JPEG, PNG, JPG</small>
                                @error('store_images')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Owner Account Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-gradient-success py-3">
                        <h6 class="m-0 font-weight-bold text-white">
                            <i class="bi bi-person-circle me-2"></i>
                            Owner Account (Optional)
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            Select an existing user account to assign as the store owner.
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="owner_user_id" class="form-label fw-bold">Select Owner Account</label>
                                <select class="form-control" id="owner_user_id" name="owner_user_id">
                                    <option value="">Select Owner Account</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('owner_user_id', $store->shop_owner_user_id ?? '') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} ({{ $user->email }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.malls.stores', $mall) }}" class="btn btn-secondary">
                                <i class="bi bi-x-circle me-1"></i>
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-1"></i>
                                Update Store
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Store Preview Card -->
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-success py-3">
                    <h6 class="m-0 font-weight-bold text-white">
                        <i class="bi bi-eye me-2"></i>
                        Store Preview
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        @if($store->logo_image)
                            <img src="{{ asset('storage/' . $store->logo_image) }}" alt="Store Logo" class="img-fluid rounded" style="max-height: 100px;">
                        @else
                            <div class="bg-light rounded p-3">
                                <i class="bi bi-shop display-4 text-muted"></i>
                            </div>
                        @endif
                    </div>
                    <h5 class="card-title">{{ $store->store_name }}</h5>
                    <p class="card-text text-muted">{{ $store->store_description ?: 'No description available' }}</p>
                    
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border rounded p-2">
                                <small class="text-muted d-block">Floor</small>
                                <strong>{{ $store->floor_number }}</strong>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-2">
                                <small class="text-muted d-block">Unit</small>
                                <strong>{{ $store->unit_number }}</strong>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <span class="badge bg-{{ $store->occupancy_status == 'operational' ? 'success' : ($store->occupancy_status == 'coming_soon' ? 'warning' : 'danger') }}">
                            {{ ucfirst(str_replace('_', ' ', $store->occupancy_status)) }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Quick Actions Card -->
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-info py-3">
                    <h6 class="m-0 font-weight-bold text-white">
                        <i class="bi bi-lightning me-2"></i>
                        Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.malls.stores.show', [$mall, $store]) }}" class="btn btn-outline-primary">
                            <i class="bi bi-eye me-1"></i>
                            View Store Details
                        </a>
                        <a href="{{ route('admin.malls.stores', $mall) }}" class="btn btn-outline-secondary">
                            <i class="bi bi-list me-1"></i>
                            All Stores
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Edit store page loaded');
    
    // Get form elements
    const storeForm = document.getElementById('storeForm');
    const businessTypeSelect = document.getElementById('bizspot_business_type_id');
    const mainCategorySelect = document.getElementById('bizspot_main_category_id');
    const subCategorySelect = document.getElementById('bizspot_sub_category_id');
    
    console.log('Form elements found:', {
        storeForm: !!storeForm,
        businessTypeSelect: !!businessTypeSelect,
        mainCategorySelect: !!mainCategorySelect,
        subCategorySelect: !!subCategorySelect
    });

    // Business type change handler
    businessTypeSelect.addEventListener('change', function() {
        const businessTypeId = this.value;
        console.log('Business type changed:', businessTypeId);
        
        // Clear dependent dropdowns
        mainCategorySelect.innerHTML = '<option value="">Select Main Category</option>';
        subCategorySelect.innerHTML = '<option value="">Select Sub Category</option>';
        
        if (businessTypeId) {
            console.log('Loading main categories for business type:', businessTypeId);
            // Load main categories
            fetch(`/admin/bizspot-categories/api/main-categories/${businessTypeId}`)
                .then(response => {
                    console.log('API response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Main categories loaded:', data);
                    if (Array.isArray(data)) {
                        data.forEach(category => {
                            const option = document.createElement('option');
                            option.value = category.id;
                            option.textContent = category.name;
                            mainCategorySelect.appendChild(option);
                        });
                    }
                })
                .catch(error => {
                    console.error('Error loading main categories:', error);
                });
        }
    });

    // Main category change handler
    mainCategorySelect.addEventListener('change', function() {
        const mainCategoryId = this.value;
        console.log('Main category changed:', mainCategoryId);
        
        subCategorySelect.innerHTML = '<option value="">Select Sub Category</option>';
        
        if (mainCategoryId) {
            console.log('Loading sub categories for main category:', mainCategoryId);
            fetch(`/admin/bizspot-categories/api/sub-categories/${mainCategoryId}`)
                .then(response => {
                    console.log('API response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Sub categories loaded:', data);
                    if (Array.isArray(data)) {
                        data.forEach(category => {
                            const option = document.createElement('option');
                            option.value = category.id;
                            option.textContent = category.name;
                            subCategorySelect.appendChild(option);
                        });
                    }
                })
                .catch(error => {
                    console.error('Error loading sub categories:', error);
                });
        }
    });

    // Load existing categories if they exist
    @if($store->bizspot_business_type_id)
        console.log('Loading existing categories for store');
        // Trigger business type change to load main categories
        businessTypeSelect.dispatchEvent(new Event('change'));
        
        // Set the selected main category after a short delay
        setTimeout(() => {
            @if($store->bizspot_main_category_id)
                console.log('Setting main category:', '{{ $store->bizspot_main_category_id }}');
                mainCategorySelect.value = '{{ $store->bizspot_main_category_id }}';
                mainCategorySelect.dispatchEvent(new Event('change'));
                
                // Set the selected sub category after another delay
                setTimeout(() => {
                    @if($store->bizspot_sub_category_id)
                        console.log('Setting sub category:', '{{ $store->bizspot_sub_category_id }}');
                        subCategorySelect.value = '{{ $store->bizspot_sub_category_id }}';
                    @endif
                }, 500);
            @endif
        }, 500);
    @endif
    
    // Check if all required fields are visible
    const requiredFields = [
        'cover_image',
        'operating_hours_text',
        'owner_user_id',
        'franchise_store',
        'is_verified',
        'is_featured'
    ];
    
    requiredFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            console.log(`Field ${fieldId} found and visible:`, field.offsetParent !== null);
        } else {
            console.warn(`Field ${fieldId} not found`);
        }
    });
});
</script>

<style>
.upload-area {
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover {
    border-color: #007bff !important;
    background-color: #f8f9fa;
}

.card-header.bg-gradient-primary {
    background: linear-gradient(45deg, #4e73df, #224abe);
}

.card-header.bg-gradient-info {
    background: linear-gradient(45deg, #36b9cc, #258391);
}

.card-header.bg-gradient-success {
    background: linear-gradient(45deg, #1cc88a, #13855c);
}

.card-header.bg-gradient-warning {
    background: linear-gradient(45deg, #f6c23e, #dda20a);
}

.card-header.bg-gradient-secondary {
    background: linear-gradient(45deg, #858796, #60616f);
}

.card-header.bg-gradient-purple {
    background: linear-gradient(45deg, #6f42c1, #5a359a);
}

.form-control-lg {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
}

.preview-details {
    font-size: 0.9rem;
}

.help-item h6 {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.sticky-top {
    top: 20px;
}

@media (max-width: 991px) {
    .sticky-top {
        position: relative !important;
        top: auto !important;
    }
}

/* Debug styling to highlight required fields */
#cover_image,
#operating_hours_text,
#owner_user_id,
#franchise_store,
#is_verified,
#is_featured {
    border: 2px solid #ffc107 !important;
    background-color: #fff3cd !important;
}

/* Highlight the cards containing these fields */
.card:has(#cover_image),
.card:has(#operating_hours_text),
.card:has(#owner_user_id),
.card:has(#franchise_store),
.card:has(#is_verified),
.card:has(#is_featured) {
    border: 2px solid #28a745 !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.3) !important;
}
</style>
@endsection