@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $today = now()->toDateString();
        $hasScopedResults = $selectedStaffId || $selectedDepartmentId || $viewSelf || $viewTeam || (!$is_hr && !$is_manager);
        $activeFiltersCount = collect([
            filled($selectedDepartmentId),
            filled($selectedStaffId),
            request()->filled('from_date') && $date_from !== $today,
            request()->filled('to_date') && $date_to !== $today,
            $viewSelf,
            $viewTeam,
        ])->filter()->count();

        $scopeLabel = match (true) {
            $viewSelf => 'My Attendance',
            $viewTeam => 'My Team',
            filled($selectedStaffId) => 'Selected Staff',
            filled($selectedDepartmentId) => 'Selected Department',
            $is_hr => 'HR Scope',
            $is_manager || $is_direct_manager => 'Managed Scope',
            default => 'Personal Scope',
        };

        $emptyMessage = $hasScopedResults
            ? 'No attendance records found matching the current filters.'
            : 'Choose a staff member and date range to review attendance.';

        $isSingleStaffScope = filled($selectedStaffId)
            || ($viewSelf && !$viewTeam)
            || (!$is_hr && !$is_manager && !$is_direct_manager);
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Staff Attendance"
                    description="Review attendance records by scope, staff member, and date range using the same streamlined dashboard workflow.">
                    <div class="attendance-title-meta">
                        {{-- <span class="ui-pill ui-pill--info">{{ $scopeLabel }}</span> --}}

                        {{-- @if ($activeFiltersCount > 0)
                        <span class="ui-pill ui-pill--warn">{{ $activeFiltersCount }} Active Filter(s)</span>
                        @endif --}}
                    </div>
                </x-page-title>

                <div class="ui-card" style="margin-bottom: 10px;">
                    <div class="form-section">
                        <div class="form-section__head">
                            <div class="form-section__title mb-1">Attendance Filters</div>
                            <p class="form-section__sub mb-0">
                                Filter by department, staff, quick scope, and date range to inspect attendance records.
                            </p>
                        </div>

                        <form id="search-form" action="{{ route('attendences.index') }}" method="GET">
                            <div class="attendance-filter-grid">
                                @if ($is_hr)
                                    <div class="attendance-filter-col">
                                        <label for="department_id" class="asset-label">Department</label>
                                        <select name="department_id" id="department_id"
                                            class="asset-select select2 filter-input">
                                            <option value="">All Departments</option>
                                            @foreach ($departments as $dept)
                                                <option value="{{ $dept->id }}" {{ (string) $selectedDepartmentId === (string) $dept->id ? 'selected' : '' }}>
                                                    {{ $dept->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="attendance-filter-col">
                                        <label for="staff_id" class="asset-label">Staff</label>
                                        <select name="staff_id" id="staff_id" class="asset-select select2 filter-input">
                                            <option value="">All Staff</option>
                                            @foreach ($staffs as $s)
                                                <option value="{{ $s->id }}" {{ (string) $selectedStaffId === (string) $s->id ? 'selected' : '' }}>
                                                    {{ $s->staff_no }} -
                                                    {{ $s->full_name ?: trim(($s->first_name ?? '') . ' ' . ($s->last_name ?? '')) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @elseif($is_manager || $is_direct_manager)
                                    <div class="attendance-filter-col">
                                        <label for="staff_id" class="asset-label">Staff</label>
                                        <select name="staff_id" id="staff_id" class="asset-select select2 filter-input">
                                            <option value="">Choose Staff</option>
                                            @foreach ($staffs as $s)
                                                <option value="{{ $s->id }}" {{ (string) ($selectedStaffId ?? '') === (string) $s->id ? 'selected' : '' }}>
                                                    {{ $s->staff_no }} -
                                                    {{ $s->full_name ?: trim(($s->first_name ?? '') . ' ' . ($s->last_name ?? '')) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @else
                                    <input type="hidden" name="staff_id" value="{{ $userStaff?->id }}">
                                @endif

                                <div class="attendance-filter-col">
                                    <label for="from_date" class="asset-label">From</label>
                                    <input type="date" name="from_date" id="from_date" class="asset-input filter-input"
                                        value="{{ $date_from }}" max="{{ date('Y-m-d') }}">
                                </div>

                                <div class="attendance-filter-col">
                                    <label for="to_date" class="asset-label">To</label>
                                    <input type="date" name="to_date" id="to_date" class="asset-input filter-input"
                                        value="{{ $date_to }}" max="{{ date('Y-m-d') }}">
                                </div>

                                @if (($is_manager || $is_direct_manager || $is_hr) && $userStaff)
                                    <div class="attendance-filter-col attendance-filter-col--full">
                                        <div class="attendance-toggle-group">
                                            <label class="filter-toggle">
                                                <input class="filter-input" type="checkbox" name="view_self" id="view_self"
                                                    value="1" {{ $viewSelf ? 'checked' : '' }}>
                                                <span class="filter-toggle__box">
                                                    <span class="filter-toggle__icon">
                                                        <i class="fas fa-user-check"></i>
                                                    </span>
                                                    <span class="filter-toggle__content">
                                                        <span class="filter-toggle__title">My Attendance</span>
                                                        <span class="filter-toggle__text">Review only your own attendance
                                                            records.</span>
                                                    </span>
                                                    <span class="filter-toggle__indicator"></span>
                                                </span>
                                            </label>

                                            <label class="filter-toggle">
                                                <input class="filter-input" type="checkbox" name="view_team" id="view_team"
                                                    value="1" {{ $viewTeam ? 'checked' : '' }}>
                                                <span class="filter-toggle__box">
                                                    <span class="filter-toggle__icon">
                                                        <i class="fas fa-users"></i>
                                                    </span>
                                                    <span class="filter-toggle__content">
                                                        <span class="filter-toggle__title">My Team</span>
                                                        <span class="filter-toggle__text">Review your team members while
                                                            excluding your own records.</span>
                                                    </span>
                                                    <span class="filter-toggle__indicator"></span>
                                                </span>
                                            </label>
                                        </div>
                                    </div>
                                @endif

                                <div class="attendance-filter-col attendance-filter-col--actions">
                                    <a href="{{ route('attendences.index') }}" class="asset-btn asset-btn--secondary">
                                        Clear Filters
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                @if ($hasScopedResults)
                    <div class="attendance-stats-grid p-3">
                        <div class="ui-card attendance-stat">
                            <div class="attendance-stat__label">Total Working Days</div>
                            <div class="attendance-stat__value text-info">{{ $working_days }}</div>
                        </div>

                        <div class="ui-card attendance-stat">
                            <div class="attendance-stat__label">Present</div>
                            <div class="attendance-stat__value text-success">{{ $present_days ?? $attendances->count() }}</div>
                        </div>

                        <div class="ui-card attendance-stat">
                            <div class="attendance-stat__label">Late</div>
                            <div class="attendance-stat__value text-warning">{{ $late_days ?? 0 }}</div>
                        </div>

                        <div class="ui-card attendance-stat">
                            <div class="attendance-stat__label">Absent</div>
                            <div class="attendance-stat__value text-danger">{{ $absent_days }}</div>
                        </div>

                        <div class="ui-card attendance-stat">
                            <div class="attendance-stat__label">Total Hours</div>
                            <div class="attendance-stat__value text-primary">{{ number_format($total_hours, 2) }}</div>
                        </div>

                        <div class="ui-card attendance-stat">
                            <div class="attendance-stat__label">Avg Hours</div>
                            <div class="attendance-stat__value text-warning">{{ number_format($average_hours, 2) }}</div>
                        </div>
                    </div>
                @endif

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="attendance-table-head">
                            <div>
                                <h6 class="mb-1 font-semibold text-gray-800">Attendance Records</h6>
                                <p class="mb-0 attendance-table-head__sub">
                                    {{ $attendances->count() }} record(s) found between {{ $date_from }} and {{ $date_to }}.
                                </p>
                            </div>

                            <div class="attendance-table-head__meta">
                                <span class="ui-pill ui-pill--neutral">{{ $date_from }} to {{ $date_to }}</span>
                            </div>
                        </div>
                    </div>

                    <x-table :headers="array_values(array_filter([
            'Name',
            $is_hr ? 'Department' : null,
            'Date',
            'Session',
            'Check In',
            'Check Out',
            'Delay',
            'Idle',
            'Status',
            'Approved Permission',
            'Work Hours',
        ]))" :paginator="$attendances"
                        :emptyMessage="$emptyMessage">
                        @foreach ($attendances as $attendance)
                            <tr>
                                <td class="text-center">
                                    <div class="attendance-person">
                                        <div class="attendance-person__name">
                                            <a href="{{ route('staffs.show', $attendance->id) }}">{{ $attendance->first_name . ' ' . $attendance->last_name }}</a>
                                        </div>
                                    </div>
                                </td>

                                @if ($is_hr)
                                    <td class="ui-muted text-center">
                                        {{ $attendance->department_name ?: 'N/A' }}
                                    </td>
                                @endif

                                <td class="ui-muted text-center">
                                    {{ $attendance->attendence_date }}
                                </td>

                                <td class="text-center">
                                    @if (!empty($attendance->session_number))
                                        <span class="ui-pill ui-pill--info">
                                            #{{ $attendance->session_number }}
                                            {{ isset($attendance->session_start_time) ? \Carbon\Carbon::parse($attendance->session_start_time)->format('H:i') : '' }}
                                            -
                                            {{ isset($attendance->session_end_time) ? \Carbon\Carbon::parse($attendance->session_end_time)->format('H:i') : '' }}
                                        </span>
                                    @else
                                        <span class="ui-pill ui-pill--neutral">N/A</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ ($attendance->status ?? null) === 'late' ? 'warn' : 'info' }}">
                                        {{ $attendance->check_in ?: 'N/A' }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">
                                        {{ $attendance->check_out ?: 'N/A' }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--warn">
                                        {{ isset($attendance->delay_minutes) ? formatDuration((int) round($attendance->delay_minutes * 60)) : '0 s' }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--success">
                                        {{ isset($attendance->idle_hours) ? formatDuration((int) round($attendance->idle_hours * 3600)) : '0 s' }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    @php
                                        $status = $attendance->status ?? (($attendance->check_in || $attendance->check_out) ? 'present' : 'absent');
                                        $statusLabel = ucfirst($status);
                                        $statusClass = match ($status) {
                                            'present' => 'success',
                                            'late' => 'warn',
                                            'absent' => 'danger',
                                            'leave' => 'info',
                                            'holiday' => 'neutral',
                                            default => 'neutral',
                                        };
                                    @endphp
                                    <span class="ui-pill ui-pill--{{ $statusClass }}">
                                        {{ $statusLabel }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    @if (!empty($attendance->approved_permission))
                                        <span class="ui-pill ui-pill--success">
                                            {{ $attendance->approved_permission }}
                                        </span>
                                    @else
                                        <span class="ui-pill ui-pill--neutral">N/A</span>
                                    @endif
                                </td>
                                <td class="ui-title text-center">
                                    {{ $attendance->work_hours ?? '0.00' }}
                                </td>

{{--                                <td class="text-center">--}}
{{--                                    <span class="ui-pill ui-pill--success">--}}
{{--                                        {{ isset($attendance->status) ? $attendance->status : "N/A" }}--}}
{{--                                    </span>--}}
{{--                                </td>--}}
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .attendance-title-meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .attendance-filter-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .attendance-filter-col {
            grid-column: span 3 / span 3;
        }

        .attendance-filter-col--full {
            grid-column: span 12 / span 12;
        }

        .attendance-filter-col--actions {
            grid-column: span 12 / span 12;
            display: flex;
            justify-content: flex-end;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .select2-container {
            width: 100% !important;
        }

        .select2-container .selection {
            display: block !important;
        }

        .select2-container--default .select2-selection--single,
        .select2-container--default .select2-selection--multiple {
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.35rem 0.45rem;
            background: #fff;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple,
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 30px;
            color: #111827;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 42px;
        }

        .attendance-toggle-group {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .filter-toggle {
            display: block;
            margin: 0;
            cursor: pointer;
        }

        .filter-toggle input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .filter-toggle__box {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            padding: 1rem 1.1rem;
            background: #fbfcfe;
            transition: 0.2s ease;
        }

        .filter-toggle__icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4338ca;
            flex-shrink: 0;
        }

        .filter-toggle__content {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            min-width: 0;
            flex: 1;
        }

        .filter-toggle__title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #111827;
        }

        .filter-toggle__text {
            color: #6b7280;
            font-size: 0.88rem;
            line-height: 1.5;
        }

        .filter-toggle__indicator {
            position: relative;
            width: 52px;
            height: 30px;
            border-radius: 999px;
            background: #d1d5db;
            flex-shrink: 0;
            transition: 0.25s ease;
        }

        .filter-toggle__indicator::before {
            content: "";
            position: absolute;
            width: 22px;
            height: 22px;
            left: 4px;
            top: 4px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.15);
            transition: 0.25s ease;
        }

        .filter-toggle input:checked+.filter-toggle__box {
            border-color: #c7d2fe;
            background: #eef2ff;
            box-shadow: 0 10px 25px rgba(79, 70, 229, 0.08);
        }

        .filter-toggle input:checked+.filter-toggle__box .filter-toggle__indicator {
            background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        }

        .filter-toggle input:checked+.filter-toggle__box .filter-toggle__indicator::before {
            transform: translateX(22px);
        }

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

        .attendance-stat {
            padding: 1rem 1.1rem;
        }

        .attendance-stat__label {
            color: #6b7280;
            font-size: 0.88rem;
            margin-bottom: 0.45rem;
        }

        .attendance-stat__value {
            font-size: 1.45rem;
            font-weight: 800;
            line-height: 1.1;
        }

        .attendance-table-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .attendance-table-head__sub {
            color: #6b7280;
            font-size: 0.9rem;
        }

        .attendance-table-head__meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .attendance-person__name {
            font-weight: 700;
            color: #111827;
        }

        @media (max-width: 1199.98px) {
            .attendance-filter-col {
                grid-column: span 4 / span 4;
            }

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

        @media (max-width: 991.98px) {
            .attendance-filter-col {
                grid-column: span 6 / span 6;
            }

            .attendance-toggle-group {
                grid-template-columns: 1fr;
            }

            .attendance-stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {

            .attendance-filter-col,
            .attendance-filter-col--full,
            .attendance-filter-col--actions {
                grid-column: span 12 / span 12;
            }

            .attendance-stats-grid {
                grid-template-columns: 1fr;
            }

            .attendance-filter-col--actions {
                justify-content: stretch;
            }

            .attendance-filter-col--actions .asset-btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function () {
            $('.select2').select2({
                allowClear: true,
                width: '100%'
            });

            $('.filter-input').on('change', function () {
                if ($(this).attr('id') === 'view_self' && $(this).is(':checked')) {
                    $('#view_team').prop('checked', false);
                } else if ($(this).attr('id') === 'view_team' && $(this).is(':checked')) {
                    $('#view_self').prop('checked', false);
                }

                if ($(this).attr('id') === 'department_id' && $('#staff_id').length) {
                    $('#staff_id').val('').trigger('change.select2');
                }

                $('#search-form').submit();
            });
        });
    </script>
@endpush