@extends('Branch.layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <div class="card m-2">

        <div class="d-flex align-items-center gap-2">

            <a href="{{ route('branch.payout_preview') }}" class="btn btn-icon bg-white me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

                    <path d="M15 6l-6 6l6 6" />

                </svg>

            </a>

            <h5 class="mb-0">
                {{ $branch->branch_name }} Branch
                - {{ date('F', mktime(0, 0, 0, $month, 1)) }}
            </h5>

        </div>

        <div class="card-body">

            <div class="row mb-3 g-3">

                <div class="col-md-2">
                    <label for="from_date" class="form-label">From Date</label>
                    <input type="text" id="from_date" class="form-control" placeholder="DD/MM/YYYY">
                </div>
                <div class="col-md-2">
                    <label for="to_date" class="form-label">To Date</label>
                    <input type="text" id="to_date" class="form-control" placeholder="DD/MM/YYYY">
                </div>

                <div class="col-md-2">
                    <label for="year" class="form-label">Year</label>
                    <select id="year" class="form-select">
                        @for ($y = date('Y'); $y >= 2023; $y--)
                            <option value="{{ $y }}" {{ $y == $year ? 'selected' : '' }}>{{ $y }}</option>
                        @endfor
                    </select>
                </div>

                <div class="col-md-2">
                    <label for="staff_id" class="form-label">Staff ID</label>
                    <input type="text" id="staff_id" placeholder="Search Staff ID" class="form-control">
                </div>

                <div class="col-md-2">
                    <label for="staff_name" class="form-label">Staff Name</label>
                    <input type="text" id="staff_name" placeholder="Search Staff Name" class="form-control">
                </div>

                <div class="col-md-2 d-flex gap-2 align-items-end">
                    <button class="btn btn-success" id="exportBtn">Export</button>
                    <button class="btn btn-warning" id="printBtn">Print</button>
                    <button class="btn btn-secondary" id="resetBtn">Reset</button>
                </div>

            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover w-100" id="staffPayoutTable">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Staff ID</th>
                            <th>Staff Name</th>
                            <th>Attendance Date</th>
                            <th>Salary</th>
                            <th>Total Working Hours</th>
                            <th>Hour Based Salary</th>
                            <th>Per Day Salary</th>
                            <th>Paid Leave Days</th>
                            <th>Paid Leave Amt</th>
                            <th>Present Days</th>
                            <th>Half Day</th>
                            <th>Full Day</th>
                            <th>One & Half Day</th>
                            <th>Double Duty</th>
                            <th>Hour Based</th>
                            <th>Day Based Salary</th>
                            <th>Advance</th>
                            <th>Balance</th>
                            <th>View</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>


        </div>
    </div>

@endsection
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></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>


@push('scripts')
    <script>
        $(function () {

            let firstDay = new Date({{ (int) $year }}, {{ (int) $month }} - 1, 1);
            let lastDay = new Date({{ (int) $year }}, {{ (int) $month }}, 0);

            function toYmd(d) {
                return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
            }
            flatpickr("#from_date", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                defaultDate: toYmd(firstDay)
            });

            flatpickr("#to_date", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                defaultDate: toYmd(lastDay)
            });

            const dataUrl = "{{ route('branch.view_payout_preview_data', ['branch_id' => $branch->id, 'month' => $month, 'year' => $year]) }}";

            const table = $('#staffPayoutTable').DataTable({
                processing: true,
                serverSide: true,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],

                dom: 'Blfrtip',

                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Payout Preview - {{ $branch->branch_name }}',

                    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 - ' + date;
                    },

                    exportOptions: {
                        columns: ':not(:last-child)'
                    },

                    className: 'd-none'
                }],
                ajax: {
                    url: dataUrl,
                    data: function (d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.year = $('#year').val();
                        d.staff_id = $('#staff_id').val();
                        d.staff_name = $('#staff_name').val();
                    }
                },
                columnDefs: [
                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }
                ],
                // columns: [
                //     { data: 'DT_RowIndex', orderable: false, searchable: false },
                //     { data: 'staff_id', defaultContent: '-' },
                //     { data: 'staff_name', defaultContent: '-' },
                //     { data: 'attendance_date', defaultContent: '-' },
                //     { data: 'salary', defaultContent: '0' },
                //     {
                //         data: 'total_working_hours',
                //         defaultContent: '0 hrs 00 mins'
                //     },
                //     { data: 'hour_based_salary', defaultContent: '0' },
                //     { data: 'day_based_salary', defaultContent: '0' },
                //     { data: 'advance', defaultContent: '0' },
                //     { data: 'balance', defaultContent: '0' },
                //     { data: 'view', orderable: false, searchable: false, defaultContent: '-' }
                // ],
                columns: [
                    // 1. S.No
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    // 2. Staff ID
                    {
                        data: 'staff_id',
                        name: 'staff_id',
                        defaultContent: '-'
                    },

                    // 3. Staff Name
                    {
                        data: 'staff_name',
                        name: 'staff_name',
                        defaultContent: '-'
                    },

                    // 4. Attendance Date
                    {
                        data: 'attendance_date',
                        name: 'attendance_date',
                        defaultContent: '-'
                    },

                    // 5. Salary
                    {
                        data: 'salary',
                        name: 'salary',
                        defaultContent: '0.00'
                    },

                    // 6. Total Working Hours
                    {
                        data: 'total_working_hours',
                        name: 'total_working_hours',
                        defaultContent: '0 hrs 00 mins'
                    },

                    // 7. Hour Based Salary
                    {
                        data: 'hour_based_salary',
                        name: 'hour_based_salary',
                        defaultContent: '0.00'
                    },

                    // 8. Per Day Salary
                    {
                        data: 'per_day_salary',
                        name: 'per_day_salary',
                        defaultContent: '0.00'
                    },

                    {
                        data: 'paid_leave_days',
                        name: 'paid_leave_days',
                        defaultContent: '0'
                    },

                    {
                        data: 'paid_leave_amount',
                        name: 'paid_leave_amount',
                        defaultContent: '0.00'
                    },

                    // 9. Present Days
                    {
                        data: 'present_days',
                        name: 'present_days',
                        defaultContent: '0'
                    },

                    // 10. Half Day
                    {
                        data: 'half_day_count',
                        name: 'half_day_count',
                        defaultContent: '0'
                    },

                    // 11. Full Day
                    {
                        data: 'full_day_count',
                        name: 'full_day_count',
                        defaultContent: '0'
                    },

                    // 12. One & Half Day
                    {
                        data: 'one_half_day_count',
                        name: 'one_half_day_count',
                        defaultContent: '0'
                    },

                    // 13. Double Duty
                    {
                        data: 'double_duty_count',
                        name: 'double_duty_count',
                        defaultContent: '0'
                    },

                    // 14. Hour Based
                    {
                        data: 'hour_based_count',
                        name: 'hour_based_count',
                        defaultContent: '0'
                    },

                    // 15. Day Based Salary
                    {
                        data: 'day_based_salary',
                        name: 'day_based_salary',
                        defaultContent: '0.00'
                    },

                    // 16. Advance
                    {
                        data: 'advance',
                        name: 'advance',
                        defaultContent: '0.00'
                    },

                    // 17. Balance
                    {
                        data: 'balance',
                        name: 'balance',
                        defaultContent: '0.00'
                    },

                    // 18. View
                    {
                        data: 'view',
                        name: 'view',
                        orderable: false,
                        searchable: false,
                        defaultContent: '-'
                    }
                ],
                order: []
            });

            // auto filter on any filter change — no search button needed
            $('#staff_id, #staff_name').on('keyup', function () {
                clearTimeout(window._payoutTimer);
                window._payoutTimer = setTimeout(function () { table.draw(); }, 400);
            });
            $('#from_date, #to_date, #year').on('change', function () {
                table.draw();
            });

            // reset all filters back to month defaults
            $('#resetBtn').on('click', function () {
                $('#from_date')[0]._flatpickr.setDate(toYmd(firstDay), true);
                $('#to_date')[0]._flatpickr.setDate(toYmd(lastDay), true);
                $('#year').val('{{ (int) $year }}');
                $('#staff_id').val('');
                $('#staff_name').val('');
                table.draw();
            });

            // export & print
            function buildParams() {
                let p = new URLSearchParams({
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    year: $('#year').val(),
                    staff_id: $('#staff_id').val(),
                    staff_name: $('#staff_name').val()
                });
                return p.toString();
            }

            // $('#exportBtn').on('click', function () {
            //     window.location.href = "{{ route('branch.view_payout_export', ['branch_id' => $branch->id, 'month' => $month, 'year' => $year]) }}" + '?' + buildParams();
            // });

            // $('#exportBtn').on('click', function () {
            //     table.button('.buttons-excel').trigger();
            // });

            $('#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 () {
                window.open("{{ route('branch.view_payout_print', ['branch_id' => $branch->id, 'month' => $month, 'year' => $year]) }}" + '?' + buildParams(), '_blank');
            });

        });
    </script>
@endpush