@extends('layouts.school')
@section('title', 'Media Library')
@section('header', 'Media Library')
@section('content')
    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
        <h3 class="text-lg font-display font-semibold text-gray-900 mb-4">Upload Files</h3>
        <form method="POST" action="{{ route('school.cms.store-media', request()->route('schoolId')) }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            @if ($errors->any())
                <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-600">{{ $errors->first() }}</div>
            @endif
            <div><label class="block text-xs font-medium text-gray-700">Files * <span class="font-normal text-gray-400">(images or documents, max 10MB each)</span></label>
                <input type="file" name="files[]" multiple required class="mt-1 block w-full text-sm text-gray-500 file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-primary-700 hover:file:bg-primary-100"></div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="block text-xs font-medium text-gray-700">Alt text (for images)</label><input type="text" name="alt_text" value="{{ old('alt_text') }}" maxlength="255" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
                <div><label class="block text-xs font-medium text-gray-700">Caption</label><input type="text" name="caption" value="{{ old('caption') }}" maxlength="500" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
            </div>
            <button type="submit" class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Upload</button>
        </form>
    </div>

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-4 mb-6 flex flex-wrap items-center gap-3">
        <form method="GET" class="flex flex-wrap items-center gap-3">
            <input type="text" name="q" value="{{ request('q') }}" placeholder="Search files..." class="w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            <select name="kind" class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                <option value="">All types</option>
                <option value="image" @selected(request('kind') === 'image')>Images</option>
                <option value="document" @selected(request('kind') === 'document')>Documents</option>
            </select>
            <button type="submit" class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-600 hover:bg-gray-50">Filter</button>
        </form>
    </div>

    @if ($media->isEmpty())
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-12 text-center text-sm text-gray-500">No files uploaded yet.</div>
    @else
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
            @foreach ($media as $file)
                <div class="group relative overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5">
                    <div class="flex aspect-square items-center justify-center bg-gray-50">
                        @if ($file->kind === 'image')
                            <img src="{{ $file->url }}" alt="{{ $file->alt_text }}" loading="lazy" class="h-full w-full object-cover">
                        @else
                            <svg class="h-10 w-10 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
                        @endif
                    </div>
                    <div class="p-3">
                        <p class="truncate text-xs font-semibold text-gray-900" title="{{ $file->original_name }}">{{ $file->original_name }}</p>
                        <p class="mt-0.5 text-[11px] text-gray-400">{{ $file->human_size }}</p>
                        <form method="POST" action="{{ route('school.cms.delete-media', [request()->route('schoolId'), $file->id]) }}" onsubmit="return confirm('Delete file?')" class="mt-2">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-[11px] font-medium text-red-500 hover:text-red-700">Delete</button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="mt-6">{{ $media->links() }}</div>
    @endif
@endsection