@extends('Branch.layout')

@section('content')

    {{-- Bootstrap Icons --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

    {{-- DataTables CSS --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

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

    <style>
        #usersTable {
            width: 100% !important;
        }

        #usersTable thead th {
            white-space: nowrap;
        }

        .dataTables_processing {
            z-index: 10;
        }

        /*
                                            |--------------------------------------------------------------------------
                                            | Custom Toast
                                            |--------------------------------------------------------------------------
                                            */

        .toast-container-custom {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 99999;
        }

        .custom-toast {
            display: none;
            align-items: center;
            gap: 15px;
            min-width: 300px;
            max-width: 380px;
            padding: 16px 18px;
            border-radius: 14px;
            color: #ffffff;
            font-family: 'Segoe UI', sans-serif;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .20);
            position: relative;
            overflow: hidden;
        }

        .toast-success {
            background: linear-gradient(135deg, #00c853, #43a047);
        }

        .toast-error {
            background: linear-gradient(135deg, #ff5252, #d32f2f);
        }

        .toast-icon {
            font-size: 22px;
            font-weight: bold;
            line-height: 1;
        }

        .toast-content {
            flex: 1;
        }

        .toast-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .toast-message {
            font-size: 13px;
            opacity: .95;
            word-break: break-word;
        }

        .toast-close {
            background: transparent;
            border: none;
            color: #ffffff;
            font-size: 22px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }

        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            width: 100%;
            background: rgba(255, 255, 255, .65);
        }

        @keyframes toastSlideIn {
            from {
                transform: translateX(120%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes toastFadeOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(120%);
                opacity: 0;
            }
        }

        @keyframes toastProgressBar {
            from {
                width: 100%;
            }

            to {
                width: 0%;
            }
        }

        @media (max-width: 576px) {
            .toast-container-custom {
                left: 12px;
                right: 12px;
                top: 12px;
            }

            .custom-toast {
                min-width: 100%;
                max-width: 100%;
            }
        }
    </style>

    {{-- Page Header --}}
    <div class="col-auto d-flex flex-wrap gap-2">

        <button id="printBtn" class="btn btn-label-secondary">Print</button>
        <button id="exportBtn" class="btn btn-label-secondary">Export</button>

        <a href="{{ route('branch.add_staff') }}" class="btn btn-primary">
            <i class="bi bi-person-plus me-1"></i>
            Add Staff
        </a>

        <a href="{{ route('branch.add_designation') }}" class="btn btn-primary">
            <i class="bi bi-briefcase me-1"></i>
            Add Designation
        </a>

    </div>

    {{-- Staff Table Card --}}
    <div class="card p-0 m-2">

        {{-- Filters --}}
        <div class="row mb-3 align-items-center p-3 g-2">

            <div class="col-12 col-sm-3 col-md-2 col-lg-1">

                <select id="pageLength" class="form-select">

                    <option value="10" selected>10</option>

                    <option value="25">25</option>

                    <option value="50">50</option>

                    <option value="100">100</option>

                </select>

            </div>
            <div class="col-12 col-sm-3 col-md-2 col-lg-2">
                <select id="designation" class="form-select">
                    <option value="">All Departments</option>
                    @foreach($designations as $d)
                        <option value="{{ $d->designation }}">{{ $d->designation }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-12 col-sm-3 col-md-2 col-lg-1">
                <button id="resetBtn" class="btn btn-outline-secondary w-100">Reset</button>
            </div>

            <div class="col-12 col-md-4 col-lg-3 ms-md-auto">

                <input type="text" id="customSearch" class="form-control" placeholder="Search staff..." autocomplete="off">

            </div>

        </div>

        {{-- Table --}}
        <div class="table-responsive pt-0 pb-2">

            <table class="table table-hover align-middle mb-0" id="usersTable">

                <thead>

                    <tr>

                        <th>S.No</th>

                        <th>ID</th>

                        <th>Name</th>

                        <th>Phone</th>
                        <th>Salary</th>
                        <th>Update Salary</th>

                        <th>Department</th>

                        <th>Status</th>

                        <th>Action</th>

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

    {{-- Delete Staff Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <form action="{{ route('branch.delete_staff') }}" method="POST" id="deleteStaffForm">

                    @csrf

                    <div class="modal-header">

                        <h5 class="modal-title">
                            Delete Staff
                        </h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                    </div>

                    <div class="modal-body">

                        <p class="mb-0">
                            Are you sure you want to delete this staff?
                        </p>

                        <input type="hidden" name="id" id="delete_id">

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-danger" id="confirmDelete">
                            <i class="bi bi-trash me-1"></i>
                            Delete
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

    {{-- Status Confirmation Modal --}}
    <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"
        aria-hidden="true">

        <div class="modal-dialog modal-sm modal-dialog-centered">

            <div class="modal-content rounded-4 text-center p-4 py-5">

                <div class="d-flex align-items-center justify-content-center rounded-circle bg-label-warning mx-auto mb-3"
                    style="width: 60px; height: 60px;">
                    <i class="bi bi-exclamation-triangle fs-3"></i>
                </div>

                <h5 class="fw-bold mb-2">
                    Change Status
                </h5>

                <p class="text-muted mb-0" id="statusMessage">
                    Are you sure you want to change status?
                </p>

                <div class="d-flex justify-content-center gap-2 mt-4">

                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="button" class="btn btn-success" id="confirmStatusChange">
                        Yes, Change
                    </button>

                </div>

            </div>

        </div>

    </div>

    {{-- Custom Toast --}}
    <div class="toast-container-custom">

        <div id="liveToast" class="custom-toast">

            <div class="toast-icon" id="toast_icon"></div>

            <div class="toast-content">

                <div class="toast-title" id="toast_title"></div>

                <div class="toast-message" id="toast_message"></div>

            </div>

            <button type="button" class="toast-close" onclick="closeToast()" aria-label="Close">
                &times;
            </button>

            <div class="toast-progress" id="toast_progress"></div>

        </div>

    </div>


    <div class="modal fade" id="salaryModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="salaryForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Update Salary</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Updating salary for <strong id="salaryStaffName"></strong></p>
                        <input type="hidden" id="salaryStaffId">

                        <label class="form-label fw-semibold mb-1">Month</label>
                        <select id="salaryMonth" class="form-select mb-3">
                            @for ($i = 0; $i < 12; $i++)
                                @php $m = now()->copy()->startOfMonth()->subMonths($i); @endphp
                                <option value="{{ $m->format('Y-m') }}" {{ $i === 0 ? 'selected' : '' }}>
                                    {{ $m->format('F Y') }}
                                </option>
                            @endfor
                        </select>

                        <label class="form-label fw-semibold mb-1">Per Day Salary</label>
                        <input type="number" step="0.01" min="0" class="form-control" name="per_day_salary"
                            id="salaryInput">
                        <div class="text-danger small mt-1" id="salaryError"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="salarySaveBtn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <div class="modal fade" id="paidLeaveModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="paidLeaveForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Paid Leave</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <label class="form-label fw-semibold mb-1">Staff Name</label>
                        <input type="text" class="form-control mb-3" id="plStaffName" readonly>

                        <input type="hidden" id="plStaffId">

                        <div class="row">
                            <div class="col-6">
                                <label class="form-label fw-semibold mb-1">Month</label>
                                <select id="plMonth" class="form-select mb-3">
                                    @foreach (range(1, 12) as $m)
                                        <option value="{{ $m }}" {{ $m === (int) now()->month ? 'selected' : '' }}>
                                            {{ \Carbon\Carbon::create()->month($m)->format('F') }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-semibold mb-1">Year</label>
                                <select id="plYear" class="form-select mb-3">
                                    @foreach (range(now()->year - 1, now()->year + 1) as $y)
                                        <option value="{{ $y }}" {{ $y === (int) now()->year ? 'selected' : '' }}>
                                            {{ $y }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <label class="form-label fw-semibold mb-1">Days</label>
                        <input type="number" min="1" max="31" class="form-control mb-3" id="plDays" value="2">

                        <label class="form-label fw-semibold mb-1">Status</label>
                        <select id="plStatus" class="form-select">
                            <option value="1">Enabled (Yes)</option>
                            <option value="0">Disabled (No)</option>
                        </select>
                        <div class="text-danger small mt-1" id="plError"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="plSaveBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{--
    Branch.layout-ல் jQuery already load செய்திருந்தால்,
    கீழே உள்ள jQuery CDN line-ஐ remove செய்யலாம்.
    --}}
    <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>
        let toastTimer = null;

        /**
         * Custom Toast
         *
         * Example:
         * showToast('success', 'Updated successfully.');
         * showToast('error', 'Something went wrong.');
         */
        function showToast(type, message) {

            const toast = document.getElementById('liveToast');
            const icon = document.getElementById('toast_icon');
            const title = document.getElementById('toast_title');
            const messageElement = document.getElementById('toast_message');
            const progress = document.getElementById('toast_progress');

            if (
                !toast ||
                !icon ||
                !title ||
                !messageElement ||
                !progress
            ) {
                console.error('Toast elements not found.');
                return;
            }

            clearTimeout(toastTimer);

            toast.classList.remove(
                'toast-success',
                'toast-error'
            );

            if (type === 'success') {

                toast.classList.add('toast-success');

                icon.innerHTML =
                    '<i class="bi bi-check-circle-fill"></i>';

                title.textContent = 'Success';

            } else {

                toast.classList.add('toast-error');

                icon.innerHTML =
                    '<i class="bi bi-exclamation-triangle-fill"></i>';

                title.textContent = 'Error';
            }

            messageElement.textContent =
                message || 'Something went wrong.';

            toast.style.display = 'none';
            toast.style.animation = 'none';
            progress.style.animation = 'none';

            void toast.offsetWidth;

            toast.style.display = 'flex';

            toast.style.animation =
                'toastSlideIn .4s ease, toastFadeOut .4s ease 3s forwards';

            progress.style.animation =
                'toastProgressBar 3s linear forwards';

            toastTimer = setTimeout(function () {
                toast.style.display = 'none';
            }, 3500);
        }

        /**
         * Close Toast
         */
        function closeToast() {

            const toast = document.getElementById('liveToast');

            if (!toast) {
                return;
            }

            clearTimeout(toastTimer);

            toast.style.animation =
                'toastFadeOut .4s ease forwards';

            setTimeout(function () {
                toast.style.display = 'none';
            }, 400);
        }

        $(document).ready(function () {

            let selectedStaffId = null;
            let selectedStatus = null;

            /*
            |--------------------------------------------------------------------------
            | Initialize DataTable
            |--------------------------------------------------------------------------
            */

            const table = $('#usersTable').DataTable({

                processing: true,

                serverSide: true,

                ajax: {
                    url: "{{ route('branch.staff_data') }}",
                    type: "GET",
                    data: function (d) {
                        d.designation = $('#designation').val();
                        d.search = $('#customSearch').val();
                    },
                    error: function (xhr) {

                        console.error(
                            'Staff DataTable error:',
                            xhr.responseText
                        );

                        showToast(
                            'error',
                            xhr.responseJSON?.message ||
                            'Unable to load staff details.'
                        );
                    }
                },
                columnDefs: [
                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }
                ],

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'staff_code',
                        name: 'staff_code',
                        defaultContent: '-'
                    },

                    {
                        data: 'name',
                        name: 'name',
                        defaultContent: '-'
                    },

                    {
                        data: 'phone',
                        name: 'phone',
                        defaultContent: '-'
                    },
                    { data: 'salary', orderable: false, searchable: false },
                    { data: 'update_salary', orderable: false, searchable: false },

                    {
                        data: 'department',
                        name: 'department',
                        defaultContent: '-'
                    },

                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false,
                        defaultContent: '-'
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        defaultContent: '-'
                    }

                ],

                pageLength: 10,

                lengthChange: false,

                searching: true,

                autoWidth: false,

                order: [],

                dom:
                    'rt<"d-flex flex-column flex-md-row justify-content-between align-items-center gap-2 p-3"ip>',

                language: {
                    processing: 'Loading...',
                    emptyTable: 'No staff records found.',
                    zeroRecords: 'No matching staff found.'
                }

            });

            /*
            |--------------------------------------------------------------------------
            | Custom Search
            |--------------------------------------------------------------------------
            */

            let searchTimer = null;

            $('#customSearch').on('keyup input', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(function () {
                    table.ajax.reload();
                }, 300);
            });

            /*
            |--------------------------------------------------------------------------
            | Page Length
            |--------------------------------------------------------------------------
            */

            $('#pageLength').on('change', function () {

                const length = parseInt($(this).val(), 10);

                table
                    .page
                    .len(length)
                    .draw();

            });

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

            $('#resetBtn').on('click', function () {
                $('#designation').val('');
                $('#customSearch').val('');
                table.ajax.reload();
            });

            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    designation: $('#designation').val() || '',
                    search: $('#customSearch').val() || ''
                });
                window.location.href = "{{ route('branch.staff_export') }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    designation: $('#designation').val() || '',
                    search: $('#customSearch').val() || ''
                });
                window.open("{{ route('branch.staff_print') }}?" + params.toString(), '_blank');
            });

            /*
            |--------------------------------------------------------------------------
            | Open Delete Modal
            |--------------------------------------------------------------------------
            |
            | Action button example:
            |
            | <button
            |     type="button"
            |     class="btn btn-danger deleteBtn"
            |     data-id="1"
            |     data-bs-toggle="modal"
            |     data-bs-target="#deleteModal">
            |     Delete
            | </button>
            |
            */

            $(document).on('click', '.deleteBtn', function () {

                const staffId = $(this).data('id');

                $('#delete_id').val(staffId);

                /*
                 * In case your action button does not contain
                 * data-bs-toggle and data-bs-target.
                 */
                const deleteModalElement =
                    document.getElementById('deleteModal');

                if (deleteModalElement && window.bootstrap) {

                    const deleteModal =
                        bootstrap.Modal.getOrCreateInstance(
                            deleteModalElement
                        );

                    deleteModal.show();
                }

            });

            /*
            |--------------------------------------------------------------------------
            | Prevent Multiple Delete Submissions
            |--------------------------------------------------------------------------
            */

            $('#deleteStaffForm').on('submit', function (event) {

                const staffId = $('#delete_id').val();

                if (!staffId) {

                    event.preventDefault();

                    showToast(
                        'error',
                        'Invalid staff selected.'
                    );

                    return;
                }

                const button = $('#confirmDelete');

                button.prop('disabled', true);

                button.html(
                    '<span class="spinner-border spinner-border-sm me-1"></span>' +
                    'Deleting...'
                );

            });

            $(document).on('click', '.updateSalaryBtn', function () {
                $('#salaryStaffId').val($(this).data('id'));
                $('#salaryStaffName').text($(this).data('name'));
                $('#salaryInput').val($(this).data('salary'));
                $('#salaryError').text('');
            });

            $('#salaryForm').on('submit', function (e) {
                e.preventDefault();
                let btn = $('#salarySaveBtn');
                btn.prop('disabled', true).text('Updating...');

                $.ajax({
                    url: "{{ route('branch.update_salary_ajax') }}",
                    type: "POST",
                    data: {
                        id: $('#salaryStaffId').val(),
                        per_day_salary: $('#salaryInput').val(),
                        month: $('#salaryMonth').val(),
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (res) {
                        btn.prop('disabled', false).text('Update');
                        $('#salaryModal').modal('hide');
                        // showToast(res.message, 'bg-success');
                        showToast('success', res.message || 'Salary updated successfully.');

                        table.ajax.reload(null, false);
                    },
                    error: function (xhr) {
                        btn.prop('disabled', false).text('Update');
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $('#salaryError').text(errors.per_day_salary ? errors.per_day_salary[0] : '');
                        } else {
                            $('#salaryError').text('Server error');
                        }
                    }
                });
            });

            /*
            |--------------------------------------------------------------------------
            | Open Status Modal
            |--------------------------------------------------------------------------
            |
            | Status button example:
            |
            | <button
            |     type="button"
            |     class="statusChange"
            |     data-id="1"
            |     data-status="0">
            |     Deactivate
            | </button>
            |
            | data-status="1" means Activate
            | data-status="0" means Deactivate
            |
            */

            $(document).on('click', '.statusChange', function () {

                selectedStaffId = $(this).data('id');

                selectedStatus = $(this).data('status');

                if (
                    selectedStaffId === undefined ||
                    selectedStatus === undefined
                ) {

                    showToast(
                        'error',
                        'Invalid staff status details.'
                    );

                    return;
                }

                if (parseInt(selectedStatus, 10) === 1) {

                    $('#statusMessage').text(
                        'Do you want to activate this staff?'
                    );

                    $('#confirmStatusChange')
                        .removeClass('btn-danger')
                        .addClass('btn-success');

                } else {

                    $('#statusMessage').text(
                        'Do you want to deactivate this staff?'
                    );

                    $('#confirmStatusChange')
                        .removeClass('btn-success')
                        .addClass('btn-danger');
                }

                const statusModalElement =
                    document.getElementById('statusModal');

                if (statusModalElement && window.bootstrap) {

                    const statusModal =
                        bootstrap.Modal.getOrCreateInstance(
                            statusModalElement
                        );

                    statusModal.show();

                } else {

                    $('#statusModal').modal('show');
                }

            });

            /*
            |--------------------------------------------------------------------------
            | Confirm Status Change
            |--------------------------------------------------------------------------
            */

            $('#confirmStatusChange').on('click', function () {

                if (
                    selectedStaffId === null ||
                    selectedStaffId === undefined ||
                    selectedStatus === null ||
                    selectedStatus === undefined
                ) {

                    showToast(
                        'error',
                        'Invalid staff details.'
                    );

                    return;
                }

                const button = $(this);

                button.prop('disabled', true);

                button.html(
                    '<span class="spinner-border spinner-border-sm me-1"></span>' +
                    'Updating...'
                );

                $.ajax({

                    url: "{{ route('branch.billing_changeStatus') }}",

                    type: "POST",

                    dataType: "json",

                    headers: {
                        'X-CSRF-TOKEN':
                            $('meta[name="csrf-token"]').attr('content')
                    },

                    data: {
                        id: selectedStaffId,
                        status: selectedStatus
                    },

                    success: function (response) {

                        const statusModalElement =
                            document.getElementById('statusModal');

                        if (statusModalElement && window.bootstrap) {

                            const statusModal =
                                bootstrap.Modal.getInstance(
                                    statusModalElement
                                );

                            if (statusModal) {
                                statusModal.hide();
                            }

                        } else {

                            $('#statusModal').modal('hide');
                        }

                        /*
                         * Correct table reload.
                         */
                        table.ajax.reload(null, false);

                        /*
                         * Correct showToast argument order:
                         * showToast(type, message)
                         */
                        showToast(
                            'success',
                            response.message ||
                            'Staff status updated successfully.'
                        );

                    },

                    error: function (xhr) {

                        console.error(
                            'Status update error:',
                            xhr.responseText
                        );

                        let message =
                            'Error updating staff status.';

                        if (xhr.responseJSON?.message) {

                            message =
                                xhr.responseJSON.message;

                        } else if (xhr.responseJSON?.errors) {

                            const errors =
                                Object.values(
                                    xhr.responseJSON.errors
                                );

                            if (
                                errors.length > 0 &&
                                Array.isArray(errors[0])
                            ) {
                                message = errors[0][0];
                            }
                        }

                        showToast(
                            'error',
                            message
                        );

                    },

                    complete: function () {

                        button.prop('disabled', false);

                        button.text('Yes, Change');

                        selectedStaffId = null;

                        selectedStatus = null;

                    }

                });

            });

            /*
            |--------------------------------------------------------------------------
            | Clear Selected Status When Modal Closes
            |--------------------------------------------------------------------------
            */

            $('#statusModal').on('hidden.bs.modal', function () {

                selectedStaffId = null;

                selectedStatus = null;

                $('#confirmStatusChange')
                    .prop('disabled', false)
                    .text('Yes, Change');

            });

        });

        /*
        |--------------------------------------------------------------------------
        | Laravel Session Toast
        |--------------------------------------------------------------------------
        */

        document.addEventListener('DOMContentLoaded', function () {

            @if (session('success'))

                showToast(
                    'success',
                    @json(session('success'))
                );

            @elseif (session('error'))

                showToast(
                    'error',
                    @json(session('error'))
                );

            @elseif ($errors->any())

                showToast(
                    'error',
                    @json($errors->first())
                );

            @endif

                                            });
    </script>

    <script>

        $(document).on('click', '.paidLeaveBtn', function () {
            const name = $(this).data('name');
            const id = $(this).data('id');

            $('#plStaffId').val(id);
            $('#plStaffName').val(name || '');
            $('#plMonth').val(new Date().getMonth() + 1);
            $('#plYear').val(new Date().getFullYear());
            $('#plDays').val(2);
            $('#plStatus').val('1');
            $('#plError').text('');

            fetchPaidLeaveStatus();
        });

        $('#plMonth, #plYear').on('change', fetchPaidLeaveStatus);

        function fetchPaidLeaveStatus() {
            const staffId = $('#plStaffId').val();
            if (!staffId) return;

            $.ajax({
                url: "{{ route('branch.get_paid_leave') }}",
                type: "GET",
                data: {
                    staff_id: staffId,
                    month: $('#plMonth').val(),
                    year: $('#plYear').val()
                },
                success: function (res) {
                    if (res.data) {
                        $('#plDays').val(res.data.extra_days);
                        $('#plStatus').val(res.data.is_enabled ? '1' : '0');
                    } else {
                        $('#plDays').val(2);
                        $('#plStatus').val('1');
                    }
                }
            });
        }

        $('#paidLeaveForm').on('submit', function (e) {
            e.preventDefault();
            let btn = $('#plSaveBtn');
            btn.prop('disabled', true).text('Saving...');

            $.ajax({
                url: "{{ route('branch.toggle_paid_leave') }}",
                type: "POST",
                data: {
                    staff_id: $('#plStaffId').val(),
                    month: $('#plMonth').val(),
                    year: $('#plYear').val(),
                    extra_days: $('#plDays').val(),
                    is_enabled: $('#plStatus').val(),
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    btn.prop('disabled', false).text('Save');
                    $('#paidLeaveModal').modal('hide');
                    showToast('success', res.message || 'Paid leave updated successfully.');
                    table.ajax.reload(null, false);
                },
                error: function (xhr) {
                    btn.prop('disabled', false).text('Save');
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        $('#plError').text(errors.extra_days ? errors.extra_days[0] : 'Validation error');
                    } else {
                        $('#plError').text('Server error');
                    }
                }
            });
        });
    </script>

@endsection