@extends('Admin.layout')

@section('content')

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

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


    <style>
        .card {
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        #usersTable thead th {
            background-color: #fcfcfd;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.5px;
            color: #717171;
            border-bottom: 1px solid #f0f0f0;
            padding: 12px 15px;
        }

        #usersTable tbody td {
            padding: 15px;
            vertical-align: middle;
            color: #4b4b4b;
            font-size: 14px;
        }

        /* Hide only Show Entries and Info */
        .dataTables_length,
        .dataTables_info {
            display: none !important;
        }

        .dataTables_filter {
            float: right;
            margin-bottom: 15px;
        }

        .dataTables_filter input {
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 6px 10px;
            margin-left: 5px;
        }

        .dataTables_paginate {
            margin-top: 15px;
        }
    </style>

    <div class="container-fluid p-4">

        <div class="row align-items-center justify-content-between mb-4">
            <div class="col-auto">
                <h4 class="d-flex align-items-center mb-0">

                    <a href="{{ url()->previous() }}" class="btn btn-white btn-icon me-3"
                        style="box-shadow: 0px 4px 10px rgba(0,0,0,0.08);">

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

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

                        </svg>

                    </a>

                    {{ $staff->name }} - Staff Preview

                </h4>
            </div>
            <div class="col-auto 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>
        <div class="card p-3 mb-3">
            <div class="row g-3 align-items-end">
                {{-- <div class="col-md-3">
                    <label class="form-label">From Date</label>
                    <input type="date" id="fromDate" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label">To Date</label>
                    <input type="date" id="toDate" class="form-control" value="{{ now()->format('Y-m-d') }}">
                </div> --}}

                <div class="col-md-3">
                    <label class="form-label">From Date</label>
                    <input type="text" id="fromDate" class="form-control" placeholder="DD/MM/YYYY"
                        value="{{ \Carbon\Carbon::create($year, $month, 1)->startOfMonth()->format('Y-m-d') }}">
                </div>

                <div class="col-md-3">
                    <label class="form-label">To Date</label>
                    <input type="text" id="toDate" class="form-control" placeholder="DD/MM/YYYY"
                        value="{{ \Carbon\Carbon::create($year, $month, 1)->endOfMonth()->format('Y-m-d') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Attendance Status</label>
                    <select id="attendanceType" class="form-select">
                        <option value="">All</option>
                        <option value="present">Present</option>
                        <option value="absent">Absent</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button id="resetBtn" class="btn btn-outline-secondary w-100">Reset</button>
                </div>
            </div>
        </div>



        <div class="card p-3">

            <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 w-100" id="usersTable">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Date</th>
                            <th>Attendance Status</th>
                            <th>Calculated Salary</th>
                            <th>Advance Received</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>
                        </tr>
                        <tr>
                            <th colspan="5" id="footerPaidLeaveText" class="text-start"></th>
                        </tr>
                        <tr>
                            <th colspan="3" class="text-end">Grand Total (Salary + Paid Leave − Advance)</th>
                            <th colspan="2" id="footerGrandTotal"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>

        </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.jsdelivr.net/npm/flatpickr"></script>


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

            let table;

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

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

            $.fn.dataTable.ext.errMode = 'none';

            $('#usersTable').on('error.dt', function (e, settings, techNote, message) {
                console.log("DataTables Error:", message);
            });

            table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                searching: true,
                lengthChange: false,
                info: false,
                ordering: false,

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

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

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

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

                    className: 'd-none'
                }],


                ajax: {
                    url: "{{ route('staff_payment_history', $staff->user_id) }}",
                    type: "GET",

                    data: function (d) {
                        d.from_date = $('#fromDate').val();
                        d.to_date = $('#toDate').val();
                        d.attendance_type = $('#attendanceType').val();

                        d.month = @json($month);
                        d.year = @json($year);
                    },

                    error: function (xhr, error, thrown) {
                        console.log("Status:", xhr.status);
                        console.log("Error:", error);
                        console.log("Thrown:", thrown);
                        console.log("Response:", xhr.responseText);
                    }
                },

                columns: [
                    {
                        data: 'DT_RowIndex',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'attendance_date'
                    },
                    {
                        data: 'attendance_type'
                    },
                    {
                        data: 'calculated_salary'
                    },
                    {
                        data: 'advance_salary',
                        searchable: false,
                        orderable: false
                    }
                ]
            });

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

            $('#attendanceType').on('change', function () {
                table.ajax.reload();
            });

            $('#resetBtn').on('click', function () {
                $('#fromDate')[0]._flatpickr.clear();
                $('#toDate')[0]._flatpickr.clear();
                $('#attendanceType').val('');
                table.ajax.reload();
            });

            // $('#exportBtn').on('click', function () {

            //     const params = new URLSearchParams({
            //         from_date: $('#fromDate').val(),
            //         to_date: $('#toDate').val(),
            //         attendance_type: $('#attendanceType').val(),
            //         month: @json($month),
            //         year: @json($year)
            //     });

            //     window.location.href =
            //         "{{ route('staff_payment_history_export', $staff->user_id) }}" +
            //         "?" + 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({
                    from_date: $('#fromDate').val(),
                    to_date: $('#toDate').val(),
                    attendance_type: $('#attendanceType').val(),
                    month: @json($month),
                    year: @json($year)
                });

                window.open(
                    "{{ route('staff_payment_history_print', $staff->user_id) }}" +
                    "?" + params.toString(),
                    '_blank'
                );
            });

        });
    </script>

@endsection