@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Staff</h5>
        </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>
            <a href="{{ route('add_designation') }}" class="btn btn-primary">
                Add Designation
            </a>

            <a href="{{ route('add_staff') }}" class="btn btn-primary">
                Add Staff
            </a>
        </div>
    </div>
    <div class="card p-0 m-2">
        <div class="row mb-3 align-items-end p-3 g-2">
            <div class="col-1">
                <label class="form-label fw-semibold mb-1">Show</label>
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="-1">All</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold mb-1">Branch</label>
                <select id="branch_id" class="form-select">
                    <option value="">All Branches</option>
                    @foreach($branches as $b)
                        <option value="{{ $b->id }}">{{ $b->branch_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold mb-1">Department</label>
                <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-md-2">
                <label class="form-label fw-semibold mb-1">Staff ID</label>
                <input type="text" id="customSearch" class="form-control" placeholder="Search Staff ID...">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold mb-1">Staff Name</label>
                <input type="text" id="staffName" class="form-control" placeholder="Search Staff Name...">
            </div>
            <div class="col-md-2">
                <button id="resetBtn" class="btn btn-outline-secondary w-100">Reset</button>
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="table" id="usersTable">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Salary</th>
                                    <th>Update Salary</th>
                                    <th>Department</th>
                                    <th>Branch</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="delete" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                    <form action="{{ route('delete_staff') }}" method="POST">

                        @csrf

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

                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            Are you sure you want to delete this staff?

                            <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">
                                Delete
                            </button>

                        </div>

                    </form>

                </div>
            </div>
        </div>

        <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

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

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

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

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

                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="button" class="btn btn-success p-3 ms-2 fw-semibold" id="confirmStatusChange">
                            Yes, Change
                        </button>

                    </div>

                </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">
                            <input type="hidden" id="plBranchId">

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

        <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>
            $(document).ready(function () {
                const table = $('#usersTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('staff_data') }}",
                        type: "GET",
                        data: function (d) {
                            d.branch_id = $('#branch_id').val();
                            d.designation = $('#designation').val();
                            d.staff_id = $('#customSearch').val();
                            d.staff_name = $('#staffName').val();
                        }
                    },
                    columnDefs: [
                        {
                            targets: '_all',
                            className: 'text-nowrap'
                        }
                    ],
                    columns: [
                        { data: 'DT_RowIndex', orderable: false, searchable: false },
                        { data: 'staff_code' },
                        { data: 'name' },
                        { data: 'phone' },
                        { data: 'salary', orderable: false, searchable: false },
                        { data: 'update_salary', orderable: false, searchable: false },
                        { data: 'department' },
                        { data: 'place' },
                        { data: 'status', orderable: false, searchable: false },
                        { data: 'action', orderable: false, searchable: false }
                    ],
                    dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',
                });

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

                let searchTimer;
                $('#customSearch, #staffName').on('keyup', function () {
                    clearTimeout(searchTimer);
                    searchTimer = setTimeout(() => table.ajax.reload(), 400);
                });

                $('#pageLength').on('change', function () {
                    table.page.len($(this).val() === '-1' ? -1 : parseInt($(this).val())).draw();
                });

                $('#resetBtn').on('click', function () {
                    $('#branch_id').val('');
                    $('#designation').val('');
                    $('#customSearch').val('');
                    $('#staffName').val('');

                    table.ajax.reload();
                });

                $('#exportBtn').on('click', function () {
                    const params = new URLSearchParams({
                        branch_id: $('#branch_id').val(),
                        designation: $('#designation').val(),
                        staff_id: $('#customSearch').val(),
                        staff_name: $('#staffName').val()

                    });
                    window.location.href = "{{ route('staff_export') }}?" + params.toString();
                });

                $('#printBtn').on('click', function () {
                    const params = new URLSearchParams({
                        branch_id: $('#branch_id').val(),
                        designation: $('#designation').val(),
                        staff_id: $('#customSearch').val(),
                        staff_name: $('#staffName').val()

                    });
                    window.open("{{ route('staff_print') }}?" + params.toString(), '_blank');
                });

                $(document).on('click', '.deleteBtn', function () {
                    let id = $(this).data('id');
                    $('#delete_id').val(id);
                });

                let selectedId = null;
                let selectedStatus = null;

                $(document).on('click', '.statusChange', function () {
                    selectedId = $(this).data('id');
                    selectedStatus = $(this).data('status');
                    if (selectedStatus == 1) {
                        $('#statusMessage').text('Do you want to activate this staff?');
                    } else {
                        $('#statusMessage').text('Do you want to deactivate this staff?');
                    }
                    $('#statusModal').modal('show');
                });

                $('#confirmStatusChange').click(function () {
                    $.ajax({
                        url: "{{ route('changeStatus') }}",
                        type: "POST",
                        data: {
                            id: selectedId,
                            status: selectedStatus,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (res) {
                            $('#statusModal').modal('hide');
                            $('#billingStaffTable').DataTable().ajax.reload(null, false);
                            showToast(res.message, "bg-success");
                        },
                        error: function () {
                            $('#statusModal').modal('hide');
                            showToast("Error updating status", "bg-danger");
                        }
                    });
                });

                $(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('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');
                            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');
                            }
                        }
                    });
                });
            });
        </script>
        <script>
            document.querySelector('#delete form').addEventListener('submit', function () {
                let btn = document.getElementById('confirmDelete');
                btn.disabled = true;
                btn.innerHTML = 'Deleting...';
            });
        </script>

        <script>

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


                $('#plStaffId').val(id);
                $('#plStaffName').val(name || '');
                $('#plBranchId').val(branchId);

                $('#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('get_paid_leave') }}",
                    type: "GET",
                    data: {
                        staff_id: staffId,
                        branch_id: $('#plBranchId').val(),

                        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('toggle_paid_leave') }}",
                    type: "POST",
                    data: {
                        staff_id: $('#plStaffId').val(),
                        branch_id: $('#plBranchId').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