@extends('layouts.admin')

@section('title', 'Add New Store - ' . $mall->name)

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Add New Store to {{ $mall->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">Add Store</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.store', $mall) }}" enctype="multipart/form-data" id="storeForm">
                @csrf
                
                <!-- Hidden field for occupancy 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') == 'operational' ? 'selected' : '' }}>🟢 Operational</option>
                            <option value="coming_soon" {{ old('occupancy_status') == 'coming_soon' ? 'selected' : '' }}>🟡 Coming Soon</option>
                            <option value="temporarily_closed" {{ old('occupancy_status') == 'temporarily_closed' ? 'selected' : '' }}>🔴 Temporarily Closed</option>
                            <option value="permanently_closed" {{ old('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') }}"
                                               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') }}"
                                               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') == $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') }}" 
                                               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">
                                            <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>
                                        </div>
                                        <img id="logoPreview" class="img-fluid rounded" style="display: none; max-height: 150px;">
                                        <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 mb-3">
                                <label for="bizspot_business_type_id" class="form-label fw-bold">Business Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('bizspot_business_type_id') is-invalid @enderror" 
                                        id="bizspot_business_type_id" name="bizspot_business_type_id" required>
                                    <option value="">Select Business Type</option>
                                    @if($businessTypes && $businessTypes->count() > 0)
                                        @foreach($businessTypes as $businessType)
                                            <option value="{{ $businessType->id }}" 
                                                    {{ old('bizspot_business_type_id') == $businessType->id ? 'selected' : '' }}
                                                    data-fields='@json($businessType->getAllFields())'>
                                                {{ $businessType->name }}
                                            </option>
                                        @endforeach
                                    @else
                                        <option value="" disabled>No business types available</option>
                                    @endif
                                </select>
                                @error('bizspot_business_type_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @if(!$businessTypes || $businessTypes->count() == 0)
                                    <div class="text-warning small mt-1">
                                        <i class="bi bi-exclamation-triangle"></i>
                                        No business types found. Please create some business types first.
                                    </div>
                                @endif
                            </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') }}"
                                       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') == 'kiosk' ? 'selected' : '' }}>🏪 Kiosk</option>
                                    <option value="small" {{ old('store_size_category') == 'small' ? 'selected' : '' }}>🏬 Small</option>
                                    <option value="medium" {{ old('store_size_category') == 'medium' ? 'selected' : '' }}>🏢 Medium</option>
                                    <option value="large" {{ old('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') }}</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') }}"
                                       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') }}"
                                       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') }}"
                                       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') }}"
                                       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') }}"
                                       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') }}"
                                           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') }}"
                                       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') }}"
                                       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') }}"
                                       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') }}"
                                           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') }}"
                                       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') }}">
                                @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') }}"
                                       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') ? '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') ? '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') ? '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') ? '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') ? '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') ? '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') ? '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') ? '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') ? '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') ? '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') ? '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', [])) ? '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', [])) ? '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', [])) ? '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', [])) ? '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 mb-3">
                                <label for="operating_hours_text" class="form-label fw-bold">Operating Hours</label>
                                <input type="text" class="form-control @error('operating_hours_text') is-invalid @enderror" 
                                       id="operating_hours_text" name="operating_hours_text" value="{{ old('operating_hours_text') }}" 
                                       placeholder="e.g., 9 AM - 6 PM, Closed Fridays">
                                @error('operating_hours_text')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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 @error('cover_image') is-invalid @enderror" 
                                       id="cover_image" name="cover_image" accept="image/*">
                                <small class="text-muted">Max size: 5MB. Formats: JPEG, PNG, JPG</small>
                                @error('cover_image')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label for="store_images" class="form-label fw-bold">Store Images</label>
                                <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-12 mb-3">
                                <label for="owner_user_id" class="form-label fw-bold">Select Owner Account</label>
                                <select class="form-select @error('owner_user_id') is-invalid @enderror" 
                                        id="owner_user_id" name="owner_user_id">
                                    <option value="">No owner assigned</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('owner_user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} ({{ $user->email }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('owner_user_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Select from existing user accounts in the database</small>
                            </div>
                        </div>
                    </div>
                </div>

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

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Preview Card -->
            <div class="card shadow mb-4 sticky-top">
                <div class="card-header bg-gradient-secondary 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">
                        <div class="store-logo-preview bg-light rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" 
                             style="width: 80px; height: 80px;" id="sidebarLogoPreview">
                            <i class="bi bi-shop text-muted"></i>
                        </div>
                        <h5 class="mb-1" id="previewStoreName">Store Name</h5>
                        <small class="text-muted" id="previewStoreNumber">Store Number</small>
                    </div>

                    <div class="preview-details">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Location:</span>
                            <span id="previewLocation">-</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Category:</span>
                            <span id="previewCategory">-</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Size:</span>
                            <span id="previewSize">-</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Status:</span>
                            <span class="badge bg-success" id="previewStatus">Available</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Help Card -->
            <div class="card shadow">
                <div class="card-header bg-gradient-info py-3">
                    <h6 class="m-0 font-weight-bold text-white">
                        <i class="bi bi-question-circle me-2"></i>
                        Need Help?
                    </h6>
                </div>
                <div class="card-body">
                    <div class="help-item mb-3">
                        <h6 class="text-primary">Store Name</h6>
                        <small class="text-muted">Enter the business name that will be displayed to customers</small>
                    </div>
                    <div class="help-item mb-3">
                        <h6 class="text-primary">Business Type</h6>
                        <small class="text-muted">Choose the type that best describes your business model</small>
                    </div>
                    <div class="help-item mb-3">
                        <h6 class="text-primary">Categories</h6>
                        <small class="text-muted">Select categories to help customers find your store</small>
                    </div>
                    <div class="help-item">
                        <h6 class="text-primary">Store Logo</h6>
                        <small class="text-muted">Upload a clear logo that represents your brand</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
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');
    const dynamicFieldsContainer = document.getElementById('dynamic-fields-container');
    const dynamicFields = document.getElementById('dynamic-fields');
    
    // Logo upload functionality
    const logoUploadArea = document.getElementById('logoUploadArea');
    const logoInput = document.getElementById('logo_image');
    const logoPreview = document.getElementById('logoPreview');
    const sidebarLogoPreview = document.getElementById('sidebarLogoPreview');
    
    // Preview elements
    const previewStoreName = document.getElementById('previewStoreName');
    const previewStoreNumber = document.getElementById('previewStoreNumber');
    const previewLocation = document.getElementById('previewLocation');
    const previewCategory = document.getElementById('previewCategory');
    const previewSize = document.getElementById('previewSize');

    // Logo upload handling
    logoUploadArea.addEventListener('click', () => logoInput.click());
    
    logoInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                logoPreview.src = e.target.result;
                logoPreview.style.display = 'block';
                logoUploadArea.querySelector('.upload-content').style.display = 'none';
                
                // Update sidebar preview
                sidebarLogoPreview.innerHTML = `<img src="${e.target.result}" class="rounded-circle" style="width: 100%; height: 100%; object-fit: cover;">`;
            };
            reader.readAsDataURL(file);
        }
    });

    // Form preview updates
    document.getElementById('store_name').addEventListener('input', function() {
        previewStoreName.textContent = this.value || 'Store Name';
    });

    document.getElementById('store_number').addEventListener('input', function() {
        previewStoreNumber.textContent = this.value || 'Store Number';
    });

    document.getElementById('floor_number').addEventListener('change', function() {
        updateLocation();
    });

    document.getElementById('unit_number').addEventListener('input', function() {
        updateLocation();
    });

    // Update category preview when business type changes
    businessTypeSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        previewCategory.textContent = selectedOption.text || '-';
    });

    document.getElementById('store_area_sqft').addEventListener('input', function() {
        previewSize.textContent = this.value ? this.value + ' sq ft' : '-';
    });

    function updateLocation() {
        const floor = document.getElementById('floor_number').value;
        const unit = document.getElementById('unit_number').value;
        const location = (floor && unit) ? `Floor ${floor}, Unit ${unit}` : '-';
        previewLocation.textContent = location;
    }

    // Business type change handler
    businessTypeSelect.addEventListener('change', function() {
        const businessTypeId = this.value;
        const selectedOption = this.options[this.selectedIndex];
        
        console.log('Business type changed to:', businessTypeId);
        
        // Clear dependent dropdowns
        mainCategorySelect.innerHTML = '<option value="">Select Main Category</option>';
        subCategorySelect.innerHTML = '<option value="">Select Sub Category</option>';
        
        if (businessTypeId) {
            // Load main categories
            console.log('Fetching main categories for business type:', businessTypeId);
            fetch(`/admin/bizspot-categories/api/main-categories/${businessTypeId}`)
                .then(response => {
                    console.log('Response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Main categories data:', 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);
                    alert('Error loading categories. Please check the console for details.');
                });
        } else {
            // Clear categories if no business type selected
            console.log('No business type selected, clearing categories');
        }
    });

    // Main category change handler
    mainCategorySelect.addEventListener('change', function() {
        const mainCategoryId = this.value;
        
        console.log('Main category changed to:', mainCategoryId);
        
        subCategorySelect.innerHTML = '<option value="">Select Sub Category</option>';
        
        if (mainCategoryId) {
            console.log('Fetching sub categories for main category:', mainCategoryId);
            fetch(`/admin/bizspot-categories/api/sub-categories/${mainCategoryId}`)
                .then(response => {
                    console.log('Response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Sub categories data:', 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);
                    alert('Error loading sub categories. Please check the console for details.');
                });
        }
    });

    // Quick hours functionality
    const quickHoursSelect = document.getElementById('quick_hours');
    const operatingHoursTextInput = document.getElementById('operating_hours_text');
    
    if (quickHoursSelect && operatingHoursTextInput) {
        quickHoursSelect.addEventListener('change', function() {
            let text = '';
            
            switch (this.value) {
                case '24/7':
                    text = '24/7 Available';
                    break;
                case '9-5':
                    text = '9 AM - 5 PM (Monday to Friday)';
                    break;
                case '9-6':
                    text = '9 AM - 6 PM (Monday to Saturday)';
                    break;
                case '10-8':
                    text = '10 AM - 8 PM (Daily)';
                    break;
                case 'weekends':
                    text = 'Weekends Only (Saturday & Sunday)';
                    break;
                case 'by-appointment':
                    text = 'By Appointment Only - Contact to Schedule';
                    break;
                case 'flexible':
                    text = 'Flexible Hours - Contact to Schedule';
                    break;
            }
            
            if (text) {
                operatingHoursTextInput.value = text;
            }
        });
    }
});
</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;
    }
}
</style>
@endsection