@php
    $defaultAvatar = asset('storage/uploads/user-icon.png');
    $punchFlag = fn (int $index, int $total) => match (true) {
        $index === 0 => __('In Time'),
        $index === $total - 1 && $total > 1 => __('Out Time'),
        $index % 2 === 0 => __('In Time'),
        default => __('Out Time'),
    };
    $punchClass = fn (int $index, int $total) => match (true) {
        $index === 0, $index % 2 === 0 => 'in',
        default => 'out',
    };
@endphp
@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | Attendance History')
@section('content')
    <style>
        .att-hist-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .att-hist-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .att-hist-wrap label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .att-hist-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .att-hist-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .att-hist-filters .form-group { margin-bottom: 0; } }
        .att-hist-filters .select2-container { width: 100% !important; }
        .att-hist-filters .select2-selection__rendered { line-height: 31px !important; }
        .att-hist-filters .select2-container .select2-selection--single { height: 38px !important; }
        .att-hist-filters .select2-selection__arrow { height: 36px !important; }
        .att-hist-staff-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f8fafc; border: 1px solid #edf0f6; border-radius: 12px; margin-bottom: 16px; }
        .att-hist-staff-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; }
        .att-hist-staff-name { font-weight: 700; font-size: 1.05rem; color: #0f172a; }
        .att-hist-staff-meta { font-size: 13px; color: #64748b; }
        .att-hist-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 14px; text-align: center; }
        .att-hist-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .att-hist-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .att-hist-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .att-hist-table tbody td { vertical-align: middle; }
        .att-hist-day-row td { background: #f1f5f9; font-weight: 800; color: #334155; font-size: 13px; letter-spacing: .02em; }
        .att-hist-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .att-hist-badge.in { background: rgba(34,197,94,.12); color: #166534; }
        .att-hist-badge.out { background: rgba(249,115,22,.12); color: #c2410c; }
        .att-hist-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
        .att-hist-empty { text-align: center; padding: 48px 20px; color: #64748b; }
        .att-hist-empty i { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: 12px; }
        .att-hist-report-head { border-bottom: 1px solid #edf0f6; padding-bottom: 14px; margin-bottom: 16px; }
        .att-hist-report-title { font-weight: 800; font-size: 1.05rem; color: #0f172a; }
        @media print {
            .no-print { display: none !important; }
            .att-hist-wrap .card { box-shadow: none; border: 1px solid #ddd; }
            .att-hist-day-row td { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    </style>

    <div class="container-fluid att-hist-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3 no-print">
                <div>
                    <h4 class="page-title mb-0">Attendance History</h4>
                    <p class="text-muted mb-0">Raw punch logs from devices — grouped by day for each employee.</p>
                </div>
            </div>

            <div class="col-12 no-print">
                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span>Filters</span>
                        <a href="{{ route('attendance.history') }}" class="btn btn-sm btn-outline-secondary">Clear Filters</a>
                    </div>
                    <form action="" method="get">
                        <div class="att-hist-filters">
                            <div class="form-row align-items-end">
                                <div class="form-group col-md-6 col-lg-4">
                                    <label>Staff Information</label>
                                    <select name="staff_id" class="select2 form-control" id="att_hist_staff" data-placeholder="Select Employee" required>
                                        <option value="">Select Employee</option>
                                        @foreach($staffList as $staff)
                                            @if($staff->user?->is_active)
                                                <option value="{{ $staff->user_id }}" @selected(($userId ?? null) == $staff->user_id)>
                                                    {{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})-{{ $staff->designation?->name ?? 'No Designation' }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>Start Date</label>
                                    <input type="date" class="form-control" name="start_date" value="{{ $startDate ?? request()->start_date }}">
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>End Date</label>
                                    <input type="date" class="form-control" name="end_date" value="{{ $endDate ?? request()->end_date }}">
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <button type="submit" class="btn btn-primary btn-block">
                                        <i class="fas fa-filter"></i> Filter
                                    </button>
                                </div>
                            </div>
                            <p class="small text-muted mb-0 mt-2">Employee is required. Empty dates default to the current month.</p>
                        </div>
                    </form>
                </div>
            </div>

            @if($show === null)
                <div class="col-12 mt-3 no-print">
                    <div class="card">
                        <div class="card-body att-hist-empty">
                            <i class="mdi mdi-history"></i>
                            <h5 class="mb-1">Select an employee</h5>
                            <p class="mb-0">Choose staff and date range, then click Filter to load punch history.</p>
                        </div>
                    </div>
                </div>
            @elseif($staff_details)
                <div class="col-12 mt-3">
                    <div class="card">
                        <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                            <span>Punch History Report</span>
                            <button type="button" class="btn btn-sm btn-outline-primary no-print" onclick="window.print()">
                                <i class="fas fa-print"></i> Print
                            </button>
                        </div>
                        <div class="card-body">
                            @php
                                $avatar = $staff_details->user?->image ? asset('storage/'.$staff_details->user->image) : $defaultAvatar;
                            @endphp

                            <div class="att-hist-report-head d-flex flex-wrap align-items-start justify-content-between gap-3">
                                <div class="d-flex align-items-center gap-3">
                                    @if(get_setting('system_logo_white'))
                                        <img class="d-none d-md-block" style="max-height:42px"
                                             src="{{ asset('storage/'.get_setting('system_logo_white')) }}"
                                             alt="{{ get_setting('site_name') }}">
                                    @endif
                                    <div>
                                        <div class="att-hist-report-title">{{ get_setting('site_name') }}</div>
                                        <div class="small text-muted">{{ get_setting('contact_address', null, App::getLocale()) }}</div>
                                    </div>
                                </div>
                                <div class="text-md-right">
                                    <div class="att-hist-report-title mb-1">Attendance History Report</div>
                                    <div class="small text-muted">
                                        {{ \Carbon\Carbon::parse($startDate)->format('M d, Y') }} — {{ \Carbon\Carbon::parse($endDate)->format('M d, Y') }}
                                    </div>
                                </div>
                            </div>

                            <div class="att-hist-staff-card">
                                <img src="{{ $avatar }}" alt="" onerror="this.onerror=null;this.src='{{ $defaultAvatar }}';">
                                <div>
                                    <div class="att-hist-staff-name">{{ $staff_details->user?->name ?? '—' }}</div>
                                    <div class="att-hist-staff-meta">
                                        User ID: {{ $staff_details->user_id ?? '—' }}
                                        · Staff ID: {{ $staff_details->id }}
                                        · {{ $staff_details->designation?->name ?? 'No Designation' }}
                                    </div>
                                    <div class="att-hist-staff-meta">{{ $staff_details->warehouse?->name ?? 'No Branch' }}</div>
                                </div>
                            </div>

                            <div class="form-row mb-3 no-print">
                                <div class="col-4 col-md-3 mb-2">
                                    <div class="att-hist-stat">
                                        <div class="num text-primary">{{ $totalDays }}</div>
                                        <div class="lbl">Days</div>
                                    </div>
                                </div>
                                <div class="col-4 col-md-3 mb-2">
                                    <div class="att-hist-stat">
                                        <div class="num text-success">{{ $totalPunches }}</div>
                                        <div class="lbl">Total Punches</div>
                                    </div>
                                </div>
                                <div class="col-4 col-md-3 mb-2">
                                    <div class="att-hist-stat">
                                        <div class="num text-info">{{ $attendance->count() }}</div>
                                        <div class="lbl">Days This Page</div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover att-hist-table mb-0">
                                    <thead>
                                        <tr>
                                            <th style="width:48px">#</th>
                                            <th>Time</th>
                                            <th>Flag</th>
                                            <th>Device</th>
                                            <th>Location / Remarks</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($attendance as $day => $punches)
                                            <tr class="att-hist-day-row">
                                                <td colspan="5">{{ date('d M Y, l', strtotime($day)) }}</td>
                                            </tr>
                                            @foreach($punches as $index => $punch)
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td class="att-hist-time">{{ date('h:i A', strtotime($punch->timestamp)) }}</td>
                                                    <td>
                                                        <span class="att-hist-badge {{ $punchClass($index, $punches->count()) }}">
                                                            {{ $punchFlag($index, $punches->count()) }}
                                                        </span>
                                                    </td>
                                                    <td>{{ $punch->devices ?: '—' }}</td>
                                                    <td>{{ trim(($punch->location ?: '').' '.($punch->remarks ?: '')) ?: '—' }}</td>
                                                </tr>
                                            @endforeach
                                        @empty
                                            <tr>
                                                <td colspan="5" class="text-center text-muted py-4">No punch records in this range.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            @if($datePages && $datePages->hasPages())
                                <div class="mt-3 no-print">{{ $datePages->links() }}</div>
                            @endif
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('#att_hist_staff').select2({ width: '100%', placeholder: 'Select Employee' });
        });
    </script>
@endsection