@extends('adminlte::page')

@section('title', 'Staff Attendance | ' . Config::get('adminlte.title'))

@section('content_header')
<h1>Staff Attendance</h1>
@stop

@section('content')
<div class="staff-shell">
    @include('layouts.flash-message')

    <div class="staff-hero">
        <div>
            <p class="hero-label">Staff Wise Attendance</p>
            <h2>Monthly and yearly attendance review for each staff member.</h2>
        </div>
        <a href="{{ route('attendances') }}" class="btn btn-dark">Back to Attendance Table</a>
    </div>

    <div class="card filter-card">
        <div class="card-body">
            <form method="GET" action="{{ route('staff-attendance') }}">
                <div class="row">
                    <div class="col-lg-4 form-group">
                        <label for="user_id">Staff</label>
                        @if($canChooseUsers)
                        <select name="user_id" id="user_id" class="form-control">
                            @foreach($users as $user)
                            <option value="{{ $user->id }}" @if((int) $selectedUserId === (int) $user->id) selected @endif>{{ $user->name }}</option>
                            @endforeach
                        </select>
                        @else
                        <input type="text" class="form-control" value="{{ $selectedUser->name }}" disabled>
                        @endif
                    </div>
                    <div class="col-lg-4 form-group">
                        <label for="month">Month</label>
                        <input type="month" name="month" id="month" class="form-control" value="{{ $selectedMonth }}">
                    </div>
                    <div class="col-lg-3 form-group">
                        <label for="year">Year</label>
                        <input type="number" name="year" id="year" class="form-control" min="2000" max="2100" value="{{ $selectedYear }}">
                    </div>
                    <div class="col-lg-1 form-group d-flex align-items-end">
                        <button type="submit" class="btn btn-primary btn-block">Go</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row summary-grid">
        <div class="col-md-3 col-6">
            <div class="summary-tile tile-indigo">
                <span>Total Working Days</span>
                <strong>{{ $monthlySummary['working_days'] }}</strong>
                <small>{{ $monthlySummary['total_days_in_month'] }} total - {{ $monthlySummary['sundays'] }} Sundays - {{ $monthlySummary['holidays'] }} holidays</small>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-tile tile-blue">
                <span>Present Days</span>
                <strong>{{ $monthlySummary['present_days'] }}</strong>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-tile tile-green">
                <span>Paid Leave</span>
                <strong>{{ $monthlySummary['paid_leave_days'] }}</strong>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-tile tile-amber">
                <span>Unpaid Leave</span>
                <strong>{{ $monthlySummary['unpaid_leave_days'] }}</strong>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-tile tile-slate">
                <span>Late Days</span>
                <strong>{{ $monthlySummary['late_days'] }}</strong>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-tile tile-rose">
                <span>Total Leave This Year</span>
                <strong>{{ $yearlyLeaveSummary['total_leave_days'] }}</strong>
                <small>{{ $yearlyLeaveSummary['paid_leave_days'] }} paid + {{ $yearlyLeaveSummary['unpaid_leave_days'] }} unpaid in {{ $selectedYear }}</small>
            </div>
        </div>
    </div>

    <div class="card data-card">
        <div class="card-header">
            <h3 class="card-title">Holiday List</h3>
            <span class="range-chip">{{ $selectedMonth }}</span>
        </div>
        <div class="card-body">
            @forelse($holidays as $holiday)
            <div class="holiday-row">
                <div>
                    <strong>{{ $holiday->title }}</strong>
                    <p>{{ $holiday->desc ?: 'Holiday / event entry' }}</p>
                </div>
                <span>{{ optional($holiday->start_date)->format('Y-m-d') }} to {{ optional($holiday->end_date)->format('Y-m-d') }}</span>
            </div>
            @empty
            <p class="text-muted mb-0">No holidays listed for this month.</p>
            @endforelse
        </div>
    </div>

    <div class="card data-card">
        <div class="card-header">
            <h3 class="card-title">{{ $selectedUser->name }} Monthly Attendance</h3>
            <span class="range-chip">{{ $selectedMonth }}</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover staff-table mb-0">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Check In</th>
                            <th>Check Out</th>
                            <th>Work Hour</th>
                            <th>Late</th>
                            <th>Overtime</th>
                            <th>In Location</th>
                            <th>Out Location</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($monthlyRecords as $attendance)
                        <tr>
                            <td>{{ optional($attendance->date)->format('Y-m-d') }}</td>
                            <td>{{ optional($attendance->in_time)->format('H:i:s') }}</td>
                            <td>{{ optional($attendance->out_time)->format('H:i:s') ?? 'Open' }}</td>
                            <td>{{ $attendance->work_hour ?? '--' }}</td>
                            <td>{{ $attendance->late_time ?? '--' }}</td>
                            <td>{{ $attendance->over_time ?? '--' }}</td>
                            <td>{{ optional($attendance->areaIn)->name ?? '--' }}</td>
                            <td>{{ optional($attendance->areaOut)->name ?? '--' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">No attendance records found for this month.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card data-card">
        <div class="card-header">
            <h3 class="card-title">{{ $selectedUser->name }} Yearly Attendance</h3>
            <span class="range-chip">{{ $selectedYear }}</span>
        </div>
        <div class="card-body">
            <div class="year-grid">
                @foreach($yearCards as $card)
                <div class="year-tile">
                    <span>{{ $card['label'] }}</span>
                    <strong>{{ $card['present_days'] }}</strong>
                    <small>Present Days</small>
                    <p>Late: {{ $card['late_days'] }}</p>
                    <p>Completed: {{ $card['completed_days'] }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    .staff-shell {
        display: grid;
        gap: 1.5rem;
    }

    .staff-hero {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 1rem;
        padding: 1.8rem;
        border-radius: 20px;
        background: linear-gradient(135deg, #f0eadc 0%, #dfe9ec 100%);
        border: 1px solid #d7d6ca;
    }

    .hero-label,
    .range-chip {
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: .72rem;
        font-weight: 700;
        color: #566170;
    }

    .filter-card,
    .data-card {
        border-radius: 18px;
        border: 1px solid #ddd8ce;
        box-shadow: 0 16px 36px rgba(24, 38, 63, .07);
    }

    .summary-tile {
        border-radius: 16px;
        padding: 1rem;
        background: #fff;
        border-top: 4px solid transparent;
        box-shadow: 0 12px 28px rgba(24, 38, 63, .06);
    }

    .summary-tile span,
    .year-tile small {
        display: block;
        color: #687486;
    }

    .summary-tile strong,
    .year-tile strong {
        font-size: 2rem;
        color: #1f2937;
        line-height: 1.1;
    }

    .tile-indigo { border-top-color: #4338ca; }
    .tile-blue { border-top-color: #2563eb; }
    .tile-green { border-top-color: #059669; }
    .tile-amber { border-top-color: #d97706; }
    .tile-slate { border-top-color: #64748b; }
    .tile-rose { border-top-color: #e11d48; }

    .staff-table thead th {
        text-transform: uppercase;
        font-size: .76rem;
        letter-spacing: .06em;
        color: #6b7280;
        border-top: 0;
    }

    .year-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: .9rem;
    }

    .holiday-row {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: start;
        padding: .9rem 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .holiday-row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .holiday-row strong {
        color: #1f2937;
    }

    .holiday-row p,
    .holiday-row span {
        margin: .2rem 0 0;
        color: #6b7280;
    }

    .year-tile {
        border: 1px solid #ddd8ce;
        border-radius: 16px;
        background: #fff;
        padding: 1rem;
    }

    .year-tile span {
        display: block;
        color: #6b7280;
        font-weight: 700;
    }

    .year-tile p {
        margin: .35rem 0 0;
        color: #4b5563;
    }

    @media (max-width: 991.98px) {
        .staff-hero {
            flex-direction: column;
            align-items: start;
        }

        .year-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .year-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
</style>
@stop