@extends('layouts.admin')
@section('content')
<div class="flex flex-wrap items-end justify-between gap-4">
    <div>
        <p class="hms-kicker">Content assets</p>
        <h1 class="font-serif text-4xl">Media Library</h1>
        <p class="mt-2 max-w-3xl text-black/55">Images added here are available immediately. You can also upload or link images directly while editing products, strains, Business Settings, and visual pages.</p>
    </div>
</div>

<section class="mt-7 rounded-2xl border border-black/10 bg-white p-6">
    <h2 class="font-serif text-2xl">Add an image</h2>
    <p class="mt-2 text-sm text-black/55">Upload a JPG, PNG, or WebP, or paste a direct HTTPS image link. Only add images HMS has permission to publish.</p>
    <form class="mt-5 grid gap-4 lg:grid-cols-2" method="POST" enctype="multipart/form-data" action="{{ route('admin.media.store') }}">
        @csrf
        <label class="grid gap-2 text-sm font-semibold">Upload image
            <input class="rounded-xl border border-black/15 px-4 py-3" type="file" name="file" accept="image/jpeg,image/png,image/webp">
            <span class="text-xs font-normal text-black/45">Maximum 8 MB. Leave blank if using an image link instead.</span>
        </label>
        <label class="grid gap-2 text-sm font-semibold">Or paste image link
            <input class="rounded-xl border border-black/15 px-4 py-3" type="url" name="image_url" placeholder="https://example.com/image.jpg">
            <span class="text-xs font-normal text-black/45">Use a direct HTTPS URL. Leave blank when uploading a file.</span>
        </label>
        <label class="grid gap-2 text-sm font-semibold lg:col-span-2">Alt text
            <input class="rounded-xl border border-black/15 px-4 py-3" name="alt_text" required placeholder="Describe what is visible in the image">
            <span class="text-xs font-normal text-black/45">Used by screen readers and when the image cannot load.</span>
        </label>
        <label class="grid gap-2 text-sm font-semibold">Caption <span class="font-normal text-black/40">Optional</span><input class="rounded-xl border border-black/15 px-4 py-3" name="caption"></label>
        <label class="grid gap-2 text-sm font-semibold">Source / original URL <span class="font-normal text-black/40">Optional</span><input class="rounded-xl border border-black/15 px-4 py-3" name="source"></label>
        <label class="grid gap-2 text-sm font-semibold">Copyright owner <span class="font-normal text-black/40">Optional</span><input class="rounded-xl border border-black/15 px-4 py-3" name="copyright_owner"></label>
        <div class="flex items-end"><button class="hms-button hms-button-primary">Add image</button></div>
    </form>
    <p class="mt-4 text-xs text-black/45">If a file upload fails before HMS can validate it, check the hosting account’s PHP <code>upload_max_filesize</code> and <code>post_max_size</code>. The application accepts images up to 8 MB.</p>
</section>

<section class="mt-8">
    <h2 class="font-serif text-2xl">Images</h2>
    <div class="mt-4 grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
        @forelse($media as $item)
            <article class="overflow-hidden rounded-2xl border border-black/10 bg-white">
                <img class="aspect-[4/3] w-full object-cover" src="{{ $item->publicUrl() }}" alt="{{ $item->alt_text }}" loading="lazy">
                <div class="p-5">
                    <div class="flex items-start justify-between gap-3"><strong class="break-all text-sm">{{ $item->original_filename }}</strong><span class="rounded-full bg-black/5 px-2 py-1 text-[10px] font-bold uppercase">{{ $item->external_url ? 'Linked' : 'Uploaded' }}</span></div>
                    <form class="mt-4 grid gap-3" method="POST" action="{{ route('admin.media.update', $item) }}">
                        @csrf @method('PUT')
                        <label class="grid gap-1 text-xs font-semibold">Alt text<input class="rounded-lg border border-black/15 p-2 text-sm" name="alt_text" value="{{ $item->alt_text }}" required></label>
                        <label class="grid gap-1 text-xs font-semibold">Caption<input class="rounded-lg border border-black/15 p-2 text-sm" name="caption" value="{{ $item->caption }}"></label>
                        <label class="grid gap-1 text-xs font-semibold">Source<input class="rounded-lg border border-black/15 p-2 text-sm" name="source" value="{{ $item->source }}"></label>
                        <label class="grid gap-1 text-xs font-semibold">Copyright owner<input class="rounded-lg border border-black/15 p-2 text-sm" name="copyright_owner" value="{{ $item->copyright_owner }}"></label>
                        <label class="grid gap-1 text-xs font-semibold">Visibility
                            <select class="rounded-lg border border-black/15 p-2 text-sm" name="status">
                                @foreach(['published'=>'Available','draft'=>'Hidden from new selections','archived'=>'Archived'] as $value=>$label)<option value="{{ $value }}" @selected($item->status===$value)>{{ $label }}</option>@endforeach
                            </select>
                        </label>
                        <button class="hms-button border border-black/15 justify-self-start">Save image details</button>
                    </form>
                    <form class="mt-4" method="POST" action="{{ route('admin.media.destroy', $item) }}" onsubmit="return confirm('Delete this image?')">@csrf @method('DELETE')<button class="text-xs font-semibold text-red-700">Delete image</button></form>
                </div>
            </article>
        @empty
            <p class="rounded-2xl border border-dashed border-black/15 p-6 text-sm text-black/45">No images have been added yet.</p>
        @endforelse
    </div>
    <div class="mt-6">{{ $media->links() }}</div>
</section>
@endsection