@extends('admin.layouts.master')
@section('title', 'Product Stock List')
@section('content')

    <!-- Search Section -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Search Inventory</h3>
                    </div>
                    <div class="card-body">
                        <form id="searchForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Product Name</label>
                                        <select class="form-control select2" name="product_ids[]" id="product_ids" multiple>
                                            @foreach ($products as $product)
                                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Brand Name</label>
                                        <select class="form-control select2" name="brand_ids[]" id="brand_ids" multiple>
                                            @foreach ($brands as $brand)
                                                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Category Name</label>
                                        <select class="form-control select2" name="category_ids[]" id="category_ids" multiple>
                                            @foreach ($subCategories as $category)
                                                <option value="{{ $category->id }}">{{ $category->sub_category_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Stock Status</label>
                                        <select class="form-control select2" name="stock_statuses[]" id="stock_statuses" multiple>
                                            <option value="normal">Normal Stock</option>
                                            <option value="low">Low Stock</option>
                                            <option value="out">Out of Stock</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-default btn-sm" id="resetBtn">
                                        <i class="fas fa-undo"></i> Reset
                                    </button>
                                    <button type="submit" class="btn btn-primary btn-sm" id="searchBtn">
                                        <i class="fas fa-search"></i> Search
                                    </button>
                                    <button type="button" class="btn btn-success btn-sm" id="exportExcelBtn">
                                        <i class="fas fa-file-excel"></i> Export Excel
                                    </button>
                                    <button type="button" class="btn btn-danger btn-sm" id="exportPdfBtn">
                                        <i class="fas fa-file-pdf"></i> Export PDF
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- DataTable Section -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Stock List</h3>
                    </div>
                    <div class="card-body" style="position: relative;">
                        <!-- Loader Overlay -->
                        <div id="tableLoader" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 1000;">
                            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                <p class="mt-2">Loading data...</p>
                            </div>
                        </div>

                        <table class="table table-bordered" id="products-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Product Name</th>
                                    <th>Brand</th>
                                    <th>Category</th>
                                    <th>Quantity</th>
                                    <th>Threshold</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('css')
    <style>
        .stock-normal {
            color: #28a745;
            font-weight: bold;
        }

        .stock-low {
            color: #ffc107;
            font-weight: bold;
        }

        .stock-out {
            color: #dc3545;
            font-weight: bold;
        }
        
        .btn i {
            margin-right: 5px;
        }
        
        .select2-container--default .select2-selection--multiple {
            min-height: 38px;
        }

    </style>
    @section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

@endsection
@endsection

@section('js')
    <script>
        $(document).ready(function () {
           
            $('.select2').select2({
                placeholder: "Select options",
                allowClear: true,
                width: '100%'
            });

            // Show loader function
            function showLoader() {
                $('#tableLoader').show();
                $('#searchBtn, #resetBtn, #exportExcelBtn, #exportPdfBtn').prop('disabled', true);
            }
            
            // Hide loader function
            function hideLoader() {
                $('#tableLoader').hide();
                $('#searchBtn, #resetBtn, #exportExcelBtn, #exportPdfBtn').prop('disabled', false);
            }
            
            // Initialize DataTable
            var table = $('#products-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.inventory.stockList') }}",
                    data: function (d) {
                        // Ensure we always send arrays
                        d.product_ids = $('#product_ids').val() || [];
                        d.brand_ids = $('#brand_ids').val() || [];
                        d.category_ids = $('#category_ids').val() || [];
                        d.stock_statuses = $('#stock_statuses').val() || [];
                    },
                    beforeSend: function () {
                        showLoader();
                    },
                    complete: function () {
                        hideLoader();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'name', name: 'products.name' },
                    { data: 'brand_name', name: 'brands.name' },
                    { data: 'sub_category_name', name: 'sub_categories.sub_category_name' },
                    { data: 'quantity', name: 'products.quantity' },
                    { data: 'threshold', name: 'products.threshold' },
                    { data: 'status', name: 'status', orderable: false, searchable: false }
                ],
                order: [[1, 'asc']] // Default ordering by product name
            });

            // Handle search form submission
            $('#searchForm').on('submit', function (e) {
                e.preventDefault();
                showLoader();
                table.ajax.reload();
            });

            // Handle reset button click
            $('#resetBtn').on('click', function () {
                showLoader();
                $('#searchForm')[0].reset();
                $('.select2').val(null).trigger('change');
                table.ajax.reload();
            });

            // Handle export buttons
            $('#exportExcelBtn, #exportPdfBtn').on('click', function() {
                const exportType = $(this).attr('id') === 'exportExcelBtn' ? 'excel' : 'pdf';
                
                // Get current filter values
                const params = {
                    product_ids: $('#product_ids').val() || [],
                    brand_ids: $('#brand_ids').val() || [],
                    category_ids: $('#category_ids').val() || [],
                    stock_statuses: $('#stock_statuses').val() || [],
                    export: exportType
                };
                
                // Show loading state
                const originalText = $(this).html();
                $(this).html('<i class="fas fa-spinner fa-spin"></i> Processing...');
                $(this).prop('disabled', true);
                
                // Convert to query string
                const queryString = $.param(params, true);
                
                // Trigger download
                window.location.href = "{{ route('admin.inventory.stockList') }}?" + queryString;
                
                // Reset button after delay
                setTimeout(() => {
                    $(this).html(originalText);
                    $(this).prop('disabled', false);
                }, 2000);
            });

            // Hide loader when table is drawn
            table.on('draw', function () {
                hideLoader();
            });
        });
    </script>
@endsection