@extends('layouts.admin')
@section('title', 'Create Attendance')
@section('page-title', 'Manual Check-in')
@section('page-subtitle', 'Record attendance manually')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="card-royal p-6">
        <form method="POST" action="{{ route('admin.attendance.store') }}">
            @csrf
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Service *</label>
                <select name="service_id" required class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">Select Service</option>
                    @foreach($services as $service)
                        <option value="{{ $service->id }}">{{ $service->name }} - {{ $service->day }} {{ $service->start_time }}</option>
                    @endforeach
                </select>
                @error('service_id') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Date *</label>
                <input type="date" name="service_date" value="{{ old('service_date', now()->toDateString()) }}" required
                    class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                @error('service_date') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Member (if applicable)</label>
                <select name="member_id" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">Select Member</option>
                </select>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Visitor (if applicable)</label>
                <select name="visitor_id" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="">Select Visitor</option>
                </select>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Check-in Method *</label>
                <select name="check_in_method" required class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="manual" {{ old('check_in_method') === 'manual' ? 'selected' : '' }}>Manual</option>
                    <option value="digital" {{ old('check_in_method') === 'digital' ? 'selected' : '' }}>Digital</option>
                    <option value="qr_code" {{ old('check_in_method') === 'qr_code' ? 'selected' : '' }}>QR Code</option>
                </select>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Notes</label>
                <textarea name="notes" rows="3" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">{{ old('notes') }}</textarea>
            </div>

            <div class="flex items-center justify-end gap-4">
                <a href="{{ route('admin.attendance.index') }}" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)]">Cancel</a>
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Record Attendance</button>
            </div>
        </form>
    </div>
</div>
@endsection