@extends('layouts.app')
@section('title', 'Brand Availability Report')

@section('content')
    {{-- Fixed Top Action Bar --}}
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Brand Availability Report</div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('horeca.reports.brand-availability.excel', request()->all()) }}" 
               class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1" 
               title="Export Excel" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-excel"></i>
            </a>
            <button
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Refresh" onclick="window.location.reload();" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-sync"></i>
            </button>
            </div>
    </div>

    {{-- Metrics Cards --}}
    <div class="row g-3 mt-4 mb-4">
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Availability Rate</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold {{ $availabilityRate >= 90 ? 'text-success' : 'text-warning' }}">
                            {{ $availabilityRate }}%</h2>
                        <div
                            class="icon-circle {{ $availabilityRate >= 90 ? 'bg-soft-success text-success' : 'bg-soft-warning text-warning' }}">
                            <i class="fa-solid fa-wine-bottle"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Overall Brand Presence</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Stockouts Reported</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold text-danger">{{ number_format($stockoutCount) }}</h2>
                        <div class="icon-circle bg-soft-danger text-danger">
                            <i class="fa-solid fa-store-slash"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Must-have brands missing</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Outlets Tracked</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold text-dark">{{ number_format($totalOutlets) }}</h2>
                        <div class="icon-circle bg-soft-primary text-primary">
                            <i class="fa-solid fa-store"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Total Outlets</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Brands Tracked</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold text-dark">{{ $trackedBrands }}</h2>
                        <div class="icon-circle bg-soft-info text-info">
                            <i class="fa-solid fa-tags"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Active Portfolio</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Brand Availability Table --}}
    <div class="card border-0 shadow-sm rounded-border mb-4">
        <div
            class="card-header bg-white border-0 py-3 px-4 rounded-top-4 d-flex justify-content-between align-items-center">
            <h6 class="fw-bold mb-0 text-dark">Outlet Brand Configuration & Availability</h6>
            <button class="btn btn-sm btn-ghost-primary rounded-pill">View All</button>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 text-nowrap">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="ps-4 border-0">Outlet</th>
                        <th class="border-0">Brand</th>
                        <th class="border-0 text-center">Requirement</th>
                        <th class="border-0 text-center">Last Status</th>
                        <th class="pe-4 border-0 text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($outletBrands as $ob)
                        <tr>
                            <td class="ps-4 fw-bold text-dark w-25 text-wrap">{{ $ob->outlet->name ?? 'Unknown' }}</td>
                            <td>{{ $ob->brand->name ?? 'Unknown Brand' }}</td>
                            <td class="text-center">
                                @if($ob->is_must_have)
                                    <span class="badge bg-soft-danger text-danger">Must Have</span>
                                @else
                                    <span class="badge bg-soft-secondary text-secondary">Optional</span>
                                @endif
                            </td>
                            <td class="text-center">
                                {{-- Mock Status --}}
                                <span class="badge bg-soft-success text-success">Available</span>
                            </td>
                            <td class="pe-4 text-center">
                                <button class="btn btn-sm btn-ghost-primary rounded-pill">History</button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <div class="d-flex flex-column align-items-center">
                                    <i class="fa-solid fa-box-open text-muted opacity-25 mb-3" style="font-size: 2rem;"></i>
                                    <p class="mb-0">No brand configurations found.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('js')
    <style>
        .fixed-action-bar {
            z-index: 100;
        }

        .rounded-border {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .bg-soft-primary {
            background-color: rgba(59, 130, 246, 0.1);
        }

        .bg-soft-success {
            background-color: rgba(16, 185, 129, 0.1);
        }

        .bg-soft-warning {
            background-color: rgba(245, 158, 11, 0.1);
        }

        .bg-soft-danger {
            background-color: rgba(239, 68, 68, 0.1);
        }

        .bg-soft-info {
            background-color: rgba(6, 182, 212, 0.1);
        }

        .bg-soft-secondary {
            background-color: rgba(148, 163, 184, 0.1);
        }

        .btn-ghost-primary {
            color: #3b82f6;
            background: transparent;
            border: 1px solid transparent;
        }

        .btn-ghost-primary:hover {
            background: rgba(59, 130, 246, 0.1);
        }
    </style>
@endpush