@extends('layout.app')

@section('content')
<div class="container">
    <div class="page-inner">
        <div class="page-header">
            <h3 class="fw-bold mb-3">
                <a href="{{ url('add/stock') }}" class="btn btn-primary" style="background-color: red; color: white;">+Add Stock</a>
            </h3>
            <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                    <a href="{{ url('/') }}">
                        <i class="icon-home"></i>
                    </a>
                </li>
                <li class="separator">
                    <i class="icon-arrow-right"></i>
                </li>
                <li class="nav-item">
                    <select id="filterData" name="brand_id" class="form-select" aria-label="Select Brand">
                        <option value="">All Categories</option>
                        @foreach($brands as $b)
                        <option value="{{ $b->id }}">{{ $b->name }}</option>
                        @endforeach
                    </select>
                </li>
            </ul>
        </div>
        
        
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive ">
                            <div class="table table-striped table-bordered text-nowrap" id="stockTable">
                                <div id="stock-table-container">
                                    @include('Pages.Stock.table', ['stock' => $stock])
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- AJAX Script --}}
   <script>
    document.getElementById('filterData').addEventListener('change', function() {
        const brandId = this.value;
        fetch(`/filter-stock/${brandId || ''}`)
            .then(response => response.text())
            .then(html => {
                document.getElementById('stockTable').innerHTML = html;
            })
            .catch(error => console.error('Error:', error));
    });

    function reloadStockTable(brandId) {
        $.get('/filter-stock/' + (brandId || ''), function(data) {
            $('#stock-table-container').html(data);

            // Re-initialize DataTables
            $('#basic-datatables').DataTable();
        });
    }

    // Example: call reloadStockTable when filter changes
    $('#brand-filter').on('change', function() {
        reloadStockTable($(this).val());
    });
</script>

</div>
@endsection