@extends('layouts.main')

@section('content')
<div class="max-w-7xl mx-auto py-8">

    <h2 class="text-3xl font-bold mb-8 text-gray-800">
        Owner Revenue Dashboard
    </h2>

    {{-- Revenue Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">

        <div class="bg-white shadow rounded p-6">
            <h3 class="text-lg text-gray-600">Total Revenue</h3>
            <p class="text-3xl font-bold text-green-600">
                ₹{{ number_format($totalRevenue) }}
            </p>
        </div>

        <div class="bg-white shadow rounded p-6">
            <h3 class="text-lg text-gray-600">This Month Revenue</h3>
            <p class="text-3xl font-bold text-blue-600">
                ₹{{ number_format($monthlyRevenue) }}
            </p>
        </div>

    </div>

    {{-- Calendar Section --}}
    <div class="bg-white shadow rounded p-6 mb-10">

        <h3 class="text-xl font-semibold mb-4">
            📅 Booked Dates Calendar
        </h3>

        <input type="text" id="ownerCalendar"
            class="border p-3 rounded w-full"
            placeholder="Booked Dates">

    </div>

    {{-- Upcoming Bookings --}}
    <div class="bg-white shadow rounded p-6">

        <h3 class="text-xl font-semibold mb-4">
            📖 Upcoming Bookings
        </h3>

        @forelse($bookings as $booking)
            <div class="border-b py-4">

                <p><strong>Date:</strong> {{ $booking->booking_date }}</p>
                <p><strong>Groom:</strong> {{ $booking->groom_name }}</p>
                <p><strong>Bride:</strong> {{ $booking->bride_name }}</p>
                <p><strong>Guests:</strong> {{ $booking->guest_count }}</p>
                <p><strong>Revenue:</strong> ₹{{ $booking->advance_amount }}</p>

            </div>
        @empty
            <p class="text-gray-500">No bookings yet.</p>
        @endforelse

    </div>

</div>

{{-- Flatpickr --}}
<script>
document.addEventListener("DOMContentLoaded", function() {

    flatpickr("#ownerCalendar", {
        inline: true,
        dateFormat: "Y-m-d",
        disable: [],
        defaultDate: null,
        enable: @json($bookedDates),
    });

});
</script>

@endsection