@extends('layouts.admin')

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

@section('content')
<div class="container-fluid">
    <!-- Validation Errors Display -->
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h6><i class="bi bi-exclamation-triangle me-2"></i>Validation Errors:</h6>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Debug Information (Only show in development) -->
    @if (config('app.debug'))
        <div class="alert alert-info">
            <strong>Debug Info:</strong>
            <ul>
                <li>Mall ID: {{ $mall->id }}</li>
                <li>Shop ID: {{ $shop->id }}</li>
                <li>Form Action: {{ route('admin.malls.shops.products.store', [$mall, $shop]) }}</li>
                <li>Business Types Count: {{ $bizspotBusinessTypes->count() }}</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">Product Management</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.index') }}">Malls</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.show', $mall) }}">{{ $mall->name }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.shops', $mall) }}">Businesses</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.malls.show-store', [$mall, $shop]) }}">{{ $shop->store_name }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Products</li>
                </ol>
            </nav>
        </div>
        <div>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addProductModal">
                <i class="bi bi-plus-lg me-1"></i>Add Product
            </button>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Products</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-box2 fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Active Products</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['active'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                In Stock</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['in_stock'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-box fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Featured</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['featured'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-star fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Filters</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.malls.shops.products', [$mall, $shop]) }}">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label for="search" class="form-label">Search</label>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ request('search') }}" placeholder="Product name, SKU, brand...">
                    </div>
                    
                    <div class="col-md-3">
                        <label for="business_type_filter" class="form-label">Business Type</label>
                        <select class="form-select" id="business_type_filter" name="business_type_filter">
                            <option value="">All Business Types</option>
                            @foreach($bizspotBusinessTypes as $businessType)
                                <option value="{{ $businessType->slug }}" {{ request('business_type_filter') == $businessType->slug ? 'selected' : '' }}>
                                    {{ $businessType->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label for="stock_status" class="form-label">Stock Status</label>
                        <select class="form-select" id="stock_status" name="stock_status">
                            <option value="">All Status</option>
                            <option value="in_stock" {{ request('stock_status') == 'in_stock' ? 'selected' : '' }}>In Stock</option>
                            <option value="out_of_stock" {{ request('stock_status') == 'out_of_stock' ? 'selected' : '' }}>Out of Stock</option>
                            <option value="low_stock" {{ request('stock_status') == 'low_stock' ? 'selected' : '' }}>Low Stock</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label for="brand" class="form-label">Brand</label>
                        <select class="form-select" id="brand" name="brand">
                            <option value="">All Brands</option>
                            @foreach($brands as $brand)
                                <option value="{{ $brand }}" {{ request('brand') == $brand ? 'selected' : '' }}>
                                    {{ $brand }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-search me-1"></i>Search
                        </button>
                        <a href="{{ route('admin.malls.shops.products', [$mall, $shop]) }}" class="btn btn-secondary">
                            <i class="bi bi-x-circle me-1"></i>Clear
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Products Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Products</h6>
        </div>
        <div class="card-body">
            @if($products->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Product</th>
                                <th>SKU</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Stock</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($products as $product)
                                <tr>
                                    <td>
                                        @if($product->image_url)
                                            <img src="{{ asset('storage/' . $product->image_url) }}" alt="{{ $product->name }}" 
                                                 class="img-thumbnail" style="width: 50px; height: 50px; object-fit: cover;">
                                        @else
                                            <div class="bg-light d-flex align-items-center justify-content-center" 
                                                 style="width: 50px; height: 50px;">
                                                <i class="bi bi-image text-muted"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $product->name }}</strong>
                                        @if($product->brand)
                                            <br><small class="text-muted">{{ $product->brand }}</small>
                                        @endif
                                        @if($product->bizspot_category_path)
                                            <br><small class="badge bg-secondary">{{ $product->bizspot_category_path }}</small>
                                        @endif
                                    </td>
                                    <td>{{ $product->sku ?: 'N/A' }}</td>
                                    <td>
                                        @if($product->bizspot_category_data)
                                            @php
                                                $categoryData = $product->bizspot_category_data;
                                            @endphp
                                            <div class="d-flex flex-column gap-1">
                                                <span class="badge bg-primary text-truncate" style="max-width: 120px;" 
                                                      title="{{ $categoryData['business_type_name'] ?? 'N/A' }}">
                                                    {{ $categoryData['business_type_name'] ?? 'N/A' }}
                                                </span>
                                                <span class="badge bg-success text-truncate" style="max-width: 120px;" 
                                                      title="{{ $categoryData['main_category_name'] ?? 'N/A' }}">
                                                    {{ $categoryData['main_category_name'] ?? 'N/A' }}
                                                </span>
                                                <span class="badge bg-info text-truncate" style="max-width: 120px;" 
                                                      title="{{ $categoryData['sub_category_name'] ?? 'N/A' }}">
                                                    {{ $categoryData['sub_category_name'] ?? 'N/A' }}
                                                </span>
                                            </div>
                                        @else
                                            <span class="text-muted">Uncategorized</span>
                                        @endif
                                    </td>
                                    <td>
                                        ${{ number_format($product->price, 2) }}
                                        @if($product->on_sale && $product->sale_price)
                                            <br><small class="text-danger">${{ number_format($product->sale_price, 2) }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $product->stock_quantity > 0 ? 'success' : 'danger' }}">
                                            {{ $product->stock_quantity }}
                                        </span>
                                        @if($product->min_stock_level && $product->stock_quantity <= $product->min_stock_level)
                                            <br><small class="text-warning"><i class="bi bi-exclamation-triangle"></i> Low Stock</small>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $product->stock_status === 'in_stock' ? 'success' : 'danger' }}">
                                            {{ ucfirst(str_replace('_', ' ', $product->stock_status)) }}
                                        </span>
                                        @if($product->featured)
                                            <br><span class="badge bg-warning">Featured</span>
                                        @endif
                                        @if($product->new_arrival)
                                            <br><span class="badge bg-info">New</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button class="btn btn-sm btn-outline-info" 
                                                    onclick="viewProductDetails({{ $product->id }})" title="View Details">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <a href="{{ route('admin.malls.shops.products.edit', [$mall, $shop, $product]) }}" 
                                               class="btn btn-sm btn-outline-primary" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    onclick="deleteProduct({{ $product->id }})" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $products->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-box display-4 text-muted"></i>
                    <p class="mt-3 text-muted">No products found. Add your first product to get started!</p>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addProductModal">
                        <i class="bi bi-plus-lg me-1"></i>Add Product
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Add Product Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addProductModalLabel">Add New Product</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.malls.shops.products.store', [$mall, $shop]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <!-- Progress Bar -->
                    <div class="progress mb-4" style="height: 6px;">
                        <div class="progress-bar" role="progressbar" style="width: 25%"></div>
                    </div>
                    
                    <div class="row g-4">
                        <!-- Basic Information Card -->
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-primary text-white">
                                    <h6 class="mb-0"><i class="bi bi-box me-2"></i>Basic Information</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-8">
                                            <label for="name" class="form-label">Product Name *</label>
                                            <input type="text" class="form-control" id="name" name="name" required
                                                   placeholder="Enter product name...">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="sku" class="form-label">SKU</label>
                                            <input type="text" class="form-control" id="sku" name="sku"
                                                   placeholder="Auto-generated if empty">
                                        </div>
                                        <div class="col-12">
                                            <label for="description" class="form-label">Description</label>
                                            <textarea class="form-control" id="description" name="description" rows="3"
                                                      placeholder="Describe your product..."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- BizSpot Category Selection Card -->
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-info text-white">
                                    <h6 class="mb-0"><i class="bi bi-tags me-2"></i>Product Category</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label for="bizspot_business_type_id" class="form-label">Business Type</label>
                                            <select class="form-select" id="bizspot_business_type_id" name="bizspot_business_type_id">
                                                <option value="">Select Business Type</option>
                                                @foreach($bizspotBusinessTypes as $businessType)
                                                    <option value="{{ $businessType->id }}">{{ $businessType->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="bizspot_main_category_id" class="form-label">Main Category</label>
                                            <select class="form-select" id="bizspot_main_category_id" name="bizspot_main_category_id">
                                                <option value="">Select Main Category</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="bizspot_sub_category_id" class="form-label">Sub Category</label>
                                            <select class="form-select" id="bizspot_sub_category_id" name="bizspot_sub_category_id">
                                                <option value="">Select Sub Category</option>
                                            </select>
                                        </div>
                                        <div class="col-12">
                                            <div id="category-path" class="text-muted small"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Images Card -->
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-success text-white">
                                    <h6 class="mb-0"><i class="bi bi-images me-2"></i>Product Images</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="main_image" class="form-label">Main Product Image</label>
                                            <input type="file" class="form-control" id="main_image" name="main_image" 
                                                   accept="image/*" onchange="previewMainImage(this)">
                                            <small class="text-muted">Max 5MB. JPG, PNG, GIF allowed.</small>
                                            <div id="main-image-preview" class="mt-2"></div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="gallery_images" class="form-label">Gallery Images</label>
                                            <input type="file" class="form-control" id="gallery_images" name="gallery_images[]" 
                                                   accept="image/*" multiple onchange="previewGalleryImages(this)">
                                            <small class="text-muted">Max 5MB each. Multiple images allowed.</small>
                                            <div id="gallery-images-preview" class="mt-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pricing & Inventory Card -->
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-warning text-dark">
                                    <h6 class="mb-0"><i class="bi bi-currency-dollar me-2"></i>Pricing & Inventory</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <label for="price" class="form-label">Selling Price *</label>
                                            <div class="input-group">
                                                <span class="input-group-text">$</span>
                                                <input type="number" class="form-control" id="price" name="price" 
                                                       step="0.01" min="0" required>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="cost_price" class="form-label">Cost Price</label>
                                            <div class="input-group">
                                                <span class="input-group-text">$</span>
                                                <input type="number" class="form-control" id="cost_price" name="cost_price" 
                                                       step="0.01" min="0">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="stock_quantity" class="form-label">Stock Quantity *</label>
                                            <input type="number" class="form-control" id="stock_quantity" name="stock_quantity" 
                                                   min="0" required>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="min_stock_level" class="form-label">Min Stock Level</label>
                                            <input type="number" class="form-control" id="min_stock_level" name="min_stock_level" 
                                                   min="0">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Product Details Card -->
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-secondary text-white">
                                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>Product Details</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label for="brand" class="form-label">Brand</label>
                                            <input type="text" class="form-control" id="brand" name="brand">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="model" class="form-label">Model</label>
                                            <input type="text" class="form-control" id="model" name="model">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="color" class="form-label">Color</label>
                                            <input type="text" class="form-control" id="color" name="color">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="size" class="form-label">Size</label>
                                            <input type="text" class="form-control" id="size" name="size">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="weight" class="form-label">Weight (kg)</label>
                                            <input type="number" class="form-control" id="weight" name="weight" 
                                                   step="0.001" min="0">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="product_type" class="form-label">Product Type</label>
                                            <select class="form-select" id="product_type" name="product_type">
                                                <option value="physical">Physical</option>
                                                <option value="digital">Digital</option>
                                                <option value="service">Service</option>
                                                <option value="subscription">Subscription</option>
                                                <option value="gift_card">Gift Card</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="condition" class="form-label">Condition</label>
                                            <select class="form-select" id="condition" name="condition">
                                                <option value="new">New</option>
                                                <option value="used">Used</option>
                                                <option value="refurbished">Refurbished</option>
                                                <option value="damaged">Damaged</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="tags" class="form-label">Tags</label>
                                            <input type="text" class="form-control" id="tags" name="tags" 
                                                   placeholder="Enter tags separated by commas">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Status Options Card -->
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-dark text-white">
                                    <h6 class="mb-0"><i class="bi bi-toggles me-2"></i>Status & Features</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                                                <label class="form-check-label" for="is_active">Active</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="is_visible" name="is_visible" checked>
                                                <label class="form-check-label" for="is_visible">Visible</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="featured" name="featured">
                                                <label class="form-check-label" for="featured">Featured</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="new_arrival" name="new_arrival">
                                                <label class="form-check-label" for="new_arrival">New Arrival</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-plus-lg me-1"></i>Add Product
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Store all categories data for JavaScript manipulation
const bizspotCategoriesData = @json($bizspotBusinessTypes);

// Enhanced Form Debugging
console.log('Bizspot Categories Data:', bizspotCategoriesData);
console.log('Form action URL:', '{{ route("admin.malls.shops.products.store", [$mall, $shop]) }}');

// Category Cascading Logic
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 categoryPath = document.getElementById('category-path');

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

        if (selectedBusinessTypeId) {
            const businessType = bizspotCategoriesData.find(bt => bt.id == selectedBusinessTypeId);
            if (businessType && businessType.main_categories) {
                businessType.main_categories.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.id;
                    option.textContent = category.name;
                    mainCategorySelect.appendChild(option);
                });
            }
            categoryPath.textContent = `Business Type: ${businessType?.name || ''}`;
        }
    }

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

        if (selectedBusinessTypeId && selectedMainCategoryId) {
            const businessType = bizspotCategoriesData.find(bt => bt.id == selectedBusinessTypeId);
            if (businessType && businessType.main_categories) {
                const mainCategory = businessType.main_categories.find(mc => mc.id == selectedMainCategoryId);
                if (mainCategory && mainCategory.sub_categories) {
                    mainCategory.sub_categories.forEach(category => {
                        const option = document.createElement('option');
                        option.value = category.id;
                        option.textContent = category.name;
                        subCategorySelect.appendChild(option);
                    });
                }
                categoryPath.textContent = `${businessType.name} > ${mainCategory?.name || ''}`;
            }
        }
    }

    function updateCategoryPath() {
        const selectedBusinessTypeId = businessTypeSelect.value;
        const selectedMainCategoryId = mainCategorySelect.value;
        const selectedSubCategoryId = subCategorySelect.value;

        if (selectedBusinessTypeId && selectedMainCategoryId && selectedSubCategoryId) {
            const businessType = bizspotCategoriesData.find(bt => bt.id == selectedBusinessTypeId);
            const mainCategory = businessType?.main_categories?.find(mc => mc.id == selectedMainCategoryId);
            const subCategory = mainCategory?.sub_categories?.find(sc => sc.id == selectedSubCategoryId);
            
            if (businessType && mainCategory && subCategory) {
                categoryPath.innerHTML = `
                    <strong>Category Path:</strong> 
                    <span class="badge bg-primary">${businessType.name}</span> 
                    <i class="bi bi-chevron-right mx-1"></i>
                    <span class="badge bg-success">${mainCategory.name}</span>
                    <i class="bi bi-chevron-right mx-1"></i>
                    <span class="badge bg-info">${subCategory.name}</span>
                `;
            }
        }
    }

    businessTypeSelect.addEventListener('change', updateMainCategories);
    mainCategorySelect.addEventListener('change', updateSubCategories);
    subCategorySelect.addEventListener('change', updateCategoryPath);
    
    // Enhanced Form Submission with Full Debugging
    const addProductForm = document.querySelector('#addProductModal form');
    if (addProductForm) {
        console.log('Product form found and event listener attached');
        
        addProductForm.addEventListener('submit', function(e) {
            console.log('=== FORM SUBMISSION DEBUG ===');
            console.log('Form action:', this.action);
            console.log('Form method:', this.method);
            console.log('Form enctype:', this.enctype);
            
            // Enhanced validation
            const requiredFields = ['name', 'price', 'stock_quantity'];
            let isValid = true;
            let errors = [];
            
            requiredFields.forEach(fieldName => {
                const field = this.querySelector(`[name="${fieldName}"]`);
                if (!field) {
                    errors.push(`Field ${fieldName} not found in form`);
                    isValid = false;
                } else if (!field.value.trim()) {
                    errors.push(`Field ${fieldName} is required but empty`);
                    field.classList.add('is-invalid');
                    isValid = false;
                } else {
                    field.classList.remove('is-invalid');
                    console.log(`Field ${fieldName} has value: ${field.value}`);
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                console.log('Form validation failed:', errors);
                showAlert('Validation failed: ' + errors.join(', '), 'danger');
                return;
            }
            
            // Log all form data
            const formData = new FormData(this);
            console.log('Form data being submitted:');
            for (let [key, value] of formData.entries()) {
                console.log(`${key}: ${value}`);
            }
            
            // Check for CSRF token
            const csrfToken = document.querySelector('meta[name="csrf-token"]');
            console.log('CSRF token found:', !!csrfToken);
            console.log('CSRF token value:', csrfToken?.getAttribute('content'));
            
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            // Show loading state
            submitBtn.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i>Adding Product...';
            submitBtn.disabled = true;
            
            // Update progress bar
            const progressBar = this.querySelector('.progress-bar');
            if (progressBar) {
                progressBar.style.width = '100%';
                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
            }
            
            console.log('Form submission proceeding to server...');
            
            // Add error detection for form submission
            setTimeout(() => {
                // If still on the same page after 3 seconds, something might be wrong
                if (submitBtn.disabled) {
                    console.log('Form submission may have failed - still on same page');
                }
            }, 3000);
        });
    } else {
        console.error('Product form NOT found! Checking DOM...');
        console.log('All forms on page:', document.querySelectorAll('form'));
        console.log('Modal exists:', !!document.getElementById('addProductModal'));
    }
    
    // Reset modal when closed
    const modal = document.getElementById('addProductModal');
    if (modal) {
        modal.addEventListener('hidden.bs.modal', function() {
            console.log('Modal closed - resetting form');
            const form = this.querySelector('form');
            if (form) {
                form.reset();
                
                // Reset submit button
                const submitBtn = form.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.innerHTML = '<i class="bi bi-plus-lg me-1"></i>Add Product';
                    submitBtn.disabled = false;
                }
                
                // Reset progress bar
                const progressBar = form.querySelector('.progress-bar');
                if (progressBar) {
                    progressBar.style.width = '25%';
                    progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
                }
                
                // Clear validation states
                form.querySelectorAll('.is-invalid').forEach(field => {
                    field.classList.remove('is-invalid');
                });
                
                // Clear image previews
                document.getElementById('main-image-preview').innerHTML = '';
                document.getElementById('gallery-images-preview').innerHTML = '';
                
                // Reset category dropdowns
                document.getElementById('bizspot_main_category_id').innerHTML = '<option value="">Select Main Category</option>';
                document.getElementById('bizspot_sub_category_id').innerHTML = '<option value="">Select Sub Category</option>';
                document.getElementById('category-path').textContent = '';
            }
        });
    }
});

// Image Preview Functions
function previewMainImage(input) {
    const preview = document.getElementById('main-image-preview');
    preview.innerHTML = '';

    if (input.files && input.files[0]) {
        const file = input.files[0];
        
        // Validate file size (5MB)
        if (file.size > 5 * 1024 * 1024) {
            alert('File size must be less than 5MB');
            input.value = '';
            return;
        }

        // Validate file type
        if (!file.type.startsWith('image/')) {
            alert('Please select an image file');
            input.value = '';
            return;
        }

        const reader = new FileReader();
        reader.onload = function(e) {
            preview.innerHTML = `
                <div class="position-relative d-inline-block">
                    <img src="${e.target.result}" alt="Main Product Image" 
                         class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                    <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0" 
                            onclick="clearMainImage()" style="transform: translate(50%, -50%);">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
                <div class="mt-2 small text-muted">
                    <strong>${file.name}</strong><br>
                    Size: ${(file.size / 1024 / 1024).toFixed(2)} MB
                </div>
            `;
        };
        reader.readAsDataURL(file);
    }
}

function previewGalleryImages(input) {
    const preview = document.getElementById('gallery-images-preview');
    preview.innerHTML = '';

    if (input.files && input.files.length > 0) {
        // Validate total number of files
        if (input.files.length > 10) {
            alert('Maximum 10 images allowed');
            input.value = '';
            return;
        }

        let validFiles = [];
        Array.from(input.files).forEach((file, index) => {
            // Validate file size (5MB each)
            if (file.size > 5 * 1024 * 1024) {
                alert(`File ${file.name} is too large. Maximum size is 5MB.`);
                return;
            }

            // Validate file type
            if (!file.type.startsWith('image/')) {
                alert(`File ${file.name} is not an image.`);
                return;
            }

            validFiles.push(file);
        });

        if (validFiles.length === 0) {
            input.value = '';
            return;
        }

        // Show preview for valid files
        const galleryContainer = document.createElement('div');
        galleryContainer.className = 'row g-2';

        validFiles.forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const col = document.createElement('div');
                col.className = 'col-6 col-md-4 col-lg-3';
                col.innerHTML = `
                    <div class="position-relative">
                        <img src="${e.target.result}" alt="Gallery Image ${index + 1}" 
                             class="img-thumbnail w-100" style="height: 100px; object-fit: cover;">
                        <div class="position-absolute top-0 end-0 p-1">
                            <span class="badge bg-dark">${index + 1}</span>
                        </div>
                    </div>
                    <div class="small text-muted text-center mt-1">
                        ${file.name.substring(0, 15)}${file.name.length > 15 ? '...' : ''}
                    </div>
                `;
                galleryContainer.appendChild(col);
            };
            reader.readAsDataURL(file);
        });

        preview.appendChild(galleryContainer);
        
        // Add summary info
        const summary = document.createElement('div');
        summary.className = 'mt-2 small text-muted';
        const totalSize = validFiles.reduce((sum, file) => sum + file.size, 0);
        summary.innerHTML = `
            <strong>${validFiles.length} image(s) selected</strong><br>
            Total size: ${(totalSize / 1024 / 1024).toFixed(2)} MB
        `;
        preview.appendChild(summary);
    }
}

function clearMainImage() {
    document.getElementById('main_image').value = '';
    document.getElementById('main-image-preview').innerHTML = '';
}

// Product deletion function
function deleteProduct(productId) {
    if (confirm('Are you sure you want to delete this product? This action cannot be undone.')) {
        fetch(`/admin/malls/{{ $mall->id }}/shops/{{ $shop->id }}/products/${productId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Show success message and reload
                showAlert('Product deleted successfully!', 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('Error: ' + data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('An error occurred while deleting the product.', 'danger');
        });
    }
}

// Product details viewing function
function viewProductDetails(productId) {
    // Find the product in the current page
    const products = @json($products->items());
    const product = products.find(p => p.id === productId);
    
    if (!product) {
        showAlert('Product not found', 'warning');
        return;
    }
    
    // Create modal HTML
    const modalHtml = `
        <div class="modal fade" id="productDetailsModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Product Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-4">
                            <div class="col-md-4">
                                ${product.image_url ? 
                                    `<img src="/storage/${product.image_url}" alt="${product.name}" class="img-fluid rounded">` :
                                    '<div class="bg-light p-5 text-center rounded"><i class="bi bi-image display-4 text-muted"></i></div>'
                                }
                                ${product.gallery_images && product.gallery_images.length > 0 ? 
                                    `<div class="mt-2">
                                        <small class="text-muted">Gallery (${product.gallery_images.length} images)</small>
                                        <div class="row g-1 mt-1">
                                            ${product.gallery_images.slice(0, 4).map(img => 
                                                `<div class="col-6"><img src="/storage/${img}" class="img-fluid rounded" style="height: 60px; object-fit: cover;"></div>`
                                            ).join('')}
                                        </div>
                                    </div>` : ''
                                }
                            </div>
                            <div class="col-md-8">
                                <h4>${product.name}</h4>
                                ${product.brand ? `<p class="text-muted mb-2">Brand: ${product.brand}</p>` : ''}
                                ${product.description ? `<p>${product.description}</p>` : ''}
                                
                                <div class="row g-3 mt-3">
                                    <div class="col-6">
                                        <strong>Price:</strong><br>
                                        <span class="fs-5 text-primary">$${parseFloat(product.price).toFixed(2)}</span>
                                        ${product.sale_price ? `<br><span class="text-danger">Sale: $${parseFloat(product.sale_price).toFixed(2)}</span>` : ''}
                                    </div>
                                    <div class="col-6">
                                        <strong>Stock:</strong><br>
                                        <span class="badge bg-${product.stock_quantity > 0 ? 'success' : 'danger'}">${product.stock_quantity} units</span>
                                    </div>
                                    <div class="col-6">
                                        <strong>SKU:</strong><br>
                                        <code>${product.sku || 'N/A'}</code>
                                    </div>
                                    <div class="col-6">
                                        <strong>Status:</strong><br>
                                        <span class="badge bg-${product.stock_status === 'in_stock' ? 'success' : 'danger'}">
                                            ${product.stock_status.replace('_', ' ').toUpperCase()}
                                        </span>
                                    </div>
                                </div>
                                
                                ${product.bizspot_category_data ? `
                                    <div class="mt-3">
                                        <strong>Category:</strong><br>
                                        <span class="badge bg-primary">${product.bizspot_category_data.business_type_name}</span>
                                        <i class="bi bi-chevron-right mx-1"></i>
                                        <span class="badge bg-success">${product.bizspot_category_data.main_category_name}</span>
                                        <i class="bi bi-chevron-right mx-1"></i>
                                        <span class="badge bg-info">${product.bizspot_category_data.sub_category_name}</span>
                                    </div>
                                ` : ''}
                                
                                <div class="mt-3">
                                    ${product.featured ? '<span class="badge bg-warning me-1">Featured</span>' : ''}
                                    ${product.new_arrival ? '<span class="badge bg-info me-1">New Arrival</span>' : ''}
                                    ${product.bestseller ? '<span class="badge bg-success me-1">Bestseller</span>' : ''}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="/admin/malls/{{ $mall->id }}/shops/{{ $shop->id }}/products/${productId}/edit" class="btn btn-primary">Edit Product</a>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if any
    const existingModal = document.getElementById('productDetailsModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to page
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('productDetailsModal'));
    modal.show();
    
    // Clean up after modal is hidden
    document.getElementById('productDetailsModal').addEventListener('hidden.bs.modal', function() {
        this.remove();
    });
}

// Utility function to show alerts
function showAlert(message, type = 'info') {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    // Create or get alert container
    let alertContainer = document.getElementById('alert-container');
    if (!alertContainer) {
        alertContainer = document.createElement('div');
        alertContainer.id = 'alert-container';
        alertContainer.className = 'fixed-top p-3';
        alertContainer.style.zIndex = '9999';
        document.body.appendChild(alertContainer);
    }
    
    alertContainer.innerHTML = alertHtml;
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        const alert = alertContainer.querySelector('.alert');
        if (alert) {
            alert.remove();
        }
    }, 5000);
}

// Add real-time validation
document.addEventListener('DOMContentLoaded', function() {
    const requiredInputs = document.querySelectorAll('input[required], select[required]');
    requiredInputs.forEach(input => {
        input.addEventListener('blur', function() {
            if (!this.value.trim()) {
                this.classList.add('is-invalid');
            } else {
                this.classList.remove('is-invalid');
            }
        });
        
        input.addEventListener('input', function() {
            if (this.classList.contains('is-invalid') && this.value.trim()) {
                this.classList.remove('is-invalid');
            }
        });
    });
});
</script>
@endsection