@extends('layouts.app')

@section('page-title', 'Reservasi ' . $reservation->reservation_code)

@section('content')
<div class="flex items-center justify-between mb-6">
    <div class="flex items-center gap-3">
        <a href="{{ route('reservations.index') }}" class="text-slate-400 hover:text-slate-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
        <h2 class="text-xl font-bold text-slate-800">{{ $reservation->reservation_code }}</h2>
        <span class="badge-{{ $reservation->status_color }} text-sm px-3 py-1">{{ ucfirst(str_replace('_', ' ', $reservation->status)) }}</span>
    </div>
    <div class="flex items-center gap-2">
        @if($reservation->status === 'pending')
            <form method="POST" action="{{ route('reservations.confirm', $reservation) }}">
                @csrf @method('PATCH')
                <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-xl">Konfirmasi</button>
            </form>
        @endif
        @if(in_array($reservation->status, ['pending', 'confirmed']))
            <a href="{{ route('reservations.edit', $reservation) }}"
               class="px-4 py-2 text-sm font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-xl">Ubah</a>
            <form method="POST" action="{{ route('reservations.cancel', $reservation) }}"
                  onsubmit="return confirm('Batalkan reservasi ini?')">
                @csrf @method('PATCH')
                <button type="submit" class="px-4 py-2 text-sm font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-xl">Batalkan</button>
            </form>
        @endif
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Kiri: Info Utama -->
    <div class="lg:col-span-2 space-y-5">
        <!-- Detail Reservasi -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
            <h3 class="font-semibold text-slate-800 mb-4">Detail Reservasi</h3>
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <p class="text-slate-400 text-xs mb-1">Kode Reservasi</p>
                    <p class="font-mono font-bold text-slate-800">{{ $reservation->reservation_code }}</p>
                </div>
                <div>
                    <p class="text-slate-400 text-xs mb-1">Sumber Pemesanan</p>
                    <p class="font-medium text-slate-700">{{ ucfirst(str_replace('_', ' ', $reservation->source)) }}</p>
                </div>
                <div>
                    <p class="text-slate-400 text-xs mb-1">Tanggal Check-in</p>
                    <p class="font-medium text-slate-700">{{ $reservation->check_in_date->format('d F Y') }}</p>
                    @if($reservation->checked_in_at)
                        <p class="text-xs text-green-600">Check-in pada {{ $reservation->checked_in_at->format('H:i') }}</p>
                    @endif
                </div>
                <div>
                    <p class="text-slate-400 text-xs mb-1">Tanggal Check-out</p>
                    <p class="font-medium text-slate-700">{{ $reservation->check_out_date->format('d F Y') }}</p>
                    @if($reservation->checked_out_at)
                        <p class="text-xs text-blue-600">Check-out pada {{ $reservation->checked_out_at->format('H:i') }}</p>
                    @endif
                </div>
                <div>
                    <p class="text-slate-400 text-xs mb-1">Durasi</p>
                    <p class="font-medium text-slate-700">{{ $reservation->months }} bulan</p>
                </div>
                <div>
                    <p class="text-slate-400 text-xs mb-1">Jumlah Tamu</p>
                    <p class="font-medium text-slate-700">{{ $reservation->number_of_guests }} orang</p>
                </div>
                @if($reservation->early_checkin_fee > 0)
                    <div>
                        <p class="text-slate-400 text-xs mb-1">Biaya Check-in Lebih Awal</p>
                        <p class="font-medium text-slate-700">Rp {{ number_format($reservation->early_checkin_fee, 0, ',', '.') }}</p>
                    </div>
                @endif
                @if($reservation->late_checkout_fee > 0)
                    <div>
                        <p class="text-slate-400 text-xs mb-1">Biaya Check-out Terlambat</p>
                        <p class="font-medium text-slate-700">Rp {{ number_format($reservation->late_checkout_fee, 0, ',', '.') }}</p>
                    </div>
                @endif
                @if($reservation->notes)
                    <div class="col-span-2">
                        <p class="text-slate-400 text-xs mb-1">Catatan</p>
                        <p class="text-slate-700">{{ $reservation->notes }}</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Riwayat Pembayaran -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100">
            <div class="flex items-center justify-between px-5 py-4 border-b border-slate-100">
                <h3 class="font-semibold text-slate-800">Riwayat Pembayaran</h3>
                <div class="flex items-center gap-2">
                    <span class="badge-{{ $reservation->payment_status_color }}">{{ ucfirst($reservation->payment_status) }}</span>
                    @if($reservation->payment_status !== 'paid')
                        <a href="{{ route('payments.create', ['reservation_id' => $reservation->id]) }}"
                           class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">+ Tambah Pembayaran</a>
                    @endif
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="text-left px-5 py-2 text-xs font-medium text-slate-500 uppercase tracking-wider">Tanggal</th>
                            <th class="text-left px-3 py-2 text-xs font-medium text-slate-500 uppercase tracking-wider">Metode</th>
                            <th class="text-left px-3 py-2 text-xs font-medium text-slate-500 uppercase tracking-wider">Ref</th>
                            <th class="text-right px-5 py-2 text-xs font-medium text-slate-500 uppercase tracking-wider">Jumlah</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @forelse($reservation->payments as $payment)
                            <tr>
                                <td class="px-5 py-2.5 text-slate-600">{{ $payment->payment_date->format('d M Y') }}</td>
                                <td class="px-3 py-2.5 text-slate-600">{{ $payment->payment_method_label }}</td>
                                <td class="px-3 py-2.5 text-slate-500 font-mono text-xs">{{ $payment->reference_number ?: '—' }}</td>
                                <td class="px-5 py-2.5 text-right font-medium text-slate-800">
                                    Rp {{ number_format($payment->amount, 0, ',', '.') }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-5 py-5 text-center text-slate-400">Belum ada pembayaran tercatat</td>
                            </tr>
                        @endforelse
                    </tbody>
                    @if($reservation->payments->count())
                        <tfoot class="bg-slate-50">
                            <tr>
                                <td colspan="3" class="px-5 py-2.5 text-sm font-medium text-slate-700 text-right">Total Dibayar</td>
                                <td class="px-5 py-2.5 text-right font-bold text-green-700">Rp {{ number_format($reservation->total_paid, 0, ',', '.') }}</td>
                            </tr>
                            @if($reservation->remaining_balance > 0)
                                <tr>
                                    <td colspan="3" class="px-5 py-2.5 text-sm font-medium text-slate-700 text-right">Sisa</td>
                                    <td class="px-5 py-2.5 text-right font-bold text-red-600">Rp {{ number_format($reservation->remaining_balance, 0, ',', '.') }}</td>
                                </tr>
                            @endif
                        </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>

    <!-- Kanan: Tamu + Kamar + Ringkasan -->
    <div class="space-y-5">
        <!-- Tamu -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
            <h3 class="font-semibold text-slate-800 mb-3">Tamu</h3>
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-700 font-bold">
                    {{ strtoupper(substr($reservation->guest->full_name, 0, 1)) }}
                </div>
                <div>
                    <a href="{{ route('guests.show', $reservation->guest) }}"
                       class="font-medium text-slate-800 hover:text-indigo-600">{{ $reservation->guest->full_name }}</a>
                    <p class="text-xs text-slate-400">{{ $reservation->guest->phone }}</p>
                </div>
            </div>
        </div>

        <!-- Kamar -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
            <h3 class="font-semibold text-slate-800 mb-3">Kamar</h3>
            <div class="text-sm space-y-2">
                <div class="flex justify-between">
                    <span class="text-slate-500">Nomor Kamar</span>
                    <span class="font-medium text-slate-800">{{ $reservation->room->room_number }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500">Tipe</span>
                    <span class="text-slate-700">{{ $reservation->room->roomType->name }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500">Lantai</span>
                    <span class="text-slate-700">{{ $reservation->room->floor }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500">Harga/bulan</span>
                    <span class="text-slate-700">Rp {{ number_format($reservation->room->roomType->price_per_month, 0, ',', '.') }}</span>
                </div>
            </div>
        </div>

        <!-- Ringkasan -->
        <div class="bg-indigo-50 rounded-2xl border border-indigo-100 p-5">
            <h3 class="font-semibold text-slate-800 mb-3">Ringkasan</h3>
            <div class="text-sm space-y-2">
                <div class="flex justify-between">
                    <span class="text-slate-600">Kamar ({{ $reservation->months }} bulan)</span>
                    <span>Rp {{ number_format($reservation->room->roomType->price_per_month * $reservation->months, 0, ',', '.') }}</span>
                </div>
                @if($reservation->early_checkin_fee > 0)
                    <div class="flex justify-between">
                        <span class="text-slate-600">Check-in Lebih Awal</span>
                        <span>Rp {{ number_format($reservation->early_checkin_fee, 0, ',', '.') }}</span>
                    </div>
                @endif
                @if($reservation->late_checkout_fee > 0)
                    <div class="flex justify-between">
                        <span class="text-slate-600">Check-out Terlambat</span>
                        <span>Rp {{ number_format($reservation->late_checkout_fee, 0, ',', '.') }}</span>
                    </div>
                @endif
                <div class="flex justify-between font-bold text-base pt-2 border-t border-indigo-200">
                    <span>Total</span>
                    <span class="text-indigo-700">Rp {{ number_format($reservation->total_price, 0, ',', '.') }}</span>
                </div>
            </div>

            <!-- Buat Faktur -->
            @if(!$reservation->invoice && in_array($reservation->status, ['checked_in', 'checked_out']))
                <form method="POST" action="{{ route('invoices.generate', $reservation) }}" class="mt-3">
                    @csrf
                    <button type="submit" class="w-full py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-xl">
                        Buat Faktur
                    </button>
                </form>
            @elseif($reservation->invoice)
                <div class="mt-3 space-y-2">
                    <a href="{{ route('invoices.show', $reservation->invoice) }}"
                       class="block w-full py-2 text-sm font-medium text-center text-indigo-700 bg-indigo-100 hover:bg-indigo-200 rounded-xl">
                        Lihat Faktur
                    </a>
                    <a href="{{ route('invoices.download', $reservation->invoice) }}"
                       class="block w-full py-2 text-sm font-medium text-center text-white bg-slate-700 hover:bg-slate-800 rounded-xl flex items-center justify-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        Download PDF
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection