@extends('layouts.app')

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => $title])

<div class="row mt-4 mx-4">
    <div class="col-12">
        <div class="card mb-4">
            <div class="d-flex align-items-center">
                <p class="mb-0 ms-2 mt-2">{{$title}}</p>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div class="row d-flex p-2">
                    <div class="col-md-4">
                        <label for="pay_structure" class="form-label">Pay Structure</label>
                        <select class="form-select select2 mb-2" id="pay_structure" name="pay_structure">
                            <option selected>Select Pay Structure</option>
                            @forelse ($pay_structure as $data)
                                <option value="{{ $data->id }}" {{ old('pay_structure') == $data->id ? 'selected' : '' }}>
                                    {{ $data->name }} / {{ $data->designation->staff_type_name }}
                                </option>
                            @empty
                                <option value="">No Pay Structure Found.</option>
                            @endforelse
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="experience">Experience</label>
                        <select id="experience" name="experience" class="form-select select2">
                            <option value="1" {{ old('experience') == 1 ? 'selected' : '' }}>Level 1</option>
                            <option value="2" {{ old('experience') == 2 ? 'selected' : '' }}>Level 2</option>
                            <option value="3" {{ old('experience') == 3 ? 'selected' : '' }}>Level 3</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label for="month_select" class="form-label">Select Month</label>
                        <select id="month_select" class="form-control select2" name="month_select">
                            <option value="">Select Month</option>
                            <option value="1" {{ old('month_select') == 1 ? 'selected' : '' }}>January</option>
                            <option value="2" {{ old('month_select') == 2 ? 'selected' : '' }}>February</option>
                            <option value="3" {{ old('month_select') == 3 ? 'selected' : '' }}>March</option>
                            <option value="4" {{ old('month_select') == 4 ? 'selected' : '' }}>April</option>
                            <option value="5" {{ old('month_select') == 5 ? 'selected' : '' }}>May</option>
                            <option value="6" {{ old('month_select') == 6 ? 'selected' : '' }}>June</option>
                            <option value="7" {{ old('month_select') == 7 ? 'selected' : '' }}>July</option>
                            <option value="8" {{ old('month_select') == 8 ? 'selected' : '' }}>August</option>
                            <option value="9" {{ old('month_select') == 9 ? 'selected' : '' }}>September</option>
                            <option value="10" {{ old('month_select') == 10 ? 'selected' : '' }}>October</option>
                            <option value="11" {{ old('month_select') == 11 ? 'selected' : '' }}>November</option>
                            <option value="12" {{ old('month_select') == 12 ? 'selected' : '' }}>December</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label for="from_date" class="form-label">From Date</label>
                        <input type="date" class="form-control" id="from_date" name="from_date"
                            value="{{ old('from_date') }}" readonly>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label for="to_date" class="form-label">To Date</label>
                        <input type="date" class="form-control" id="to_date" name="to_date" value="{{ old('to_date') }}"
                            readonly>
                    </div>
                    <div class="col-md-4" style="margin-top: 30px;">
                        <button type="button" class="btn btn-primary" id="checkStaffButton">Check Staff</button>
                    </div>
                </div>


                <!-- Tabs for Paid and Pending Lists -->
                <ul class="nav nav-tabs" id="staffTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="pending-tab" data-bs-toggle="tab" href="#pending" role="tab"
                            aria-controls="pending" aria-selected="true">Pending List</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="paid-tab" data-bs-toggle="tab" href="#paid" role="tab"
                            aria-controls="paid" aria-selected="false">Paid List</a>
                    </li>
                </ul>

                <div class="tab-content" id="staffTabsContent">
                    <!-- Pending List Tab -->
                    <div class="tab-pane fade show active" id="pending" role="tabpanel" aria-labelledby="pending-tab">
                        <div class="table-responsive mt-3">
                            <button class="btn btn-primary" id="paySelectedButton">Pay</button>
                            <table class="table table-striped text-sm text-center" id="pendingStaffTable">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="selectAllPending"></th>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Experience</th>
                                        <th>Total Days</th>
                                        <th>Present Days</th>
                                        <th>Absent Days</th>
                                        <th>Half Day Leaves</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="pendingStaffBody">
                                    <!-- Pending staff data will be populated here -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Paid List Tab -->
                    <div class="tab-pane fade" id="paid" role="tabpanel" aria-labelledby="paid-tab">
                        <div class="table-responsive mt-3">
                            <table class="table table-striped text-sm text-center" id="paidStaffTable">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Staff Name</th>
                                        <th>Experience (Years)</th>
                                        <th>Basic Salary</th>
                                        <th>Total Additions</th>
                                        <th>Total Deductions</th>
                                        <th>Total Taxes</th>
                                        <th>Gross Salary</th>
                                        <th>Net Salary</th>
                                        <th>Leave Deduction</th>
                                        <th>Total Working Days</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="paidStaffBody">
                                    <!-- Paid staff data will be populated here -->
                                </tbody>
                            </table>
                        </div>

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

@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            $('#pendingStaffTable, #paidStaffTable').DataTable({
                layout: {
                    topStart: {
                        buttons: ['excel', 'pdf', 'print', 'colvis', 'pageLength']
                    },
                }
            });

            $('#month_select').on('change', function () {
                const month = parseInt(this.value);
                const currentYear = new Date().getFullYear();
                const currentDate = new Date();
                $.ajax({
                    url: '/get_salary_period',
                    type: 'GET',
                    data: {
                        college_id: 1,
                    },
                    success: function (response) {
                        if (response && response.oprtnl_flg === 'A') {
                            let fromDate, toDate;
                            const salaryPeriodType = response.salary_period_type;
                            const payMonth = response.pay_month;
                            const numberToNumberPattern = /^\d+\s*to\s*\d+$/;
                            const numberToStringPattern = /^\d+\s*to\s*End$/;

                            if (numberToNumberPattern.test(salaryPeriodType)) {
                                const [start, end] = salaryPeriodType.split(" to ").map(Number);

                                if (payMonth === 'C') {
                                    fromDate = new Date(currentYear, month - 1, start);
                                    toDate = new Date(currentYear, month - 1, end);
                                } else if (payMonth === 'O') {
                                    let previousMonth = month - 2;
                                    let previousYear = currentYear;
                                    if (previousMonth < 0) {
                                        previousMonth = 11;
                                        previousYear = currentYear - 1;
                                    }
                                    fromDate = new Date(previousYear, previousMonth, start);
                                    toDate = new Date(currentYear, month - 1, end);
                                }
                            } else if (numberToStringPattern.test(salaryPeriodType)) {
                                const startDay = parseInt(salaryPeriodType.split(" to ")[0]);
                                const lastDayOfMonth = new Date(currentYear, month, 0).getDate();

                                if (payMonth === 'C') {
                                    fromDate = new Date(currentYear, month - 1, startDay);
                                    toDate = new Date(currentYear, month - 1, lastDayOfMonth);
                                } else if (payMonth === 'O') {
                                    let previousMonth = month - 2;
                                    let previousYear = currentYear;
                                    if (previousMonth < 0) {
                                        previousMonth = 11;
                                        previousYear = currentYear - 1;
                                    }

                                    fromDate = new Date(previousYear, previousMonth, startDay);
                                    toDate = new Date(previousYear, previousMonth, lastDayOfMonth);
                                }
                            }

                            $('#from_date').val(formatDate(fromDate));
                            $('#to_date').val(formatDate(toDate));
                        }
                    },
                    error: function (error) {
                        console.error('Error fetching salary period:', error);
                    }
                });
            });

            function formatDate(date) {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            }
        });
        document.getElementById('selectAllPending').addEventListener('change', function () {
            const checkboxes = document.querySelectorAll('.pending-checkbox');
            checkboxes.forEach(checkbox => checkbox.checked = this.checked);
        });

        document.getElementById('paySelectedButton').addEventListener('click', function () {
            var month_name = document.getElementById('month_select').options[document.getElementById('month_select').selectedIndex].text; 

            const selectedStaff = [];
            document.querySelectorAll('.pending-checkbox:checked').forEach(checkbox => {
                const staffId = checkbox.dataset.staffId;
                if (!selectedStaff.includes(staffId)) {
                    selectedStaff.push(staffId);
                }
            });

            if (selectedStaff.length > 0) {
                $.ajax({
                    url: "{{ route('pay-process') }}",
                    type: 'POST',
                    data: {
                        staff_ids: selectedStaff,
                        pay_structure_id: document.getElementById('pay_structure').value,
                        from_date: document.getElementById('from_date').value,
                        to_date: document.getElementById('to_date').value,
                        experience: document.getElementById('experience').value,
                        month_name: month_name,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (data) {
                        if (data.success) {
                            toastr.success("Added to paid list and payslips sent.");
                            updateStaffList();
                        } else {
                            toastr.error("An error occurred while processing the pay.");
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Error:", error);
                        toastr.error("An error occurred.");
                    }
                });
            } else {
                toastr.error("Please select staff to pay.");
            }
        });

        document.getElementById('checkStaffButton').addEventListener('click', function () {
            const payStructureId = document.getElementById('pay_structure').value;
            const fromDate = document.getElementById('from_date').value;
            const toDate = document.getElementById('to_date').value;
            const experience = document.getElementById('experience').value;

            if (payStructureId && fromDate && toDate) {
                // Send AJAX request to fetch staff data with attendance
                $.ajax({
                    url: "{{ route('get-staff') }}", // Route to get staff data
                    type: 'GET',
                    data: {
                        pay_structure_id: payStructureId,
                        from_date: fromDate,
                        to_date: toDate,
                        experience: experience
                    },
                    success: function (data) {
                        // Populate the staff data (Pending and Paid Lists)
                        populateStaffData(data);
                    },
                    error: function (xhr, status, error) {
                        console.error("Error fetching staff data:", error);
                        toastr.error("Error fetching staff data.");
                    }
                });
            } else {
                toastr.error("Please select pay structure and date range.");
            }
        });

        function populateStaffData(staffData) { 
            const pendingStaffBody = document.getElementById('pendingStaffBody');
            const paidStaffBody = document.getElementById('paidStaffBody');

            const pendingStaffTable = $('#pendingStaffTable').DataTable();
            const paidStaffTable = $('#paidStaffTable').DataTable();
            pendingStaffTable.clear().draw();
            paidStaffTable.clear().draw();

            staffData.result.forEach((staffData, index) => {
                const staff_id = staffData.staff_id;
                const staff_name = staffData.staff_name;
                const experience = staffData.experience;
                const totalDays = staffData.total_days;
                const presentDays = staffData.present_days;
                const absentDays = staffData.absent_days;
                const halfDayLeaveDays = staffData.half_day_leave_days;

                const row = [
                    `<input type="checkbox" class="pending-checkbox" data-staff-id="${staff_id}">`,
                    index + 1,
                    staff_name,
                    `${experience} years`,
                    totalDays,
                    presentDays + halfDayLeaveDays * 0.5,
                    absentDays,
                    halfDayLeaveDays,
                    `<div class="d-flex justify-content-center">

                            <form action="{{route('open-payslip')}}" method="GET">
                                @csrf
                                <input type="hidden" name="staff_id" value="${staff_id || 0}">
                                <input type="hidden" name="pay_structure_id" value="${staffData.pay_structure_id || 0}">
                                <input type="hidden" name="total_days" value="${totalDays || 0}">
                                <input type="hidden" name="present_days" value="${presentDays || 0}">
                                <input type="hidden" name="absent_days" value="${absentDays || 0}">
                                <input type="hidden" name="experience" value="${experience || 0}">
                                <input type="hidden" name="half_leaves" value="${halfDayLeaveDays || 0}">
                                <button type="submit" style="border: none; background: none; padding: 0;">
                                    <i class='fa fa-edit text-success'></i>
                                </button>
                            </form>
                             <a onclick="removeStaff(${staff_id})" class="mx-2"><i class='fa fa-trash text-danger'></i></a>
                        </div>`
                ];

                pendingStaffTable.row.add(row).draw();
            });

            staffData.paid_details.forEach((paidStaff, index) => {
              
                const staff_id = paidStaff.staff_id;
                const staff_name = paidStaff.staff.firstname + " " + paidStaff.staff.lastname;
                const experience = paidStaff.staff.experience;
                const basicSalary = paidStaff.basic_salary;
                const totalAdditions = paidStaff.total_additions;
                const totalDeductions = paidStaff.total_deductions;
                const totalTaxes = paidStaff.total_taxes;
                const grossSalary = paidStaff.gross_salary;
                const netSalary = paidStaff.net_salary;
                const leaveDeduction = paidStaff.leave_deduction;
                const totalWorkingDays = paidStaff.total_working_days;
                const status = paidStaff.status;
                const from_date = new Date(paidStaff.from_date); // Ensures it's a valid Date object
                const to_date = new Date(paidStaff.to_date);
              
                const row = [
                    index + 1,
                    staff_name,
                    experience,
                    basicSalary,
                    totalAdditions,
                    totalDeductions,
                    totalTaxes,
                    grossSalary,
                    netSalary,
                    leaveDeduction,
                    totalWorkingDays,
                    status,
                    `<div class="d-flex justify-content-center">

                            <form action="{{ route('open-payslip') }}" method="GET">
                                @csrf
                                <input type="hidden" name="staff_id" value="${staff_id || 0}">
                                <input type="hidden" name="pay_structure_id" value="${paidStaff.pay_structure_id || 0}">
                                <input type="hidden" name="total_days" value="${totalWorkingDays || 0}">
                                <input type="hidden" name="present_days" value="${paidStaff.present_days || 0}">
                                <input type="hidden" name="absent_days" value="${paidStaff.absent_days || 0}">
                                <input type="hidden" name="experience" value="${experience || 0}">
                                <input type="hidden" name="half_leaves" value="${paidStaff.half_leaves || 0}">
                                <button type="submit" style="border: none; background: none; padding: 0;">
                                    <i class='fa fa-edit text-success'></i>
                                </button>
                            </form>
                             <a onclick="removeStaff(${staff_id},${paidStaff.pay_structure_id},'${from_date.toISOString()}','${to_date.toISOString()}')" class="mx-2"><i class='fa fa-trash text-danger'></i></a>
                        </div>`
                ];
                paidStaffTable.row.add(row).draw();
            });
        }

        function updateStaffList() {
            const payStructureId = document.getElementById('pay_structure').value;
            const fromDate = document.getElementById('from_date').value;
            const toDate = document.getElementById('to_date').value;
            const experience = document.getElementById('experience').value;

            if (payStructureId && fromDate && toDate) {
                // Send AJAX request to fetch staff data with attendance
                $.ajax({
                    url: "{{ route('get-staff') }}", // Route to get staff data
                    type: 'GET',
                    data: {
                        pay_structure_id: payStructureId,
                        from_date: fromDate,
                        to_date: toDate,
                        experience: experience
                    },
                    success: function (data) {
                        populateStaffData(data);
                    },
                    error: function (xhr, status, error) {
                        console.error("Error fetching staff data:", error);
                        toastr.error("Error fetching staff data.");
                    }
                });
            } else {
                toastr.error("Please select pay structure and date range.");
            }
        }

        function removeStaff(staffId, structure_id, from_date, to_date) {
            $.ajax({
                url: "{{ route('remove-staff') }}",
                type: 'POST',
                data: {
                    staff_id: staffId,
                    pay_structure_id: structure_id,
                    from_date: from_date,
                    to_date: to_date,
                    _token: '{{ csrf_token() }}'
                },
                success: function (data) {
                    if (data.success) {
                        toastr.success("Staff removed successfully.");
                        updateStaffList();
                    } else {
                        toastr.error("An error occurred while removing staff.");
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error:", error);
                    toastr.error("An error occurred.");
                }
            });
        }
    </script>
@endpush