@extends('garage.layouts.app')
@section('title', 'Attendance')

@section('content')
@include('garage.hr.styles')
@include('garage.attendance._styles')

@php
    $statLink = function (string $s = '') use ($filterQuery) {
        $q = $filterQuery;
        if ($s === '') {
            unset($q['status']);
        } else {
            $q['status'] = $s;
        }
        return route('garage.attendance.index', $q);
    };
@endphp

<div class="att-page hrx-page w-100">
    <div class="hrx-head mb-3">
        <div>
            <div class="hrx-title h4 mb-1"><i class="bi bi-calendar2-check me-2 text-primary"></i>Attendance</div>
            <div class="hrx-sub small">{{ $filterLabel }} · {{ $stats['all'] }} record(s)</div>
        </div>
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <form method="post" action="{{ route('garage.attendance.sync') }}">@csrf
                <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-arrow-repeat me-1"></i>Sync devices</button>
            </form>
            <a href="{{ route('garage.attendance.logs.index', ['date' => $dateFrom]) }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-clock-history me-1"></i>Raw logs</a>
        </div>
    </div>

    @include('garage.attendance._nav', ['month' => $month ?? now()->format('Y-m')])

    @if(session('success'))
        <div class="alert alert-success py-2 small mb-3">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger py-2 small mb-3">{{ session('error') }}</div>
    @endif
    @if($unmappedLogs > 0)
        <div class="alert alert-warning py-2 small mb-3">
            <strong>{{ $unmappedLogs }}</strong> unmapped punch(es).
            <a href="{{ route('garage.attendance.logs.index', ['unmapped' => 1]) }}">Review logs</a>
        </div>
    @endif
    @if($devices->where('is_active', true)->isEmpty())
        <div class="alert alert-info py-2 small mb-3">
            <a href="{{ route('garage.attendance.devices.create') }}">Add a device</a> and sync to import punches.
        </div>
    @endif

    <form method="get" class="att-filter-bar p-3 mb-3 hrx-filter w-100" id="attFilterForm">
        <div class="d-flex flex-wrap gap-2 att-view-tabs mb-3">
            <button type="submit" name="view" value="day" class="btn btn-sm {{ $view === 'day' ? 'btn-primary' : 'btn-outline-secondary' }}">Single day</button>
            <button type="submit" name="view" value="range" class="btn btn-sm {{ $view === 'range' ? 'btn-primary' : 'btn-outline-secondary' }}">Date range</button>
            <button type="submit" name="view" value="month" class="btn btn-sm {{ $view === 'month' ? 'btn-primary' : 'btn-outline-secondary' }}">Month</button>
        </div>

        <div class="att-filter-fields">
            @if($view === 'day')
                <div class="att-field">
                    <label class="form-label small mb-0">Date</label>
                    <input type="date" name="date" value="{{ $dateFrom }}" class="form-control form-control-sm">
                </div>
            @elseif($view === 'range')
                <div class="att-field">
                    <label class="form-label small mb-0">From</label>
                    <input type="date" name="date_from" value="{{ $dateFrom }}" class="form-control form-control-sm">
                </div>
                <div class="att-field">
                    <label class="form-label small mb-0">To</label>
                    <input type="date" name="date_to" value="{{ $dateTo }}" class="form-control form-control-sm">
                </div>
            @else
                <div class="att-field">
                    <label class="form-label small mb-0">Month</label>
                    <input type="month" name="month" value="{{ $month }}" class="form-control form-control-sm">
                </div>
            @endif

            <div class="att-field" style="flex: 2 1 200px;">
                <label class="form-label small mb-0">Employee</label>
                <select name="employee_id" class="form-select form-select-sm">
                    <option value="">All employees</option>
                    @foreach($employees as $e)
                        <option value="{{ $e->id }}" @selected($employeeId == $e->id)>{{ $e->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="att-field">
                <label class="form-label small mb-0">Status</label>
                <select name="status" class="form-select form-select-sm">
                    <option value="" @selected($status === '')>All statuses</option>
                    <option value="present" @selected($status === 'present')>Present</option>
                    <option value="absent" @selected($status === 'absent')>Absent</option>
                    <option value="half_day" @selected($status === 'half_day')>Half day</option>
                    <option value="late" @selected($status === 'late')>Late coming</option>
                    <option value="missing_checkout" @selected($status === 'missing_checkout')>Missing checkout</option>
                </select>
            </div>

            <div class="att-field-actions">
                <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-funnel me-1"></i>Apply</button>
                <a href="{{ route('garage.attendance.index') }}" class="btn btn-outline-secondary btn-sm">Reset</a>
            </div>
        </div>
    </form>

    <div class="att-stat-grid mb-3">
        <a href="{{ $statLink('') }}" class="card att-stat att-stat-all {{ $status === '' ? 'active' : '' }}">
            <div class="card-body d-flex align-items-center gap-2">
                <div class="att-stat-icon"><i class="bi bi-people"></i></div>
                <div><div class="small text-muted">All</div><div class="fs-5 fw-bold mb-0">{{ $stats['all'] }}</div></div>
            </div>
        </a>
        <a href="{{ $statLink('present') }}" class="card att-stat att-stat-present {{ $status === 'present' ? 'active' : '' }}">
            <div class="card-body d-flex align-items-center gap-2">
                <div class="att-stat-icon"><i class="bi bi-check-circle"></i></div>
                <div><div class="small text-muted">Present</div><div class="fs-5 fw-bold text-success mb-0">{{ $stats['present'] }}</div></div>
            </div>
        </a>
        <a href="{{ $statLink('absent') }}" class="card att-stat att-stat-absent {{ $status === 'absent' ? 'active' : '' }}">
            <div class="card-body d-flex align-items-center gap-2">
                <div class="att-stat-icon"><i class="bi bi-x-circle"></i></div>
                <div><div class="small text-muted">Absent</div><div class="fs-5 fw-bold text-danger mb-0">{{ $stats['absent'] }}</div></div>
            </div>
        </a>
        <a href="{{ $statLink('half_day') }}" class="card att-stat att-stat-half {{ $status === 'half_day' ? 'active' : '' }}">
            <div class="card-body d-flex align-items-center gap-2">
                <div class="att-stat-icon"><i class="bi bi-sunrise"></i></div>
                <div><div class="small text-muted">Half day</div><div class="fs-5 fw-bold mb-0">{{ $stats['half_day'] }}</div></div>
            </div>
        </a>
        <a href="{{ $statLink('late') }}" class="card att-stat att-stat-late {{ $status === 'late' ? 'active' : '' }}">
            <div class="card-body d-flex align-items-center gap-2">
                <div class="att-stat-icon"><i class="bi bi-alarm"></i></div>
                <div><div class="small text-muted">Late</div><div class="fs-5 fw-bold mb-0">{{ $stats['late'] }}</div></div>
            </div>
        </a>
        <a href="{{ $statLink('missing_checkout') }}" class="card att-stat att-stat-miss {{ $status === 'missing_checkout' ? 'active' : '' }}">
            <div class="card-body d-flex align-items-center gap-2">
                <div class="att-stat-icon"><i class="bi bi-door-open"></i></div>
                <div><div class="small text-muted">No checkout</div><div class="fs-5 fw-bold mb-0">{{ $stats['missing_checkout'] }}</div></div>
            </div>
        </a>
        <div class="card att-stat att-stat-punch">
            <div class="card-body d-flex align-items-center gap-2">
                <div class="att-stat-icon"><i class="bi bi-fingerprint"></i></div>
                <div><div class="small text-muted">Punches</div><div class="fs-5 fw-bold mb-0">{{ $logsInRange }}</div></div>
            </div>
        </div>
    </div>

    <div class="att-toolbar mb-3">
        <form method="post" action="{{ route('garage.attendance.build-daily') }}" class="mb-0">
            @csrf
            <input type="hidden" name="from" value="{{ $dateFrom }}">
            <input type="hidden" name="to" value="{{ $dateTo }}">
            <button type="submit" class="btn btn-outline-primary btn-sm"><i class="bi bi-calculator me-1"></i>Rebuild daily</button>
        </form>
        <a href="{{ route('garage.attendance.devices.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-hdd-network me-1"></i>Devices</a>
        <a href="{{ route('garage.attendance.reports.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-file-earmark-bar-graph me-1"></i>Reports</a>
        @if($devices->isNotEmpty())
            <span class="text-muted small ms-auto d-none d-md-inline">
                @foreach($devices as $d)
                    <span class="badge bg-light text-dark border me-1">{{ $d->name }} · last sync {{ $d->last_synced_at ? \Carbon\Carbon::parse($d->last_synced_at)->format('M j, H:i') : 'never' }}</span>
                @endforeach
            </span>
        @endif
    </div>

    <div class="card hrx-card att-table-card w-100 mb-3">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2 py-2">
            <span class="fw-semibold">Attendance records</span>
            <span class="small text-muted">{{ $records->total() }} row(s)</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive w-100">
                <table class="table table-hover mb-0 align-middle w-100">
                    <thead class="table-light">
                    <tr>
                        <th style="width:110px">Date</th>
                        <th>Employee</th>
                        <th class="text-center" style="width:80px">In</th>
                        <th class="text-center" style="width:90px">Out</th>
                        <th class="text-end" style="width:80px">Work</th>
                        <th class="text-end" style="width:70px">Late</th>
                        <th class="text-end" style="width:70px">OT</th>
                        <th class="text-center" style="width:100px">Status</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($records as $r)
                        <tr>
                            <td class="text-nowrap">{{ $r->work_date }}</td>
                            <td>
                                <div class="fw-semibold">
                                    @if(!empty($r->employee_ledger_id))
                                        <a class="text-decoration-none" href="{{ route('garage.ledger-reports.ledger', $r->employee_ledger_id) }}">{{ $r->employee_name }}</a>
                                    @else
                                        {{ $r->employee_name }}
                                    @endif
                                </div>
                                <div class="text-muted small">{{ $r->employee_code ?: '—' }}</div>
                            </td>
                            <td class="text-center text-nowrap">
                                {{ $r->first_in ? \Carbon\Carbon::parse($r->first_in)->format('H:i') : '—' }}
                            </td>
                            <td class="text-center text-nowrap">
                                {{ $r->last_out ? \Carbon\Carbon::parse($r->last_out)->format('H:i') : '—' }}
                                @if($r->missing_checkout)
                                    <i class="bi bi-exclamation-triangle text-warning ms-1" title="Missing checkout"></i>
                                @endif
                            </td>
                            <td class="text-end">{{ number_format(($r->work_minutes ?? 0) / 60, 1) }}h</td>
                            <td class="text-end {{ ($r->late_minutes ?? 0) > 0 ? 'text-warning fw-semibold' : '' }}">{{ (int) ($r->late_minutes ?? 0) }}</td>
                            <td class="text-end">{{ (int) ($r->overtime_minutes ?? 0) }}</td>
                            <td class="text-center">
                                @php $st = $r->status ?? 'absent'; @endphp
                                <span class="badge att-status-{{ $st }}">{{ str_replace('_', ' ', ucfirst($st)) }}</span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-5">
                                No records for this filter.
                                <div class="mt-2"><a href="{{ route('garage.attendance.devices.index') }}">Sync device</a> or adjust dates.</div>
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($records->hasPages())
            <div class="card-footer py-2">{{ $records->links() }}</div>
        @endif
    </div>

    @if(count($summary) > 0 && $view !== 'day')
    <div class="card hrx-card w-100">
        <div class="card-header fw-semibold py-2">Employee rollup (period)</div>
        <div class="card-body p-0">
            <div class="table-responsive w-100">
                <table class="table table-sm table-hover mb-0 w-100">
                    <thead class="table-light">
                    <tr>
                        <th>Employee</th>
                        <th class="text-end">Present</th>
                        <th class="text-end">Absent</th>
                        <th class="text-end">Half day</th>
                        <th class="text-end">Work (hrs)</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($summary as $s)
                        <tr>
                            <td>{{ $s['employee_name'] }}</td>
                            <td class="text-end text-success">{{ $s['present_days'] }}</td>
                            <td class="text-end text-danger">{{ $s['absent_days'] }}</td>
                            <td class="text-end">{{ $s['half_days'] ?? 0 }}</td>
                            <td class="text-end">{{ number_format(($s['work_minutes'] ?? 0) / 60, 1) }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection