@extends('layouts.dashboard')

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

@section('content')
@php
    $statusClass = function ($status) {
        $value = strtolower((string) $status);

        return match (true) {
            str_contains($value, 'diterima'), str_contains($value, 'aktif'), str_contains($value, 'accepted') => 'bg-emerald-100 text-emerald-700 ring-emerald-200',
            str_contains($value, 'menunggu'), str_contains($value, 'belum'), str_contains($value, 'proses') => 'bg-amber-100 text-amber-700 ring-amber-200',
            str_contains($value, 'ditolak'), str_contains($value, 'batal') => 'bg-rose-100 text-rose-700 ring-rose-200',
            str_contains($value, 'selesai') => 'bg-sky-100 text-sky-700 ring-sky-200',
            default => 'bg-slate-100 text-slate-700 ring-slate-200',
        };
    };
@endphp

<div class="grid gap-4">
@forelse($registrations as $registration)
    @php
        $attendedCount = $registration->sessions->where('is_attended', true)->count();
        $totalMeetings = $registration->sessions->count();
    @endphp

    <article class="rounded-lg border border-cyan-100 bg-white p-5 shadow-sm">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <p class="font-black text-cyan-950">{{ $registration->participant_name }}</p>
                <p class="mt-1 text-sm text-slate-600">{{ $registration->package_name }} - {{ $registration->schedule?->day ?? '-' }} {{ $registration->schedule?->start_time }}-{{ $registration->schedule?->end_time }}</p>
                <p class="mt-1 text-sm text-slate-600">{{ $registration->user?->name }} - {{ $registration->phone }}</p>
                <p class="mt-1 text-sm font-semibold text-slate-600">{{ \App\Support\LocaleFormat::money($registration->price) }}</p>
                @if($totalMeetings > 0)
                    <p class="mt-1 text-sm font-black text-emerald-700">{{ $attendedCount }}/{{ $totalMeetings }} pertemuan selesai</p>
                @endif
            </div>
            <div class="flex flex-wrap gap-2 text-xs font-black">
                <span class="rounded-full px-2.5 py-1 ring-1 {{ $statusClass($registration->payment_status) }}">{{ str($registration->payment_status)->replace('_', ' ')->title() }}</span>
                <span class="rounded-full px-2.5 py-1 ring-1 {{ $statusClass($registration->registration_status) }}">{{ str($registration->registration_status)->replace('_', ' ')->title() }}</span>
            </div>
        </div>

        @if($registration->payment?->proof_image || $registration->admin_note)
            <div class="mt-4 flex flex-wrap items-center gap-2">
                @if($registration->payment?->proof_image)
                    <a href="{{ route('payments.proof', $registration->payment) }}" target="_blank" class="inline-flex items-center gap-2 rounded-md bg-sky-50 px-3 py-2 text-sm font-black text-sky-700 hover:bg-sky-100">
                        <i data-lucide="image" class="h-4 w-4"></i>
                        Bukti pembayaran
                    </a>
                @endif
                @if($registration->admin_note)
                    <span class="rounded-md bg-cyan-50 px-3 py-2 text-sm font-semibold text-cyan-700">Catatan: {{ $registration->admin_note }}</span>
                @endif
            </div>
        @endif

        @if($totalMeetings > 0)
            <form method="POST" action="{{ route('trainer.private-lessons.sessions.update', $registration) }}" enctype="multipart/form-data" class="mt-5 rounded-lg border border-cyan-100 bg-cyan-50/70 p-4">
                @csrf
                @method('PUT')

                <div class="flex flex-wrap items-center justify-between gap-2">
                    <div>
                        <p class="font-black text-cyan-950">Jadwal, absensi, dan bukti les</p>
                        <p class="mt-1 text-sm text-slate-600">Centang pertemuan yang sudah les, upload bukti, lalu simpan.</p>
                    </div>
                    <button class="inline-flex items-center gap-2 rounded-lg bg-orange-400 px-4 py-2 text-sm font-black text-cyan-950 hover:bg-amber-300">
                        <i data-lucide="save" class="h-4 w-4"></i>
                        Simpan les
                    </button>
                </div>

                <div class="mt-4 grid gap-3">
                    @foreach($registration->sessions as $session)
                        <div class="grid gap-3 rounded-lg border border-cyan-100 bg-white p-3 text-sm xl:grid-cols-[110px_170px_120px_120px_140px_1fr] xl:items-center">
                            <p class="font-black text-cyan-950">Ke-{{ $session->meeting_number }}</p>
                            <label class="grid gap-1 text-xs font-black text-cyan-900">
                                Hari/tanggal
                                <input type="date" name="sessions[{{ $session->id }}][lesson_date]" value="{{ $session->lesson_date?->format('Y-m-d') }}" class="rounded-md border border-cyan-200 px-3 py-2 text-sm font-semibold text-slate-700">
                            </label>
                            <label class="grid gap-1 text-xs font-black text-cyan-900">
                                Mulai
                                <input type="time" name="sessions[{{ $session->id }}][start_time]" value="{{ $session->start_time ? substr($session->start_time, 0, 5) : '' }}" class="rounded-md border border-cyan-200 px-3 py-2 text-sm font-semibold text-slate-700">
                            </label>
                            <label class="grid gap-1 text-xs font-black text-cyan-900">
                                Selesai
                                <input type="time" name="sessions[{{ $session->id }}][end_time]" value="{{ $session->end_time ? substr($session->end_time, 0, 5) : '' }}" class="rounded-md border border-cyan-200 px-3 py-2 text-sm font-semibold text-slate-700">
                            </label>
                            <label class="inline-flex items-center gap-2 rounded-md bg-emerald-50 px-3 py-2 text-sm font-black text-emerald-700">
                                <input type="checkbox" name="sessions[{{ $session->id }}][is_attended]" value="1" class="h-4 w-4 rounded border-emerald-300 text-emerald-600" @checked($session->is_attended)>
                                Sudah les
                            </label>
                            <input name="sessions[{{ $session->id }}][note]" value="{{ $session->note }}" placeholder="Catatan/bukti ringkas" class="rounded-md border border-cyan-200 px-3 py-2 text-sm">
                            <div class="grid gap-2 xl:col-span-6">
                                <div class="flex flex-wrap items-center gap-2 text-xs font-black">
                                    <span class="{{ $session->is_attended ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }} rounded-md px-3 py-1.5">
                                        {{ $session->is_attended ? 'Sudah les' : 'Terjadwal' }}
                                    </span>
                                    <span class="rounded-md bg-cyan-50 px-3 py-1.5 text-cyan-700">
                                        {{ $session->lesson_date?->translatedFormat('l, d M Y') }}
                                    </span>
                                </div>
                                <label class="grid gap-1 text-xs font-black text-cyan-900">
                                    Upload bukti les
                                    <input type="file" name="sessions[{{ $session->id }}][proof_file]" accept="image/*,.pdf" class="w-full rounded-md border border-cyan-200 bg-white px-3 py-2 text-xs font-semibold">
                                </label>
                                @if($session->proof_file)
                                    <a href="{{ route('public-storage.show', $session->proof_file) }}" target="_blank" class="inline-flex items-center gap-1 text-xs font-black text-cyan-700 hover:text-orange-600">
                                        <i data-lucide="paperclip" class="h-3.5 w-3.5"></i>
                                        Lihat bukti les
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </form>
        @else
            <p class="mt-4 rounded-lg bg-slate-50 p-3 text-sm text-slate-600">Jadwal pertemuan akan muncul setelah admin menerima pendaftaran.</p>
        @endif
    </article>
@empty
    <div class="rounded-lg border border-dashed border-cyan-200 bg-white p-5 text-slate-500 shadow-sm">Belum ada pendaftaran les privat.</div>
@endforelse
</div>
@endsection