@extends('Admin.layout')

@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="mb-0">Payout Preview</h5>
        <div class="d-flex gap-2">
            <button id="printBtn" class="btn btn-label-secondary">Print</button>
            <button id="exportBtn" class="btn btn-label-secondary">Export</button>
        </div>
    </div>

    {{-- FILTER CARD --}}
    <div class="card p-3 mb-3">
        <div class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label">Year</label>
                <select id="yearFilter" class="form-select">
                    <option value="">All</option>
                    @for($y = now()->year; $y >= now()->year - 5; $y--)
                        <option value="{{ $y }}">{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Month</label>
                <select id="monthFilter" class="form-select">
                    <option value="">All</option>
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}">{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                    @endfor
                </select>
            </div>
        </div>
    </div>

    {{-- TABLE CARD --}}
    <div class="card p-3">
        <div class="table-responsive">
            <table class="table" id="usersTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Month</th>
                        <th>Total Payout</th>
                        <th>View</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <script>
        $(document).ready(function () {

            const table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                dom: 'Blfrtip',

                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Payout Preview Monthly',
                    filename: function () {
                        var now = new Date();
                        var date =
                            String(now.getDate()).padStart(2, '0') + '-' +
                            String(now.getMonth() + 1).padStart(2, '0') + '-' +
                            String(now.getFullYear()).slice(-2);
                        return 'Payout Preview Monthly - ' + date;
                    },
                    exportOptions: {
                        columns: ':not(:last-child)'
                    },
                    className: 'd-none'
                }],
                ajax: {
                    url: "{{ route('payout_preview_monthly_data') }}",
                    type: "GET",
                    data: function (d) {
                        d.year = $('#yearFilter').val();
                        d.month = $('#monthFilter').val();
                    }
                },
                searching: false,
                paging: true,
                info: true,
                lengthChange: false,
                pageLength: 12,
                ordering: false,
                columns: [
                    { data: 'DT_RowIndex', searchable: false, orderable: false },
                    { data: 'month_label' },
                    { data: 'total_payout' },
                    { data: 'view', searchable: false, orderable: false }
                ]
            });

            $('#yearFilter, #monthFilter').change(function () {
                table.draw();
            });

            // $('#exportBtn').on('click', function () {
            //     const params = new URLSearchParams({ year: $('#yearFilter').val(), month: $('#monthFilter').val() });
            //     window.location.href = "{{ route('payout_preview_monthly_export') }}?" + params.toString();
            // });
            $('#exportBtn').on('click', function () {
                const originalLength = table.page.len();
                table.page.len(-1).draw();
                table.one('draw', function () {
                    table.button('.buttons-excel').trigger();
                    table.page.len(originalLength).draw();
                });
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({ year: $('#yearFilter').val(), month: $('#monthFilter').val() });
                window.open("{{ route('payout_preview_monthly_print') }}?" + params.toString(), '_blank');
            });

        });
    </script>

@endsection