@extends('dashboard.layouts.app')

@section('content')
    <style>
        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
        }

        .ui-card--table {
            padding: 0;
            overflow: hidden;
        }

        .ui-card__header {
            padding: 1.1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
        }

        .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;
        }

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

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            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 {
            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);
        }

        textarea.asset-input {
            min-height: 88px;
            resize: vertical;
        }

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

        .attendance-count {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .attendance-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .attendance-table thead th {
            background: #f8fafc;
            color: #334155;
            font-size: 0.9rem;
            font-weight: 700;
            text-align: center;
            padding: 0.95rem 0.85rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .attendance-table tbody td {
            padding: 1rem 0.85rem;
            border-bottom: 1px solid #eef2f7;
            vertical-align: top;
            text-align: center;
        }

        .attendance-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .attendance-user {
            text-align: left;
        }

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

        .attendance-user__meta {
            color: #6b7280;
            font-size: 0.88rem;
            margin-top: 0.15rem;
        }

        .attendance-role {
            color: #475569;
            font-weight: 600;
        }

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

        .attendance-choice {
            position: relative;
            margin: 0;
            cursor: pointer;
        }

        .attendance-choice input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .attendance-choice__box {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0.75rem 0.8rem;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #334155;
            font-weight: 600;
            transition: 0.2s ease;
            text-align: center;
        }

        .attendance-choice input:checked + .attendance-choice__box {
            border-color: #c7d2fe;
            background: #f8faff;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
            color: #111827;
        }

        .attendance-choice--present input:checked + .attendance-choice__box {
            border-color: #bbf7d0;
            background: #f0fdf4;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.08);
        }

        .attendance-choice--late input:checked + .attendance-choice__box {
            border-color: #fde68a;
            background: #fffbeb;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);
        }

        .attendance-choice--absent input:checked + .attendance-choice__box {
            border-color: #fecaca;
            background: #fef2f2;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
        }

        .attendance-choice--holiday input:checked + .attendance-choice__box {
            border-color: #bfdbfe;
            background: #eff6ff;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
        }

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

        .empty-state-box {
            text-align: center;
            padding: 2rem 1.25rem;
            color: #6b7280;
        }

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

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

        @media (max-width: 767.98px) {
            .attendance-table thead {
                display: none;
            }

            .attendance-table,
            .attendance-table tbody,
            .attendance-table tr,
            .attendance-table td {
                display: block;
                width: 100%;
            }

            .attendance-table tbody tr {
                padding: 1rem;
                border-bottom: 1px solid #eef2f7;
            }

            .attendance-table tbody td {
                text-align: left;
                padding: 0.55rem 0;
                border-bottom: 0;
            }

            .attendance-table tbody td::before {
                content: attr(data-label);
                display: block;
                font-size: 0.8rem;
                font-weight: 700;
                color: #64748b;
                margin-bottom: 0.25rem;
                text-transform: uppercase;
            }

            .attendance-options {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    </style>

    @include('components.alert')

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

                <x-page-title
                    title="Attendance Management"
                    description="Filter attendance records by role and date, then submit daily attendance notes for staff members.">
                    <a href="{{ route('attendences.index') }}" class="asset-btn asset-btn--secondary">
                        Reset View
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Search Filters</h5>
                            <p class="form-section__sub mb-0">
                                Choose a role and date to load attendance records for the selected group.
                            </p>
                        </div>

                        <form id="search-form" action="{{ route('attendences.index') }}" method="GET">
                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="role_id" class="asset-label">Select Role</label>
                                    <select name="role_id" id="role_id" class="asset-select">
                                        <option value="">All Roles</option>
                                        @foreach ($roles as $role)
                                            <option value="{{ $role->id }}" {{ request('role_id') == $role->id ? 'selected' : '' }}>
                                                {{ $role->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="asset-col-6">
                                    <label for="date" class="asset-label">Select Date</label>
                                    <input type="date" name="date" id="date" class="asset-input" value="{{ $date }}">
                                </div>
                            </div>

                            <div class="asset-actions">
                                <a href="{{ route('attendences.index') }}" class="asset-btn asset-btn--secondary">
                                    Clear
                                </a>
                                <button type="submit" class="asset-btn asset-btn--primary">
                                    Search
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                @if ($users->isNotEmpty())
                    <form action="{{ route('attendences.store') }}" method="POST" id="attendance-form">
                        @csrf
                        <input type="hidden" name="date" value="{{ $date }}">

                        <div class="ui-card ui-card--table">
                            <div class="ui-card__header">
                                <div class="attendance-toolbar">
                                    <div>
                                        <div class="dashTitle">Attendance Records</div>
                                        <div class="attendance-count">
                                            Total Staff: <strong>{{ $users->count() }}</strong>
                                        </div>
                                    </div>

                                    <button type="button" class="asset-btn asset-btn--secondary" id="select-all-holiday">
                                        Select All as Holiday
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="attendance-table">
                                    <thead>
                                        <tr>
                                            <th>Staff No</th>
                                            <th>Name</th>
                                            <th>Role</th>
                                            <th>Attendance</th>
                                            <th>Note</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($users as $user)
                                            <tr>
                                                <td data-label="Staff No">
                                                    <div class="ui-muted">{{ $user['staff_no'] }}</div>
                                                </td>

                                                <td data-label="Name" class="attendance-user">
                                                    <div class="attendance-user__name">{{ $user['full_name'] }}</div>
                                                </td>

                                                <td data-label="Role">
                                                    <div class="attendance-role">{{ $user['role'] }}</div>
                                                </td>

                                                <td data-label="Attendance">
                                                    <div class="attendance-options">
                                                        <label class="attendance-choice attendance-choice--present">
                                                            <input type="radio"
                                                                name="attendances[{{ $user['staff_id'] }}][attendance]"
                                                                id="present_{{ $user['staff_id'] }}"
                                                                value="Present"
                                                                {{ $user['attendance'] === 'P' ? 'checked' : '' }}>
                                                            <span class="attendance-choice__box">Present</span>
                                                        </label>

                                                        <label class="attendance-choice attendance-choice--late">
                                                            <input type="radio"
                                                                name="attendances[{{ $user['staff_id'] }}][attendance]"
                                                                id="late_{{ $user['staff_id'] }}"
                                                                value="Late"
                                                                {{ $user['attendance'] === 'L' ? 'checked' : '' }}>
                                                            <span class="attendance-choice__box">Late</span>
                                                        </label>

                                                        <label class="attendance-choice attendance-choice--absent">
                                                            <input type="radio"
                                                                name="attendances[{{ $user['staff_id'] }}][attendance]"
                                                                id="absent_{{ $user['staff_id'] }}"
                                                                value="Absent"
                                                                {{ $user['attendance'] === 'A' ? 'checked' : '' }}>
                                                            <span class="attendance-choice__box">Absent</span>
                                                        </label>

                                                        <label class="attendance-choice attendance-choice--holiday">
                                                            <input type="radio"
                                                                name="attendances[{{ $user['staff_id'] }}][attendance]"
                                                                id="holiday_{{ $user['staff_id'] }}"
                                                                value="Holiday"
                                                                {{ $user['attendance'] === 'H' ? 'checked' : '' }}>
                                                            <span class="attendance-choice__box">Holiday</span>
                                                        </label>
                                                    </div>

                                                    <input type="hidden"
                                                        name="attendances[{{ $user['staff_id'] }}][staff_id]"
                                                        value="{{ $user['staff_id'] }}">
                                                </td>

                                                <td data-label="Note">
                                                    <textarea
                                                        name="attendances[{{ $user['staff_id'] }}][note]"
                                                        id="note_{{ $user['staff_id'] }}"
                                                        class="asset-input"
                                                        rows="2">{{ $user['note'] }}</textarea>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="asset-actions">
                            <button type="submit" class="asset-btn asset-btn--primary">
                                Submit Attendance
                            </button>
                        </div>
                    </form>
                @else
                    <div class="ui-card">
                        <div class="empty-state-box">
                            Please select a role and date to view user records.
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            const selectAllHolidayBtn = document.getElementById('select-all-holiday');

            if (selectAllHolidayBtn) {
                selectAllHolidayBtn.addEventListener('click', function () {
                    const radioButtons = document.querySelectorAll('input[type="radio"][name*="attendances"]');

                    radioButtons.forEach(radio => {
                        if (radio.value === 'Holiday') {
                            radio.checked = true;
                        }
                    });
                });
            }
        </script>
    @endpush
@endsection