@extends('layouts.app')

@section('content')
<section class="bg-white">
    <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <div class="max-w-3xl">
            <p class="text-sm font-semibold uppercase tracking-wide text-sky-700">College and course matching</p>
            <h1 class="mt-3 text-4xl font-bold">Find colleges, universities, programs, transfer pathways, and nursing options.</h1>
            <p class="mt-4 leading-7 text-slate-600">Filter by state, city, GPA range, program, transfer acceptance, and nursing pathway.</p>
            <a href="{{ route('orders.create') }}" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-5 py-3 text-sm font-bold text-white shadow-lg shadow-emerald-600/20"><i data-lucide="send" class="h-4 w-4"></i> Get Academic Help</a>
        </div>
        <form class="mt-8 grid gap-4 rounded-lg border border-slate-200 bg-slate-50 p-5 md:grid-cols-6">
            <input name="state" value="{{ request('state') }}" placeholder="State" class="rounded-lg border border-slate-300 px-3 py-2 md:col-span-1">
            <input name="city" value="{{ request('city') }}" placeholder="City" class="rounded-lg border border-slate-300 px-3 py-2 md:col-span-1">
            <input name="gpa" value="{{ request('gpa') }}" type="number" step="0.01" placeholder="GPA" class="rounded-lg border border-slate-300 px-3 py-2 md:col-span-1">
            <input name="program" value="{{ request('program') }}" placeholder="Program" class="rounded-lg border border-slate-300 px-3 py-2 md:col-span-2">
            <button class="rounded-lg bg-slate-950 px-4 py-2 text-sm font-semibold text-white">Search</button>
            <label class="flex items-center gap-2 text-sm font-medium"><input type="checkbox" name="transfer" value="1" @checked(request('transfer'))> Transfer-friendly</label>
            <label class="flex items-center gap-2 text-sm font-medium"><input type="checkbox" name="nursing" value="1" @checked(request('nursing'))> Nursing pathway</label>
        </form>
        <div class="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($colleges as $college)
                <article class="rounded-lg border border-slate-200 bg-white p-5">
                    <p class="text-lg font-semibold">{{ $college->name }}</p>
                    <p class="mt-1 text-sm text-slate-600">{{ $college->city }}, {{ $college->state }} · {{ $college->type }}</p>
                    <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                        <div class="rounded-lg bg-slate-100 p-3"><span class="block text-slate-500">Minimum GPA</span><strong>{{ $college->minimum_gpa }}</strong></div>
                        <div class="rounded-lg bg-slate-100 p-3"><span class="block text-slate-500">Average GPA</span><strong>{{ $college->average_gpa }}</strong></div>
                    </div>
                    <p class="mt-4 text-sm leading-6 text-slate-600">{{ $college->admission_notes }}</p>
                    <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold">
                        @if ($college->transfer_friendly)<span class="rounded bg-emerald-100 px-2 py-1 text-emerald-800">Transfer-friendly</span>@endif
                        @if ($college->nursing_school)<span class="rounded bg-sky-100 px-2 py-1 text-sky-800">Nursing</span>@endif
                    </div>
                    @if ($college->website_url)
                        <a href="{{ $college->website_url }}" rel="nofollow noopener" class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-sky-700">Official website <i data-lucide="external-link" class="h-4 w-4"></i></a>
                    @endif
                </article>
            @endforeach
        </div>
        <div class="mt-8">{{ $colleges->links() }}</div>
    </div>
</section>
@endsection