{{-- @extends('employee.layouts')

@section('title', 'Products')

@section('header')

<!-- Bootstrap 5 -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- DataTables CSS -->

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

<style>

    table td, table th {

        vertical-align: middle;

        white-space: normal !important;

    }

</style>

@endsection

@section('content')

<div class="container-fluid mt-3">

    <h3>Products</h3>

    <table id="data-table" class="table table-bordered table-striped w-100">

        <thead>

            <tr>

                <th>S/N</th>

                <th>CATEGORY</th>

                <th>SUB CATEGORY</th>

                <th>BRAND</th>

                <th>PRODUCT ID</th>

                <th>HSN CODE</th>

                <th>TITLE</th>

                <th>SALES PRICE</th>

                <th>S-WALLET</th>

                <th>STOCK</th>

            </tr>

        </thead>

        <tbody></tbody>

    </table>

</div>

@endsection

@section('footer')

<!-- jQuery (NO integrity ❌) -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- DataTables -->

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>

$(document).ready(function () {

    $('#data-table').DataTable({

        processing: true,

        serverSide: true,

        ajax: "{{ route('employee_product_data') }}",

columns: [

    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },

    { data: 'category_name', name: 'category_name', defaultContent: 'N/A' },

    { data: 'subcategory_name', name: 'subcategory_name', defaultContent: 'N/A' },

    { data: 'brand', name: 'brand', defaultContent: 'N/A' },

    { data: 'product_id', name: 'product_id' },

    { data: 'hsn_code', name: 'hsn_code', defaultContent: 'N/A' },

    { data: 'title', name: 'title' },

    { data: 'sell_price', name: 'sell_price' },

    { data: 'shop_wallet', name: 'shop_wallet', defaultContent: 'N/A' },

    { data: 'total_variant_stock', name: 'total_variant_stock' }

]

    });

});

</script>

@endsection --}}

@extends('employee.layouts')

@section('title', 'Products')

@section('header')

<!-- Bootstrap -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- DataTables -->

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

<style>

    table td, table th {

        vertical-align: middle;

        white-space: normal !important;

    }

</style>

@endsection

@section('content')

<div class="container-fluid page-wrapper category-container">

    <!-- HEADER -->

    <div class="row">

        <div class="d-flex justify-content-between align-items-center">

            <h3 class="page-top-heading mt-2">Products</h3>

        </div>

    </div>

    <!-- FILTER ROW -->

    <div class="row mt-3 me-2 justify-content-end align-items-center g-2">

        <!-- CATEGORY -->

        <div class="col-md-3 col-auto">

            <select id="categoryFilter" class="form-select">

                <option value="">All Categories</option>

                @foreach ($categories as $cat)

                    <option value="{{ $cat->category_name }}">{{ $cat->category_name }}</option>

                @endforeach

            </select>

        </div>

        <!-- SUBCATEGORY -->

        <div class="col-md-3 col-auto">

            <select id="subcategoryFilter" class="form-select">

                <option value="">All Subcategories</option>

                @foreach ($subcategories as $sub)

                    <option value="{{ $sub->subcategory_name }}">{{ $sub->subcategory_name }}</option>

                @endforeach

            </select>

        </div>

        <!-- BUTTONS -->

        <div class="col-auto">

            <button id="allProductsBtn" class="btn btn-primary">

                <i class="fa-solid fa-list me-1"></i>All Products

            </button>

            <a href="{{ route('employee_low_stock') }}" class="btn btn-secondary ms-2">

                <i class="fa-solid fa-triangle-exclamation me-2"></i>Low Stock

            </a>

        </div>

    </div>

    <hr>

    <!-- TABLE -->

    <div class="row mt-2">

        <div class="col-lg-12">

            <div class="card">

                <div class="card-body">

                    <table id="data-table" class="table table-bordered table-striped w-100">

                        <thead>

                            <tr>

                                <th>S/N</th>

                                <th>CATEGORY</th>

                                <th>SUB CATEGORY</th>

                                <th>BRAND</th>

                                <th>PRODUCT ID</th>

                                <th>HSN CODE</th>

                                <th>TITLE</th>

                                <th>SALES PRICE</th>

                                <th>S-WALLET</th>

                                <th>STOCK</th>
                                 <th>VARIANT</th> 

                            </tr>

                        </thead>

                        <tbody></tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection

@section('footer')

<!-- jQuery -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- DataTables -->

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>

$(document).ready(function () {

    var table = $('#data-table').DataTable({

        processing: true,

        serverSide: true,

        ajax: {

            url: "{{ route('employee_product_data') }}",

            data: function (d) {

                d.category = $('#categoryFilter').val();

                d.subcategory = $('#subcategoryFilter').val();

            }

        },

        columns: [

            { data: 'DT_RowIndex', orderable: false, searchable: false },

            { data: 'category_name', defaultContent: 'N/A' },

            { data: 'subcategory_name', defaultContent: 'N/A' },

            { data: 'brand', defaultContent: 'N/A' },

            { data: 'product_id' },

            { data: 'hsn_code', defaultContent: 'N/A' },

            { data: 'title' },

            { data: 'sell_price' },

            { data: 'shop_wallet', defaultContent: 'N/A' },

            { data: 'total_variant_stock' },
              {
                    data: 'variant',
                },

        ]

    });

    // FILTER CHANGE

    $('#categoryFilter, #subcategoryFilter').change(function () {

        table.ajax.reload();

    });

    // RESET BUTTON

    $('#allProductsBtn').click(function () {

        $('#categoryFilter').val('');

        $('#subcategoryFilter').val('');

        table.ajax.reload();

    });

});

</script>

@endsection