@extends('dashboard.layouts.app')


@section('content')
    <div class="container mt-5">
        <!-- Success/Error Messages -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Search Form -->
        <div class="card">
            <div class="card-body">
                <form id="search-form" action="{{ route('attendences.index') }}" method="GET">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="role_id">Select Role</label>
                                <select name="role_id" id="role_id" class="form-control">
                                    <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>

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

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

        <!-- Attendance Form -->
        @if ($users->isNotEmpty())
            <div class="card mt-4">
                <div class="card-body">
                    <form action="{{ route('attendences.store') }}" method="POST" id="attendance-form">
                        @csrf
                        <input type="hidden" name="date" value="{{ $date }}">
                        <button type="button" class="btn btn-primary my-4" id="select-all-holiday">Select All as Holiday</button>

                        <div id="payroll-table">
                            <table class="table table-bordered table-sm table bordered-table sm-table mb-0">
                                <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>{{ $user['staff_no'] }}</td>
                                            <td>{{ $user['full_name'] }}</td>
                                            <td>{{ $user['role'] }}</td>
                                            <td>
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-check d-flex align-items-center gap-1">
                                                            <input class="form-check-input" type="radio"
                                                                name="attendances[{{ $user['staff_id'] }}][attendance]"
                                                                id="present_{{ $user['staff_id'] }}" value="Present"
                                                                {{ $user['attendance'] === 'P' ? 'checked' : '' }}>
                                                            <label class="form-check-label d-flex align-items-center"
                                                                for="present_{{ $user['staff_id'] }}">
                                                                <span class="fs-6">Present</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-check d-flex align-items-center gap-1">
                                                            <input class="form-check-input me-1" type="radio"
                                                                name="attendances[{{ $user['staff_id'] }}][attendance]"
                                                                id="late_{{ $user['staff_id'] }}" value="Late"
                                                                {{ $user['attendance'] === 'L' ? 'checked' : '' }}>
                                                            <label class="form-check-label d-flex align-items-center"
                                                                for="late_{{ $user['staff_id'] }}">
                                                                <span class="fs-6">Late</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-check d-flex align-items-center gap-1">
                                                            <input class="form-check-input me-1" type="radio"
                                                                name="attendances[{{ $user['staff_id'] }}][attendance]"
                                                                id="absent_{{ $user['staff_id'] }}" value="Absent"
                                                                {{ $user['attendance'] === 'A' ? 'checked' : '' }}>
                                                            <label class="form-check-label d-flex align-items-center"
                                                                for="absent_{{ $user['staff_id'] }}">
                                                                <span class="fs-6">Absent</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-check d-flex align-items-center gap-1">
                                                            <input class="form-check-input me-1" type="radio"
                                                                name="attendances[{{ $user['staff_id'] }}][attendance]"
                                                                id="holiday_{{ $user['staff_id'] }}" value="Holiday"
                                                                {{ $user['attendance'] === 'H' ? 'checked' : '' }}>
                                                            <label class="form-check-label d-flex align-items-center"
                                                                for="holiday_{{ $user['staff_id'] }}">
                                                                <span class="fs-6">Holiday</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="attendances[{{ $user['staff_id'] }}][staff_id]"
                                                    value="{{ $user['staff_id'] }}">
                                            </td>
                                            <td>
                                                <textarea name="attendances[{{ $user['staff_id'] }}][note]" id="note_{{ $user['staff_id'] }}" class="form-control">{{ $user['note'] }}</textarea>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">Submit Attendance</button>
                        </div>
                    </form>
                </div>
            </div>
        @else
            <div class="card mt-4">
                <div class="card-body text-center">
                    <p>Please select a role and date to view user records.</p>
                </div>
            </div>
        @endif
    </div>

    <!-- JavaScript for Select All as Holiday -->
    @push('scripts')
        <script>
            document.getElementById('select-all-holiday').addEventListener('click', function () {
                // Get all radio buttons with the name pattern for attendance
                const radioButtons = document.querySelectorAll('input[type="radio"][name*="attendances"]');
                radioButtons.forEach(radio => {
                    // Check if the radio button is for the "Holiday" option
                    if (radio.value === 'Holiday') {
                        radio.checked = true;
                    }
                });
            });
        </script>
    @endpush
@endsection