@extends('layouts.app')

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

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center"
        role="alert" style="background-color: #d1e7dd; color: #0f5132;">
        <i class="bi bi-check-circle-fill me-2 fs-5"></i>
        <div>
            <strong>Great!</strong> {{ session('success') }}
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <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-grid-1x2 text-indigo-600 fs-4" style="color: #4f46e5;"></i>
                <h4 class="fw-bold text-dark mb-0">Exhibitions Master List</h4>
            </div>
            <p class="text-muted small mb-0">Manage all centralized exhibitions, schedules, and team tracking.</p>
        </div>
        <a href="{{ route('admin.exhibitions.create') }}" class="btn btn-primary px-4 shadow-sm"
            style="background-color: #4f46e5; border: none; border-radius: 10px; font-weight: 600;">
            <i class="bi bi-plus-lg me-1"></i> Create Exhibition
        </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">All Scheduled Events</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead style="background-color: #f1f5f9;">
                        <tr>
                            <th class="ps-4 text-muted small fw-bold py-3" style="width: 80px;">SR. NO.</th>
                            <th class="text-muted small fw-bold py-3">EXHIBITION INFO</th>
                            <th class="text-muted small fw-bold py-3">CITY & LOCATION</th>
                            <th class="text-muted small fw-bold py-3">DATES (DURATION)</th>
                            <th class="text-muted small fw-bold py-3">ASSIGNED TEAM</th>
                            <th class="text-muted small fw-bold py-3">STATUS</th>
                            <th class="text-muted small fw-bold py-3 text-end">DEADLINE</th>
                            <th class="pe-4 text-muted small fw-bold py-3 text-center" style="width: 130px;">ACTIONS
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($exhibitions->isEmpty())
                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <i class="bi bi-calendar-x fs-1 d-block mb-2 text-secondary opacity-50"></i>
                                No exhibitions created yet. Click "Create Exhibition" to get started!
                            </td>
                        </tr>
                        @else
                        @foreach($exhibitions as $index => $exhibition)
                        <tr>
                            <td class="ps-4 fw-bold text-muted">{{ $index + 1 }}</td>

                            <td>
                                <span class="fw-bold text-dark d-block mb-0">{{ $exhibition->name }}</span>
                                <span class="text-muted extra-small" style="font-size: 11px;">ID:
                                    #EX-00{{ $exhibition->id }}</span>
                            </td>

                            <td>
                                <span
                                    class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill px-2 py-1 small mb-1">{{
                                    $exhibition->city }}</span>
                                <span class="text-muted small d-block"
                                    style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                    title="{{ $exhibition->location }}">{{ $exhibition->location }}</span>
                            </td>

                            <td class="small">
                                <span class="fw-semibold text-dark d-block"><i
                                        class="bi bi-calendar-range me-1 text-muted"></i>
                                    {{ \Carbon\Carbon::parse($exhibition->start_date)->format('d M') }} -
                                    {{ \Carbon\Carbon::parse($exhibition->end_date)->format('d M, Y') }}</span>
                            </td>

                            <td>
                                @php
                                $manager = $exhibition->users->where('role', 'manager')->first();
                                $employeeCount = $exhibition->users->where('role', 'employee')->count();
                                @endphp
                                <span class="d-block small fw-bold text-dark"><i
                                        class="bi bi-person-badge me-1 text-muted"></i> M:
                                    {{ $manager->name ?? 'Unassigned' }}</span>
                                <span class="text-muted extra-small" style="font-size: 11px;"><i
                                        class="bi bi-people me-1"></i> Staff: {{ $employeeCount }} Employees</span>
                            </td>

                            <td>
                                @php
                                $statusColors = [
                                'upcoming' => ['bg' => '#eff6ff', 'color' => '#1e40af'],
                                'ongoing' => ['bg' => '#fef3c7', 'color' => '#92400e'],
                                'completed' => ['bg' => '#d1e7dd', 'color' => '#0f5132'],
                                'cancelled' => ['bg' => '#f8d7da', 'color' => '#842029']
                                ];
                                $style = $statusColors[$exhibition->status] ?? ['bg' => '#e2e8f0', 'color' =>
                                '#334155'];
                                @endphp
                                <span class="badge rounded-pill text-capitalize px-3 py-2 fw-semibold"
                                    style="background-color: {{ $style['bg'] }}; color: {{ $style['color'] }}; font-size: 0.75rem;">
                                    {{ $exhibition->status }}
                                </span>
                            </td>

                            <td class="pe-4 text-end">
                                <span class="fw-bold text-danger"><i class="bi bi-clock me-1"></i>
                                    {{ \Carbon\Carbon::parse($exhibition->report_deadline)->format('h:i A') }}</span>
                            </td>

                            <td class="pe-4 text-center">
                                <a href="{{ route('admin.exhibitions.stock', $exhibition->id) }}"
                                    class="btn btn-sm btn-outline-info d-inline-flex align-items-center gap-1 px-2.5 fw-bold"
                                    style="font-size: 0.75rem; border-radius: 6px;" data-bs-toggle="tooltip"
                                    title="Check Transferred Stock Inventory">
                                    <i class="bi bi-box-seam-fill" style="font-size: 0.85rem;"></i> View Stock
                                </a>
                            </td>
                        </tr>
                        @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection