@extends('layouts.dashboard.superadminapp')

@section('title', 'Attendance Matrix')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
<style>
    .matrix-table td, .matrix-table th {
        font-size: 12px;
        text-align: center;
        min-width: 32px;
        padding: 3px;
    }
    .present { background: #28a745; color: #fff; }
    .absent { background: #dc3545; color: #fff; }
    .lop { background: #fd7e14; color: #fff; }
    .leave { background: #ffc107; color: #222; }
    .unknown { background: #adb5bd; color: #fff; }
    .matrix-legend .badge { font-size: 0.95rem; margin-right: 10px;}
    .sticky-col { position: sticky; left: 0; background: #f8f9fa; z-index: 2; }
</style>
@endsection

@section('content')
<div class="container-fluid bg-white">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h1 class="h5 mb-0 text-gray-800">
            <i class="fas fa-table me-2"></i> Attendance Matrix - {{ \Carbon\Carbon::parse($month.'-01')->format('F Y') }}
        </h1>
        <form method="GET" class="d-flex align-items-center gap-2">
            <input type="month" name="month" class="form-control" value="{{ $month }}" style="width:160px;">
            <button class="btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
        </form>
    </div>
    <div class="matrix-legend mb-2">
        <span class="badge present">Present</span>
        <span class="badge leave">CL/SL/PL</span>
        <span class="badge lop">LOP</span>
        <span class="badge absent">Absent</span>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered table-sm matrix-table">
            <thead>
                <tr>
                    <th class="sticky-col" style="left:0;z-index:3;background:#e9ecef;">Employee</th>
                    @foreach($dates as $date)
                        <th>{{ \Carbon\Carbon::parse($date)->format('d') }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($employees as $emp)
                    <tr>
                        <td class="sticky-col" style="left:0;z-index:2;background:#fff;">
                            <strong>{{ $emp->name }}</strong>
                            <br>
                            <span class="text-muted small">{{ $emp->employee_id }}</span>
                        </td>
                        @foreach($dates as $date)
                            @php
                                $status = $matrix[$emp->employee_id][$date] ?? '';
                                $class =
                                    $status == 'Present' ? 'present' :
                                    (in_array($status, ['CL','SL','PL']) ? 'leave' :
                                    ($status == 'LOP' ? 'lop' :
                                    ($status == 'Absent' ? 'absent' : 'unknown')));
                            @endphp
                            <td class="{{ $class }}">
                                @if($status == 'Present')
                                    <i class="fas fa-check"></i>
                                @elseif(in_array($status, ['CL','SL','PL']))
                                    {{ $status }}
                                @elseif($status == 'LOP')
                                    LOP
                                @elseif($status == 'Absent')
                                    <i class="fas fa-times"></i>
                                @else
                                    &ndash;
                                @endif
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    $('#matrixTable').DataTable({
        paging: false,
        searching: false,
        info: false,
        ordering: false,
        scrollX: true,
    });
});
</script>
@endsection