@php
    $defaultAvatar = asset('storage/uploads/user-icon.png');
    $statusLabel = fn (?string $code) => match ($code) {
        'P' => __('Present'),
        'D' => __('Delay'),
        default => __('Ext Delay'),
    };
    $statusClass = fn (?string $code) => match ($code) {
        'P' => 'present',
        'D' => 'delay',
        default => 'late',
    };
@endphp
@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | Daily Attendance')
@section('content')
    <style>
        .att-show-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .att-show-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .att-show-wrap label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .att-show-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .att-show-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .att-show-filters .form-group { margin-bottom: 0; } }
        .att-show-filters .select2-container { width: 100% !important; }
        .att-show-filters .select2-selection__rendered { line-height: 31px !important; }
        .att-show-filters .select2-container .select2-selection--single { height: 38px !important; }
        .att-show-filters .select2-selection__arrow { height: 36px !important; }
        .att-show-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-show-table tbody td { vertical-align: middle; }
        .att-show-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .att-show-badge.present { background: rgba(34,197,94,.12); color: #166534; }
        .att-show-badge.delay { background: rgba(14,165,233,.12); color: #0369a1; }
        .att-show-badge.late { background: rgba(239,68,68,.12); color: #991b1b; }
        .att-show-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
        .att-show-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-show-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-show-staff-name { font-weight: 700; font-size: 1.05rem; color: #0f172a; }
        .att-show-staff-meta { font-size: 13px; color: #64748b; }
        .att-show-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 14px; text-align: center; }
        .att-show-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .att-show-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .att-show-accordion .card { border: 1px solid #edf0f6; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
        .att-show-accordion .card-header { background: #fff; border-bottom: 1px solid #edf0f6; padding: 0; }
        .att-show-accordion .accordion-toggle { width: 100%; text-align: left; padding: 12px 16px; border: 0; background: transparent; display: flex; align-items: center; gap: 12px; }
        .att-show-accordion .accordion-toggle img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
        .att-show-accordion .accordion-toggle:hover { background: #f8fafc; }
        .att-show-accordion .record-count { margin-left: auto; font-size: 12px; font-weight: 700; color: #64748b; background: #f1f5f9; padding: 4px 10px; border-radius: 999px; }
        .att-show-empty { text-align: center; padding: 48px 20px; color: #64748b; }
        .att-show-empty i { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: 12px; }
        .att-show-modal .modal-content { border: none; border-radius: 12px; box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15); }
        .att-show-modal .modal-header, .att-show-modal .modal-footer { border-color: #edf0f6; }
        .att-show-modal-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
    </style>

    <div class="container-fluid att-show-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="page-title mb-0">Daily Attendance</h4>
                    <p class="text-muted mb-0">View and update staff sign-in / sign-out records by date range.</p>
                </div>
            </div>

            @if (session()->has('message'))
                <div class="col-12"><div class="alert alert-success">{{ session('message') }}</div></div>
            @endif
            @if (session()->has('error'))
                <div class="col-12"><div class="alert alert-danger">{{ session('error') }}</div></div>
            @endif

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span>Filters</span>
                        <a href="{{ route('attendance.show') }}" class="btn btn-sm btn-outline-secondary">Clear Filters</a>
                    </div>
                    <form action="" method="get">
                        <div class="att-show-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_show_staff" data-placeholder="All Employees">
                                        <option value="">All Employees</option>
                                        @foreach($staffList as $staff)
                                            @if($staff->user?->is_active)
                                                <option value="{{ $staff->id }}" @selected(($staffId ?? null) == $staff->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">
                                Select a date range, or pick an employee (defaults to current month if dates are empty).
                            </p>
                        </div>
                    </form>

                    <div class="card-body">
                        @if($show === null)
                            <div class="att-show-empty">
                                <i class="mdi mdi-calendar-search"></i>
                                <h5 class="mb-1">No filters applied</h5>
                                <p class="mb-0">Choose a date range or employee, then click Filter to load attendance.</p>
                            </div>
                        @elseif($singleStaff)
                            @php
                                $avatar = $singleStaff->user?->image ? asset('storage/'.$singleStaff->user->image) : $defaultAvatar;
                            @endphp
                            <div class="att-show-staff-card">
                                <img src="{{ $avatar }}" alt="" onerror="this.onerror=null;this.src='{{ $defaultAvatar }}';">
                                <div>
                                    <div class="att-show-staff-name">{{ $singleStaff->user?->name ?? '—' }}</div>
                                    <div class="att-show-staff-meta">
                                        ID: {{ $singleStaff->user_id ?? '—' }}
                                        · {{ $singleStaff->designation?->name ?? 'No Designation' }}
                                        · {{ $singleStaff->warehouse?->name ?? 'No Branch' }}
                                    </div>
                                    <div class="att-show-staff-meta">
                                        {{ \Carbon\Carbon::parse($startDate)->format('M d, Y') }} — {{ \Carbon\Carbon::parse($endDate)->format('M d, Y') }}
                                    </div>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <div class="col-6 col-md-3 mb-2">
                                    <div class="att-show-stat">
                                        <div class="num text-success">{{ (int) ($statusStats['P'] ?? 0) }}</div>
                                        <div class="lbl">Present</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3 mb-2">
                                    <div class="att-show-stat">
                                        <div class="num text-info">{{ (int) ($statusStats['D'] ?? 0) }}</div>
                                        <div class="lbl">Delay</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3 mb-2">
                                    <div class="att-show-stat">
                                        @php $otherCount = max(0, (int) $statusStats->sum() - (int) ($statusStats['P'] ?? 0) - (int) ($statusStats['D'] ?? 0)); @endphp
                                        <div class="num text-danger">{{ $otherCount }}</div>
                                        <div class="lbl">Late / Other</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3 mb-2">
                                    <div class="att-show-stat">
                                        <div class="num text-primary">{{ $records->total() }}</div>
                                        <div class="lbl">Total Records</div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover att-show-table mb-0">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Sign In</th>
                                            <th>Sign Out</th>
                                            <th>Status</th>
                                            <th class="text-right">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($records as $row)
                                            <tr>
                                                <td>{{ date('d M Y, D', strtotime($row->date)) }}</td>
                                                <td class="att-show-time">{{ $row->signIn ? date('h:i A', strtotime($row->signIn)) : '—' }}</td>
                                                <td class="att-show-time">{{ $row->signOut ? date('h:i A', strtotime($row->signOut)) : '—' }}</td>
                                                <td>
                                                    <span class="att-show-badge {{ $statusClass($row->status) }}">{{ $statusLabel($row->status) }}</span>
                                                </td>
                                                <td class="text-right">
                                                    <button type="button" class="btn btn-sm btn-primary"
                                                            onclick="Attendance_update({{ $row->id }}, '{{ $row->date }}', '{{ $row->signIn }}', '{{ $row->signOut }}')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="text-center text-muted py-4">No attendance records in this range.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            @if($records->hasPages())
                                <div class="mt-3">{{ $records->links() }}</div>
                            @endif
                        @elseif($staffGroups && $staffGroups->count() > 0)
                            <p class="text-muted small mb-3">
                                Showing {{ $staffGroups->firstItem() }}–{{ $staffGroups->lastItem() }} of {{ $staffGroups->total() }} employees
                                · {{ \Carbon\Carbon::parse($startDate)->format('M d, Y') }} — {{ \Carbon\Carbon::parse($endDate)->format('M d, Y') }}
                            </p>

                            <div class="att-show-accordion" id="attShowAccordion">
                                @foreach($staffGroups as $index => $staff)
                                    @php
                                        $rows = $attendance->get($staff->id, collect());
                                        $avatar = $staff->user?->image ? asset('storage/'.$staff->user->image) : $defaultAvatar;
                                        $collapseId = 'att-collapse-'.$staff->id;
                                    @endphp
                                    <div class="card">
                                        <div class="card-header" id="heading-{{ $staff->id }}">
                                            <button class="accordion-toggle" type="button"
                                                    data-toggle="collapse"
                                                    data-target="#{{ $collapseId }}"
                                                    aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                                    aria-controls="{{ $collapseId }}">
                                                <img src="{{ $avatar }}" alt="" onerror="this.onerror=null;this.src='{{ $defaultAvatar }}';">
                                                <div>
                                                    <div class="font-weight-bold text-dark">{{ $staff->user?->name ?? '—' }}</div>
                                                    <div class="small text-muted">
                                                        ID: {{ $staff->user_id ?? '—' }}
                                                        · {{ $staff->designation?->name ?? 'No Designation' }}
                                                        · {{ $staff->warehouse?->name ?? 'No Branch' }}
                                                    </div>
                                                </div>
                                                <span class="record-count">{{ $rows->count() }} days</span>
                                            </button>
                                        </div>
                                        <div id="{{ $collapseId }}" class="collapse {{ $index === 0 ? 'show' : '' }}"
                                             aria-labelledby="heading-{{ $staff->id }}" data-parent="#attShowAccordion">
                                            <div class="card-body p-0">
                                                <div class="table-responsive">
                                                    <table class="table table-hover att-show-table mb-0">
                                                        <thead>
                                                            <tr>
                                                                <th>Date</th>
                                                                <th>Sign In</th>
                                                                <th>Sign Out</th>
                                                                <th>Status</th>
                                                                <th class="text-right">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @forelse($rows as $row)
                                                                <tr>
                                                                    <td>{{ date('d M Y, D', strtotime($row->date)) }}</td>
                                                                    <td class="att-show-time">{{ $row->signIn ? date('h:i A', strtotime($row->signIn)) : '—' }}</td>
                                                                    <td class="att-show-time">{{ $row->signOut ? date('h:i A', strtotime($row->signOut)) : '—' }}</td>
                                                                    <td>
                                                                        <span class="att-show-badge {{ $statusClass($row->status) }}">{{ $statusLabel($row->status) }}</span>
                                                                    </td>
                                                                    <td class="text-right">
                                                                        <button type="button" class="btn btn-sm btn-primary"
                                                                                onclick="Attendance_update({{ $row->id }}, '{{ $row->date }}', '{{ $row->signIn }}', '{{ $row->signOut }}')">
                                                                            <i class="fas fa-edit"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            @empty
                                                                <tr>
                                                                    <td colspan="5" class="text-center text-muted py-3">No records.</td>
                                                                </tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @if($staffGroups->hasPages())
                                <div class="mt-3">{{ $staffGroups->appends(request()->except('staff_page'))->links() }}</div>
                            @endif
                        @else
                            <div class="att-show-empty">
                                <i class="mdi mdi-calendar-remove"></i>
                                <h5 class="mb-1">No records found</h5>
                                <p class="mb-0">Try a different date range or employee filter.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade att-show-modal" id="Attendance_update_modal">
        <form action="{{ route('attendance.update') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Attendance Update') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="id">
                        <div class="form-group">
                            <label class="att-show-modal-label">Sign In</label>
                            <input class="form-control" type="time" id="signin" name="signin">
                        </div>
                        <div class="form-group mb-0">
                            <label class="att-show-modal-label">Sign Out</label>
                            <input class="form-control" type="time" name="signout" id="signout">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('#att_show_staff').select2({ width: '100%', placeholder: 'All Employees' });
        });

        function Attendance_update(id, date, signin, signout) {
            $('#signin').val(signin);
            $('#id').val(id);
            $('#signout').val(signout);
            $('#Attendance_update_modal').modal('show');
        }
    </script>
@endsection