@extends('layouts.app')
@section('title', 'Event Management')

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">@yield('title')</div>
        <div class="d-flex align-items-center">
            <!-- Additional Actions (Left) -->
            <a href="{{ route('posm.event-suppliers.create') }}" data-toggle="tooltip" title="New Supplier" class="mx-1">
                <i class="fa-solid fa-handshake fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"></i>
            </a>

            <div class="ms-auto d-flex align-items-center">
                <!-- Mandatory Action Set (Right) -->
                <!-- Add -->
                <a href="{{ route('posm.event-budgets.create') }}" data-toggle="tooltip" title="New Budget" class="mx-1">
                    <i class="fa-regular fa-plus fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"></i>
                </a>

                <!-- Save -->
                <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Save" style="cursor: default;"></i>

                <!-- Edit -->
                <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit" style="cursor: default;"></i>

                <!-- Delete -->
                <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete" style="cursor: default;"></i>

                <!-- Close -->
                <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Close" style="cursor: default;"></i>

                <!-- Column Visibility -->
                <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns" style="cursor: default;"></i>
            </div>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-header bg-white border-bottom-0 py-3">
            <ul class="nav nav-pills custom-pills gap-2">
                <li class="nav-item">
                    <a href="{{ route('posm.events.index', ['tab' => 'budgets']) }}"
                       class="nav-link {{ $tab == 'budgets' ? 'active' : '' }} px-4 rounded-pill">
                        <i class="fa-solid fa-money-bill-transfer me-2"></i> Budgets Registry
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ route('posm.events.index', ['tab' => 'suppliers']) }}"
                       class="nav-link {{ $tab == 'suppliers' ? 'active' : '' }} px-4 rounded-pill">
                        <i class="fa-solid fa-users-gear me-2"></i> Supplier Partners
                    </a>
                </li>
            </ul>
        </div>
        <div class="card-body pt-0">
            <div class="tab-content">
                <!-- Budgets Tab -->
                <div class="tab-pane fade {{ $tab == 'budgets' ? 'show active' : '' }}">
                    <div class="table-responsive">
                        <table class="table mt-3 table-striped">
                            <thead class="bg-light">
                                <tr>
                                    <th scope="col">Budget Name</th>
                                    <th scope="col">Code</th>
                                    <th scope="col" class="text-end">Total Budget</th>
                                    <th scope="col" class="text-end">Allocated</th>
                                    <th scope="col" class="text-center" style="width: 200px;">Utilization</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($budgets as $budget)
                                    <tr>
                                        <td>
                                            <span class="fw-bold" style="color: #381710;">{{ $budget->name }}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-soft-info text-info rounded-pill px-3">{{ $budget->budget_code }}</span>
                                        </td>
                                        <td class="text-end fw-bold">LKR {{ number_format($budget->total_budget, 2) }}</td>
                                        <td class="text-end fw-bold text-warning">LKR {{ number_format($budget->allocated_amount, 2) }}</td>
                                        <td class="text-center">
                                            @php
                                                $ratio = $budget->total_budget > 0 ? $budget->allocated_amount / $budget->total_budget : 0;
                                                $percent = min(100, round($ratio * 100));
                                                $colorClass = $percent > 90 ? 'bg-danger' : ($percent > 70 ? 'bg-warning' : 'bg-primary');
                                            @endphp
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="progress rounded-pill flex-grow-1" style="height: 6px; background-color: #f1f5f9;">
                                                    <div class="progress-bar {{ $colorClass }} rounded-pill" style="width: {{ $percent }}%"></div>
                                                </div>
                                                <span class="small fw-bold">{{ $percent }}%</span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-inline-flex table-action-btns">
                                                <span class="action-btn">
                                                    <a href="{{ route('posm.event-budgets.show', $budget->id) }}" title="View">
                                                        <i class="fa-regular fa-eye rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                                    </a>
                                                </span>
                                                <span class="action-btn">
                                                    <a href="{{ route('posm.event-budgets.edit', $budget->id) }}" title="Edit">
                                                        <i class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                                    </a>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-muted">No budgets identified in the registry.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Suppliers Tab -->
                <div class="tab-pane fade {{ $tab == 'suppliers' ? 'show active' : '' }}" id="suppliers">
                    <div class="table-responsive">
                        <table class="table mt-3 table-striped">
                            <thead class="bg-light">
                                <tr>
                                    <th scope="col">Supplier Name</th>
                                    <th scope="col">Code</th>
                                    <th scope="col">Contact Person</th>
                                    <th scope="col">Contact Phone</th>
                                    <th scope="col" class="text-center">Status</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($suppliers as $supplier)
                                    <tr>
                                        <td class="fw-bold" style="color: #381710;">{{ $supplier->name }}</td>
                                        <td><span class="badge bg-light border text-dark rounded-pill px-3">{{ $supplier->code }}</span></td>
                                        <td>{{ $supplier->contact_person }}</td>
                                        <td>{{ $supplier->contact_phone }}</td>
                                        <td class="text-center">
                                            <span class="badge rounded-pill {{ $supplier->is_active ? 'bg-soft-success text-success' : 'bg-soft-danger text-danger' }} px-3 py-1 fw-bold">
                                                {{ $supplier->is_active ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="d-inline-flex table-action-btns">
                                                <span class="action-btn">
                                                    <a href="{{ route('posm.event-suppliers.edit', $supplier->id) }}" title="Edit">
                                                        <i class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                                    </a>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-muted">No partner suppliers registered.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-between mt-4 align-items-center">
                @php
                    $collection = $tab == 'budgets' ? $budgets : $suppliers;
                @endphp
                <div style="font-size: 14px;" class="fw-normal">
                    Showing {{ $collection->firstItem() ?? 0 }} to {{ $collection->lastItem() ?? 0 }} of {{ $collection->total() }} entries
                </div>
                <div>
                    {{ $collection->appends(['tab' => $tab])->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .custom-pills .nav-link {
            background: #fff;
            border: 1px solid #eef0f7;
            color: #64748b;
            font-weight: 700;
            padding: 8px 20px;
            transition: all 0.2s;
        }
        .custom-pills .nav-link.active {
            background: #f7b84b;
            color: #fff;
            border-color: #f7b84b;
            box-shadow: 0 4px 12px rgba(247, 184, 75, 0.2);
        }
    </style>
@endpush