@extends('Admin.layout')

@section('content')

    <style>
        .custom-tabs {
            border: none;
            gap: 4px;
        }

        .custom-tabs .nav-link {
            border: 2px solid #FFCC00;
            background: transparent;
            border-radius: 10px;
            padding: 10px;
            font-weight: 600;
            transition: .3s ease;
        }

        .custom-tabs .nav-link:hover {
            background: none !important;
            color: #000;
        }

        .custom-tabs .nav-link.active {
            background: #FFCC00;
            border-color: #FFCC00;
            color: #000;
            box-shadow: 0 8px 20px rgba(255, 204, 0, .35);
        }
    </style>

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


    <div class="container-fluid">

        <ul class="nav custom-tabs mb-4">

            <li class="nav-item">
                <a href="{{ route('date_wise') }}" class="nav-link">
                    Date Wise
                </a>
            </li>

            <li class="nav-item">
                <a href="{{ route('category_wise') }}" class="nav-link">
                    Category Wise
                </a>
            </li>

            <li class="nav-item">
                <a href="{{ route('product_wise') }}" class="nav-link active">
                    Product Wise
                </a>
            </li>

        </ul>

        <div class="tab-content m-0 p-0">

            <div class="card">

                <div class="card-body border-bottom">
                    <div class="col-lg-12 d-flex gap-2 justify-content-end">
                        <button id="printBtn" class="btn btn-label-secondary">Print</button>
                        <button id="exportBtn" class="btn btn-label-secondary">Export</button>
                    </div>
                </div>

                <div class="row mb-3 align-items-center p-3 g-2">

                    <div class="col-md-1 mt-auto mb-2">
                        <select id="pageLength" class="form-select">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="-1">All</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-2">
                        <label class="form-label fw-semibold">From Date</label>
                        {{-- <input type="date" class="form-control" id="from_date"> --}}
                        <input type="text" class="form-control" id="from_date" placeholder="DD/MM/YYYY">

                    </div>

                    <div class="col-md-3 mb-2">
                        <label class="form-label fw-semibold">To Date</label>
                        {{-- <input type="date" class="form-control" id="to_date" value="{{ now()->format('Y-m-d') }}"> --}}
                        <input type="text" class="form-control" id="to_date" placeholder="DD/MM/YYYY">

                    </div>

                    <link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
                    <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
                    <div class="col-md-2 mb-2">
                        <label class="form-label fw-semibold">Category</label>
                        <select id="category" name="category">
                            <option value="">All Categories</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->category }}</option>
                            @endforeach
                        </select>
                    </div>

                    <script>
                        new TomSelect("#category", {
                            sortField: { field: "text", direction: "asc" }
                        });
                    </script>

                    <div class="col-md-1 mt-auto mb-2">
                        <button id="resetBtn" class="btn btn-outline-secondary w-100">
                            Reset
                        </button>
                    </div>
                    <div class="col-md-3 ms-auto mt-auto mb-2">
                        <input type="text" id="customSearch" class="form-control" placeholder="Search product...">
                    </div>

                </div>

                <div class="table-responsive pb-3">
                    <table class="table align-middle mb-0" id="usersTable">
                        <thead>
                            <tr>
                                <th>Sno</th>
                                <th>Product</th>
                                <th>Code</th>
                                <th>Bills</th>
                                <th>Quantity Sold</th>
                                <th>Amount</th>
                                <th>Action</th>

                            </tr>
                        </thead>

                        <tbody></tbody>
                    </table>
                </div>

            </div>

        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


    <script>
        $(function () {

            flatpickr("#from_date", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                onChange: function () {
                    table.ajax.reload();
                }
            });

            flatpickr("#to_date", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                defaultDate: new Date(),
                onChange: function () {
                    table.ajax.reload();
                }
            });

            const data = {
                processing: true,
                serverSide: true,
                responsive: true,
                searching: false,
                lengthChange: false,
                ordering: true,
                autoWidth: false,

                ajax: {
                    url: "{{ route('product_wise_data') }}",
                    type: "GET",
                    data: function (d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.category = $('#category').val();       // ← add

                        d.search = $('#customSearch').val();
                    }
                },

                columns: [
                    {
                        data: null, name: "sno", orderable: false, searchable: false,
                        render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
                    },
                    { data: "product_name", name: "product_name" },
                    { data: "product_code", name: "product_code" },
                    { data: "bills", name: "bills" },
                    { data: "quantity", name: "quantity" },
                    { data: "amount", name: "amount" },
                    {
                        data: null, name: "action", orderable: false, searchable: false,
                        render: function (data, type, row) {
                            const filters = {
                                from_date: $('#from_date').val(),
                                to_date: $('#to_date').val()
                            };

                            // Remove empty values so they don't appear in the URL
                            Object.keys(filters).forEach(key => {
                                if (!filters[key]) delete filters[key];
                            });

                            const params = new URLSearchParams(filters);
                            const queryString = params.toString();

                            const url = "{{ route('product_detail', ['id' => ':id']) }}"
                                .replace(':id', row.product_id)
                                + (queryString ? '?' + queryString : '');

                            return `<a href="${url}" class="btn btn-sm btn-primary">View</a>`;
                        }
                    }
                ],

                order: [[4, "desc"]] // Quantity Sold, descending — best-seller first
            };

            const table = $('#usersTable').DataTable(data);



            let searchTimer;
            $('#customSearch').on('keyup', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => table.ajax.reload(), 400);
            });
            $('#category').on('change', function () {
                table.ajax.reload();
            });

            $('#pageLength').on('change', function () {
                table.page.len($(this).val()).draw();
            });

            // $('#resetBtn').on('click', function () {
            //     $('#from_date, #to_date, #customSearch').val('');
            //     table.ajax.reload();
            // });

            $('#resetBtn').on('click', function () {
                $('#from_date')[0]._flatpickr.clear();
                $('#to_date')[0]._flatpickr.clear();
                $('#customSearch').val('');
                $('#category')[0].tomselect.clear();

                table.ajax.reload();
            });

            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    category: $('#category').val(),

                    search: $('#customSearch').val()
                });
                window.location.href = "{{ route('product_wise_export') }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    category: $('#category').val(),

                    search: $('#customSearch').val()
                });
                window.open("{{ route('product_wise_print') }}?" + params.toString(), '_blank');
            });

        });
    </script>
@endsection