@extends('admin.layouts.layouts')

@section('title', 'Employee Attendance Report')

@section('content')

    <style>
        .select2-container {
            margin: 0 5px 7px 0 !important;
        }

        .select2-container--default .select2-selection--single {
            height: 35px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 15px !important;
        }

        .bg-newColor {
            background-color: blue !important;
        }

        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            width: 100%;
        }

        .employee-attendance-table {
            min-width: 100%;
        }

        .employee-attendance-table th.col-emp-name,
        .employee-attendance-table td.col-emp-name {
            min-width: 250px;
        }

        .employee-attendance-table th.col-emp-code,
        .employee-attendance-table td.col-emp-code {
            min-width: 150px;
        }

        .employee-attendance-table th.col-department,
        .employee-attendance-table td.col-department {
            min-width: 250px;
        }

        .employee-attendance-table th:nth-child(n+5),
        .employee-attendance-table td:nth-child(n+5) {
            width: 50px;
            min-width: 50px;
            text-align: center;
        }
    </style>

    <div class="page-header">
        <h3 class="page-title">
            Employee Attendance Report
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Employee Attendance Report</li>
            </ol>
        </nav>
    </div>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
            </div>
            <div class="d-flex align-items-center">
                <select class="form-control form-control-sm d-inline-block mr-2 departmentSelect" style="width: 20%;">
                    <option value="">Select Department</option>
                    @foreach ($employeeDepartments as $key => $employeeDepartment)
                        <option value="{{ $key }}">{{ $employeeDepartment }}</option>
                    @endforeach
                </select>
                <input type="text" class="form-control" name="employee_name" placeholder="Employee Name" style="padding: 0.520rem 1.375rem !important; margin: 0 5px 6px 0; width: 20%;">
                <input type="text" class="form-control" name="employee_code" placeholder="Employee Code" style="padding: 0.520rem 1.375rem !important; margin: 0 5px 6px 0; width: 20%;">
                <select class="form-control form-control-sm d-inline-block mr-2 monthAttendance" style="width: 20%;">
                    <option value="">Select Month</option>
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                    <option value="4">April</option>
                    <option value="5">May</option>
                    <option value="6">June</option>
                    <option value="7">July</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
                <select class="form-control form-control-sm d-inline-block mr-2 yearAttendance" style="width: 20%;" id="">
                    <option value="">Select Year</option>
                                        <option value="{{ $previousYear }}">{{ $previousYear }}</option>
                    <option value="{{ $currentYear }}">{{ $currentYear }}</option>
                </select>
                <button class="btn btn-primary btn-sm mb-2" title="Search" id="refreshAttendance">
                    <i class="fa-solid fa-search"></i>
                </button>
                <button class="btn btn-danger btn-sm ml-2 mb-2" title="Search" id="resetAttendance">
                    <i class="fa-solid fa-remove"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table employee-attendance-table" id="employeeAttendanceReportTable">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th class="col-emp-name">Employee Name</th>
                            <th class="col-emp-code">Employee Code</th>
                            <th class="col-department">Department</th>
                            @foreach ($daysInMonth as $day)
                                <th>{{ \Carbon\Carbon::parse($day['date'])->format('j') }}</th>
                            @endforeach
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            @foreach ($daysInMonth as $day)
                                <td>{{ \Carbon\Carbon::parse($day['date'])->format('D') }}</td>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('page-js')
    <script>
        $(document).ready(function(){

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

            const currentMonthNumber = (new Date().getMonth() + 1).toString();
            const currentYear = new Date().getFullYear().toString();

            // Set values if they exist in the dropdown options
            if ($('.monthAttendance option[value="' + currentMonthNumber + '"]').length) {
                $('.monthAttendance').val(currentMonthNumber).trigger('change');
            } else {
                $('.monthAttendance').val('').trigger('change'); // fallback clear
            }

            if ($('.yearAttendance option[value="' + currentYear + '"]').length) {
                $('.yearAttendance').val(currentYear).trigger('change');
            } else {
                $('.yearAttendance').val('').trigger('change');
            }

            $('.departmentSelect').select2({
                placeholder: 'Select Department',
                witdh: '100%',
                allowClear: true,
            });

            $('.monthAttendance').select2({
                placeholder: 'Select Month',
                witdh: '100%',
                allowClear: true,
            });

            $('.yearAttendance').select2({
                placeholder: 'Select Year',
                witdh: '100%',
                allowClear: true,
            });

            let table;  // global DataTable instance
            let currentDaysInMonth = []; // global daysInMonth

            // Load DataTable with given daysInMonth
            function loadAttendanceTable(daysInMonth) {
                currentDaysInMonth = daysInMonth;

                // Build columns dynamically
                let columns = [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'name', name: 'name' },
                    { data: 'code', name: 'code' },
                    { data: 'department', name: 'department' }
                ];

                daysInMonth.forEach(day => {
                    columns.push({
                        data: 'days.' + day.date,
                        name: 'days.' + day.date,
                        orderable: false,
                        searchable: false
                    });
                });

                // Destroy existing table if it exists
                if ($.fn.DataTable.isDataTable('#employeeAttendanceReportTable')) {
                    $('#employeeAttendanceReportTable').DataTable().clear().destroy();
                }

                // Clear the table's DOM completely to avoid conflicts
                $('#employeeAttendanceReportTable').html(`
                    <thead>
                        <tr>
                            <th>No</th>
                            <th class="col-emp-name">Employee Name</th>
                            <th class="col-emp-code">Employee Code</th>
                            <th class="col-department">Department</th>
                            ${daysInMonth.map(day => `<th>${day.date.substr(8,2)}</th>`).join('')}
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            ${daysInMonth.map(day => `<td>${day.day_name.substr(0,3)}</td>`).join('')}
                        </tr>
                    </thead>
                    <tbody></tbody>
                `);

                // Initialize DataTable
                table = $('#employeeAttendanceReportTable').DataTable({
                    processing: true,
                    serverSide: true,
                    searching: false,
                    ordering: false,
                    ajax: {
                        url: '{{ route("employee-attendance-report-ajax") }}',
                        method: 'POST',
                        data: function(d) {
                            d.month = $('.monthAttendance').val() || currentMonthNumber;
                            d.year = $('.yearAttendance').val() || currentYear;
                            d.department = $('.departmentSelect').val() || '';
                            d.employee_name = $('input[name=employee_name]').val();
                            d.employee_code = $('input[name=employee_code]').val();
                        },
                        dataSrc: function(json) {
                            currentDaysInMonth = json.daysInMonth;
                            return json.data;
                        },
                        error: function(xhr, error, thrown) {
                            console.error('DataTable AJAX error:', error, thrown);
                            alert('Failed to load attendance data. Please try again.');
                        }
                    },
                    columns: columns,
                    rowCallback: function(row, data, index) {
                        let colIndex = 4; // after 4 fixed columns
                        currentDaysInMonth.forEach(day => {
                            var status = data.days[day.date];
                            var cls = '';
                            if (status === 'P') cls = 'bg-success text-white';
                            else if (['SL', 'CL', 'EL', 'RL', 'L'].includes(status)) cls = 'bg-warning text-dark';
                            else if (status === 'H') cls = 'bg-newColor text-white';
                            else if (status === 'WO') cls = 'bg-secondary text-black';

                            $('td', row).eq(colIndex)
                                .addClass(cls)
                                .attr('title', status);
                            colIndex++;
                        });
                    },
                    pageLength: 10
                });
            }

            // ✅ Initial load with daysInMonth from backend
            let initialDaysInMonth = @json($daysInMonth);
            loadAttendanceTable(initialDaysInMonth);

            // ✅ Refresh button: keep filters, reload data
            $('#refreshAttendance').click(function(){
                // Get fresh daysInMonth & data from backend
                $.ajax({
                    url: '{{ route("employee-attendance-report-ajax") }}',
                    method: 'POST',
                    data: {
                        month: $('.monthAttendance').val(),
                        year: $('.yearAttendance').val(),
                        department: $('.departmentSelect').val(),
                        employee_name: $('input[name=employee_name]').val(),
                        employee_code: $('input[name=employee_code]').val(),
                    },
                    success: function(response){
                        loadAttendanceTable(response.daysInMonth);
                    }
                });
            });

            // ✅ Reset button: set current month/year, clear filters, reload table
            $('#resetAttendance').click(function(){
                $('.monthAttendance').val(currentMonthNumber).trigger('change');
                $('.yearAttendance').val(currentYear).trigger('change');
                $('.departmentSelect').val('').trigger('change');
                $('input[name=employee_name]').val('');
                $('input[name=employee_code]').val('');

                // Reload table with default values
                $.ajax({
                    url: '{{ route("employee-attendance-report-ajax") }}',
                    method: 'POST',
                    data: {
                        month: currentMonthNumber,
                        year: currentYear,
                        department: '',
                        employee_name: '',
                        employee_code: ''
                    },
                    success: function(response) {
                        loadAttendanceTable(response.daysInMonth);
                    },
                    error: function(xhr, error, thrown) {
                        console.error('Reset AJAX error:', error, thrown);
                        alert('Failed to reset attendance data. Please try again.');
                    }
                });
            });
        });
    </script>
@endsection