@extends('Admin.layout')

@section('content')

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

                <a href="{{ route('view_payout_preview', [
        'branch_id' => $staff->branch_id,
        'month' => $month,
        'year' => request('year', now()->year)
    ]) }}" 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"
                        class="icon icon-tabler">

                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />

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

                    </svg>

                </a>

                <h5 class="mb-0">
                    {{ $staff->name }} - Monthly Attendance
                </h5>

            </div>
        </div>

        <div class="card-body">
            <div class="row mb-3">

                <div class="col-md-3">
                    <input type="text" id="from_date" class="form-control" placeholder="DD/MM/YYYY">
                </div>
                <div class="col-md-3">
                    <input type="text" id="to_date" class="form-control" placeholder="DD/MM/YYYY">
                </div>
                <div class="col-md-2">
                    <select id="duty_type" class="form-select">
                        <option value="">All Duty Types</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">
                    <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 id="paidLeaveBanner" class="alert alert-warning d-none mb-3">
                <i class="bi bi-info-circle me-1"></i>
                <span id="paidLeaveText"></span>
            </div>

            <table class="table table-bordered" id="staffTable">
                <thead>
                    <tr>
                        <th>Sno</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>

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

    <script>
        $(window).on('load', function () {

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

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

            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,

                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],
                        footer: true
                    },

                    className: 'd-none'
                }],

                ajax: {
                    url: "{{ route('staff_payout_view_data', [$staff->user_id, $month]) }}",
                    data: function (d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.duty_type = $('#duty_type').val();
                        d.year = currentYear;
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'attendance_date' },
                    { data: 'duty_type' },
                    { data: 'salary' },
                    { data: 'advance' },
                    { data: 'balance' }
                ]
            });

            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();
            });

            $('#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 () {
                let p = new URLSearchParams({
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    duty_type: $('#duty_type').val(),
                    year: currentYear
                });
                window.open("{{ route('staff_payout_view_print', [$staff->user_id, $month]) }}" + '?' + p.toString(), '_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>
@endsection