@extends('layouts.app')

@section('title', 'Universities')

@section('content')
    <div class="container-fluid px-0">
        <!-- Hero Section -->
        <section class="hero-section bg-gradient-primary text-white position-relative">
            <div class="container">
                <div class="row justify-content-center text-center py-5">
                    <div class="col-lg-8">
                        <h1 class="display-4 fw-bold mb-3">Find Your Perfect University</h1>
                        <p class="lead mb-5">Discover top universities from around the world. Search through our
                            comprehensive database to find the institution that matches your academic goals.</p>
                    </div>
                </div>
            </div>

            <!-- Full Screen Search Box at Bottom -->
            <div class="fullscreen-search-container position-absolute bottom-0 w-100">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="search-box bg-white rounded-top shadow-lg p-4">
                                <form method="GET" action="{{ route('universities') }}">
                                    <div class="input-group input-group-lg">
                                        <input type="text" class="form-control form-control-lg search-input"
                                            name="search" value="{{ $search }}"
                                            placeholder="Search universities across the globe..." autocomplete="off">
                                        <button class="btn btn-primary btn-lg search-btn" type="submit">
                                            <i class="fas fa-search me-2"></i>Search
                                        </button>
                                    </div>
                                </form>
                                @if ($search)
                                    <div class="mt-3 text-center">
                                        <small class="text-muted">Showing results for: <strong
                                                class="text-primary">{{ $search }}</strong></small>
                                        <a href="{{ route('universities') }}" class="btn btn-sm btn-outline-secondary ms-3">
                                            <i class="fas fa-times me-1"></i> Clear Search
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Universities Grid -->
        <section class="py-5" style="margin-top: 60px;">
            <div class="container">
                @if ($universities->count() > 0)
                    <div class="row mb-4">
                        <div class="col-12">
                            <h2 class="h4 mb-3">
                                @if ($search)
                                    Search Results ({{ $universities->total() }} found)
                                @else
                                    All Universities ({{ $universities->total() }} total)
                                @endif
                            </h2>
                        </div>
                    </div>

                    <div class="row g-4">
                        @foreach ($universities as $university)
                            <div class="col-lg-4 col-md-6">
                                <div class="university-card h-100 shadow-sm border-0 rounded-3 overflow-hidden hover-lift">
                                    <div class="card-body p-4">
                                        <!-- University Logo -->
                                        <div class="text-center mb-3">
                                            @if ($university->logo)
                                                <img src="{{ asset('storage/' . $university->logo) }}"
                                                    alt="{{ $university->name }} Logo"
                                                    class="university-logo rounded-circle shadow-sm"
                                                    style="width: 80px; height: 80px; object-fit: cover;">
                                            @else
                                                <div class="university-logo-placeholder rounded-circle bg-light d-flex align-items-center justify-content-center mx-auto shadow-sm"
                                                    style="width: 80px; height: 80px;">
                                                    <i class="fas fa-university text-primary fa-2x"></i>
                                                </div>
                                            @endif
                                        </div>

                                        <!-- University Name -->
                                        <h5 class="card-title text-center mb-3 fw-bold text-primary">{{ $university->name }}
                                        </h5>

                                        <!-- University Details -->
                                        <div class="university-details">
                                            <!-- Address -->
                                            {{-- <div class="detail-item mb-2">
                                                <i class="fas fa-map-marker-alt text-muted me-2"></i>
                                                <span
                                                    class="text-muted small">{{ Str::limit($university->address, 60) }}</span>
                                            </div> --}}

                                            <!-- Phone -->
                                            @if ($university->phone)
                                                {{-- <div class="detail-item mb-2">
                                                    <i class="fas fa-phone text-muted me-2"></i>
                                                    <a href="tel:{{ $university->phone }}"
                                                        class="text-decoration-none text-muted small">
                                                        {{ $university->phone }}
                                                    </a>
                                                </div> --}}
                                            @endif

                                            <!-- Email -->
                                            @if ($university->email)
                                                {{-- <div class="detail-item mb-2">
                                                    <i class="fas fa-envelope text-muted me-2"></i>
                                                    <a href="mailto:{{ $university->email }}"
                                                        class="text-decoration-none text-muted small">
                                                        {{ $university->email }}
                                                    </a>
                                                </div> --}}
                                            @endif
                                        </div>

                                        <!-- Action Buttons -->
                                        <div class="mt-3 pt-3 border-top">
                                            <div class="row g-2">
                                                <div class="col-12">
                                                    <a href="{{ route('contact') }}"
                                                        class="btn btn-outline-primary btn-sm w-100  btn-cta">
                                                        <i class="fas fa-envelope me-1"></i> Learn More
                                                    </a>
                                                </div>
                                                {{-- @if ($university->email)
                                                    <div class="col-6">
                                                        <a href="mailto:{{ $university->email }}"
                                                            class="btn btn-outline-primary btn-sm w-100">
                                                            <i class="fas fa-envelope me-1"></i> Contact
                                                        </a>
                                                    </div>
                                                @endif
                                                @if ($university->phone)
                                                    <div class="col-6">
                                                        <a href="tel:{{ $university->phone }}"
                                                            class="btn btn-outline-success btn-sm w-100">
                                                            <i class="fas fa-phone me-1"></i> Call
                                                        </a>
                                                    </div>
                                                @endif --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    <div class="row mt-5">
                        <div class="col-12">
                            <div class="d-flex justify-content-center">
                                {{ $universities->appends(request()->query())->links() }}
                            </div>
                        </div>
                    </div>
                @else
                    <!-- No Results -->
                    <div class="row">
                        <div class="col-12">
                            <div class="text-center py-5">
                                <div class="mb-4">
                                    <i class="fas fa-university text-muted" style="font-size: 4rem;"></i>
                                </div>
                                <h3 class="text-muted mb-3">
                                    @if ($search)
                                        No universities found for "{{ $search }}"
                                    @else
                                        No universities available
                                    @endif
                                </h3>
                                <p class="text-muted mb-4">
                                    @if ($search)
                                        Try adjusting your search terms or browse all universities.
                                    @else
                                        Universities will appear here once they are added by administrators.
                                    @endif
                                </p>
                                @if ($search)
                                    <a href="{{ route('universities') }}" class="btn btn-primary">
                                        <i class="fas fa-list me-2"></i>View All Universities
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </section>
    </div>



    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
            min-height: 60vh;
            padding-bottom: 120px;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
            opacity: 0.3;
            z-index: 1;
            pointer-events: none;
        }

        .fullscreen-search-container {
            z-index: 10;
            transform: translateY(50%);
            margin-bottom: 100px;
        }

        .search-box {
            position: relative;
            z-index: 2;
            border-radius: 20px 20px 0 0 !important;
            border: none;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
        }

        .search-input {
            border: 2px solid #e9ecef;
            border-radius: 15px;
            padding: 15px 20px;
            font-size: 1.1rem;
            line-height: 1.5;
            height: auto;
            min-height: 50px;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }

        .search-input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
            background: white;
        }

        .search-btn {
            border-radius: 15px;
            padding: 15px 25px;
            font-weight: 600;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            transition: all 0.3s ease;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        }

        .university-card {
            transition: all 0.3s ease;
            border: 1px solid #e9ecef;
            background: #fff;
        }

        .university-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
        }

        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .detail-item {
            display: flex;
            align-items: flex-start;
            line-height: 1.4;
        }

        .detail-item i {
            margin-top: 2px;
            width: 16px;
            flex-shrink: 0;
        }





        @media (max-width: 768px) {
            .display-4 {
                font-size: 2rem;
            }

            .hero-section {
                min-height: 50vh;
                padding-bottom: 100px;
            }

            .university-card {
                margin-bottom: 1rem;
            }

            .search-input {
                padding: 12px 15px;
                font-size: 1rem;
                min-height: 45px;
                line-height: 1.4;
            }

            .search-btn {
                padding: 12px 15px;
                font-size: 0.9rem;
                min-height: 45px;
            }

            .fullscreen-search-container {
                transform: translateY(40%);
            }
        }

        @media (max-width: 480px) {
            .hero-section {
                min-height: 45vh;
                padding-bottom: 80px;
            }

            .search-input {
                padding: 10px 12px;
                font-size: 0.9rem;
                min-height: 40px;
                line-height: 1.3;
            }

            .search-btn {
                padding: 10px 12px;
                font-size: 0.85rem;
                min-height: 40px;
            }

            .search-box {
                margin: 0 10px;
            }

            .fullscreen-search-container {
                transform: translateY(35%);
            }
        }
    </style>


@endsection