@extends('dashboard.layouts.app')

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

    @php
        $idleTimes = [
            10 => '10 minutes',
            20 => '20 minutes',
            30 => '30 minutes',
            60 => '1 hour',
            120 => '2 hours',
        ];

        $activeFiltersCount = collect([
            request('staff_id'),
            request('start_date'),
            request('end_date'),
            request('idle_time'),
            request('per_page'),
        ])->filter(fn ($value) => filled($value))->count();
    @endphp

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

                <x-page-title
                    title="Authentication Events"
                    description="Track login and logout activity, review idle time sessions, and filter records by staff member and date range.">
                </x-page-title>

                <div class="ui-card ui-card--table" style="border-radius: 20px 20px 0px 0px !important;">
    <div class="ui-card__header">
        <form action="{{ route('users.audit') }}" method="GET">
            <div class="d-flex align-items-center gap-2 flex-nowrap">
                <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap me-2">Filters</h6>

                {{-- Per Page --}}
                <select name="per_page" class="form-select w-auto">
                    @foreach ([5, 10, 25, 50, 100, 150] as $count)
                        <option value="{{ $count }}"
                            {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                            {{ $count }}
                        </option>
                    @endforeach
                </select>

                {{-- Start Date --}}
                <input
                    type="date"
                    name="start_date"
                    class="form-control w-auto"
                    value="{{ request('start_date') }}">

                {{-- End Date --}}
                <input
                    type="date"
                    name="end_date"
                    class="form-control w-auto"
                    value="{{ request('end_date') }}">

                {{-- Idle Time --}}
                <select name="idle_time" class="form-select w-auto">
                    <option value="">Idle Time</option>
                    @foreach ($idleTimes as $value => $label)
                        <option value="{{ $value }}"
                            {{ request('idle_time') == $value ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>

                {{-- Search (أكبر + flex-grow) --}}
                <div class="position-relative flex-grow-1">
                    <input
                        type="text"
                        name="search"
                        class="form-control pe-5"
                        placeholder="search"
                        value="{{ request('search') }}">
                    <span class="position-absolute top-50 end-0 translate-middle-y me-3 text-muted d-flex align-items-center">
                        <iconify-icon icon="ion:search-outline"></iconify-icon>
                    </span>
                </div>

                {{-- Clear --}}
                <a href="{{ route('users.audit', array_filter([
                    'per_page' => request('per_page'),
                ])) }}"
                   class="text-decoration-none fw-medium whitespace-nowrap ms-2"
                   style="color: #ff6a00;">
                    Clear
                </a>
            </div>
        </form>
    </div>
</div>

                <div class="ui-card ui-card--table" style="border-radius: 0px;">
                   
                    <x-table
                        :headers="['#', 'Event Type', 'Session ID', 'Idle Time', 'Date & Time']"
                        :paginator="$events"
                        emptyMessage="No authentication events found matching the current filters."
                    >
                        @forelse($events as $event)
                            @php
                                $date = \Carbon\Carbon::parse($event->created_at);
                                $dayName = $date->format('l');

                                $eventVariant = $event->event_type == 'login' ? 'success' : 'danger';
                                $eventLabel = $event->event_type == 'login' ? 'Login' : 'Logout';

                                $idleMinutes = $event->idle_seconds ? floor($event->idle_seconds / 60) : null;
                            @endphp

                            <tr id="event-row-{{ $event->id ?? $loop->iteration }}">
                                <td class="ui-muted text-center">
                                    {{ $loop->iteration }}
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $eventVariant }}">
                                        {{ $eventLabel }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @if ($event->session_id)
                                        <div class="session-id-pill">
                                            {{ $event->session_id }}
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @if ($idleMinutes)
                                        <span class="ui-pill ui-pill--warn">
                                            {{ $idleMinutes }} mins
                                        </span>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">
                                        {{ $date->diffForHumans() }} -- {{ $date->format('l H:i:s') }}
                                    </div>

                                    <div class="mt-1">
                                        @if ($dayName === 'Thursday')
                                            <span class="ui-pill ui-pill--warn">
                                                Weekend Start
                                            </span>
                                        @elseif ($dayName === 'Sunday')
                                            <span class="ui-pill ui-pill--info">
                                                Weekend End
                                            </span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </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;
        }

        .filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

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

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

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

        .staff-filter-col--search {
            grid-column: span 6 / span 6;
        }

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

        .asset-input,
        .asset-select,
        .asset-static-field {
            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);
        }

        .asset-static-field {
            display: flex;
            align-items: center;
            color: #374151;
            background: #f9fafb;
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
            text-decoration: none;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        .session-id-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 0.35rem 0.7rem;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #f9fafb;
            color: #374151;
            font-size: 0.85rem;
            font-weight: 600;
            word-break: break-all;
        }

        @media (max-width: 1199.98px) {
            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 6 / span 6;
            }
        }

        @media (max-width: 767.98px) {
            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 12 / span 12;
            }

            .filter-head {
                align-items: stretch;
            }
        }
    </style>
@endpush

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

        setTimeout(() => {
            let alert = document.getElementById('successAlert');
            if (alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 10000);
    </script>
@endpush