@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-check-fill text-indigo-600 fs-4" style="color: #4f46e5;"></i>
                    <h4 class="fw-bold text-dark mb-0">Report Verification Desk</h4>
                </div>
                <p class="text-muted small mb-0">Validate incoming data logs, sales metrics, and venue attachments before
                    final ledger commit.</p>
            </div>
            <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary px-3 shadow-sm"
                style="border-radius: 10px; font-weight: 500;">
                <i class="bi bi-house-door me-1"></i> Dashboard Home
            </a>
        </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">Pending Clearance Pipeline</h5>
            </div>
            <div class="card-body p-0">
                @if($reports->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-inbox-fill fs-1 d-block mb-3 opacity-30 text-secondary"></i>
                        <h6 class="fw-semibold text-secondary">Pipeline Clear</h6>
                        <p class="small text-muted mb-0">All incoming field submission logs have been processed successfully.
                        </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">Field Agent</th>
                                    <th class="py-3">Exhibition Details</th>
                                    <th class="py-3 text-end">Sales Amount</th>
                                    <th class="py-3 text-center">Visitor Footfall</th>
                                    <th class="py-3 text-center">Leads Captured</th>
                                    <th class="py-3 text-center">Stall Image</th>
                                    <th class="py-3 text-end px-4">Verification Actions</th>
                                </tr>
                            </thead>
                            <tbody class="text-dark small" style="font-size: 13px;">
                                @foreach($reports as $report)
                                    <tr class="border-bottom border-light">
                                        <td class="py-3 px-4">
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="bg-indigo-100 text-indigo-700 rounded-circle d-flex align-items-center justify-content-center fw-bold shadow-sm"
                                                    style="width: 34px; height: 34px; background-color: #e0e7ff; color: #4338ca;">
                                                    {{ strtoupper(substr($report->user->name, 0, 2)) }}
                                                </div>
                                                <div>
                                                    <span class="fw-bold d-block text-dark">{{ $report->user->name }}</span>
                                                    <span class="text-muted extra-small"
                                                        style="font-size: 11px;">{{ $report->user->email }}</span>
                                                </div>
                                            </div>
                                        </td>

                                        <td class="py-3">
                                            <span class="fw-semibold d-block text-dark">{{ $report->exhibition->name }}</span>
                                            <span class="text-muted extra-small d-block" style="font-size: 11px;">
                                                <i class="bi bi-geo-alt-fill text-danger me-1"></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 fw-medium">
                                            {{ $report->visitor_count }}
                                        </td>

                                        <td class="py-3 text-center fw-medium">
                                            <span
                                                class="badge bg-light text-dark border px-2.5 py-1.5 rounded-pill">{{ $report->lead_count }}</span>
                                        </td>

                                        <td class="text-center py-2" style="width: 120px;">
                                            @if($report->photo_path && is_array($report->photo_path) && count($report->photo_path) > 0)
                                                <div id="carouselReport{{ $report->id }}"
                                                    class="carousel slide carousel-fade shadow-sm border rounded bg-white p-0.5"
                                                    data-bs-ride="false" style="width: 70px; margin: 0 auto;">

                                                    <div class="carousel-inner" style="border-radius: 4px; height: 45px;">
                                                        @foreach($report->photo_path as $index => $single_photo)
                                                            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                                                <a href="{{ asset('storage/' . $single_photo) }}" target="_blank">
                                                                    <img src="{{ asset('storage/' . $single_photo) }}" class="d-block w-100"
                                                                        alt="Stall Component" style="height: 45px; object-fit: cover;">
                                                                </a>
                                                            </div>
                                                        @endforeach
                                                    </div>

                                                    @if(count($report->photo_path) > 1)
                                                        <button class="carousel-control-prev" type="button"
                                                            data-bs-target="#carouselReport{{ $report->id }}" data-bs-slide="prev"
                                                            style="width: 20%;">
                                                            <span class="carousel-control-prev-icon bg-dark rounded-circle"
                                                                aria-hidden="true"
                                                                style="width: 12px; height: 12px; background-size: 60%;"></span>
                                                            <span class="visually-hidden">Previous</span>
                                                        </button>
                                                        <button class="carousel-control-next" type="button"
                                                            data-bs-target="#carouselReport{{ $report->id }}" data-bs-slide="next"
                                                            style="width: 20%;">
                                                            <span class="carousel-control-next-icon bg-dark rounded-circle"
                                                                aria-hidden="true"
                                                                style="width: 12px; height: 12px; background-size: 60%;"></span>
                                                            <span class="visually-hidden">Next</span>
                                                        </button>
                                                    @endif
                                                </div>

                                                <span class="text-muted extra-small d-block mt-1"
                                                    style="font-size: 10px; font-weight: 500;">
                                                    <i class="bi bi-images me-1"></i>{{ count($report->photo_path) }} Photos
                                                </span>
                                            @else
                                                <span class="badge bg-light text-secondary border px-2 py-1" style="font-size: 11px;">
                                                    <i class="bi bi-image text-muted me-1"></i>No Image
                                                </span>
                                            @endif
                                        </td>

                                        <td class="py-3 text-end px-4">
                                            <div class="d-flex gap-2 justify-content-end">

                                                <form action="{{ route('manager.reports.approve', $report->id) }}" method="POST"
                                                    class="d-inline border-0 m-0 p-0">
                                                    @csrf
                                                    <button type="submit"
                                                        class="btn btn-success btn-sm d-flex align-items-center gap-1 px-3"
                                                        style="border-radius: 6px; font-weight: 500; background-color: #10b981; border: none; height: 32px;">
                                                        <i class="bi bi-check-lg"></i> Approve
                                                    </button>
                                                </form>

                                                <form action="{{ route('manager.reports.reject', $report->id) }}" method="POST"
                                                    class="d-inline border-0 m-0 p-0">
                                                    @csrf
                                                    <input type="hidden" name="manager_notes"
                                                        value="Discrepancy in metric submission. Please verify and resubmit.">
                                                    <button type="submit"
                                                        class="btn btn-outline-danger btn-sm d-flex align-items-center gap-1 px-3"
                                                        style="border-radius: 6px; font-weight: 500; height: 32px;">
                                                        <i class="bi bi-x-lg"></i> Reject
                                                    </button>
                                                </form>

                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection