@extends('layouts.app')

@section('title', 'Pathways')

@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">Explore Your Educational Pathways</h1>
                        <p class="lead mb-5">Discover diverse educational opportunities and programs designed to help you
                            achieve your academic and career goals. Find the perfect pathway for your future.</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('pathway') }}">
                                    <div class="input-group input-group-lg">
                                        <input type="text" class="form-control form-control-lg search-input"
                                            name="search" value="{{ $search }}"
                                            placeholder="Search educational pathways and programs..." 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('pathway') }}" 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>

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

                    <div class="row g-4">
                        @foreach ($pathways as $pathway)
                            <div class="col-lg-4 col-md-6">
                                <div class="pathway-card h-100 shadow-sm border-0 rounded-3 overflow-hidden hover-lift">
                                    <div class="card-body p-4">
                                        <!-- Pathway Logo -->
                                        <div class="pathway-card-header" style="position: relative; overflow: hidden;">
                                            @if ($pathway->logo)
                                                {{-- <img src="{{ asset('storage/' . $pathway->logo) }}" --}}
                                                <img src="{{ asset('img/' . $pathway->logo) }}"
                                                    alt="{{ $pathway->name }} Logo" class="img-fluid"
                                                    style="width: 100%; height: 100%; object-fit: cover;">
                                            @else
                                                <div class="d-flex align-items-center justify-content-center"
                                                    style="width: 100%; height: 100%; background-color: #f8f9fa;">
                                                    <i class="fas fa-graduation-cap text-primary fa-3x"></i>
                                                </div>
                                            @endif
                                            {{-- <div class="pathway-card-title-overlay"
                                                style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); padding: 10px;">
                                                <h5 class="card-title text-center text-white mb-0 fw-bold">
                                                    {{ $pathway->name }}</h5>
                                            </div> --}}
                                        </div>
                                        <!-- Pathway Description -->
                                        <div class="pathway-details">
                                            <h5 class="card-title text-center text-black fw-bold mt-5 mb-2"
                                                style="color: #003c82 !important">
                                                {{ $pathway->name }}</h5>
                                            <div class="detail-item mb-3">
                                                <p class="text-muted small mb-0">{{ $pathway->short_description }}</p>
                                            </div>
                                        </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-info-circle me-1"></i> Learn More
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    <div class="row mt-5">
                        <div class="col-12">
                            <div class="d-flex justify-content-center">
                                {{ $pathways->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-graduation-cap text-muted" style="font-size: 4rem;"></i>
                                </div>
                                <h3 class="text-muted mb-3">
                                    @if ($search)
                                        No pathways found for "{{ $search }}"
                                    @else
                                        No pathways available
                                    @endif
                                </h3>
                                <p class="text-muted mb-4">
                                    @if ($search)
                                        Try adjusting your search terms or browse all pathways.
                                    @else
                                        Pathways will appear here once they are added by administrators.
                                    @endif
                                </p>
                                @if ($search)
                                    <a href="{{ route('pathway') }}" class="btn btn-primary">
                                        <i class="fas fa-list me-2"></i>View All Pathways
                                    </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%);
        }

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

        .pathway-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;
            }

            .pathway-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