@extends('layouts.app')

@section('content')
<section class="it-about-3-area p-relative pt-30 pb-125">
    <img class="it-about-shape-1" src="{{ asset('assets/img/shape/about-1-1.png') }}" alt="">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-4">
                @php
                    $title = '';
                    if (app()->getLocale() == 'ar') {
                        $title = 'دليل الجامعات الرياضية';
                    } elseif (app()->getLocale() == 'fr') {
                        $title = 'Guide des Fédérations Sportives';
                    } else {
                        $title = 'Sports Federations Directory';
                    }
                @endphp
                <h3 class="it-section-title" style="color: #D82B2A;">{{ $title }}</h3>
            </div>
        </div>

        <!-- Search and Filter Section - Améliorée -->
        <div class="row mb-5">
            <div class="col-12">
                <div class="card shadow-lg border-0" style="border-radius: 15px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 1px solid rgba(216, 43, 42, 0.1);">
                    <div class="card-body p-4">
                        <div class="row g-4 align-items-center">
                            <div class="col-lg-8 col-md-7">
                                <div class="input-group input-group-lg shadow-sm">
                                    <span class="input-group-text" style="background: #D82B2A; border: none; border-radius: 10px 0 0 10px; color: white;">
                                        <i class="fas fa-search"></i>
                                    </span>
                                    <input type="text" id="searchInput" class="form-control border-0" 
                                           style="border-radius: 0 10px 10px 0; background: #fefefe; font-size: 1rem;"
                                           placeholder="@if(app()->getLocale() == 'ar') ابحث عن اتحاد، رئيس، عنوان... @elseif(app()->getLocale() == 'fr') Rechercher une fédération, président, adresse... @else Search federation, president, address... @endif">
                                    <button class="btn btn-outline-secondary border-0 d-lg-none" type="button" id="searchButton" style="border-radius: 0 10px 10px 0;">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <div class="mt-2 text-muted small">
                                    <i class="fas fa-info-circle me-1" style="color: #D82B2A;"></i>
                                    @if(app()->getLocale() == 'ar')
                                        ابحث بالاسم، الرئيس، العنوان، أو أي معلومات أخرى
                                    @elseif(app()->getLocale() == 'fr')
                                        Recherchez par nom, président, adresse ou toute autre information
                                    @else
                                        Search by name, president, address or any information
                                    @endif
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-5">
                                <div class="d-flex flex-wrap gap-3 align-items-center justify-content-md-end">
                                    <div class="btn-group shadow-sm" role="group">
                                        <button id="gridViewBtn" class="btn btn-view active" style="border-radius: 8px 0 0 8px;">
                                            <i class="fas fa-th-large me-1"></i>
                                            <span class="d-none d-md-inline">
                                                @if(app()->getLocale() == 'ar') شبكة @else Grid @endif
                                            </span>
                                        </button>
                                        <button id="listViewBtn" class="btn btn-view" style="border-radius: 0 8px 8px 0;">
                                            <i class="fas fa-list me-1"></i>
                                            <span class="d-none d-md-inline">
                                                @if(app()->getLocale() == 'ar') قائمة @else List @endif
                                            </span>
                                        </button>
                                    </div>
                                    <div class="d-flex flex-column align-items-end">
                                        <span class="badge rounded-pill" style="background: rgba(216, 43, 42, 0.1); color: #D82B2A; font-weight: 600; padding: 8px 12px;">
                                            <i class="fas fa-layer-group me-1"></i>
                                            @if(app()->getLocale() == 'ar')
                                                {{ $federations->count() }} / {{ $federations->total() }}
                                            @elseif(app()->getLocale() == 'fr')
                                                {{ $federations->count() }} / {{ $federations->total() }}
                                            @else
                                                {{ $federations->count() }} / {{ $federations->total() }}
                                            @endif
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cards/Grid View -->
        <div class="row" id="gridView">
            @forelse($federations as $federation)
                <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 mb-4 federation-card">
                    <div class="card h-100 shadow-sm border-0 hover-shadow transition-all" style="border: 1px solid rgba(216, 43, 42, 0.1);">
                        <div class="card-body p-3">
                            <!-- Logo and Name -->
                            <div class="d-flex align-items-center mb-3">
                                @if($federation->logoSrc)
                                    <div class="flex-shrink-0 me-3">
                                        <div class="rounded-circle d-flex align-items-center justify-content-center" 
                                             style="width: 80px; height: 80px; background: linear-gradient(135deg, rgba(216, 43, 42, 0.1) 0%, rgba(216, 43, 42, 0.05) 100%); padding: 10px;">
                                            <img src="{{ $federation->logoSrc }}" 
                                                 alt="{{ $federation->nom_ar }}"
                                                 class="img-fluid" 
                                                 style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                        </div>
                                    </div>
                                @else
                                    <div class="flex-shrink-0 me-3">
                                        <div class="rounded-circle d-flex align-items-center justify-content-center"
                                             style="width: 80px; height: 80px; background: linear-gradient(135deg, rgba(216, 43, 42, 0.1) 0%, rgba(216, 43, 42, 0.05) 100%);">
                                            <i class="fas fa-flag fa-2x" style="color: #D82B2A;"></i>
                                        </div>
                                    </div>
                                @endif
                                <div class="flex-grow-1">
                                    <h6 class="mb-1 fw-bold" style="color: #D82B2A; line-height: 1.3;">
                                        @if(app()->getLocale() == 'ar')
                                            {{ Str::limit($federation->nom_ar, 35) }}
                                        @elseif(app()->getLocale() == 'fr')
                                            {{ Str::limit($federation->nom_fr ?: $federation->nom_ar, 35) }}
                                        @else
                                            {{ Str::limit($federation->nom_en ?: $federation->nom_ar, 35) }}
                                        @endif
                                    </h6>
                                    @if($federation->date_creation)
                                        <small class="text-muted d-flex align-items-center">
                                            <i class="fas fa-calendar-alt me-1" style="color: #D82B2A;"></i>
                                            @if(app()->getLocale() == 'ar')
                                                {{ \Carbon\Carbon::parse($federation->date_creation)->locale('ar')->translatedFormat('Y') }}
                                            @else
                                                {{ \Carbon\Carbon::parse($federation->date_creation)->format('Y') }}
                                            @endif
                                        </small>
                                    @endif
                                </div>
                            </div>

                            <!-- President -->
                            <div class="mb-2">
                                <small class="d-block mb-1" style="color: #666; font-weight: 500;">
                                    <i class="fas fa-user-tie me-1" style="color: #D82B2A;"></i>
                                    @if(app()->getLocale() == 'ar')
                                        الرئيس
                                    @elseif(app()->getLocale() == 'fr')
                                        Président
                                    @else
                                        President
                                    @endif
                                </small>
                                <span class="d-block small" style="line-height: 1.4; color: #333;">
                                    @if(app()->getLocale() == 'ar')
                                        {{ Str::limit($federation->president_ar, 25) }}
                                    @elseif(app()->getLocale() == 'fr')
                                        {{ Str::limit($federation->president_fr ?: $federation->president_ar, 25) }}
                                    @else
                                        {{ Str::limit($federation->president_en ?: $federation->president_ar, 25) }}
                                    @endif
                                </span>
                            </div>

                            <!-- Address -->
                            <div class="mb-3">
                                <small class="d-block mb-1" style="color: #666; font-weight: 500;">
                                    <i class="fas fa-map-marker-alt me-1" style="color: #D82B2A;"></i>
                                    @if(app()->getLocale() == 'ar')
                                        العنوان
                                    @elseif(app()->getLocale() == 'fr')
                                        Adresse
                                    @else
                                        Address
                                    @endif
                                </small>
                                <span class="d-block small" style="line-height: 1.4; color: #333;">
                                    @if(app()->getLocale() == 'ar')
                                        {{ Str::limit($federation->adresse_ar, 50) }}
                                    @elseif(app()->getLocale() == 'fr')
                                        {{ Str::limit($federation->adresse_fr ?: $federation->adresse_ar, 50) }}
                                    @else
                                        {{ Str::limit($federation->adresse_en ?: $federation->adresse_ar, 50) }}
                                    @endif
                                </span>
                            </div>

                            <!-- Contact Info -->
                            <div class="mb-3">
                                <small class="d-block mb-2" style="color: #666; font-weight: 500;">
                                    <i class="fas fa-address-card me-1" style="color: #D82B2A;"></i>
                                    @if(app()->getLocale() == 'ar')
                                        معلومات الاتصال
                                    @elseif(app()->getLocale() == 'fr')
                                        Contact
                                    @else
                                        Contact Info
                                    @endif
                                </small>
                                
                                <div class="d-flex flex-column gap-2">
                                    <!-- Téléphone(s) -->
                                    @if($federation->telephone)
                                        <div class="contact-item d-flex align-items-center">
                                            <div class="contact-icon me-2">
                                                <i class="fas fa-phone-alt" style="color: #D82B2A;"></i>
                                            </div>
                                            <div class="contact-details">
                                                <a href="tel:{{ $federation->telephone }}" 
                                                   class="text-decoration-none text-dark d-block">
                                                    {{ $federation->telephone }}
                                                    @if($federation->telephone2)
                                                        <span class="text-muted mx-1">/</span>
                                                        <a href="tel:{{ $federation->telephone2 }}" class="text-decoration-none text-dark">
                                                            {{ $federation->telephone2 }}
                                                        </a>
                                                    @endif
                                                </a>
                                            </div>
                                        </div>
                                    @endif

                                    <!-- Fax -->
                                    @if($federation->fax)
                                        <div class="contact-item d-flex align-items-center">
                                            <div class="contact-icon me-2">
                                                <i class="fas fa-fax" style="color: #D82B2A;"></i>
                                            </div>
                                            <div class="contact-details">
                                                <span class="text-dark">{{ $federation->fax }}</span>
                                            </div>
                                        </div>
                                    @endif

                                    <!-- Email -->
                                    @if($federation->email)
                                        <div class="contact-item d-flex align-items-center">
                                            <div class="contact-icon me-2">
                                                <i class="fas fa-envelope" style="color: #D82B2A;"></i>
                                            </div>
                                            <div class="contact-details">
                                                <a href="mailto:{{ $federation->email }}" 
                                                   class="text-decoration-none text-dark text-truncate d-block" 
                                                   style="max-width: 200px;">
                                                    {{ $federation->email }}
                                                </a>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Actions -->
                            <div class="d-flex justify-content-between align-items-center mt-auto pt-3 border-top" style="border-color: rgba(216, 43, 42, 0.1) !important;">
                                @if($federation->site_web)
                                    <a href="{{ $federation->site_web }}" 
                                       target="_blank" 
                                       rel="noopener"
                                       class="btn btn-sm d-flex align-items-center"
                                       style="background: #D82B2A; color: white; border-radius: 8px; border: none; padding: 8px 16px;">
                                        <i class="fas fa-globe me-2"></i>
                                        @if(app()->getLocale() == 'ar')
                                            الموقع
                                        @else
                                            Website
                                        @endif
                                    </a>
                                @else
                                    <span class="btn btn-sm d-flex align-items-center disabled"
                                          style="background: rgba(216, 43, 42, 0.1); color: #666; border-radius: 8px; padding: 8px 16px;">
                                        <i class="fas fa-globe me-2"></i>
                                        @if(app()->getLocale() == 'ar')
                                            لا يوجد
                                        @else
                                            No Site
                                        @endif
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="card border-0 shadow-sm" style="border: 1px solid rgba(216, 43, 42, 0.1);">
                        <div class="card-body text-center py-5">
                            <div class="empty-state-icon mb-3">
                                <i class="fas fa-inbox fa-3x" style="color: rgba(216, 43, 42, 0.3);"></i>
                            </div>
                            <h5 class="mb-2" style="color: #666;">
                                @if(app()->getLocale() == 'ar')
                                    لا توجد جامعات رياضية
                                @elseif(app()->getLocale() == 'fr')
                                    Aucune fédération sportive trouvée
                                @else
                                    No sports federations found
                                @endif
                            </h5>
                            <p class="text-muted mb-0">
                                @if(app()->getLocale() == 'ar')
                                    ابدأ بالبحث أو حاول استخدام كلمات مختلفة
                                @else
                                    Start searching or try different keywords
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            @endforelse
        </div>

        <!-- List View (Hidden by default) -->
        <div class="d-none" id="listView">
            <div class="card border-0 shadow-sm" style="border: 1px solid rgba(216, 43, 42, 0.1);">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead style="background: linear-gradient(135deg, #D82B2A 0%, #c22525 100%); color: white;">
                                <tr>
                                    @if(app()->getLocale() == 'ar')
                                        <th style="width: 60px; padding: 15px; text-align: center;">الشعار</th>
                                        <th style="padding: 15px;">الجامعة / الاتحاد</th>
                                        <th style="padding: 15px;">الرئيس</th>
                                        <th style="padding: 15px;">العنوان</th>
                                        <th style="padding: 15px;">الاتصال</th>
                                        <th style="width: 80px; padding: 15px; text-align: center;">الفاكس</th>
                                        <th style="width: 100px; padding: 15px; text-align: center;">رابط الموقع</th>
                                    @elseif(app()->getLocale() == 'fr')
                                        <th style="width: 60px; padding: 15px; text-align: center;">Logo</th>
                                        <th style="padding: 15px;">Fédération</th>
                                        <th style="padding: 15px;">Président</th>
                                        <th style="padding: 15px;">Adresse</th>
                                        <th style="padding: 15px;">Contact</th>
                                        <th style="width: 80px; padding: 15px; text-align: center;">Fax</th>
                                        <th style="width: 100px; padding: 15px; text-align: center;">Site web</th>
                                    @else
                                        <th style="width: 60px; padding: 15px; text-align: center;">Logo</th>
                                        <th style="padding: 15px;">Federation</th>
                                        <th style="padding: 15px;">President</th>
                                        <th style="padding: 15px;">Address</th>
                                        <th style="padding: 15px;">Contact</th>
                                        <th style="width: 80px; padding: 15px; text-align: center;">Fax</th>
                                        <th style="width: 100px; padding: 15px; text-align: center;">Website</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($federations as $federation)
                                    <tr class="list-row">
                                        <td style="text-align: center; vertical-align: middle; padding: 12px;">
                                            @if($federation->logoSrc)
                                                <div class="rounded-circle d-inline-flex align-items-center justify-content-center"
                                                     style="width: 50px; height: 50px; background: linear-gradient(135deg, rgba(216, 43, 42, 0.1) 0%, rgba(216, 43, 42, 0.05) 100%);">
                                                    <img src="{{ $federation->logoSrc }}" 
                                                         alt="{{ $federation->nom_ar }}"
                                                         style="width: 35px; height: 35px; object-fit: contain;">
                                                </div>
                                            @else
                                                <div class="rounded-circle d-inline-flex align-items-center justify-content-center"
                                                     style="width: 50px; height: 50px; background: linear-gradient(135deg, rgba(216, 43, 42, 0.1) 0%, rgba(216, 43, 42, 0.05) 100%);">
                                                    <i class="fas fa-flag" style="color: #D82B2A;"></i>
                                                </div>
                                            @endif
                                        </td>
                                        <td style="vertical-align: middle; padding: 12px;">
                                            <strong class="d-block" style="color: #D82B2A;">
                                                @if(app()->getLocale() == 'ar')
                                                    {{ $federation->nom_ar }}
                                                @elseif(app()->getLocale() == 'fr')
                                                    {{ $federation->nom_fr ?: $federation->nom_ar }}
                                                @else
                                                    {{ $federation->nom_en ?: $federation->nom_ar }}
                                                @endif
                                            </strong>
                                            @if($federation->date_creation)
                                                <small class="text-muted">
                                                    <i class="fas fa-calendar-alt me-1"></i>
                                                    {{ \Carbon\Carbon::parse($federation->date_creation)->format('Y') }}
                                                </small>
                                            @endif
                                        </td>
                                        <td style="vertical-align: middle; padding: 12px;">
                                            <small>
                                                @if(app()->getLocale() == 'ar')
                                                    {{ $federation->president_ar }}
                                                @elseif(app()->getLocale() == 'fr')
                                                    {{ $federation->president_fr ?: $federation->president_ar }}
                                                @else
                                                    {{ $federation->president_en ?: $federation->president_ar }}
                                                @endif
                                            </small>
                                        </td>
                                        <td style="vertical-align: middle; padding: 12px;">
                                            <small>
                                                @if(app()->getLocale() == 'ar')
                                                    {{ Str::limit($federation->adresse_ar, 40) }}
                                                @elseif(app()->getLocale() == 'fr')
                                                    {{ Str::limit($federation->adresse_fr ?: $federation->adresse_ar, 40) }}
                                                @else
                                                    {{ Str::limit($federation->adresse_en ?: $federation->adresse_ar, 40) }}
                                                @endif
                                            </small>
                                        </td>
                                        <td style="vertical-align: middle; padding: 12px;">
                                            @if($federation->telephone)
                                                <div class="mb-1">
                                                    <i class="fas fa-phone me-1" style="color: #D82B2A;"></i>
                                                    <small>
                                                        <a href="tel:{{ $federation->telephone }}" class="text-decoration-none text-dark">
                                                            {{ $federation->telephone }}
                                                        </a>
                                                        @if($federation->telephone2)
                                                            <span class="text-muted mx-1">/</span>
                                                            <a href="tel:{{ $federation->telephone2 }}" class="text-decoration-none text-dark">
                                                                {{ $federation->telephone2 }}
                                                            </a>
                                                        @endif
                                                    </small>
                                                </div>
                                            @endif
                                            @if($federation->email)
                                                <div>
                                                    <i class="fas fa-envelope me-1" style="color: #D82B2A;"></i>
                                                    <small>
                                                        <a href="mailto:{{ $federation->email }}" class="text-decoration-none text-dark">
                                                            {{ Str::limit($federation->email, 25) }}
                                                        </a>
                                                    </small>
                                                </div>
                                            @endif
                                        </td>
                                        <td style="vertical-align: middle; text-align: center; padding: 12px;">
                                            @if($federation->fax)
                                                <div>
                                                    <i class="fas fa-fax me-1" style="color: #D82B2A;"></i>
                                                    <small>{{ $federation->fax }}</small>
                                                </div>
                                            @else
                                                <small class="text-muted">—</small>
                                            @endif
                                        </td>
                                        <td style="vertical-align: middle; text-align: center; padding: 12px;">
                                            @if($federation->site_web)
                                                <a href="{{ $federation->site_web }}" 
                                                   target="_blank" 
                                                   rel="noopener"
                                                   class="btn btn-sm d-flex align-items-center justify-content-center mx-auto"
                                                   style="background: #D82B2A; color: white; border-radius: 6px; border: none; width: 40px; height: 40px;"
                                                   title="@if(app()->getLocale() == 'ar') الموقع @else Website @endif">
                                                    <i class="fas fa-globe"></i>
                                                </a>
                                            @else
                                                <span class="btn btn-sm d-flex align-items-center justify-content-center mx-auto disabled"
                                                      style="background: rgba(216, 43, 42, 0.1); color: #666; border-radius: 6px; width: 40px; height: 40px;">
                                                    <i class="fas fa-globe"></i>
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-5">
                                            <div class="empty-state-icon mb-3">
                                                <i class="fas fa-inbox fa-3x" style="color: rgba(216, 43, 42, 0.3);"></i>
                                            </div>
                                            <h5 class="mb-2" style="color: #666;">
                                                @if(app()->getLocale() == 'ar')
                                                    لا توجد جامعات رياضية
                                                @elseif(app()->getLocale() == 'fr')
                                                    Aucune fédération sportive trouvée
                                                @else
                                                    No sports federations found
                                                @endif
                                            </h5>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pagination -->
        @if($federations->hasPages())
            <div class="row mt-5">
                <div class="col-12">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
                        <div class="text-muted small">
                            <i class="fas fa-chart-bar me-1" style="color: #D82B2A;"></i>
                            @if(app()->getLocale() == 'ar')
                                عرض {{ $federations->firstItem() }} - {{ $federations->lastItem() }} من {{ $federations->total() }}
                            @elseif(app()->getLocale() == 'fr')
                                Affichage de {{ $federations->firstItem() }} - {{ $federations->lastItem() }} sur {{ $federations->total() }}
                            @else
                                Showing {{ $federations->firstItem() }} - {{ $federations->lastItem() }} of {{ $federations->total() }}
                            @endif
                        </div>
                        <nav aria-label="Page navigation">
                            <ul class="pagination mb-0">
                                <!-- Previous Page Link -->
                                @if($federations->onFirstPage())
                                    <li class="page-item disabled">
                                        <span class="page-link rounded-start" style="border-color: rgba(216, 43, 42, 0.2);">
                                            @if(app()->getLocale() == 'ar') &laquo; @else &lsaquo; @endif
                                        </span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link rounded-start" href="{{ $federations->previousPageUrl() }}" 
                                           style="color: #D82B2A; border-color: rgba(216, 43, 42, 0.2);"
                                           aria-label="Previous">
                                            @if(app()->getLocale() == 'ar') &laquo; @else &lsaquo; @endif
                                        </a>
                                    </li>
                                @endif

                                <!-- Pagination Elements -->
                                @foreach(range(1, $federations->lastPage()) as $i)
                                    @if($i == $federations->currentPage())
                                        <li class="page-item active">
                                            <span class="page-link" style="background-color: #D82B2A; border-color: #D82B2A;">{{ $i }}</span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $federations->url($i) }}" 
                                               style="color: #D82B2A; border-color: rgba(216, 43, 42, 0.2);">{{ $i }}</a>
                                        </li>
                                    @endif
                                @endforeach

                                <!-- Next Page Link -->
                                @if($federations->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link rounded-end" href="{{ $federations->nextPageUrl() }}" 
                                           style="color: #D82B2A; border-color: rgba(216, 43, 42, 0.2);"
                                           aria-label="Next">
                                            @if(app()->getLocale() == 'ar') &raquo; @else &rsaquo; @endif
                                        </a>
                                    </li>
                                @else
                                    <li class="page-item disabled">
                                        <span class="page-link rounded-end" style="border-color: rgba(216, 43, 42, 0.2);">
                                            @if(app()->getLocale() == 'ar') &raquo; @else &rsaquo; @endif
                                        </span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        @endif
    </div>
</section>

<style>
:root {
    --primary-color: #D82B2A;
    --primary-light: rgba(216, 43, 42, 0.1);
    --primary-dark: #c22525;
}

.federation-card {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hover-shadow {
    transition: all 0.3s ease;
    border: 1px solid var(--primary-light);
}

.hover-shadow:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(216, 43, 42, 0.15) !important;
}

.card {
    border-radius: 12px;
    overflow: hidden;
}

.btn-view {
    background: white;
    color: #666;
    border: 1px solid rgba(216, 43, 42, 0.2);
    padding: 8px 16px;
    transition: all 0.3s ease;
}

.btn-view.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-view:hover:not(.active) {
    background: var(--primary-light);
    color: var(--primary-color);
}

.contact-item {
    padding: 6px 0;
}

.contact-icon {
    width: 24px;
    text-align: center;
}

.contact-details {
    flex: 1;
}

.table-hover tbody tr:hover {
    background-color: var(--primary-light) !important;
}

.list-row {
    transition: all 0.3s ease;
}

.list-row:hover {
    transform: translateX(5px);
}

/* Improved search area */
#searchInput:focus {
    box-shadow: 0 0 0 3px rgba(216, 43, 42, 0.2);
    border-color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .col-xxl-3 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (max-width: 992px) {
    .col-xl-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .input-group-lg {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .federation-card .card-body {
        padding: 1rem;
    }
    
    .pagination {
        flex-wrap: wrap;
        justify-content: center !important;
    }
    
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    /* Adjust for mobile in list view */
    #listView .table-responsive {
        font-size: 0.8rem;
    }
    
    #listView td, #listView th {
        padding: 0.5rem;
    }
    
    #listView .btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .col-md-6, .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .table-responsive {
        font-size: 0.8rem;
    }
    
    /* Mobile search */
    .input-group-lg {
        font-size: 0.9rem;
    }
    
    .btn-view span {
        display: none;
    }
    
    .btn-view i {
        margin-right: 0 !important;
    }
}

/* Scrollbar styling */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // View Toggle
    const gridViewBtn = document.getElementById('gridViewBtn');
    const listViewBtn = document.getElementById('listViewBtn');
    const gridView = document.getElementById('gridView');
    const listView = document.getElementById('listView');

    if (gridViewBtn && listViewBtn) {
        gridViewBtn.addEventListener('click', function() {
            if (gridView && listView) {
                gridView.classList.remove('d-none');
                listView.classList.add('d-none');
                gridViewBtn.classList.add('active');
                listViewBtn.classList.remove('active');
                
                // Store preference in localStorage
                localStorage.setItem('federationView', 'grid');
            }
        });

        listViewBtn.addEventListener('click', function() {
            if (gridView && listView) {
                gridView.classList.add('d-none');
                listView.classList.remove('d-none');
                listViewBtn.classList.add('active');
                gridViewBtn.classList.remove('active');
                
                // Store preference in localStorage
                localStorage.setItem('federationView', 'list');
            }
        });

        // Load saved view preference
        const savedView = localStorage.getItem('federationView');
        if (savedView === 'list' && listViewBtn) {
            listViewBtn.click();
        }
    }

    // Enhanced Search functionality
    const searchInput = document.getElementById('searchInput');
    const searchButton = document.getElementById('searchButton');
    
    if (searchInput) {
        let searchTimeout;
        
        searchInput.addEventListener('keyup', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                performSearch(this.value);
            }, 300);
        });
        
        if (searchButton) {
            searchButton.addEventListener('click', function() {
                performSearch(searchInput.value);
            });
        }
    }
    
    function performSearch(searchTerm) {
        const term = searchTerm.toLowerCase().trim();
        
        // Grid view search
        const gridCards = document.querySelectorAll('#gridView .federation-card');
        if (gridCards.length > 0) {
            let visibleCount = 0;
            gridCards.forEach(card => {
                const text = card.textContent.toLowerCase();
                if (text.includes(term)) {
                    card.style.display = 'block';
                    visibleCount++;
                    // Add highlight animation
                    card.style.animation = 'fadeIn 0.5s ease';
                } else {
                    card.style.display = 'none';
                }
            });
            
            // Show no results message for grid view
            const gridContainer = document.getElementById('gridView');
            let noResultsGrid = gridContainer.querySelector('.no-results-grid');
            
            if (visibleCount === 0 && term !== '') {
                if (!noResultsGrid) {
                    noResultsGrid = document.createElement('div');
                    noResultsGrid.className = 'col-12 no-results-grid';
                    noResultsGrid.innerHTML = `
                        <div class="card border-0 shadow-sm" style="border: 1px solid rgba(216, 43, 42, 0.1);">
                            <div class="card-body text-center py-5">
                                <div class="empty-state-icon mb-3">
                                    <i class="fas fa-search fa-3x" style="color: rgba(216, 43, 42, 0.3);"></i>
                                </div>
                                <h5 class="mb-2" style="color: #666;">
                                    @if(app()->getLocale() == 'ar')
                                        لا توجد نتائج للبحث
                                    @elseif(app()->getLocale() == 'fr')
                                        Aucun résultat trouvé
                                    @else
                                        No results found
                                    @endif
                                </h5>
                                <p class="text-muted mb-0">
                                    @if(app()->getLocale() == 'ar')
                                        حاول باستخدام كلمات بحث مختلفة
                                    @else
                                        Try different search keywords
                                    @endif
                                </p>
                            </div>
                        </div>
                    `;
                    gridContainer.appendChild(noResultsGrid);
                }
            } else if (noResultsGrid) {
                noResultsGrid.remove();
            }
        }

        // List view search
        const tableRows = document.querySelectorAll('#listView tbody tr.list-row');
        if (tableRows.length > 0) {
            let visibleCount = 0;
            tableRows.forEach(row => {
                const text = row.textContent.toLowerCase();
                if (text.includes(term)) {
                    row.style.display = '';
                    visibleCount++;
                    // Add highlight effect
                    row.classList.add('search-match');
                } else {
                    row.style.display = 'none';
                    row.classList.remove('search-match');
                }
            });

            // Show no results message for list view
            const tbody = document.querySelector('#listView tbody');
            let noResultsRow = tbody.querySelector('.no-results-row');
            
            if (visibleCount === 0 && term !== '') {
                if (!noResultsRow) {
                    noResultsRow = document.createElement('tr');
                    noResultsRow.className = 'no-results-row';
                    noResultsRow.innerHTML = `
                        <td colspan="7" class="text-center py-5">
                            <div class="empty-state-icon mb-3">
                                <i class="fas fa-search fa-3x" style="color: rgba(216, 43, 42, 0.3);"></i>
                            </div>
                            <h5 class="mb-2" style="color: #666;">
                                @if(app()->getLocale() == 'ar')
                                    لا توجد نتائج للبحث
                                @elseif(app()->getLocale() == 'fr')
                                    Aucun résultat trouvé
                                @else
                                    No results found
                                @endif
                            </h5>
                            <p class="text-muted mb-0">
                                @if(app()->getLocale() == 'ar')
                                    حاول باستخدام كلمات بحث مختلفة
                                @else
                                    Try different search keywords
                                @endif
                            </p>
                        </td>
                    `;
                    tbody.appendChild(noResultsRow);
                }
            } else if (noResultsRow) {
                noResultsRow.remove();
            }
        }
    }

    // Animation on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // Observe cards for animation
    const federationCards = document.querySelectorAll('.federation-card');
    federationCards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        observer.observe(card);
    });
});
</script>
@endsection