{{--
    Admin — Health Institutions Index
    Authenticated page for Manager / Super Manager roles.
    Uses: <x-app-layout> + <x-module-hero>
    Requirements: 8.1, 8.4
--}}
<x-app-layout>

    <x-module-hero
        title="Health Directory — Institutions"
        description="Manage all health institution listings"
        icon="fa-hospital"
    >
        <x-slot name="tabs">
            @can('manage institutions')
            <a href="{{ route('admin.institutions.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.institutions.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0"
               aria-current="{{ request()->routeIs('admin.institutions.*') ? 'page' : 'false' }}">
                <i class="fas fa-hospital text-sm"></i> Institutions
            </a>
            @endcan
            @can('manage machines')
            <a href="{{ route('admin.machines.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.machines.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-cogs text-sm"></i> Machines
            </a>
            @endcan
            @can('view payments')
            <a href="{{ route('admin.payments.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.payments.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-credit-card text-sm"></i> Payments
            </a>
            @endcan
            @can('view pages')
            <a href="{{ route('admin.pages.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.pages.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-file-alt text-sm"></i> Pages
            </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 --}}
        @can('view statistics')
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                @foreach([
                    ['label' => 'Total',           'value' => $stats['total']     ?? 0, 'icon' => 'fa-database',          'color' => 'bg-blue-600'],
                    ['label' => 'Published',        'value' => $stats['published'] ?? 0, 'icon' => 'fa-check-circle',      'color' => 'bg-green-600'],
                    ['label' => 'Pending Payment',  'value' => $stats['pending']   ?? 0, 'icon' => 'fa-clock',             'color' => 'bg-yellow-500'],
                    ['label' => 'Suspended',        'value' => $stats['suspended'] ?? 0, 'icon' => 'fa-ban',               '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>
        @endcan

        {{-- Search / Filter Bar --}}
        <div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
            <form method="GET" class="flex flex-wrap gap-3 items-end">
                <div class="flex-1 min-w-[200px]">
                    <label class="block text-xs font-medium text-gray-600 mb-1">Search</label>
                    <input type="text" name="search" value="{{ request('search') }}"
                           placeholder="Name, city, email…"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-green-500 focus:ring-1 focus:ring-green-500 transition">
                </div>
                <div class="min-w-[160px]">
                    <label class="block text-xs font-medium text-gray-600 mb-1">Status</label>
                    <select name="status"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-green-500 transition">
                        <option value="">All Statuses</option>
                        <option value="published"       {{ request('status') == 'published'       ? 'selected' : '' }}>Published</option>
                        <option value="pending_payment" {{ request('status') == 'pending_payment' ? 'selected' : '' }}>Pending Payment</option>
                        <option value="paused"          {{ request('status') == 'paused'          ? 'selected' : '' }}>Paused</option>
                        <option value="suspended"       {{ request('status') == 'suspended'       ? 'selected' : '' }}>Suspended</option>
                    </select>
                </div>
                <div class="flex gap-2">
                    <button type="submit"
                            class="btn-action-view px-4 py-2">
                        <i class="fas fa-search"></i> Filter
                    </button>
                    <a href="{{ route('admin.institutions.index') }}"
                       class="btn-action-delete px-4 py-2">
                        <i class="fas fa-times"></i> Clear
                    </a>
                </div>
            </form>
        </div>

        {{-- Table --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full table-zebra">
                    <thead>
                        <tr>
                            <th class="th-col-1 px-4 py-3 text-left">Institution</th>
                            <th class="th-col-2 px-4 py-3 text-left">Owner</th>
                            <th class="th-col-3 px-4 py-3 text-left">Location</th>
                            <th class="th-col-4 px-4 py-3 text-left">Status</th>
                            <th class="th-col-5 px-4 py-3 text-left">Payment</th>
                            <th class="th-col-6 px-4 py-3 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($institutions as $institution)
                            <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 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-8 h-8 object-contain">
                                            @else
                                                <i class="fas fa-hospital text-green-500 text-sm"></i>
                                            @endif
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-800 text-sm">{{ $institution->name }}</div>
                                            <div class="text-xs text-gray-500">{{ $institution->email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    @if($institution->user)
                                        <div class="text-sm font-medium text-gray-800">{{ $institution->user->name }}</div>
                                        <div class="text-xs text-gray-500">{{ $institution->user->email }}</div>
                                    @else
                                        <span class="text-xs text-gray-400 italic">No owner</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    <div class="text-sm text-gray-800">{{ $institution->city }}</div>
                                    <div class="text-xs text-gray-500">{{ $institution->country }}</div>
                                </td>
                                <td class="px-4 py-3">
                                    @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',
                                        ];
                                        $color = $statusColors[$institution->listing_status] ?? 'bg-gray-100 text-gray-800';
                                    @endphp
                                    <span class="px-2 py-1 rounded-full text-xs font-semibold {{ $color }}">
                                        {{ ucfirst(str_replace('_', ' ', $institution->listing_status)) }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    @if($institution->payment_status === 'exempt')
                                        <span class="text-xs text-gray-500">Exempt</span>
                                    @else
                                        <span class="px-2 py-1 rounded text-xs {{ $institution->payment_status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                                            {{ ucfirst($institution->payment_status) }}
                                        </span>
                                    @endif
                                    @if($institution->expires_at)
                                        <div class="text-xs text-gray-500 mt-1">
                                            @if($institution->expires_at->isPast())
                                                <span class="text-red-600">Expired {{ $institution->expires_at->diffForHumans() }}</span>
                                            @else
                                                Expires {{ $institution->expires_at->diffForHumans() }}
                                            @endif
                                        </div>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center justify-center gap-1 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

                                        {{-- Status Toggle --}}
                                        @can('manage institutions')
                                        <form action="{{ route('admin.institutions.toggle', $institution) }}"
                                              method="POST" class="inline">
                                            @csrf
                                            <select name="status"
                                                    onchange="this.form.submit()"
                                                    class="text-xs px-2 py-1 border border-gray-300 rounded bg-white focus:outline-none focus:ring-1 focus:ring-green-500">
                                                <option value="published"  {{ $institution->listing_status === 'published'  ? 'selected' : '' }}>Publish</option>
                                                <option value="paused"     {{ $institution->listing_status === 'paused'     ? 'selected' : '' }}>Pause</option>
                                                <option value="suspended"  {{ $institution->listing_status === 'suspended'  ? 'selected' : '' }}>Suspend</option>
                                            </select>
                                        </form>
                                        @endcan

                                        @role('Super Manager')
                                            <form action="{{ route('admin.institutions.terminate', $institution) }}"
                                                  method="POST" class="inline"
                                                  onsubmit="return confirm('Terminate this institution connection?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-action-delete" title="Terminate">
                                                    <i class="fas fa-user-slash"></i>
                                                </button>
                                            </form>
                                        @endrole
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                <td colspan="6" class="px-4 py-12 text-center text-gray-500">
                                    <i class="fas fa-hospital text-4xl text-gray-300 mb-3 block"></i>
                                    No institutions found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

    </div>

</x-app-layout>
