@extends('Admin.layout')

@section('content')
    <style>
        .custom-tabs {
            border: none;
            gap: 4px;
        }

        .custom-tabs .nav-link {
            border: 2px solid #FFCC00;
            /* color: #222; */
            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 active">
                    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">
                    Product Wise
                </a>
            </li>

        </ul>

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

            <div class="card">

                <!-- Filters -->
                <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>

                <!-- Table Toolbar -->
                <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"> --}}
                        <input type="text" class="form-control" id="to_date" placeholder="DD/MM/YYYY">
                    </div>

                    {{-- <div class="col-md-1 mt-auto mb-2">
                        <button class="btn w-100 text-dark fw-semibold" style="background:#FFCC00;">
                            Filter
                        </button>
                    </div> --}}

                    <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...">
                    </div>

                </div>

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

                            </tr>
                        </thead>

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

            </div>


        </div>

    </div>

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

    <script>
        $(function () {

            const today = new Date();

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

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

            const data = {
                processing: true,
                serverSide: true,
                responsive: true,
                searching: false,
                lengthChange: false,
                // lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], ordering: true,
                autoWidth: false,

                ajax: {
                    url: "{{ route('dateWiseData') }}",
                    type: "GET",
                    data: function (d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        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: 'date',
                    name: 'date',
                    render: function (data) {
                        if (!data) return '-';
                        const p = String(data).split('-');
                        return p.length === 3 ? p[2] + '/' + p[1] + '/' + p[0] : data;
                    }
                },
                {
                    data: "bills",
                    name: "bills"
                },
                {
                    data: "amount",
                    name: "amount"
                },
                {
                    data: "quantity",
                    name: "quantity"
                },
                {
                    data: null, name: "action", orderable: false, searchable: false,
                    render: function (data, type, row) {
                        const filters = { branch_id: "" }; // plain date_wise has no branch scope

                        Object.keys(filters).forEach(key => {
                            if (!filters[key]) delete filters[key];
                        });

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

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

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

                order: [
                    [1, "desc"]
                ]
            };

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

            // Auto-fetch on date change — no button needed
            // $('#from_date, #to_date').on('change', function () {
            //     table.ajax.reload();
            // });

            // Debounced search-as-you-type
            let searchTimer;
            $('#customSearch').on('keyup', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => table.ajax.reload(), 400);
            });

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

            // Reset
            $('#resetBtn').on('click', function () {
                $('#from_date, #customSearch').val('');
                const today = new Date();
                $('#to_date').val(
                    today.getFullYear() + '-' +
                    String(today.getMonth() + 1).padStart(2, '0') + '-' +
                    String(today.getDate()).padStart(2, '0')
                );
                table.ajax.reload();
            });

            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    search: $('#customSearch').val()
                });
                window.location.href = "{{ route('dateWiseExport') }}?" + params.toString();
            });
            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    search: $('#customSearch').val()
                });
                window.open("{{ route('dateWisePrint') }}?" + params.toString(), '_blank');
            });

        });
    </script>
@endsection