@extends('layouts.dashboard')

@section('title', 'Form Les Privat')

@section('content')
<div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
    <form method="POST" action="{{ route('user.private-lesson.store') }}" enctype="multipart/form-data" class="grid gap-4 md:grid-cols-2">
        @csrf
        <input name="participant_name" value="{{ old('participant_name') }}" placeholder="Nama peserta" class="rounded-lg border border-slate-300 px-3 py-2" required>
        <input name="birth_date" type="date" value="{{ old('birth_date') }}" class="rounded-lg border border-slate-300 px-3 py-2">
        <select name="gender" class="rounded-lg border border-slate-300 px-3 py-2">
            <option value="">Jenis kelamin</option>
            <option value="L" @selected(old('gender') === 'L')>Laki-laki</option>
            <option value="P" @selected(old('gender') === 'P')>Perempuan</option>
        </select>
        <input name="parent_name" value="{{ old('parent_name') }}" placeholder="Orang tua/wali" class="rounded-lg border border-slate-300 px-3 py-2">
        <input name="phone" value="{{ old('phone') }}" placeholder="Nomor HP" class="rounded-lg border border-slate-300 px-3 py-2" required>
        <select name="schedule_id" class="rounded-lg border border-slate-300 px-3 py-2" required>
            @foreach($schedules as $schedule)
                @php($remaining = max(0, $schedule->quota - $schedule->active_private_lessons_count))
                <option value="{{ $schedule->id }}" @selected((string) old('schedule_id') === (string) $schedule->id) @disabled($remaining <= 0)>
                    {{ $schedule->trainer?->name }} · {{ $schedule->day }} {{ $schedule->start_time }}-{{ $schedule->end_time }} · Sisa {{ $remaining }}
                </option>
            @endforeach
        </select>
        <select id="packageName" name="package_name" class="rounded-lg border border-slate-300 px-3 py-2" required>
            @foreach($packagePrices as $package => $price)
                <option value="{{ $package }}" data-price="{{ $price }}" @selected(old('package_name') === $package)>{{ $package }}</option>
            @endforeach
        </select>
        <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-bold text-slate-700 md:col-span-2">
            Nominal paket: <span id="packagePrice">{{ \App\Support\LocaleFormat::money(collect($packagePrices)->first()) }}</span>
        </div>
        <textarea name="address" placeholder="Alamat" class="rounded-lg border border-slate-300 px-3 py-2 md:col-span-2" required>{{ old('address') }}</textarea>
        <label class="grid gap-1 text-sm font-bold">Berkas<input type="file" name="document_file" class="rounded-lg border border-slate-300 px-3 py-2"></label>
        <label class="grid gap-1 text-sm font-bold">Bukti Pembayaran<input type="file" name="proof_image" accept="image/*" class="rounded-lg border border-slate-300 px-3 py-2"></label>
        <div class="md:col-span-2">
            <button class="inline-flex items-center gap-2 rounded-lg bg-sky-700 px-4 py-2 font-bold text-white hover:bg-slate-950">
                <i data-lucide="send" class="h-4 w-4"></i>
                Kirim Pendaftaran
            </button>
        </div>
    </form>
</div>

<script>
    const packageName = document.getElementById('packageName');
    const packagePrice = document.getElementById('packagePrice');
    const formatter = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 });

    function syncPackagePrice() {
        const selected = packageName?.selectedOptions?.[0];
        if (!selected || !packagePrice) return;
        packagePrice.textContent = formatter.format(Number(selected.dataset.price || 0));
    }

    packageName?.addEventListener('change', syncPackagePrice);
    syncPackagePrice();
</script>
@endsection