{{--
    Health Marketor Dashboard — My Institutions
    Authenticated page with <x-app-layout> + <x-module-hero>
    Requirements: 8.1, 8.4
--}}
<x-app-layout>

    <x-module-hero
        title="Institution Dashboard"
        description="Manage your healthcare institution listings"
        icon="fa-hospital"
    >
        <x-slot name="tabs">
            @can('view institutions')
                <a href="{{ route('dashboard.institutions.index') }}"
                   class="module-hero-tab active-tab"
                   aria-current="page">
                    <i class="fas fa-hospital"></i> My Institutions
                </a>
            @endcan
            @can('view machines')
                <a href="{{ route('dashboard.machines.index') }}"
                   class="module-hero-tab">
                    <i class="fas fa-cogs"></i> My Machines
                </a>
            @endcan
            @can('view payments')
                <a href="{{ route('dashboard.payments.index') }}"
                   class="module-hero-tab">
                    <i class="fas fa-credit-card"></i> Payment History
                </a>
            @endcan
        </x-slot>

        <x-slot name="actions">
            @can('create institutions')
                <a href="{{ route('institutions.register') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white text-sm font-medium rounded-lg transition">
                    <i class="fas fa-plus"></i> Register Institution
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">

        {{-- Session Messages --}}
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-3"></i>{{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center">
                <i class="fas fa-exclamation-circle mr-3"></i>{{ session('error') }}
            </div>
        @endif

        {{-- Stats Row --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            @foreach([
                ['label' => 'Total',           'value' => $stats['total']   ?? 0, 'icon' => 'fa-hospital',            'color' => 'bg-blue-600'],
                ['label' => 'Active',          'value' => $stats['active']  ?? 0, 'icon' => 'fa-check-circle',        'color' => 'bg-green-600'],
                ['label' => 'Pending Payment', 'value' => $stats['pending'] ?? 0, 'icon' => 'fa-clock',               'color' => 'bg-yellow-500'],
                ['label' => 'Expired',         'value' => $stats['expired'] ?? 0, 'icon' => 'fa-exclamation-triangle','color' => 'bg-red-600'],
            ] as $stat)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center gap-4">
                    <div class="w-12 h-12 {{ $stat['color'] }} rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas {{ $stat['icon'] }} text-white text-lg"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-gray-800">{{ $stat['value'] }}</p>
                        <p class="text-xs text-gray-500 font-medium">{{ $stat['label'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Institutions List --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
                <h3 class="font-semibold text-gray-800">
                    <i class="fas fa-list mr-2 text-green-600"></i>Your Institution Listings
                </h3>
            </div>

            @forelse($institutions as $institution)
                <div class="border-b border-gray-100 last:border-0 p-4 hover:bg-gray-50 transition">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                        {{-- Info --}}
                        <div class="flex items-center gap-4">
                            <div class="w-14 h-14 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0">
                                @if($institution->logo)
                                    <img src="{{ asset('storage/' . $institution->logo) }}"
                                         alt="{{ $institution->name }}"
                                         class="w-10 h-10 object-contain">
                                @else
                                    <i class="fas fa-hospital text-2xl text-green-500"></i>
                                @endif
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">{{ $institution->name }}</h4>
                                <p class="text-sm text-gray-500 mt-0.5">
                                    <i class="fas fa-map-marker-alt mr-1 text-green-500"></i>
                                    {{ $institution->city }}, {{ $institution->country }}
                                </p>
                            </div>
                        </div>

                        {{-- Status --}}
                        <div class="flex items-center gap-3 flex-wrap">
                            @php
                                $statusColors = [
                                    'published'       => 'bg-green-100 text-green-800',
                                    'pending_payment' => 'bg-yellow-100 text-yellow-800',
                                    'paused'          => 'bg-gray-100 text-gray-800',
                                    'suspended'       => 'bg-red-100 text-red-800',
                                    'expired'         => 'bg-red-100 text-red-800',
                                ];
                                $statusLabels = [
                                    'published'       => 'Published',
                                    'pending_payment' => 'Pending Payment',
                                    'paused'          => 'Paused',
                                    'suspended'       => 'Suspended',
                                    'expired'         => 'Expired',
                                ];
                                $color = $statusColors[$institution->listing_status] ?? 'bg-gray-100 text-gray-800';
                            @endphp
                            <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $color }}">
                                {{ $statusLabels[$institution->listing_status] ?? $institution->listing_status }}
                            </span>

                            @if($institution->expires_at)
                                <span class="text-xs {{ $institution->expires_at->isPast() ? 'text-red-600' : ($institution->expires_at->diffInDays(now()) <= 30 ? 'text-amber-600' : 'text-green-600') }}">
                                    <i class="fas fa-calendar mr-1"></i>
                                    {{ $institution->expires_at->isPast() ? 'Expired' : 'Expires' }}
                                    {{ $institution->expires_at->diffForHumans() }}
                                </span>
                            @endif
                        </div>

                        {{-- Actions --}}
                        <div class="flex items-center gap-2 flex-wrap">
                            @if($institution->is_published)
                                <a href="{{ route('institutions.show', $institution->slug) }}"
                                   target="_blank"
                                   class="btn-action-view"
                                   title="View Public Page">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                            @endif

                            @can('edit institutions')
                                <a href="{{ route('dashboard.institutions.edit', $institution) }}"
                                   class="btn-action-edit"
                                   title="Edit">
                                    <i class="fas fa-edit"></i> Edit
                                </a>
                            @endcan

                            @if($institution->listing_status === 'pending_payment')
                                <a href="{{ route('dashboard.institutions.payment', $institution) }}"
                                   class="btn-action-approve"
                                   title="Complete Payment">
                                    <i class="fas fa-credit-card"></i> Pay
                                </a>
                            @elseif($institution->listing_status === 'expired')
                                <a href="{{ route('dashboard.institutions.renew', $institution) }}"
                                   class="btn-action-assign"
                                   title="Renew Listing">
                                    <i class="fas fa-sync"></i> Renew
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-12">
                    <i class="fas fa-hospital text-5xl text-gray-300 mb-4 block"></i>
                    <h3 class="text-lg font-semibold text-gray-700 mb-2">No institutions yet</h3>
                    <p class="text-gray-500 mb-4">Register your first healthcare institution to get started.</p>
                    @can('create institutions')
                        <a href="{{ route('institutions.register') }}"
                           class="inline-flex items-center gap-2 px-6 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition">
                            <i class="fas fa-plus"></i> Register Institution
                        </a>
                    @endcan
                </div>
            @endforelse

            {{-- Pagination --}}
            @if($institutions->hasPages())
                <div class="px-4 py-3 border-t border-gray-200">
                    {{ $institutions->links() }}
                </div>
            @endif
        </div>

    </div>

</x-app-layout>
