@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 ?? 'N/A' }}
                            </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 ?? 'N/A'
                                    }}
                                </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">Invoice Code</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;">
                        {{-- 📍 FIXED: Using relational data metrics array parsed stream from controller --}}
                        @forelse($customer_bills_stream as $bill)
                        <tr class="border-bottom border-light">
                            <td class="ps-4 py-3 text-muted">
                                {{ \Carbon\Carbon::parse($bill->purchase_date)->format('d M, Y') }}
                            </td>
                            <td class="text-secondary font-monospace small">
                                {{ $bill->bill_number }}
                            </td>
                            <td class="fw-bold text-dark">
                                {{ $bill->customer->name ?? 'N/A' }}
                            </td>
                            <td>
                                <span class="badge bg-light text-dark border px-2.5 py-1.5 rounded-pill">
                                    {{ $bill->customer->city ?? 'N/A' }}
                                </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="5" 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