@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-collection text-indigo-600 fs-4" style="color: #4f46e5;"></i>
                    <h4 class="fw-bold text-dark mb-0">Report Collection Tracker</h4>
                </div>
                <p class="text-muted small mb-0">Global auditing window for all approved operational field counters.</p>
            </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">Verified Ledger Transactions</h5>
            </div>
            <div class="card-body p-0">
                @if($approved_reports->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-folder-x fs-1 d-block mb-2 opacity-40"></i>
                        <h6 class="fw-semibold text-secondary">No Verified Logs</h6>
                        <p class="small text-muted mb-0">Once a regional manager approves a submission, it will instantly
                            securely populate here.</p>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table align-middle mb-0" style="min-width: 1000px;">
                            <thead class="bg-light text-secondary small fw-bold text-uppercase"
                                style="font-size: 11px; letter-spacing: 0.05em;">
                                <tr>
                                    <th class="py-3 px-4">Date</th>
                                    <th class="py-3">Field Agent</th>
                                    <th class="py-3">Exhibition Event</th>
                                    <th class="py-3 text-end">Sales Revenue</th>
                                    <th class="py-3 text-center">Visitors</th>
                                    <th class="py-3 text-center">Leads</th>
                                    <th class="py-3 text-center">Stall Media</th>
                                </tr>
                            </thead>
                            <tbody class="text-dark small" style="font-size: 13px;">
                                @foreach($approved_reports as $report)
                                    <tr class="border-bottom border-light">
                                        <td class="py-3 px-4 text-muted fw-medium">
                                            {{ $report->updated_at->format('d M, Y') }}
                                        </td>
                                        <td class="py-3 fw-bold text-dark">
                                            {{ $report->user->name }}
                                        </td>
                                        <td class="py-3">
                                            <span class="fw-semibold text-dark d-block">{{ $report->exhibition->name }}</span>
                                            <span class="text-muted extra-small"><i
                                                    class="bi bi-geo-alt me-1 text-danger"></i>{{ $report->exhibition->city }}</span>
                                        </td>
                                        <td class="py-3 text-end fw-bold text-success">
                                            ₹{{ number_format($report->sales_amount, 2) }}
                                        </td>
                                        <td class="py-3 text-center">{{ $report->visitor_count }}</td>
                                        <td class="py-3 text-center">
                                            <span
                                                class="badge bg-light text-dark border px-2.5 py-1 rounded-pill">{{ $report->lead_count }}</span>
                                        </td>
                                        <td class="py-3 text-center">
                                            @if($report->photo_path && is_array($report->photo_path))
                                                <div class="d-flex gap-1 justify-content-center">
                                                    @foreach($report->photo_path as $img)
                                                        <a href="{{ asset('storage/' . $img) }}" target="_blank"
                                                            class="border rounded p-0.5 bg-white shadow-sm">
                                                            <img src="{{ asset('storage/' . $img) }}"
                                                                style="width: 30px; height: 22px; object-fit: cover; border-radius: 2px;">
                                                        </a>
                                                    @endforeach
                                                </div>
                                            @else
                                                <span class="text-muted extra-small">None</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection