@extends('layouts.dashboard.superadminapp')

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

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
<style>
    .attendance-calendar-wrap {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 3px 20px rgba(0,0,0,.06);
        padding: 2.5rem 2rem 2rem 2rem;
        margin-top: 18px;
    }
    .legend {
        margin: 20px 0 25px 5px;
    }
    .legend .badge {
        font-size: 1rem;
        font-weight: 500;
        border-radius: 16px;
        margin-right: 15px;
        padding: 6px 16px 7px 16px;
        border: 0;
        vertical-align: middle;
        letter-spacing: 1px;
        box-shadow: 0 1px 5px rgba(0,0,0,0.03);
    }
    .badge.bg-success { background: #28c76f !important; }
    .badge.bg-warning { background: #ffed85 !important; color: #6c4b0f !important; }
    .badge.bg-orange { background: #fd7e14 !important; color: #fff !important; }
    .badge.bg-danger { background: #ea5455 !important; color: #fff !important; }
 .fc .fc-daygrid-day.present { background: #d4edda !important; }
    .fc .fc-daygrid-day.absent { background: #ffeaea !important; } /* Soft red */
    .fc .fc-daygrid-day.leave  { background: #fffbe7 !important; }
    .fc .fc-daygrid-day.lop    { background: #ffe4c4 !important; }
    .fc .fc-daygrid-day-number { font-weight: 700; font-size: 1.1rem; }
    .calendar-summary-box {
        background: #f7faff;
        border-radius: 18px;
        box-shadow: 0 1px 8px rgba(0,0,0,0.03);
        padding: 24px 22px;
        min-height: 350px;
        margin-left: 16px;
    }
    .calendar-summary-box h5 { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px;}
    .calendar-summary-row {
        display: flex; align-items: center;
        font-size: 1.08rem;
        margin-bottom: 12px;
        padding-bottom: 5px;
        border-bottom: 1px dashed #d8e2ef;
    }
    .calendar-summary-label { flex: 1; color: #333; }
    .calendar-summary-count { font-weight: bold; min-width: 36px; text-align: right;}
    @media (max-width: 900px) {
        .attendance-calendar-wrap { padding: 1rem; }
        .calendar-summary-box { margin-left: 0; margin-top: 24px; }
    }
    #calendar {
        min-height: 420px;
        width: 100%;
    }
    .fc .fc-daygrid-body, .fc .fc-daygrid-body-natural {
        min-height: 300px !important;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="attendance-calendar-wrap row">
        <div class="col-lg-8 col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex align-items-center gap-2">
                    <i class="fas fa-calendar-alt fa-xl me-2 text-primary"></i>
                    <h2 class="h4 fw-bold mb-0">Attendance Calendar</h2>
                </div>
                <a href="{{ route('superadmin.attendance.matrix')}}" class="btn btn-outline-primary btn-sm" style="font-weight:600;">
                    <i class="fas fa-th-large"></i> Matrix View
                </a>
            </div>
            <form method="GET" class="row g-3 mb-3">
                <div class="col-md-7 col-12">
                    <label class="mb-1">Select Employee</label>
                    <select name="employee_id" class="form-select" onchange="this.form.submit()">
                        <option value="">-- Select --</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->employee_id }}" @if(request('employee_id') == $emp->employee_id) selected @endif>
                                {{ $emp->name }} ({{ $emp->employee_id }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-5 col-12">
                    <label class="mb-1">Select Month</label>
                    <input type="month" name="month" class="form-control" value="{{ $month }}" onchange="this.form.submit()">
                </div>
            </form>
            <div class="legend">
                <span class="badge bg-success">Present</span>
                <span class="badge bg-warning">CL/SL/PL</span>
                <span class="badge bg-orange">LOP</span>
                <span class="badge bg-danger">Absent</span>
            </div>
            <div class="card shadow-sm p-2 mt-3">
                <div id="calendar"></div>
            </div>
        </div>
        <div class="col-lg-4 col-md-12">
            <div class="calendar-summary-box">
                <h5 class="text-primary mb-3"><i class="fas fa-chart-bar"></i> Monthly Summary</h5>
                @php
                    $totalDays = 0;
                    $present = 0; $absent = 0; $lop = 0; $cl = 0; $sl = 0; $pl = 0;
                    $totalOt = 0; $totalShortage = 0;

                    foreach($attendanceMap as $day => $status) {
                        $totalDays++;
                        if($status === 'Present') $present++;
                        elseif($status === 'Absent') $absent++;
                        elseif(strtoupper($status) === 'LOP') $lop++;
                        elseif(strtoupper($status) === 'CL') $cl++;
                        elseif(strtoupper($status) === 'SL') $sl++;
                        elseif(strtoupper($status) === 'PL') $pl++;
                    }

                    // Calculate OT and Shortage hours from $attendanceData if available
                    if(isset($attendanceData)) {
                        foreach($attendanceData as $row) {
                            // Parse times
                            $checkIn = $row->check_in ? \Carbon\Carbon::parse($row->check_in) : null;
                            $breakOut = $row->break_out ? \Carbon\Carbon::parse($row->break_out) : null;
                            $breakIn = $row->break_in ? \Carbon\Carbon::parse($row->break_in) : null;
                            $checkOut = $row->check_out ? \Carbon\Carbon::parse($row->check_out) : null;

                            $workMinutes = 0;
                            if ($checkIn && $checkOut) {
                                $total = $checkIn->diffInMinutes($checkOut);
                                $break = ($breakIn && $breakOut) ? $breakOut->diffInMinutes($breakIn) : 0;
                                $workMinutes = max(0, $total - $break);
                            }
                            $workHours = round($workMinutes / 60, 2);
                            $requiredHours = 9;

                            $ot = $workHours > $requiredHours ? $workHours - $requiredHours : 0;
                            $shortage = $workHours < $requiredHours ? $requiredHours - $workHours : 0;

                            $totalOt += $ot;
                            $totalShortage += $shortage;
                        }
                    }
                @endphp
                <div class="calendar-summary-row">
                    <span class="calendar-summary-label text-success">Present</span>
                    <span class="calendar-summary-count">{{ $present }}</span>
                </div>
                <div class="calendar-summary-row">
                    <span class="calendar-summary-label text-warning">CL</span>
                    <span class="calendar-summary-count">{{ $cl }}</span>
                </div>
                <div class="calendar-summary-row">
                    <span class="calendar-summary-label text-warning">SL</span>
                    <span class="calendar-summary-count">{{ $sl }}</span>
                </div>
                <div class="calendar-summary-row">
                    <span class="calendar-summary-label text-warning">PL</span>
                    <span class="calendar-summary-count">{{ $pl }}</span>
                </div>
                <div class="calendar-summary-row">
                    <span class="calendar-summary-label" style="color:#fd7e14">LOP</span>
                    <span class="calendar-summary-count">{{ $lop }}</span>
                </div>
                <div class="calendar-summary-row">
                    <span class="calendar-summary-label text-danger">Absent</span>
                    <span class="calendar-summary-count">{{ $absent }}</span>
                </div>
                <div class="calendar-summary-row">
                    <span class="calendar-summary-label text-info">OT (hrs)</span>
                    <span class="calendar-summary-count">{{ number_format($totalOt,2) }}</span>
                </div>
                <div class="calendar-summary-row">
                    <span class="calendar-summary-label text-secondary">Shortage (hrs)</span>
                    <span class="calendar-summary-count">{{ number_format($totalShortage,2) }}</span>
                </div>
                <div class="calendar-summary-row">
                    <span class="calendar-summary-label">Total Days</span>
                    <span class="calendar-summary-count">{{ $totalDays }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    let attendanceMap = @json($attendanceMap ?? []);
    let month = "{{ $month }}";
    let firstDay = new Date(month + '-01');
    let lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);

    let events = [];
    for (let d = new Date(firstDay); d <= lastDay; d.setDate(d.getDate() + 1)) {
        let ymd = d.toISOString().slice(0,10);
        let status = attendanceMap[ymd] ?? '';
        // Only for leaves and LOP, NOT for Present/Absent
        if (['CL','SL','PL','LOP'].includes(status)) {
            events.push({
                title: status,
                start: ymd,
                display: 'block'
            });
        }
    }

    let calendarEl = document.getElementById('calendar');
    let calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        firstDay: 0,
        height: "auto",
        fixedWeekCount: false,
        contentHeight: "auto",
        expandRows: true,
        events: events,
        dayCellClassNames: function(arg) {
            let ymd = arg.date.toISOString().slice(0,10);
            let status = attendanceMap[ymd] ?? '';
            // Sunday and nothing: keep white (no class)
            if (arg.date.getDay() === 0 && (!status || status === '')) return [];
            if (status === 'Present') return ['present'];
            if (['CL','SL','PL'].includes(status)) return ['leave'];
            if (status === 'LOP') return ['lop'];
            if (status === 'Absent') return ['absent'];
            return [];
        },
        dayCellDidMount: function(info) {
            let ymd = info.date.toISOString().slice(0,10);
            let status = attendanceMap[ymd] ?? '';
            if (status === 'Absent') {
                let label = document.createElement('div');
                label.textContent = "Absent";
                label.style.fontSize = '1rem';
                label.style.color = '#ea5455';
                label.style.marginTop = '12px';
                label.style.fontWeight = '600';
                info.el.appendChild(label);
            }
            if (status === 'Present') {
                let label = document.createElement('div');
                label.textContent = "Present";
                label.style.fontSize = '1rem';
                label.style.color = '#28a745';
                label.style.marginTop = '12px';
                label.style.fontWeight = '600';
                info.el.appendChild(label);
            }
        }
    });
    calendar.render();
});
</script>

@endsection