@extends('layouts.app')

@section('content')
    <div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <div class="d-flex align-items-center gap-2 mb-1">
                    <i class="bi bi-file-earmark-bar-graph text-indigo-600 fs-4" style="color: #4f46e5;"></i>
                    <h4 class="fw-bold text-dark mb-0">Sales Performance Ledger</h4>
                </div>
                <p class="text-muted small mb-0">Comprehensive audit of physical retail billing and approved on-field
                    exhibition streams.</p>
            </div>
            <button onclick="window.print()" class="btn btn-dark btn-sm px-3 shadow-sm" style="border-radius: 8px;">
                <i class="bi bi-printer me-1"></i> Print Report
            </button>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm rounded-4 text-white p-4 h-100"
                    style="background: linear-gradient(135deg, #2563eb, #1d4ed8);">
                    <span class="text-white-50 small text-uppercase fw-bold"
                        style="font-size: 11px; letter-spacing: 0.05em;">Total Period Retail Billings</span>
                    <h2 class="fw-bold mt-2 mb-0">₹{{ number_format($total_customer_sales, 2) }}</h2>
                    <div class="small text-white-50 mt-2">
                        <i class="bi bi-shop me-1"></i> Direct client bills registered
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card border-0 shadow-sm rounded-4 text-white p-4 h-100"
                    style="background: linear-gradient(135deg, #10b981, #047857);">
                    <span class="text-white-50 small text-uppercase fw-bold"
                        style="font-size: 11px; letter-spacing: 0.05em;">Live Exhibition Field Revenue</span>
                    <h2 class="fw-bold mt-2 mb-0">₹{{ number_format($total_exhibition_sales, 2) }}</h2>
                    <div class="small text-white-50 mt-2">
                        <i class="bi bi-broadcast me-1"></i> On-site manager verified counters
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-header bg-white border-bottom py-3 px-4">
                <h5 class="mb-0 fw-bold text-dark">Exhibition Stream Earnings</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="bg-light text-secondary small fw-bold text-uppercase"
                            style="font-size: 11px; letter-spacing: 0.05em;">
                            <tr>
                                <th class="ps-4 py-3">Event Name</th>
                                <th class="py-3">Location & City</th>
                                <th class="py-3 text-end pe-4">Approved Total Revenue</th>
                            </tr>
                        </thead>
                        <tbody class="text-dark small" style="font-size: 13px;">
                            @forelse($exhibition_stream as $stream)
                                <tr class="border-bottom border-light">
                                    <td class="ps-4 fw-bold text-dark py-3">
                                        {{ $stream->exhibition->name }}
                                    </td>
                                    <td>
                                        <span class="badge bg-light text-dark border px-2.5 py-1.5 rounded-pill">
                                            <i class="bi bi-geo-alt text-danger me-1"></i>{{ $stream->exhibition->city }}
                                        </span>
                                    </td>
                                    <td class="text-end pe-4 fw-bold text-success" style="font-size: 14px;">
                                        ₹{{ number_format($stream->sales_amount, 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center py-5 text-muted">
                                        <i class="bi bi-file-earmark-excel fs-2 d-block mb-2 opacity-40"></i>
                                        <span>No verified exhibition metrics recorded yet.</span>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-header bg-white border-bottom py-3 px-4">
                <h5 class="mb-0 fw-bold text-dark">Customer Billing Registers</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="bg-light text-secondary small fw-bold text-uppercase"
                            style="font-size: 11px; letter-spacing: 0.05em;">
                            <tr>
                                <th class="ps-4 py-3">Date</th>
                                <th class="py-3">Customer Name</th>
                                <th class="py-3">City</th>
                                <th class="py-3 text-end pe-4">Amount</th>
                            </tr>
                        </thead>
                        <tbody class="text-dark small" style="font-size: 13px;">
                            @php
                                // Fetching the original customer bills context directly via Model relation standard
                                $customer_bills = \App\Models\Customer::latest()->get();
                            @endphp

                            @forelse($customer_bills as $bill)
                                <tr class="border-bottom border-light">
                                    <td class="ps-4 py-3 text-muted">
                                        {{ $bill->created_at ? $bill->created_at->format('Y-m-d') : '2026-05-14' }}
                                    </td>
                                    <td class="fw-bold text-dark">
                                        {{ $bill->name }}
                                    </td>
                                    <td>
                                        <span class="badge bg-light text-dark border px-2.5 py-1.5 rounded-pill">
                                            {{ $bill->city }}
                                        </span>
                                    </td>
                                    <td class="text-end pe-4 fw-bold text-primary" style="font-size: 14px;">
                                        ₹{{ number_format($bill->bill_amount, 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5 text-muted">
                                        <i class="bi bi-receipt fs-2 d-block mb-2 opacity-40"></i>
                                        <span>No shop customer registrations recorded yet.</span>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection