@extends('layouts.app')

@section('title', 'Event Supplier Detail - ' . $eventSupplier->name)

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('posm.index') }}">POSM</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('posm.event-suppliers.index') }}">Suppliers</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Details</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Supplier: {{ $eventSupplier->name }}</div>
        <div class="d-flex align-items-center ms-auto">
            <!-- Mandatory Action Set (Right) -->
            <!-- Add -->
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

            <!-- 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 -->
            <a href="{{ route('posm.event-suppliers.edit', $eventSupplier->id) }}" class="mx-1">
                <i class="fa-regular fa-edit fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Edit Supplier"></i>
            </a>

            <!-- 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 -->
            <a href="{{ route('posm.event-suppliers.index') }}" class="mx-1">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Close"></i>
            </a>

            <!-- 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 class="row mt-3 g-4">
        <!-- Supplier Profile Sidebar -->
        <div class="col-xl-4 col-lg-5">
            <div class="card rounded-border border-0 shadow-sm overflow-hidden h-100">
                <div class="card-header bg-white border-bottom-0 pt-4 px-4 text-center">
                    <div class="mb-3">
                        <div class="d-inline-flex align-items-center justify-content-center bg-soft-primary rounded-circle"
                            style="width: 100px; height: 100px;">
                            <span class="fw-bold text-primary fs-1">{{ substr($eventSupplier->name, 0, 1) }}</span>
                        </div>
                    </div>
                    <h5 class="fw-bold mb-1 text-dark">{{ $eventSupplier->name }}</h5>
                    <span class="badge bg-soft-dark border text-dark rounded-pill px-3">{{ $eventSupplier->code }}</span>
                </div>
                <div class="card-body p-4 pt-2">
                    <hr class="my-4 opacity-5">

                    <div class="mb-4">
                        <label class="small text-muted d-block mb-1 text-uppercase fw-bold">Primary Representative</label>
                        <div class="d-flex align-items-center">
                            <i class="fa-solid fa-user-tie text-primary me-2"></i>
                            <div class="fw-bold text-dark">{{ $eventSupplier->contact_person }}</div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="small text-muted d-block mb-1 text-uppercase fw-bold">Communication Channels</label>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fa-solid fa-phone text-muted me-2" style="width: 20px;"></i>
                            <div class="fw-semibold text-dark">{{ $eventSupplier->contact_phone }}</div>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fa-solid fa-envelope text-muted me-2" style="width: 20px;"></i>
                            <div class="fw-semibold text-dark text-break">{{ $eventSupplier->contact_email }}</div>
                        </div>
                    </div>

                    <div class="mb-0">
                        <label class="small text-muted d-block mb-1 text-uppercase fw-bold">Activation Status</label>
                        @if($eventSupplier->is_active ?? true)
                            <span
                                class="badge rounded-pill bg-soft-success text-success px-3 py-2 text-uppercase fs-10 fw-bold">Verified
                                & Active</span>
                        @else
                            <span
                                class="badge rounded-pill bg-soft-danger text-danger px-3 py-2 text-uppercase fs-10 fw-bold">Suspended</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Distribution History -->
        <div class="col-xl-8 col-lg-7">
            <div class="card rounded-border border-0 shadow-sm overflow-hidden h-100">
                <div class="card-header bg-white border-bottom-0 pt-4 px-4">
                    <h5 class="fw-bold m-0 small text-uppercase text-muted">Strategic Supply Record</h5>
                    <p class="text-muted small mb-0 mt-1">Timeline of inventory deployments facilitated by this supplier</p>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table align-middle table-nowrap mb-0">
                            <thead class="bg-light border-top border-bottom">
                                <tr>
                                    <th class="ps-4 py-3 small text-uppercase fw-bold text-muted">DN Ref</th>
                                    <th class="py-3 small text-uppercase fw-bold text-muted">Budget Pool</th>
                                    <th class="py-3 small text-uppercase fw-bold text-muted">Deployment Date</th>
                                    <th class="py-3 small text-uppercase fw-bold text-muted text-center"
                                        style="width: 150px;">Lifecycle</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($eventSupplier->deliveryNotes ?? [] as $dn)
                                    <tr>
                                        <td class="ps-4">
                                            <a href="{{ route('posm.delivery-notes.show', $dn->id) }}"
                                                class="fw-bold text-primary">#{{ $dn->delivery_note_number }}</a>
                                        </td>
                                        <td>
                                            <div class="fw-semibold text-dark">{{ $dn->budget->name ?? 'Direct Allocation' }}
                                            </div>
                                            <div class="text-muted small">{{ $dn->budget->budget_code ?? 'N/A' }}</div>
                                        </td>
                                        <td>
                                            <div class="text-dark fw-semibold fs-13">{{ $dn->created_at->format('d M, Y') }}
                                            </div>
                                            <div class="text-muted small">Recorded Distribution</div>
                                        </td>
                                        <td class="text-center">
                                            @php
                                                $statusColors = [
                                                    'created' => 'secondary',
                                                    'handed_over' => 'info',
                                                    'returned' => 'warning',
                                                    'validated' => 'success'
                                                ];
                                                $color = $statusColors[$dn->status] ?? 'secondary';
                                            @endphp
                                            <span
                                                class="badge rounded-pill bg-soft-{{ $color }} text-{{ $color }} px-3 py-2 text-uppercase fs-10 fw-bold">
                                                {{ str_replace('_', ' ', $dn->status) }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-5">
                                            <div class="text-muted">
                                                <i class="fa-solid fa-box-open fs-1 mb-3 opacity-25"></i>
                                                <h5>No deployments recorded</h5>
                                                <p class="small mb-0">This supplier has not facilitated any inventory
                                                    distributions yet.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection