@extends('layouts.admin')
@section('content')
@php($editing = $product->exists)
<div>
    <p class="hms-kicker">Catalog</p>
    <h1 class="mt-1 font-serif text-4xl">{{ $editing ? 'Edit product' : 'Add product' }}</h1>
    <p class="mt-2 max-w-3xl text-sm text-black/55">Save as a draft while you work, or choose Published to put the product on the public site immediately. No separate content-approval step is required.</p>
</div>

<form class="mt-8 grid gap-6" method="POST" enctype="multipart/form-data" action="{{ $editing ? route('admin.products.update', $product) : route('admin.products.store') }}">
    @csrf
    @if($editing) @method('PUT') @endif

    <section class="grid gap-5 rounded-2xl border border-black/10 bg-white p-6 lg:grid-cols-2">
        <label class="grid gap-2 text-sm font-semibold">Name
            <input class="rounded-xl border border-black/15 px-4 py-3" name="name" value="{{ old('name', $product->name) }}" required>
        </label>
        <label class="grid gap-2 text-sm font-semibold">URL slug
            <input class="rounded-xl border border-black/15 px-4 py-3" name="slug" value="{{ old('slug', $product->slug) }}" placeholder="Generated from name if blank">
        </label>
        <label class="grid gap-2 text-sm font-semibold lg:col-span-2">Short description
            <textarea class="rounded-xl border border-black/15 px-4 py-3" name="short_description">{{ old('short_description', $product->short_description) }}</textarea>
        </label>
        <label class="grid gap-2 text-sm font-semibold lg:col-span-2">Description
            <textarea class="min-h-40 rounded-xl border border-black/15 px-4 py-3" name="description">{{ old('description', $product->description) }}</textarea>
        </label>

        <div class="lg:col-span-2 rounded-2xl border border-black/10 bg-[var(--hms-cream)] p-5">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <h2 class="font-serif text-2xl">Primary image</h2>
                    <p class="mt-1 max-w-3xl text-sm text-black/55">Choose an existing image, upload one here, or paste a direct HTTPS image link. A new upload/link is automatically added to Media Library and selected for this product.</p>
                    <p class="mt-1 text-xs text-black/45">Only add images HMS has permission to publish. Alt text is required for accessibility when adding a new image.</p>
                </div>
                @if($product->primaryMedia)
                    <img class="h-24 w-32 rounded-xl border border-black/10 object-cover" src="{{ $product->primaryMedia->publicUrl() }}" alt="{{ $product->primaryMedia->alt_text }}">
                @endif
            </div>
            <div class="mt-5 grid gap-4 lg:grid-cols-2">
                <label class="grid gap-2 text-sm font-semibold lg:col-span-2">Use an existing image
                    <select class="rounded-xl border border-black/15 bg-white px-4 py-3" name="primary_media_id">
                        <option value="">No existing image selected</option>
                        @foreach($media as $item)
                            <option value="{{ $item->id }}" @selected((string) old('primary_media_id', $product->primary_media_id) === (string) $item->id)>{{ $item->original_filename }} — {{ $item->alt_text }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="grid gap-2 text-sm font-semibold">Upload a new image
                    <input class="rounded-xl border border-black/15 bg-white px-4 py-3" type="file" name="primary_image_file" accept="image/jpeg,image/png,image/webp">
                    <span class="text-xs font-normal text-black/45">JPG, PNG, or WebP. Maximum 8 MB.</span>
                </label>
                <label class="grid gap-2 text-sm font-semibold">Or paste an image link
                    <input class="rounded-xl border border-black/15 bg-white px-4 py-3" type="url" name="primary_image_url" value="{{ old('primary_image_url') }}" placeholder="https://example.com/image.jpg">
                    <span class="text-xs font-normal text-black/45">Use a direct HTTPS image URL.</span>
                </label>
                <label class="grid gap-2 text-sm font-semibold lg:col-span-2">Alt text for the new image
                    <input class="rounded-xl border border-black/15 bg-white px-4 py-3" name="primary_image_alt" value="{{ old('primary_image_alt') }}" placeholder="Describe what is visible in the image">
                </label>
            </div>
        </div>

        <label class="grid gap-2 text-sm font-semibold">Publishing status
            <select class="rounded-xl border border-black/15 px-4 py-3" name="status">
                @foreach(['draft'=>'Draft — not public','published'=>'Published — visible now','expired'=>'Expired — hidden from public catalog','archived'=>'Archived — retained but hidden'] as $value=>$label)
                    <option value="{{ $value }}" @selected(old('status', $product->status ?: 'draft') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </label>
        <label class="grid gap-2 text-sm font-semibold">Availability
            <select class="rounded-xl border border-black/15 px-4 py-3" name="availability_status">
                @foreach(['unknown','available','limited','unavailable'] as $status)
                    <option value="{{ $status }}" @selected(old('availability_status', $product->availability_status ?: 'unknown') === $status)>{{ str($status)->headline() }}</option>
                @endforeach
            </select>
        </label>
        <label class="grid gap-2 text-sm font-semibold">Price
            <input class="rounded-xl border border-black/15 px-4 py-3" name="price" type="number" step="0.01" min="0" value="{{ old('price', $product->price) }}">
        </label>
        <label class="grid gap-2 text-sm font-semibold">Price unit
            <input class="rounded-xl border border-black/15 px-4 py-3" name="price_unit" value="{{ old('price_unit', $product->price_unit) }}">
        </label>
        <label class="grid gap-2 text-sm font-semibold">Producer/source
            <input class="rounded-xl border border-black/15 px-4 py-3" name="producer" value="{{ old('producer', $product->producer) }}">
        </label>
        <label class="grid gap-2 text-sm font-semibold">Batch / lot
            <input class="rounded-xl border border-black/15 px-4 py-3" name="batch_lot" value="{{ old('batch_lot', $product->batch_lot) }}">
        </label>
        <label class="grid gap-2 text-sm font-semibold">THC %
            <input class="rounded-xl border border-black/15 px-4 py-3" name="thc_percent" type="number" step="0.001" min="0" max="100" value="{{ old('thc_percent', $product->thc_percent) }}">
        </label>
        <label class="grid gap-2 text-sm font-semibold">CBD %
            <input class="rounded-xl border border-black/15 px-4 py-3" name="cbd_percent" type="number" step="0.001" min="0" max="100" value="{{ old('cbd_percent', $product->cbd_percent) }}">
        </label>
        <label class="grid gap-2 text-sm font-semibold">Last verified
            <input class="rounded-xl border border-black/15 px-4 py-3" name="last_verified_at" type="datetime-local" value="{{ old('last_verified_at', $product->last_verified_at?->format('Y-m-d\TH:i')) }}">
        </label>
        <label class="flex items-center gap-2 text-sm font-semibold"><input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $product->is_featured))> Featured</label>

        <fieldset class="lg:col-span-2">
            <legend class="text-sm font-semibold">Categories</legend>
            <div class="mt-3 flex flex-wrap gap-4">
                @foreach($categories as $category)
                    <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="category_ids[]" value="{{ $category->id }}" @checked(in_array($category->id, old('category_ids', $editing ? $product->categories()->pluck('product_categories.id')->all() : [])))>{{ $category->name }}</label>
                @endforeach
            </div>
        </fieldset>

        <fieldset class="lg:col-span-2">
            <legend class="text-sm font-semibold">Related strains</legend>
            <p class="mt-1 text-xs text-black/45">Choose any strains that should be associated with this product.</p>
            <div class="mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($strains as $strain)
                    <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="strain_ids[]" value="{{ $strain->id }}" @checked(in_array($strain->id, old('strain_ids', $editing ? $product->strains()->pluck('strains.id')->all() : [])))>{{ $strain->name }}</label>
                @endforeach
            </div>
        </fieldset>
    </section>

    <div class="flex flex-wrap gap-3">
        <button class="hms-button hms-button-primary">Save product</button>
        <a class="hms-button border border-black/15 bg-white" href="{{ route('admin.products.index') }}">Back</a>
    </div>
</form>

@if($editing)
    <form class="mt-8" method="POST" action="{{ route('admin.products.destroy', $product) }}" onsubmit="return confirm('Archive this product?')">
        @csrf @method('DELETE')
        <button class="text-sm font-semibold text-red-700">Archive product</button>
    </form>
@endif
@endsection