@extends('layouts.app')

@section('page-title', 'Laporan Pendapatan')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div class="flex items-center gap-3">
        <a href="{{ route('reports.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">Laporan Pendapatan</h2>
    </div>
</div>

<!-- Filter Tanggal -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-4 mb-6">
    <form method="GET" class="flex flex-wrap items-center gap-3">
        <input type="date" name="from" value="{{ $from->format('Y-m-d') }}"
               class="text-sm border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 outline-none">
        <span class="text-slate-400">s/d</span>
        <input type="date" name="to" value="{{ $to->format('Y-m-d') }}"
               class="text-sm border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 outline-none">
        <button type="submit" class="px-5 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-xl hover:bg-indigo-700">Terapkan</button>
    </form>
</div>

<!-- Ringkasan -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-6">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <p class="text-sm text-slate-500">Total Pendapatan</p>
        <p class="text-2xl font-bold text-green-600 mt-1">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</p>
        <p class="text-xs text-slate-400 mt-1">{{ $from->format('d M') }} – {{ $to->format('d M Y') }}</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <p class="text-sm text-slate-500">Transaksi</p>
        <p class="text-2xl font-bold text-slate-800 mt-1">{{ $payments->count() }}</p>
        <p class="text-xs text-slate-400 mt-1">Pembayaran selesai</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <p class="text-sm text-slate-500">Rata-rata per Transaksi</p>
        <p class="text-2xl font-bold text-slate-800 mt-1">
            Rp {{ $payments->count() ? number_format($totalRevenue / $payments->count(), 0, ',', '.') : '0' }}
        </p>
    </div>
</div>

<!-- Berdasarkan Metode -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-6">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <h3 class="font-semibold text-slate-800 mb-4">Pendapatan per Metode Pembayaran</h3>
        <div class="space-y-3">
            @foreach($byMethod as $method => $amount)
                <div class="flex items-center justify-between">
                    <span class="text-sm text-slate-600 capitalize">{{ str_replace('_', ' ', $method) }}</span>
                    <div class="flex items-center gap-3">
                        <div class="w-24 bg-slate-100 rounded-full h-2">
                            <div class="bg-indigo-500 h-2 rounded-full" style="width: {{ $totalRevenue > 0 ? ($amount / $totalRevenue * 100) : 0 }}%"></div>
                        </div>
                        <span class="text-sm font-medium text-slate-800 w-28 text-right">Rp {{ number_format($amount, 0, ',', '.') }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Pendapatan Harian -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5">
        <h3 class="font-semibold text-slate-800 mb-4">Pendapatan Harian</h3>
        <div class="space-y-1 max-h-48 overflow-y-auto">
            @forelse($dailyRevenue as $date => $amount)
                <div class="flex items-center justify-between py-1.5 text-sm">
                    <span class="text-slate-500">{{ \Carbon\Carbon::parse($date)->format('d M Y') }}</span>
                    <span class="font-medium text-slate-800">Rp {{ number_format($amount, 0, ',', '.') }}</span>
                </div>
            @empty
                <p class="text-slate-400 text-sm text-center py-4">Tidak ada data tersedia</p>
            @endforelse
        </div>
    </div>
</div>

<!-- Tabel Transaksi -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    <div class="px-5 py-4 border-b border-slate-100">
        <h3 class="font-semibold text-slate-800">Detail Transaksi</h3>
    </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-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Tanggal</th>
                    <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Reservasi</th>
                    <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Tamu</th>
                    <th class="text-left px-3 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Metode</th>
                    <th class="text-right px-5 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">Jumlah</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($payments as $payment)
                    <tr class="hover:bg-slate-50">
                        <td class="px-5 py-3 text-slate-600">{{ $payment->payment_date->format('d M Y') }}</td>
                        <td class="px-3 py-3">
                            <a href="{{ route('reservations.show', $payment->reservation) }}"
                               class="text-indigo-600 hover:text-indigo-800">{{ $payment->reservation->reservation_code }}</a>
                        </td>
                        <td class="px-3 py-3 text-slate-700">{{ $payment->reservation->guest->full_name }}</td>
                        <td class="px-3 py-3"><span class="badge-blue">{{ $payment->payment_method_label }}</span></td>
                        <td class="px-5 py-3 text-right font-medium text-slate-800">Rp {{ number_format($payment->amount, 0, ',', '.') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-5 py-8 text-center text-slate-400">Tidak ada pembayaran pada periode yang dipilih</td></tr>
                @endforelse
            </tbody>
            <tfoot class="bg-slate-50">
                <tr>
                    <td colspan="4" class="px-5 py-3 text-right font-bold text-slate-700">Total</td>
                    <td class="px-5 py-3 text-right font-bold text-green-700">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endsection