@extends('layouts.admin')

@section('title', 'Inventory Management')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.supermarkets.index') }}">Supermarkets</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.supermarkets.show', $supermarket) }}">{{ $supermarket->name }}</a></li>
                        <li class="breadcrumb-item active">Inventory</li>
                    </ol>
                </div>
                <h4 class="page-title">{{ $supermarket->name }} - Inventory Management</h4>
        </div>
        </div>
    </div>
    
    <!-- Inventory Stats Cards -->
    <div class="row">
        <div class="col-xl-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <i class="dripicons-box text-muted" style="font-size: 24px;"></i>
                    <h3><span>{{ $products->total() }}</span></h3>
                    <p class="text-muted font-15 mb-0">Total Products</p>
                        </div>
                        </div>
                    </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <i class="dripicons-warning text-warning" style="font-size: 24px;"></i>
                    <h3><span>{{ $products->where('stock_quantity', '<=', 'minimum_stock')->count() }}</span></h3>
                    <p class="text-muted font-15 mb-0">Low Stock Items</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <i class="dripicons-cross text-danger" style="font-size: 24px;"></i>
                    <h3><span>{{ $products->where('stock_quantity', '<=', 0)->count() }}</span></h3>
                    <p class="text-muted font-15 mb-0">Out of Stock</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card text-center">
                <div class="card-body">
                    <i class="dripicons-tag text-success" style="font-size: 24px;"></i>
                    <h3><span>{{ $products->where('on_sale', true)->count() }}</span></h3>
                    <p class="text-muted font-15 mb-0">On Sale</p>
                    </div>
                </div>
            </div>
        </div>

    <!-- Search and Filter Section -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <form method="GET" action="{{ route('admin.supermarkets.inventory', $supermarket) }}" class="row g-3">
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="search" placeholder="Search products..." value="{{ request('search') }}">
                                </div>
                                <div class="col-md-2">
                                    <select class="form-select" name="aisle_id">
                                        <option value="">All Aisles</option>
                                        @foreach($aisles as $aisle)
                                            <option value="{{ $aisle->id }}" {{ request('aisle_id') == $aisle->id ? 'selected' : '' }}>
                                                {{ $aisle->aisle_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-select" name="main_category_id">
                                        <option value="">All Categories</option>
                                        @foreach($mainCategories as $category)
                                            <option value="{{ $category->id }}" {{ request('main_category_id') == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-select" name="sub_category_id">
                                        <option value="">All Sub Categories</option>
                                        @foreach($subCategories as $subCategory)
                                            <option value="{{ $subCategory->id }}" {{ request('sub_category_id') == $subCategory->id ? 'selected' : '' }}>
                                                {{ $subCategory->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-select" name="stock_status">
                                        <option value="">All Status</option>
                                        <option value="low_stock" {{ request('stock_status') == 'low_stock' ? 'selected' : '' }}>Low Stock</option>
                                        <option value="out_of_stock" {{ request('stock_status') == 'out_of_stock' ? 'selected' : '' }}>Out of Stock</option>
                                        <option value="on_sale" {{ request('stock_status') == 'on_sale' ? 'selected' : '' }}>On Sale</option>
                                        <option value="featured" {{ request('stock_status') == 'featured' ? 'selected' : '' }}>Featured</option>
                                    </select>
                                </div>
                                <div class="col-md-1">
                                    <button type="submit" class="btn btn-primary">Filter</button>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-4 text-lg-end">
                            <button type="button" class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#addProductModal">
                                <i class="mdi mdi-plus"></i> Add Product
                            </button>
                            <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#bulkImportModal">
                                <i class="mdi mdi-upload"></i> Import CSV
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Products Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
        <div class="card-body">
                <div class="table-responsive">
                        <table class="table table-centered table-nowrap mb-0">
                            <thead class="table-light">
                            <tr>
                                    <th>Image</th>
                                    <th>Product Name</th>
                                    <th>Brand</th>
                                    <th>SKU</th>
                                <th>Category</th>
                                <th>Aisle</th>
                                    <th>Price (AED)</th>
                                <th>Stock</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                                @forelse($products as $product)
                                <tr>
                                    <td>
                                        @if($product->image)
                                            <img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}" class="avatar-sm" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
                                        @else
                                            <div class="avatar-sm bg-light d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; border-radius: 4px;">
                                                <i class="mdi mdi-image text-muted"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <h5 class="font-14 my-1">{{ $product->name }}</h5>
                                        <span class="text-muted font-13">{{ $product->barcode ?? 'No barcode' }}</span>
                                    </td>
                                    <td>
                                        @if($product->brand)
                                            <span class="badge bg-info">{{ $product->brand }}</span>
                                        @else
                                            <span class="text-muted">No brand</span>
                                        @endif
                                    </td>
                                    <td>{{ $product->sku }}</td>
                                    <td>
                                        @if($product->mainCategory)
                                            <span class="badge bg-primary">{{ $product->mainCategory->name }}</span>
                                        @endif
                                        @if($product->subCategory)
                                            <br><span class="badge bg-info mt-1">{{ $product->subCategory->name }}</span>
                                        @endif
                                        @if(!$product->mainCategory && !$product->subCategory)
                                            <span class="text-muted">Uncategorized</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($product->aisle)
                                            <span class="text-primary">{{ $product->aisle->aisle_number }}: {{ $product->aisle->aisle_name }}</span>
                                        @else
                                            <span class="text-muted">No aisle</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="fw-bold">AED {{ number_format($product->price, 2) }}</span>
                                        @if($product->sale_price && $product->sale_price < $product->price)
                                            <br><span class="text-success small">Sale: AED {{ number_format($product->sale_price, 2) }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="fw-bold 
                                            @if($product->stock_quantity <= 0) text-danger 
                                            @elseif($product->stock_quantity <= $product->minimum_stock) text-warning 
                                            @else text-success
                                            @endif">
                                            {{ $product->stock_quantity }}
                                        </span>
                                        @if($product->minimum_stock)
                                            <span class="small text-muted">/ min: {{ $product->minimum_stock }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($product->stock_quantity <= 0)
                                            <span class="badge bg-danger">Out of Stock</span>
                                        @elseif($product->stock_quantity <= $product->minimum_stock)
                                            <span class="badge bg-warning">Low Stock</span>
                                        @else
                                            <span class="badge bg-success">In Stock</span>
                                        @endif
                                        @if($product->on_sale)
                                            <br><span class="badge bg-info mt-1">On Sale</span>
                                        @endif
                                        @if($product->is_featured)
                                            <br><span class="badge bg-primary mt-1">Featured</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <a href="{{ route('admin.supermarkets.products.edit', [$supermarket, $product]) }}" 
                                               class="btn btn-sm btn-outline-primary" 
                                               title="Edit Product">
                                                <i class="mdi mdi-pencil"></i>
                                            </a>
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-success" 
                                                    onclick="updateStock({{ $product->id }}, '{{ $product->name }}', {{ $product->stock_quantity }})"
                                                    title="Update Stock">
                                                <i class="mdi mdi-package-variant"></i>
                                            </button>
                                            <form action="{{ route('admin.supermarkets.products.destroy', [$supermarket, $product]) }}" 
                                                  method="POST" 
                                                  onsubmit="return confirm('Are you sure you want to delete this product?')" 
                                                  class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" 
                                                        class="btn btn-sm btn-outline-danger"
                                                        title="Delete Product">
                                                    <i class="mdi mdi-delete"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="10" class="text-center py-4">
                                        <div class="d-flex flex-column align-items-center">
                                            <i class="mdi mdi-package-variant-closed mdi-48px text-muted mb-3"></i>
                                            <h5 class="text-muted">No products found</h5>
                                            <p class="text-muted">Add some products to get started.</p>
                                            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addProductModal">
                                                <i class="mdi mdi-plus"></i> Add First Product
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                        </tbody>
                    </table>
                </div>

                    <!-- Pagination -->
                    @if($products->hasPages())
                        <div class="row mt-3">
                            <div class="col-12">
                {{ $products->appends(request()->query())->links() }}
                            </div>
                </div>
            @endif
        </div>
    </div>
        </div>
    </div>
</div>

<!-- Stock Update Modal -->
<div class="modal fade" id="stockUpdateModal" tabindex="-1" aria-labelledby="stockUpdateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="stockUpdateModalLabel">Update Stock</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="stockUpdateForm" method="POST">
                @csrf
                @method('PATCH')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="product_name_display" class="form-label">Product</label>
                        <input type="text" class="form-control" id="product_name_display" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="current_stock" class="form-label">Current Stock</label>
                        <input type="number" class="form-control" id="current_stock" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="new_stock" class="form-label">New Stock Quantity <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="new_stock" name="stock_quantity" required min="0">
                    </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">Update Stock</button>
                </div>
            </form>
        </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-lg">
        <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.supermarkets.products.store', $supermarket) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <!-- Product Name -->
                        <div class="col-md-6">
                            <label for="product_name" class="form-label">Product Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="product_name" name="product_name" required>
                        </div>

                        <!-- Product Brand -->
                        <div class="col-md-6">
                            <label for="brand" class="form-label">Brand</label>
                            <input type="text" class="form-control" id="brand" name="brand">
                        </div>

                        <!-- SKU -->
                        <div class="col-md-6">
                            <label for="sku" class="form-label">SKU <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="sku" name="sku" required>
                        </div>

                        <!-- Barcode -->
                        <div class="col-md-6">
                            <label for="barcode" class="form-label">Barcode</label>
                            <input type="text" class="form-control" id="barcode" name="barcode">
                        </div>

                        <!-- Main Category -->
                        <div class="col-md-6">
                            <label for="main_category_id" class="form-label">Main Category <span class="text-danger">*</span></label>
                            <select class="form-select" id="main_category_id" name="main_category_id" required>
                                <option value="">Select Main Category</option>
                                @foreach($mainCategories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Sub Category -->
                        <div class="col-md-6">
                            <label for="sub_category_id" class="form-label">Sub Category <span class="text-danger">*</span></label>
                            <select class="form-select" id="sub_category_id" name="sub_category_id" required>
                                <option value="">Select Sub Category</option>
                                @foreach($subCategories as $subCategory)
                                    <option value="{{ $subCategory->id }}" data-main-category="{{ $subCategory->main_category_id }}">
                                        {{ $subCategory->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Aisle -->
                        <div class="col-md-6">
                            <label for="aisle_id" class="form-label">Aisle</label>
                            <select class="form-select" id="aisle_id" name="aisle_id">
                                <option value="">Select Aisle</option>
                                @foreach($aisles as $aisle)
                                    <option value="{{ $aisle->id }}">{{ $aisle->aisle_name }} ({{ $aisle->aisle_number }})</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Prices -->
                        <div class="col-md-4">
                            <label for="cost_price" class="form-label">Cost Price (AED)</label>
                            <input type="number" step="0.01" class="form-control" id="cost_price" name="cost_price">
                        </div>

                        <div class="col-md-4">
                            <label for="selling_price" class="form-label">Selling Price (AED) <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" class="form-control" id="selling_price" name="selling_price" required>
                        </div>

                        <div class="col-md-4">
                            <label for="sale_price" class="form-label">Sale Price (AED)</label>
                            <input type="number" step="0.01" class="form-control" id="sale_price" name="sale_price">
                        </div>

                        <!-- Stock -->
                        <div class="col-md-6">
                            <label for="stock_quantity" class="form-label">Stock Quantity <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="stock_quantity" name="stock_quantity" required>
                        </div>

                        <div class="col-md-6">
                            <label for="minimum_stock" class="form-label">Minimum Stock Level</label>
                            <input type="number" class="form-control" id="minimum_stock" name="minimum_stock" value="5">
                        </div>

                        <!-- Description -->
                        <div class="col-12">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                        </div>

                        <!-- Product Image -->
                        <div class="col-12">
                            <label for="product_image" class="form-label">Product Image</label>
                            <input type="file" class="form-control" id="product_image" name="product_image" accept="image/*">
                            <div class="form-text">Supported formats: JPG, PNG, GIF. Max size: 2MB</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">Add Product</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bulk Import Modal -->
<div class="modal fade" id="bulkImportModal" tabindex="-1" aria-labelledby="bulkImportModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkImportModalLabel">Bulk Import Products</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.supermarkets.products.bulk-import', $supermarket) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="csv_file" class="form-label">CSV File <span class="text-danger">*</span></label>
                        <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv" required>
                        <div class="form-text">Upload a CSV file with product data. Maximum file size: 5MB</div>
                    </div>

                    <div class="alert alert-info">
                        <h6>CSV Format Requirements:</h6>
                        <p class="mb-2">Your CSV file should have the following columns (minimum):</p>
                        <code>name,brand,sku,price,stock_quantity</code>
                        <p class="mt-2">Optional columns: <code>barcode,main_category_id,sub_category_id,cost_price,sale_price,minimum_stock,description,aisle_name</code></p>
                        <p class="mt-2 mb-0">
                            <a href="{{ route('admin.supermarkets.products.template', $supermarket) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-download"></i> Download Template
                            </a>
                        </p>
                    </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-info">Import Products</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Stock Update functionality
function updateStock(productId, productName, currentStock) {
    document.getElementById('product_name_display').value = productName;
    document.getElementById('current_stock').value = currentStock;
    document.getElementById('new_stock').value = currentStock;
    document.getElementById('stockUpdateForm').action = `/admin/supermarkets/{{ $supermarket->id }}/products/${productId}/update-stock`;
    new bootstrap.Modal(document.getElementById('stockUpdateModal')).show();
}

// Category hierarchy management
document.addEventListener('DOMContentLoaded', function() {
    const mainCategorySelect = document.getElementById('main_category_id');
    const subCategorySelect = document.getElementById('sub_category_id');
    const allSubCategoryOptions = Array.from(subCategorySelect.options);

    function filterSubCategories() {
        const selectedMainCategoryId = mainCategorySelect.value;
        
        // Clear all options except the first one
        subCategorySelect.innerHTML = '<option value="">Select Sub Category</option>';
        
        if (selectedMainCategoryId) {
            // Add relevant sub-categories
            allSubCategoryOptions.forEach(option => {
                if (option.dataset.mainCategory == selectedMainCategoryId) {
                    subCategorySelect.appendChild(option.cloneNode(true));
                }
            });
        }
    }

    mainCategorySelect.addEventListener('change', filterSubCategories);
    
    // Initialize on page load
    filterSubCategories();
});
</script>
@endsection