@extends('Branch.layout')

@section('content')

    <div class="card m-2">

        <div class="card-header">
            <div class="d-flex align-items-center gap-2">
                <a href="{{ url()->previous() }}" 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 18l-6-6 6-6" />
                    </svg>
                </a>
                <h5 class="mb-0">
                    {{ $staff->name }} - Monthly Attendance
                </h5>
            </div>
        </div>

        <div class="card-body">

            <div class="row mb-3 g-2 align-items-end">
                <div class="col-md-3">
                    <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-3">
                    <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="duty_type" class="form-label">Duty Type</label>
                    <select id="duty_type" class="form-select">
                        <option value="">All</option>
                        <option value="full_day">Full Day</option>
                        <option value="half_day">Half Day</option>
                        <option value="one_half_day">One & Half Day</option>
                        <option value="double_duty">Double Duty</option>
                        <option value="hour_based">Hour Based</option>
                    </select>
                </div>
                <div class="col-md-4 d-flex gap-2 align-items-end">
                    <button class="btn btn-secondary" id="resetBtn">Reset</button>
                    <button class="btn btn-success" id="exportBtn">Export</button>
                    <button class="btn btn-warning" id="printBtn">Print</button>
                </div>
            </div>

            <div id="paidLeaveBanner" class="alert alert-warning d-none mb-3">
                <i class="bi bi-info-circle me-1"></i>
                <span id="paidLeaveText"></span>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover w-100" id="staffTable">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Attendance Date</th>
                            <th>Duty Type</th>
                            <th>Salary</th>
                            <th>Advance</th>
                            <th>Balance</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot class="d-none">
                        <tr>
                            <th colspan="3" class="text-end">Total</th>
                            <th id="footerSalary"></th>
                            <th id="footerAdvance"></th>
                            <th></th>
                        </tr>
                        <tr>
                            <th colspan="6" id="footerPaidLeaveText" class="text-start"></th>
                        </tr>
                        <tr>
                            <th colspan="3" class="text-end">Grand Total (Salary + Paid Leave − Advance)</th>
                            <th colspan="3" id="footerGrandTotal"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>

        </div>
    </div>

@endsection
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<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>
        $(document).ready(function () {

            const selectedYear = {{ $year }};
            const staffUserId = '{{ $staff->user_id }}';
            const month = {{ $month }};

            const dataUrl = "{{ route('branch.staff_payout_view_data', [$staff->user_id, $month]) }}";

            function toYmd(d) {
                return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
            }

            let firstDay = new Date(selectedYear, month - 1, 1);
            let lastDay = new Date(selectedYear, month, 0);

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

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

            let table = $('#staffTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: false,

                dom: 'Brt<"d-flex justify-content-between p-3"ip>',

                buttons: [{
                    extend: 'excelHtml5',
                    title: '{{ $staff->name }} - Staff Payout',

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

                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    },

                    className: 'd-none'
                }],

                ajax: {
                    url: dataUrl,
                    type: 'GET',
                    data: function (d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.duty_type = $('#duty_type').val();
                        d.year = selectedYear;
                    },
                    error: function (xhr, error, thrown) {
                        console.error('Staff payout AJAX error:', xhr.status, thrown);
                    }
                },

                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'attendance_date', name: 'attendance_date' },
                    { data: 'duty_type', name: 'duty_type' },
                    { data: 'salary', name: 'salary' },
                    { data: 'advance', name: 'advance' },
                    { data: 'balance', name: 'balance' }
                ],

                order: [],
                language: {
                    processing: 'Loading...',
                    emptyTable: 'No attendance data found',
                    zeroRecords: 'No matching attendance found'
                }
            });

            table.on('xhr', function () {
                const json = table.ajax.json();
                if (!json) return;

                $('#footerSalary').text('₹ ' + json.total_salary);
                $('#footerAdvance').text('₹ ' + json.total_advance);
                $('#footerGrandTotal').text('₹ ' + json.grand_total);

                if (json.paid_leave_days > 0) {
                    const msg = 'Paid Leave applied: ' + json.paid_leave_days +
                        ' day(s) — ₹' + json.paid_leave_amount + ' added to salary.';

                    $('#footerPaidLeaveText').text(msg);
                    $('#paidLeaveText').text('Paid Leave applied for this month: ' + json.paid_leave_days + ' day(s) — ₹' + json.paid_leave_amount + ' added to salary.');
                    $('#paidLeaveBanner').removeClass('d-none');
                } else {
                    $('#footerPaidLeaveText').text('');
                    $('#paidLeaveBanner').addClass('d-none');
                }
            });

            $('#duty_type').on('change', function () {
                table.draw();
            });

            function buildParams() {
                return new URLSearchParams({
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    duty_type: $('#duty_type').val(),
                    year: selectedYear
                }).toString();
            }

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

            $('#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.staff_payout_view_print', [$staff->user_id, $month]) }}" + '?' + buildParams(), '_blank');
            });

            $('#resetBtn').on('click', function () {
                $('#from_date')[0]._flatpickr.setDate(toYmd(firstDay), true);
                $('#to_date')[0]._flatpickr.setDate(toYmd(lastDay), true);
                $('#duty_type').val('');
                table.draw();
            });

        });
    </script>
@endpush