@extends('layouts.app')

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

@section('panel-actions')
    <div class="d-flex align-items-center">
        <select id="report_year" class="form-control form-control-sm mr-2" style="width: 100px;">
            @foreach(range(date('Y')-5, date('Y')) as $y)
                <option value="{{ $y }}" {{ $y == $year ? 'selected' : '' }}>{{ $y }}</option>
            @endforeach
        </select>
        <button onclick="refreshTable()" class="btn btn-primary btn-sm"><i class="fas fa-filter mr-1"></i> Apply</button>
    </div>
@endsection

@section('content')
<div class="card card-outline card-primary shadow-sm">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-calendar-alt mr-2 text-primary"></i>Yearly Employee Presence</h3>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-bordered table-striped w-100 mb-0" id="employeeListTable">
                <thead>
                    <tr>
                        <th>Employee Name</th>
                        <th>Designation</th>
                        <th class="text-center" style="width: 150px;">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@section('modals')
<div class="modal fade" id="attendanceDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary py-2 text-white">
                <h5 class="modal-title font-weight-bold">Yearly Breakdown: <span id="modalEmployeeName"></span></h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="p-3 bg-light border-bottom d-flex justify-content-between align-items-center">
                    <div id="exportButtonsContainer"></div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-center mb-0" id="yearlyReportTable" width="100%">
                        <thead class="bg-gray-light">
                            <tr>
                                <th>Employee</th>
                                <th>Jan</th>
                                <th>Feb</th>
                                <th>Mar</th>
                                <th>Apr</th>
                                <th>May</th>
                                <th>Jun</th>
                                <th>Jul</th>
                                <th>Aug</th>
                                <th>Sep</th>
                                <th>Oct</th>
                                <th>Nov</th>
                                <th>Dec</th>
                                <th class="bg-primary text-white">Total</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="modal-footer bg-light p-2">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let table;
    let listTable;
    $(document).ready(function() {
        listTable = $('#employeeListTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('reports.attendance.yearly') }}",
                data: function (d) {
                    d.year = $('#report_year').val();
                }
            },
            columns: [
                { data: 'name', name: 'name', render: function(data){ return '<strong>'+data+'</strong>'; } },
                { data: 'designation', name: 'designation' },
                { 
                    data: null, 
                    orderable: false, 
                    searchable: false,
                    className: 'text-center',
                    render: function(data) {
                        return `<button class="btn btn-primary btn-xs view-detail" data-id="${data.id}" data-name="${data.name}"><i class="fas fa-eye mr-1"></i> View Annual</button>`;
                    }
                }
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search employee",
                paginate: {
                    previous: '<i class="fas fa-chevron-left"></i>',
                    next: '<i class="fas fa-chevron-right"></i>'
                }
            },
            drawCallback: function() {
                $('.dataTables_paginate > .pagination').addClass('pagination-sm');
            }
        });

        $('body').on('click', '.view-detail', function() {
            const id = $(this).data('id');
            const name = $(this).data('name');
            $('#modalEmployeeName').text(name);
            $('#attendanceDetailModal').modal('show');
            initDetailTable(id);
        });
    });

    function initDetailTable(employeeId) {
        if (table) table.destroy();
        $('#exportButtonsContainer').empty();

        table = $('#yearlyReportTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('reports.attendance.yearly') }}",
                data: function (d) {
                    d.year = $('#report_year').val();
                    d.employee_id = employeeId;
                }
            },
            columns: [
                { data: 'name', name: 'name', className: 'font-weight-bold' },
                { data: 'Jan', name: 'Jan' },
                { data: 'Feb', name: 'Feb' },
                { data: 'Mar', name: 'Mar' },
                { data: 'Apr', name: 'Apr' },
                { data: 'May', name: 'May' },
                { data: 'Jun', name: 'Jun' },
                { data: 'Jul', name: 'Jul' },
                { data: 'Aug', name: 'Aug' },
                { data: 'Sep', name: 'Sep' },
                { data: 'Oct', name: 'Oct' },
                { data: 'Nov', name: 'Nov' },
                { data: 'Dec', name: 'Dec' },
                { data: 'total', name: 'total', className: 'font-weight-bold bg-light' }
            ],
            paging: false,
            info: false,
            searching: false,
            scrollX: true,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'excel',
                    text: '<i class="fas fa-file-excel mr-1"></i> Export Excel',
                    className: 'btn btn-xs btn-outline-success',
                    title: 'Yearly Attendance - ' + $('#modalEmployeeName').text()
                }
            ]
        });
        
        table.buttons().container().appendTo('#exportButtonsContainer');

        setTimeout(function() {
            table.columns.adjust().draw();
        }, 500);
    }

    function refreshTable() {
        listTable.ajax.reload();
    }
</script>
@endpush