@extends('layouts.app')

@section('title', 'My Attendance Dashboard')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <!-- Header Section -->
        <div class="card border-0 shadow-sm mb-4" style="background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-white">
                        <h3 class="mb-1 fw-bold">
                            <i class="fas fa-chart-line me-2"></i>Attendance Dashboard
                        </h3>
                        <p class="mb-0 opacity-75">{{ $employee->name }} - {{ $employee->employee_id }}</p>
                    </div>
                    <div class="text-white text-end">
                        <div class="fs-5 fw-bold" id="currentMonth">{{ now()->format('F Y') }}</div>
                        <small class="opacity-75">Current Period</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <div class="filter-section">
                    @if(count($employees) > 0)
                    <div style="flex: 1 1 250px;">
                        <label class="form-label">Employee</label>
                        <select id="employee_filter" class="form-select">
                            @foreach($employees as $emp)
                                <option value="{{ $emp->id }}" {{ $emp->id == $employee->id ? 'selected' : '' }}>
                                    {{ $emp->name }} ({{ $emp->employee_id }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <div style="flex: 1 1 150px;">
                        <label class="form-label">Month</label>
                        <select id="month_filter" class="form-select">
                            @for($i = 1; $i <= 12; $i++)
                                <option value="{{ $i }}" {{ $i == now()->month ? 'selected' : '' }}>
                                    {{ date('F', mktime(0, 0, 0, $i, 10)) }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    <div style="flex: 1 1 120px;">
                        <label class="form-label">Year</label>
                        <select id="year_filter" class="form-select">
                            @for($y = now()->year - 2; $y <= now()->year + 1; $y++)
                                <option value="{{ $y }}" {{ $y == now()->year ? 'selected' : '' }}>{{ $y }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="filter-actions">
                        <button id="applyFilter" class="btn btn-filter btn-filter-primary">
                            <i class="fas fa-sync me-2"></i>Update
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistics Widgets -->
        <div class="row g-3 mb-4">
            <!-- Total Presents -->
            <div class="col-md-3 col-sm-6">
                <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #10B981 !important;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-muted mb-1 fw-600" style="font-size: 0.8125rem;">Total Presents</p>
                                <h2 class="mb-0 fw-bold" id="totalPresents" style="color: #10B981;">-</h2>
                                <small class="text-muted">out of <span id="workingDays">-</span> days</small>
                            </div>
                            <div class="rounded-circle p-3" style="background: rgba(16, 185, 129, 0.1);">
                                <i class="fas fa-check-circle fa-2x" style="color: #10B981;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Absents -->
            <div class="col-md-3 col-sm-6">
                <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #EF4444 !important;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-muted mb-1 fw-600" style="font-size: 0.8125rem;">Total Absents</p>
                                <h2 class="mb-0 fw-bold" id="totalAbsents" style="color: #EF4444;">-</h2>
                                <small class="text-muted">working days</small>
                            </div>
                            <div class="rounded-circle p-3" style="background: rgba(239, 68, 68, 0.1);">
                                <i class="fas fa-times-circle fa-2x" style="color: #EF4444;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Late Entries -->
            <div class="col-md-3 col-sm-6">
                <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #F59E0B !important;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-muted mb-1 fw-600" style="font-size: 0.8125rem;">Late Entries</p>
                                <h2 class="mb-0 fw-bold" id="lateEntries" style="color: #F59E0B;">-</h2>
                                <small class="text-muted">after standard time</small>
                            </div>
                            <div class="rounded-circle p-3" style="background: rgba(245, 158, 11, 0.1);">
                                <i class="fas fa-clock fa-2x" style="color: #F59E0B;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Low Attendance -->
            <div class="col-md-3 col-sm-6">
                <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #8B5CF6 !important;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-muted mb-1 fw-600" style="font-size: 0.8125rem;">Low Attendance</p>
                                <h2 class="mb-0 fw-bold" id="lowAttendance" style="color: #8B5CF6;">-</h2>
                                <small class="text-muted">below minimum hours</small>
                            </div>
                            <div class="rounded-circle p-3" style="background: rgba(139, 92, 246, 0.1);">
                                <i class="fas fa-hourglass-half fa-2x" style="color: #8B5CF6;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Attendance Details Table -->
        <div class="card table-card border-0 shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0 fw-bold"><i class="fas fa-table me-2 text-primary"></i>Attendance Details</h5>
            </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="attendanceTable">

                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Punch In</th>
                                <th>Punch Out</th>
                                <th>Worked Hours</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    let table;

    function loadStats() {
        const params = {
            @if(Auth::user()->hasRole('Admin'))
            employee_id: $('#employee_filter').val(),
            @endif
            month: $('#month_filter').val(),
            year: $('#year_filter').val()
        };

        $.ajax({
            url: "{{ route('employee.dashboard.stats') }}",
            data: params,
            success: function(data) {
                $('#totalPresents').text(data.total_presents);
                $('#totalAbsents').text(data.total_absents);
                $('#lateEntries').text(data.late_entries);
                $('#lowAttendance').text(data.low_attendance);
                $('#workingDays').text(data.working_days);
                
                // Update current month display
                const monthName = $('#month_filter option:selected').text();
                const year = $('#year_filter').val();
                $('#currentMonth').text(monthName + ' ' + year);
            }
        });
    }

    function initTable() {
        if (table) {
            table.destroy();
        }

        table = $('#attendanceTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('employee.dashboard.data') }}",
                data: function(d) {
                    @if(auth()->user()->canAccess('attendance.view'))
                    d.employee_id = $('#employee_filter').val();
                    @endif
                    d.month = $('#month_filter').val();
                    d.year = $('#year_filter').val();
                }
            },
            columns: [
                {data: 'date', name: 'date'},
                {data: 'punch_in_time', name: 'punch_in_time'},
                {data: 'punch_out_time', name: 'punch_out_time'},
                {data: 'worked_hours', name: 'worked_hours'},
                {data: 'status', name: 'status', orderable: false}
            ],
            order: [[0, 'desc']],
            pageLength: 25,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records...",
                paginate: {
                    previous: '<i class="fas fa-chevron-left"></i>',
                    next: '<i class="fas fa-chevron-right"></i>'
                }
            }
        });
    }

    // Initial load
    loadStats();
    initTable();

    // Apply filter
    $('#applyFilter').click(function() {
        loadStats();
        table.draw();
    });

    @if(auth()->user()->canAccess('attendance.view'))
    $('#employee_filter').change(function() {
        loadStats();
        table.draw();
    });
    @endif
});
</script>
@endpush