@extends('layouts.epelcon')
@section('title', 'Finance & Sales')

@section('content')
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Finance & sales</h1>
            <p class="text-sm text-slate-500">{{ $from->format('j M Y') }} → {{ $to->format('j M Y') }}</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('epelcon.finance.payments') }}" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">All payments</a>
        </div>
    </div>

    <form method="GET" class="mb-5 flex flex-wrap items-end gap-2">
        <label class="text-xs font-bold uppercase text-slate-500">From<br><input type="date" name="from" value="{{ $from->toDateString() }}" class="mt-1 rounded-xl border-0 bg-white py-2 text-sm shadow-sm ring-1 ring-slate-200"></label>
        <label class="text-xs font-bold uppercase text-slate-500">To<br><input type="date" name="to" value="{{ $to->toDateString() }}" class="mt-1 rounded-xl border-0 bg-white py-2 text-sm shadow-sm ring-1 ring-slate-200"></label>
        <button class="rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-bold text-white">Apply</button>
    </form>

    <div class="grid grid-cols-2 gap-3 sm:gap-4 xl:grid-cols-4">
        <div class="rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 p-5 text-white shadow-lg shadow-emerald-600/20">
            <p class="text-xs font-semibold uppercase tracking-wide text-emerald-100">Total revenue</p>
            <p class="mt-1 text-2xl font-extrabold sm:text-3xl">@money($summary['revenue'])</p>
        </div>
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <p class="text-xs font-bold uppercase text-slate-400">Expenses</p>
            <p class="mt-1 text-2xl font-extrabold text-rose-600">@money($summary['expenses'])</p>
        </div>
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <p class="text-xs font-bold uppercase text-slate-400">Net position</p>
            <p class="mt-1 text-2xl font-extrabold {{ $summary['net'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">@money($summary['net'])</p>
        </div>
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <p class="text-xs font-bold uppercase text-slate-400">Outstanding (bookings)</p>
            <p class="mt-1 text-2xl font-extrabold text-amber-600">@money($summary['outstanding_bookings'])</p>
        </div>
    </div>

    <div class="mt-5 grid gap-5 lg:grid-cols-3">
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200 lg:col-span-2">
            <h2 class="mb-3 font-bold text-slate-900">Daily revenue vs expenses</h2>
            <div class="h-64"><canvas id="finChart"></canvas></div>
        </div>

        <div class="space-y-5">
            <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <h2 class="mb-3 font-bold text-slate-900">Revenue streams</h2>
                <div class="space-y-2.5 text-sm">
                    @foreach ([['Rooms & bookings', $summary['rooms_revenue'], 'bg-indigo-500'], ['Food & beverage', $summary['fnb_revenue'], 'bg-orange-500'], ['Memberships', $summary['membership_revenue'], 'bg-violet-500']] as [$label, $value, $color])
                        <div>
                            <div class="flex justify-between"><span class="text-slate-600">{{ $label }}</span><span class="font-bold text-slate-900">@money($value)</span></div>
                            <div class="mt-1 h-2 rounded-full bg-slate-100"><div class="h-2 rounded-full {{ $color }}" style="width: {{ $summary['revenue'] > 0 ? round($value / $summary['revenue'] * 100) : 0 }}%"></div></div>
                        </div>
                    @endforeach
                </div>
                <p class="mt-3 text-xs text-slate-400">{{ $summary['bookings'] }} bookings · {{ $summary['orders'] }} orders in period</p>
            </div>

            <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <h2 class="mb-3 font-bold text-slate-900">By payment method</h2>
                <div class="space-y-2 text-sm">
                    @forelse ($byMethod as $method)
                        <div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2">
                            <span class="font-semibold uppercase text-slate-600">{{ $method->method }} <span class="font-normal text-slate-400">×{{ $method->cnt }}</span></span>
                            <span class="font-bold text-slate-900">@money($method->total)</span>
                        </div>
                    @empty
                        <p class="text-sm text-slate-400">No payments in this period.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    new Chart(document.getElementById('finChart'), {
        type: 'bar',
        data: {
            labels: @json($daily->pluck('label')),
            datasets: [
                { label: 'Revenue', data: @json($daily->pluck('revenue')), backgroundColor: '#10b981', borderRadius: 6 },
                { label: 'Expenses', data: @json($daily->pluck('expenses')), backgroundColor: '#f43f5e', borderRadius: 6 },
            ],
        },
        options: {
            maintainAspectRatio: false,
            plugins: { legend: { labels: { boxWidth: 12, usePointStyle: true } } },
            scales: { y: { ticks: { callback: v => '{{ $CUR }}' + (v >= 1000 ? (v / 1000) + 'k' : v) }, grid: { color: '#f1f5f9' } }, x: { grid: { display: false } } },
        },
    });
});
</script>
@endpush
