@extends('layouts.app')

@section('page-title', 'Faktur ' . $invoice->invoice_number)

@section('content')
<div class="flex items-center justify-between mb-6">
    <div class="flex items-center gap-3">
        <a href="{{ route('reservations.show', $invoice->reservation) }}" 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">Faktur {{ $invoice->invoice_number }}</h2>
        <span class="badge-{{ $invoice->payment_status === 'paid' ? 'green' : ($invoice->payment_status === 'partial' ? 'yellow' : 'red') }}">
            {{ ucfirst($invoice->payment_status) }}
        </span>
    </div>
    <div class="flex items-center gap-2">
        <a href="{{ route('invoices.download', $invoice) }}"
           class="flex items-center gap-2 bg-slate-700 text-white px-4 py-2 rounded-xl hover:bg-slate-800 text-sm">
            <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>
        <a href="{{ route('invoices.print', $invoice) }}" target="_blank"
           class="flex items-center gap-2 border border-slate-200 text-slate-600 px-4 py-2 rounded-xl hover:bg-slate-50 text-sm">
            <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
            </svg>
            Cetak Faktur
        </a>
    </div>
</div>

<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8">
        <!-- Header -->
        <div class="flex justify-between mb-8">
            <div>
                <h1 class="text-2xl font-bold text-indigo-700">{{ config('app.name', 'Kosan') }}</h1>
                <p class="text-slate-500 text-sm mt-1">Sistem Manajemen Kosan</p>
            </div>
            <div class="text-right">
                <h2 class="text-lg font-bold text-slate-800">FAKTUR</h2>
                <p class="font-mono text-indigo-600 font-bold">{{ $invoice->invoice_number }}</p>
                <p class="text-sm text-slate-500">Diterbitkan: {{ $invoice->issued_at->format('d M Y') }}</p>
            </div>
        </div>

        <!-- Info Tamu & Reservasi -->
        <div class="grid grid-cols-2 gap-6 mb-8 pb-6 border-b border-slate-100">
            <div>
                <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-2">Tagihan Kepada</p>
                <p class="font-bold text-slate-800">{{ $invoice->reservation->guest->full_name }}</p>
                <p class="text-sm text-slate-600">{{ $invoice->reservation->guest->email }}</p>
                <p class="text-sm text-slate-600">{{ $invoice->reservation->guest->phone }}</p>
                @if($invoice->reservation->guest->address)
                    <p class="text-sm text-slate-500 mt-1">{{ $invoice->reservation->guest->address }}</p>
                @endif
            </div>
            <div>
                <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-2">Detail Reservasi</p>
                <table class="text-sm">
                    <tr><td class="text-slate-500 pr-4">Kode</td><td class="font-mono font-medium">{{ $invoice->reservation->reservation_code }}</td></tr>
                    <tr><td class="text-slate-500 pr-4">Kamar</td><td>{{ $invoice->reservation->room->room_number }} ({{ $invoice->reservation->room->roomType->name }})</td></tr>
                    <tr><td class="text-slate-500 pr-4">Check-in</td><td>{{ $invoice->reservation->check_in_date->format('d M Y') }}</td></tr>
                    <tr><td class="text-slate-500 pr-4">Check-out</td><td>{{ $invoice->reservation->check_out_date->format('d M Y') }}</td></tr>
                    <tr><td class="text-slate-500 pr-4">Durasi</td><td>{{ $invoice->reservation->months }} bulan</td></tr>
                </table>
            </div>
        </div>

        <!-- Rincian -->
        <table class="w-full text-sm mb-6">
            <thead>
                <tr class="border-b-2 border-slate-200">
                    <th class="text-left py-2 text-slate-600 font-medium">Deskripsi</th>
                    <th class="text-right py-2 text-slate-600 font-medium">Jumlah</th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b border-slate-100">
                    <td class="py-3 text-slate-700">
                        Kamar {{ $invoice->reservation->room->room_number }} — {{ $invoice->reservation->room->roomType->name }}<br>
                        <span class="text-xs text-slate-400">{{ $invoice->reservation->months }} bulan × Rp {{ number_format($invoice->reservation->room->roomType->price_per_month, 0, ',', '.') }}</span>
                    </td>
                    <td class="py-3 text-right font-medium">Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</td>
                </tr>
                @if($invoice->reservation->early_checkin_fee > 0)
                    <tr class="border-b border-slate-100">
                        <td class="py-2 text-slate-600">Biaya Check-in Lebih Awal</td>
                        <td class="py-2 text-right">Rp {{ number_format($invoice->reservation->early_checkin_fee, 0, ',', '.') }}</td>
                    </tr>
                @endif
                @if($invoice->reservation->late_checkout_fee > 0)
                    <tr class="border-b border-slate-100">
                        <td class="py-2 text-slate-600">Biaya Check-out Terlambat</td>
                        <td class="py-2 text-right">Rp {{ number_format($invoice->reservation->late_checkout_fee, 0, ',', '.') }}</td>
                    </tr>
                @endif
            </tbody>
            <tfoot>
                <tr>
                    <td class="py-2 text-right text-slate-500 pr-4" colspan="1">Subtotal</td>
                    <td class="py-2 text-right">Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</td>
                </tr>
                <tr>
                    <td class="py-2 text-right text-slate-500 pr-4">Pajak ({{ number_format(config('hotel.tax_rate', 0.11) * 100, 0) }}%)</td>
                    <td class="py-2 text-right">Rp {{ number_format($invoice->tax, 0, ',', '.') }}</td>
                </tr>
                <tr>
                    <td class="py-2 text-right text-slate-500 pr-4">Biaya Layanan ({{ number_format(config('hotel.service_charge_rate', 0.10) * 100, 0) }}%)</td>
                    <td class="py-2 text-right">Rp {{ number_format($invoice->service_charge, 0, ',', '.') }}</td>
                </tr>
                @if($invoice->discount > 0)
                    <tr>
                        <td class="py-2 text-right text-green-600 pr-4">Diskon</td>
                        <td class="py-2 text-right text-green-600">-Rp {{ number_format($invoice->discount, 0, ',', '.') }}</td>
                    </tr>
                @endif
                <tr class="border-t-2 border-slate-800">
                    <td class="py-3 text-right font-bold text-lg pr-4">Total Keseluruhan</td>
                    <td class="py-3 text-right font-bold text-lg text-indigo-700">Rp {{ number_format($invoice->grand_total, 0, ',', '.') }}</td>
                </tr>
            </tfoot>
        </table>

        <!-- Info Pembayaran -->
        @if($invoice->payments->count())
            <div class="bg-green-50 rounded-xl p-4 mb-4">
                <p class="text-sm font-medium text-green-800 mb-2">Pembayaran Diterima</p>
                @foreach($invoice->payments as $payment)
                    <div class="flex justify-between text-sm text-green-700">
                        <span>{{ $payment->payment_date->format('d M Y') }} — {{ $payment->payment_method_label }}</span>
                        <span>Rp {{ number_format($payment->amount, 0, ',', '.') }}</span>
                    </div>
                @endforeach
            </div>
        @endif

        @if($invoice->remaining_balance > 0)
            <div class="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">
                Sisa Tagihan: <strong>Rp {{ number_format($invoice->remaining_balance, 0, ',', '.') }}</strong>
            </div>
        @endif

        <!-- Footer -->
        <div class="mt-8 pt-4 border-t border-slate-100 text-center text-xs text-slate-400">
            <p>Terima kasih telah menginap bersama kami!</p>
            <p>{{ config('app.name') }} • {{ config('app.url') }}</p>
        </div>
    </div>
</div>
@endsection