@extends('layouts.public')

@section('title', 'Cek Absensi')

@push('styles')
    <style>
        .attendance-check-wrap {
            max-width: 1320px;
            margin: 0 auto;
        }
        .attendance-check-card .card-body {
            padding: 1.25rem;
        }
        .attendance-check-actions .btn {
            min-width: 0;
        }
        @media (min-width: 992px) {
            .attendance-check-card .card-body {
                padding: 1.5rem;
            }
            .attendance-check-actions .btn {
                flex: 1 1 0;
            }
        }
        @media (max-width: 575.98px) {
            .attendance-check-actions {
                flex-direction: column;
            }
            .attendance-check-actions .btn {
                width: 100%;
            }
        }
    </style>
@endpush

@section('content')
    <div class="attendance-check-wrap">
        <div class="row justify-content-center">
            <div class="col-12">
            <div class="card shadow-sm attendance-check-card">
                <div class="card-header">
                    <h3 class="card-title m-0">Cek Absensi (Tanpa Login)</h3>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Masukkan kode finger dan pilih periode bulan. Sistem otomatis menemukan profil bulan Anda.
                    </p>

                    @if (!empty($error))
                        <div class="alert alert-danger">{{ $error }}</div>
                    @endif

                    @php
                        $monthNames = [1=>'Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
                        $selectedYear = (int) old('period_year', $period_year ?? 0);
                        $selectedMonth = (int) old('period_month', $period_month ?? 0);
                        $yearMonths = [];
                        foreach (($period_options ?? []) as $opt) {
                            $y = (int) $opt->period_year;
                            $m = (int) $opt->period_month;
                            $yearMonths[$y][] = $m;
                        }
                        $yearMonths = array_map(fn($months) => array_unique($months), $yearMonths);
                    @endphp
                    <form method="GET" action="{{ route('public.attendance_check') }}" class="row g-3">
                        <div class="col-12 col-lg-3">
                            <label class="form-label">Kode Finger</label>
                            <input
                                type="text"
                                name="finger_id"
                                class="form-control"
                                placeholder="Contoh: 10022"
                                value="{{ old('finger_id', $finger_id ?? '') }}"
                                required
                            />
                        </div>
                        <div class="col-12 col-lg-4">
                            <label class="form-label">Periode Bulan</label>
                            <select name="period_year" id="periodYear" class="form-select" required>
                                <option value="0">- Pilih Tahun -</option>
                                @foreach ($yearMonths as $y => $months)
                                    <option value="{{ $y }}" {{ $selectedYear === $y ? 'selected' : '' }}>{{ $y }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-lg-5">
                            <label class="form-label">&nbsp;</label>
                            <select name="period_month" id="periodMonth" class="form-select" required>
                                <option value="0">- Pilih Bulan -</option>
                                @php $currentMonths = $yearMonths[$selectedYear] ?? []; @endphp
                                @foreach ($monthNames as $m => $name)
                                    @if (in_array($m, $currentMonths))
                                        <option value="{{ $m }}" {{ $selectedMonth === $m ? 'selected' : '' }}>
                                            {{ $name }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                        </div>

                        <input type="hidden" name="date_from" id="dateFromInput" value="{{ old('date_from', $date_from ?? '') }}" />
                        <input type="hidden" name="date_to" id="dateToInput" value="{{ old('date_to', $date_to ?? '') }}" />
                        <div class="col-12 d-flex align-items-end gap-2 attendance-check-actions">
                            <button class="btn btn-primary" type="submit">
                                <i class="fas fa-search me-1"></i>Cek Absensi
                            </button>
                            <a class="btn btn-outline-secondary" href="{{ route('public.attendance_check') }}">
                                Reset
                            </a>
                        </div>
                    </form>

                    <script>
                    (function () {
                        const yearMonths = @json($yearMonths);
                        const yearSelect = document.getElementById('periodYear');
                        const monthSelect = document.getElementById('periodMonth');
                        if (!yearSelect || !monthSelect) return;

                        const monthNames = ['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];

                        function refreshMonths() {
                            const y = parseInt(yearSelect.value) || 0;
                            const months = yearMonths[y] || [];
                            const prev = monthSelect.value;
                            monthSelect.innerHTML = '<option value="0">- Pilih Bulan -</option>';
                            months.forEach(m => {
                                const opt = document.createElement('option');
                                opt.value = m;
                                opt.textContent = monthNames[m] || m;
                                if (String(m) === prev) opt.selected = true;
                                monthSelect.appendChild(opt);
                            });
                        }

                        yearSelect.addEventListener('change', function () {
                            monthSelect.value = '0';
                            refreshMonths();
                        });

                        refreshMonths();
                    })();
                    </script>
                </div>
            </div>

            @if (!empty($info))
                <div class="alert alert-info mt-3">{{ $info }}</div>
            @endif
            </div>
        </div>
    </div>
@endsection