@extends('layouts.app')

@section('title', 'College Directory')
@section('page_header', 'Partner Colleges & Logos')

@section('content')
<div class="space-y-6" x-data="{ addModalOpen: false, editModalOpen: false, editCollegeData: {} }">

    <!-- Top Action Bar -->
    <div class="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-4 bg-white p-6 rounded-3xl border border-slate-200/80 shadow-sm">
        <div>
            <h2 class="text-xl font-extrabold text-slate-900">Partner Colleges & Universities</h2>
            <p class="text-xs text-slate-500">Manage institutions and upload custom college logos for certificates</p>
        </div>

        <button @click="addModalOpen = true" 
                class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-5 py-3 rounded-xl shadow-lg shadow-emerald-600/20 transition-all">
            <i data-lucide="plus-circle" class="w-4 h-4"></i>
            <span>Add Partner College</span>
        </button>
    </div>

    <!-- Colleges Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($colleges as $col)
        <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm hover:shadow-md transition-all flex flex-col justify-between space-y-4">
            
            <div class="flex items-start justify-between gap-4">
                <div class="w-14 h-14 rounded-2xl bg-slate-100 border border-slate-200 p-1 flex items-center justify-center flex-shrink-0 overflow-hidden">
                    @if($col->logo_path)
                        <img src="{{ Storage::url($col->logo_path) }}" alt="{{ $col->name }}" class="w-full h-full object-contain">
                    @else
                        <span class="font-extrabold text-slate-400 text-xs tracking-wider">{{ strtoupper(substr($col->name, 0, 3)) }}</span>
                    @endif
                </div>

                <div class="flex items-center gap-1">
                    <button @click="editCollegeData = @js($col); editModalOpen = true" 
                            class="p-2 text-slate-400 hover:text-emerald-600 hover:bg-slate-100 rounded-xl" title="Edit">
                        <i data-lucide="edit-3" class="w-4 h-4"></i>
                    </button>
                    
                    <form action="{{ route('admin.colleges.destroy', $col->id) }}" method="POST" onsubmit="return confirm('Delete {{ $col->name }}?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="p-2 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-xl" title="Delete">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </button>
                    </form>
                </div>
            </div>

            <div>
                <h3 class="font-bold text-slate-900 text-base leading-tight">{{ $col->name }}</h3>
                <p class="text-xs text-slate-500 mt-1">{{ $col->city_state ?? 'Location Not Specified' }}</p>
            </div>

            <div class="pt-3 border-t border-slate-100 flex items-center justify-between text-xs">
                <span class="text-slate-400 font-medium">Interns Registered</span>
                <span class="font-extrabold text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200">
                    {{ $col->students_count }} Students
                </span>
            </div>
        </div>
        @empty
        <div class="col-span-full bg-white p-12 rounded-3xl text-center text-slate-400">
            No partner colleges added yet. Click <strong>Add Partner College</strong> to get started.
        </div>
        @endforelse
    </div>

    @if($colleges->hasPages())
    <div class="p-4 bg-white rounded-2xl">
        {{ $colleges->links() }}
    </div>
    @endif

    <!-- ADD COLLEGE MODAL -->
    <div x-show="addModalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
        <div class="bg-white rounded-3xl p-8 max-w-md w-full space-y-6 shadow-2xl">
            <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                <h3 class="text-lg font-bold text-slate-900">Add New Partner College</h3>
                <button @click="addModalOpen = false" class="text-slate-400 hover:text-slate-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form action="{{ route('admin.colleges.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">College Name <span class="text-rose-500">*</span></label>
                    <input type="text" name="name" required placeholder="e.g. Delhi University (DU)"
                           class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">City & State</label>
                    <input type="text" name="city_state" placeholder="e.g. New Delhi, Delhi"
                           class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">College Logo Image</label>
                    <input type="file" name="logo" accept="image/*"
                           class="w-full text-xs text-slate-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                    <span class="text-[10px] text-slate-400 mt-1 block">PNG/JPG with transparent background recommended for best certificate look.</span>
                </div>

                <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
                    <button type="button" @click="addModalOpen = false" class="px-4 py-2.5 rounded-xl border border-slate-200 text-xs font-bold text-slate-600 hover:bg-slate-50">
                        Cancel
                    </button>
                    <button type="submit" class="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold shadow-lg shadow-emerald-600/20">
                        Save Partner College
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- EDIT COLLEGE MODAL -->
    <div x-show="editModalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
        <div class="bg-white rounded-3xl p-8 max-w-md w-full space-y-6 shadow-2xl">
            <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                <h3 class="text-lg font-bold text-slate-900">Edit College</h3>
                <button @click="editModalOpen = false" class="text-slate-400 hover:text-slate-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form :action="'{{ url('admin/colleges') }}/' + editCollegeData.id" method="POST" enctype="multipart/form-data" class="space-y-4">
                @csrf
                @method('PUT')
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">College Name</label>
                    <input type="text" name="name" x-model="editCollegeData.name" required
                           class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">City & State</label>
                    <input type="text" name="city_state" x-model="editCollegeData.city_state"
                           class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Replace Logo Image</label>
                    <input type="file" name="logo" accept="image/*"
                           class="w-full text-xs text-slate-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                </div>

                <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
                    <button type="button" @click="editModalOpen = false" class="px-4 py-2.5 rounded-xl border border-slate-200 text-xs font-bold text-slate-600 hover:bg-slate-50">
                        Cancel
                    </button>
                    <button type="submit" class="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold shadow-lg shadow-emerald-600/20">
                        Update Changes
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection
