@extends('admin.layouts.masterlayout')
@section('styles')

<link href="{{asset('new_theme/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />

@endsection
@section('content')
<div class="main-content">
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3">Products</div>

        <div class="ms-auto">
            <a href="{{ route('product.add') }}" class="btn btn-primary d-flex gap-2"><i class="material-icons-outlined">add</i> Add Product</a>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="row g-3">
                <div class="col-md-3">
                    <label>Category</label>
                    <select id="category" class="form-select"></select>
                </div>

                <div class="col-md-3">
                    <label>Sub Category</label>
                    <select id="sub-category" class="form-select"></select>
                </div>
                <div class="col-md-4">
                    <label>Product name</label>
                    <input type="text" id="product-name" class="form-control" placeholder="Enter Product Name">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button id="reset-filters" class="btn btn-danger w-100">
                        Reset
                    </button>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="product-table">
                <div class="table-responsive white-space-nowrap">

                    <table id="productTable" class="table table-bordered align-middle">
                        <thead class="text-nowrap">
                            <tr>
                                <th>#</th>
                                <th>Category</th>
                                <th>SubCategory</th>
                                <th>Name</th>
                                <th>Price</th>
                                <th>Stock</th>
                                <th>Image</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>

@endsection
@push('scripts')
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>
<script>
    $(document).ready(function() {

        // ✅ INIT DATATABLE
        let table = $('#productTable').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            ajax: {
                url: "{{ route('product.list') }}",
                data: function(d) {
                    d.category = $('#category').val();
                    d.subcategory = $('#sub-category').val();
                    d.product_name = $('#product-name').val();

                    //console.log(d);
                }
            },
            // ✅ IMPORTANT: Show length + export buttons
            dom: '<"d-flex justify-content-between align-items-center mb-2"lBf>rtip',

            // ✅ LENGTH MENU (Show entries dropdown)
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],

            pageLength: 10, // default

            // ✅ EXPORT BUTTON
            buttons: [
                {
                    extend: 'csvHtml5',
                    text: '<div class="d-flex align-items-center gap-2"><i class="material-icons-outlined fs-6">download</i> Export CSV</div>',
                    className: 'btn',
                    title: 'Products_List',
                    exportOptions: {
                        columns: ':visible'
                    }
                }
            ],

            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'category'
                },
                {
                    data: 'subcategory'
                },
                {
                    data: 'name'
                },
                {
                    data: 'price'
                },
                {
                    data: 'stock'
                },
                {
                    data: 'image'
                },
                {
                    data: 'status'
                },
                {
                    data: 'action'
                }
            ]
        });

        // =========================
        // ✅ LOAD CATEGORY (ON PAGE LOAD)
        // =========================
        function loadCategories() {
            $.ajax({
                url: "{{ url('products/categories') }}",
                type: "GET",

                success: function(res) {

                    $('#category').html('<option value="">Select Category</option>');

                    if (Array.isArray(res)) {
                        res.forEach(function(item) {
                            $('#category').append(
                                `<option value="${item.id}">${item.name}</option>`
                            );
                        });
                    } else {
                        console.error("Invalid Category Response:", res);
                    }
                },

                error: function(err) {
                    console.error("Category Load Error:", err);
                }
            });
        }

        loadCategories(); // 🔥 CALL HERE

        // =========================
        // ✅ CATEGORY CHANGE → LOAD SUBCATEGORY
        // =========================
        $('#category').on('change', function() {

            let category_id = $(this).val();

            $('#sub-category').html('<option value="">Select SubCategory</option>');

            if (category_id) {
                $.ajax({
                    url: "{{ url('products/subcategories') }}",
                    type: "GET",
                    data: {
                        category_id: category_id
                    },
                    success: function(res) {

                        res.forEach(function(item) {
                            $('#sub-category').append(
                                `<option value="${item.id}">${item.name}</option>`
                            );
                        });

                        table.ajax.reload(); // ✅ reload after loading
                    }
                });
            } else {
                table.ajax.reload();
            }
        });

        // =========================
        // ✅ SUBCATEGORY CHANGE
        // =========================
        $('#sub-category').on('change', function() {
            table.draw();
        });

        // =========================
        // ✅ PRODUCT NAME (LIVE SEARCH)
        // =========================
        let typingTimer;
        $('#product-name').on('keyup', function() {

            clearTimeout(typingTimer);

            typingTimer = setTimeout(function() {
                table.draw();
            }, 400); // debounce (best practice)
        });

        // =========================
        // ✅ RESET FILTERS
        // =========================
        $('#reset-filters').on('click', function () {

            // reset inputs
            $('#category').val('');
            $('#sub-category').html('<option value="">Select SubCategory</option>');
            $('#product-name').val('');

            // reload table
            table.ajax.reload();
        });
    });
</script>
@endpush