@extends('layouts.school')

@section('title', 'Campuses')
@section('header', 'Campuses')

@section('content')
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-4">
            @forelse($campuses as $campus)
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                    <div class="flex items-start justify-between">
                        <div>
                            <div class="flex items-center gap-2">
                                <h3 class="text-lg font-display font-semibold text-gray-900">{{ $campus->name }}</h3>
                                @if($campus->is_main)
                                    <span class="rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-700">Main</span>
                                @endif
                                @if(!$campus->is_active)
                                    <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500">Archived</span>
                                @endif
                            </div>
                            @if($campus->code)
                                <p class="mt-0.5 text-xs text-gray-400">Code: {{ $campus->code }}</p>
                            @endif
                            <p class="mt-1 text-sm text-gray-500">
                                {{ $campus->students_count }} students &middot; {{ $campus->teachers_count }} teachers &middot; {{ $campus->classes_count }} classes
                            </p>
                            @if($campus->address)
                                <p class="mt-1 text-sm text-gray-500">{{ $campus->address }}</p>
                            @endif
                        </div>
                        <div class="flex items-center gap-2">
                            <details class="relative">
                                <summary class="list-none cursor-pointer rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50">Edit</summary>
                                <form method="POST" action="{{ route('school.settings.update-campus', [request()->route('schoolId'), $campus->id]) }}" class="absolute right-0 z-10 mt-2 w-72 rounded-xl bg-white shadow-lg ring-1 ring-gray-900/10 p-4 space-y-3">
                                    @csrf @method('PATCH')
                                    <input type="text" name="name" value="{{ $campus->name }}" required placeholder="Campus name" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
                                    <input type="text" name="code" value="{{ $campus->code }}" placeholder="Code" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
                                    <input type="text" name="address" value="{{ $campus->address }}" placeholder="Address" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
                                    <div class="flex gap-2">
                                        <button type="submit" class="rounded-lg bg-primary-600 px-4 py-2 text-xs font-semibold text-white hover:bg-primary-700">Save</button>
                                        <button type="button" onclick="this.closest('details').removeAttribute('open')" class="rounded-lg border border-gray-300 px-4 py-2 text-xs font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                                    </div>
                                </form>
                            </details>
                            <form method="POST" action="{{ route('school.settings.toggle-campus', [request()->route('schoolId'), $campus->id]) }}">
                                @csrf @method('PATCH')
                                <button type="submit" class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50">{{ $campus->is_active ? 'Archive' : 'Restore' }}</button>
                            </form>
                            <form method="POST" action="{{ route('school.settings.destroy-campus', [request()->route('schoolId'), $campus->id]) }}" onsubmit="return confirm('Delete this campus?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50">Delete</button>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-12 text-center text-sm text-gray-500">
                    No campuses yet. A single-site school can run without campuses, or add your first campus below.
                </div>
            @endforelse
        </div>

        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 h-fit">
            <h3 class="font-display font-semibold text-gray-900 mb-4">Add Campus</h3>
            <form method="POST" action="{{ route('school.settings.store-campus', request()->route('schoolId')) }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700">Name *</label>
                    <input type="text" name="name" value="{{ old('name') }}" required maxlength="255" placeholder="e.g. Main Campus" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Code</label>
                    <input type="text" name="code" value="{{ old('code') }}" maxlength="20" placeholder="e.g. MC" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @error('code') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Address</label>
                    <input type="text" name="address" value="{{ old('address') }}" maxlength="500" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @error('address') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Phone</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" maxlength="30" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @error('phone') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" maxlength="255" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <button type="submit" class="w-full rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Create Campus</button>
            </form>
        </div>
    </div>
@endsection