@extends('layouts.admin')
@section('title', $product ? $product->names['en'] ?? __('Edit product') : __('New product'))
@section('content')
@php $m = $shop->money; $p = $product; $selCats = old('category_ids', $p->category_ids ?? []); @endphp
<a href="{{ route('admin.products') }}" class="text-sm font-bold text-primary hover:underline">← {{ __('Products') }}</a>
<div class="mb-6 mt-2 flex flex-wrap items-center justify-between gap-3">
    <h1 class="text-2xl font-extrabold text-primary">{{ $p ? ($p->names['en'] ?? __('Edit product')) : __('New product') }}</h1>
    @if ($p && $p->status === 'active')<a href="{{ route('product', $p->slug) }}" target="_blank" class="text-sm font-bold text-primary underline">{{ __('View in shop') }} ↗</a>@endif
</div>

<form method="POST" action="{{ $p ? route('admin.products.update', $p->id) : route('admin.products.store') }}" class="space-y-6">
    @csrf @if ($p) @method('PUT') @endif
    <section class="space-y-4 rounded-[32px] border border-surface-variant bg-white p-6">
        <h2 class="font-extrabold text-primary">{{ __('Details') }}</h2>
        <x-field name="names[en]" :label="__('Name (English)')" :value="$p->names['en'] ?? ''" required/>
        <x-field name="shorts[en]" :label="__('Short description (English)')" :value="$p->shorts['en'] ?? ''"/>
        <x-field name="descriptions[en]" type="textarea" :label="__('Description (English)')" :value="$p->descriptions['en'] ?? ''"/>
        <details class="rounded-2xl bg-surface-mid p-4" @if (!empty($p->names['km']) || !empty($p->names['zh'])) open @endif>
            <summary class="cursor-pointer font-bold text-primary">{{ __('Khmer & Chinese text') }}</summary>
            <div class="mt-4 grid gap-4 lg:grid-cols-2">
                @foreach (['km' => 'Khmer', 'zh' => 'Chinese'] as $l => $label)
                    <div class="space-y-4"><x-field name="names[{{ $l }}]" :label="__('Name').' ('.__($label).')'" :value="$p->names[$l] ?? ''"/>
                        <x-field name="shorts[{{ $l }}]" :label="__('Short description').' ('.__($label).')'" :value="$p->shorts[$l] ?? ''"/>
                        <x-field name="descriptions[{{ $l }}]" type="textarea" :label="__('Description').' ('.__($label).')'" :value="$p->descriptions[$l] ?? ''"/></div>
                @endforeach
            </div>
            <p class="mt-3 text-xs text-on-surface-variant">{{ __('Anything left empty falls back to English in the shop.') }}</p>
        </details>
    </section>

    <section class="space-y-4 rounded-[32px] border border-surface-variant bg-white p-6">
        <h2 class="font-extrabold text-primary">{{ __('Price & info') }} <span class="text-sm font-normal text-on-surface-variant">({{ __('in USD') }})</span></h2>
        <div class="grid gap-4 sm:grid-cols-3">
            <x-field name="base_price" type="number" step="0.01" min="0" :label="__('Price')" :value="$p->base_price ?? ''" required/>
            <x-field name="compare_at_price" type="number" step="0.01" min="0" :label="__('Was price (shows as sale)')" :value="$p->compare_at_price ?? ''" :hint="__('Must be higher than the price.')"/>
            <x-field name="weight_g" type="number" min="0" :label="__('Weight (grams)')" :value="$p->weight_g ?? ''"/>
        </div>
        <div class="grid gap-4 sm:grid-cols-2">
            <x-field name="material" :label="__('Material')" :value="$p->material ?? ''"/>
            <x-field name="care_instructions" :label="__('Care instructions')" :value="$p->care_instructions ?? ''"/>
            @unless ($p)<x-field name="sku_prefix" :label="__('Product code')" :hint="__('Leave empty to create one automatically.')"/>@endunless
        </div>
    </section>

    <section class="space-y-4 rounded-[32px] border border-surface-variant bg-white p-6">
        <h2 class="font-extrabold text-primary">{{ __('Shop settings') }}</h2>
        <div class="grid gap-4 sm:grid-cols-2">
            <div><label for="status" class="mb-1.5 block text-sm font-semibold text-on-surface-variant">{{ __('Status') }}</label>
                <select id="status" name="status" class="min-h-[48px] w-full rounded-2xl border border-outline-variant bg-white px-4">
                    @foreach (['draft' => __('Draft (hidden)'), 'active' => __('Active (on sale)'), 'archived' => __('Archived (hidden)')] as $k => $l)<option value="{{ $k }}" @selected(old('status', $p->status ?? 'draft') === $k)>{{ $l }}</option>@endforeach</select></div>
            <div class="space-y-1 pt-6">
                <label class="flex min-h-[40px] items-center gap-3"><input type="checkbox" name="is_new_arrival" value="1" @checked(old('is_new_arrival', $p->is_new_arrival ?? 0)) class="h-4 w-4 accent-[#1a3627]"> {{ __('Mark as new arrival') }}</label>
                <label class="flex min-h-[40px] items-center gap-3"><input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $p->is_featured ?? 0)) class="h-4 w-4 accent-[#1a3627]"> {{ __('Featured') }}</label>
            </div>
        </div>
        <fieldset><legend class="mb-2 text-sm font-semibold text-on-surface-variant">{{ __('Categories') }}</legend>
            <div class="flex flex-wrap gap-2">
                @forelse ($categories as $c)
                    <label class="cursor-pointer"><input type="checkbox" name="category_ids[]" value="{{ $c->id }}" @checked(in_array($c->id, array_map('intval', $selCats), true)) class="peer sr-only">
                        <span class="flex min-h-[40px] items-center rounded-full border border-outline-variant px-4 text-sm font-bold peer-checked:border-primary peer-checked:bg-primary peer-checked:text-on-primary">{{ $c->name }}</span></label>
                @empty <p class="text-sm text-on-surface-variant">{{ __('No categories yet.') }} <a class="underline" href="{{ route('admin.categories.create') }}">{{ __('Create one') }}</a></p> @endforelse
            </div></fieldset>
    </section>
    <x-btn type="submit">{{ $p ? __('Save product') : __('Create product') }}</x-btn>
</form>

@if ($p)
{{-- Photos --}}
{{-- Photos --}}
@php $photoColors = collect($p->variants)->filter(fn ($v) => $v->color_value_id)->mapWithKeys(fn ($v) => [(int) $v->color_value_id => $v->color])->all(); @endphp
<section class="mt-8 rounded-[32px] border border-surface-variant bg-white p-6">
    <h2 class="mb-4 font-extrabold text-primary">{{ __('Photos') }}</h2>
    <div class="mb-5 grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-6">
        @forelse ($p->images as $img)
            <figure class="rounded-2xl bg-surface-mid p-2">
                <img src="{{ $img->url }}" alt="" class="aspect-square w-full rounded-xl object-cover">
                @if ($photoColors)
                    <form method="POST" action="{{ route('admin.products.images.color', [$p->id, $img->id]) }}" class="mt-2">@csrf @method('PATCH')
                        <label class="sr-only" for="pc{{ $img->id }}">{{ __('Photo colour') }}</label>
                        <select id="pc{{ $img->id }}" name="color_value_id" onchange="this.form.submit()" class="min-h-[36px] w-full rounded-xl border border-outline-variant bg-white px-2 text-xs font-bold">
                            <option value="">{{ __('All colours') }}</option>
                            @foreach ($photoColors as $cid => $clabel)<option value="{{ $cid }}" @selected((int) $img->color_value_id === $cid)>{{ $clabel }}</option>@endforeach
                        </select>
                    </form>
                @endif
                <figcaption class="mt-2 flex items-center justify-between gap-1 text-xs">
                    @if ($img->is_primary)<span class="rounded-full bg-secondary-container px-2 py-1 font-bold text-on-secondary-container">{{ __('Main') }}</span>
                    @else<form method="POST" action="{{ route('admin.products.images.primary', [$p->id, $img->id]) }}">@csrf @method('PATCH')<button class="font-bold text-primary underline">{{ __('Make main') }}</button></form>@endif
                    <form method="POST" action="{{ route('admin.products.images.delete', [$p->id, $img->id]) }}" onsubmit="return confirm('{{ __('Remove this photo?') }}')">@csrf @method('DELETE')<button class="font-bold text-on-surface-variant underline hover:text-error">{{ __('Remove') }}</button></form>
                </figcaption>
            </figure>
        @empty <p class="col-span-full text-sm text-on-surface-variant">{{ __('No photos yet.') }}</p> @endforelse
    </div>
    <form method="POST" enctype="multipart/form-data" action="{{ route('admin.products.images', $p->id) }}" class="flex flex-wrap items-end gap-3">@csrf
        <div><label for="images" class="mb-1.5 block text-sm font-semibold text-on-surface-variant">{{ __('Upload photos (JPG, PNG, WebP, up to 8 MB each; they are resized automatically)') }}</label><input id="images" type="file" name="images[]" multiple accept="image/*" required class="block text-sm"></div>
        @if ($photoColors)
            <div><label for="photo-color" class="mb-1.5 block text-sm font-semibold text-on-surface-variant">{{ __('These photos are for colour') }}</label>
                <select id="photo-color" name="color_value_id" class="min-h-[44px] rounded-full border border-outline-variant bg-white px-4 text-sm font-bold"><option value="">{{ __('All colours') }}</option>@foreach ($photoColors as $cid => $clabel)<option value="{{ $cid }}">{{ $clabel }}</option>@endforeach</select></div>
        @endif
        <x-btn type="submit" variant="ghost">{{ __('Upload') }}</x-btn>
    </form>
    @if (!$photoColors)<p class="mt-2 text-sm text-on-surface-variant">{{ __('Create the colour variants first, then you can set which photos belong to which colour.') }}</p>@endif
    @error('images.*')<p class="mt-2 text-sm text-error">{{ $message }}</p>@enderror
</section>

{{-- Variants --}}
<section class="mt-8 rounded-[32px] border border-surface-variant bg-white p-6">
    <h2 class="mb-1 font-extrabold text-primary">{{ __('Variants & stock') }}</h2>
    <p class="mb-4 text-sm text-on-surface-variant">{{ __('A variant is one colour + size shoppers can buy. Pick the colours and sizes this product comes in; missing combinations are created, existing ones are kept.') }}</p>
    <form method="POST" action="{{ route('admin.products.variants', $p->id) }}" class="mb-6 space-y-4 rounded-2xl bg-surface-mid p-4">@csrf
        <fieldset><legend class="mb-2 text-sm font-semibold">{{ __('Colours') }}</legend>
            <div class="flex flex-wrap gap-2">@forelse ($colors as $c)<label class="cursor-pointer"><input type="checkbox" name="colors[]" value="{{ $c->id }}" class="peer sr-only"><span class="flex min-h-[40px] items-center gap-2 rounded-full border border-outline-variant bg-white px-3 text-sm font-bold peer-checked:border-primary peer-checked:ring-2 peer-checked:ring-primary"><span class="h-4 w-4 rounded-full ring-1 ring-outline" style="background: {{ $c->hex }}"></span>{{ $c->label }}</span></label>
                @empty <a class="text-sm underline" href="{{ route('admin.options') }}">{{ __('Add colours first') }}</a>@endforelse</div></fieldset>
        <fieldset><legend class="mb-2 text-sm font-semibold">{{ __('Sizes') }}</legend>
            <div class="flex flex-wrap gap-2">@forelse ($sizes as $s)<label class="cursor-pointer"><input type="checkbox" name="sizes[]" value="{{ $s->id }}" class="peer sr-only"><span class="flex min-h-[40px] items-center rounded-full border border-outline-variant bg-white px-4 text-sm font-bold peer-checked:border-primary peer-checked:bg-primary peer-checked:text-on-primary">{{ $s->label }}</span></label>
                @empty <a class="text-sm underline" href="{{ route('admin.options') }}">{{ __('Add sizes first') }}</a>@endforelse</div></fieldset>
        <x-btn type="submit">{{ __('Create variants') }}</x-btn>
    </form>

    @if ($p->variants)
    <div class="overflow-x-auto">
        <table class="w-full min-w-[760px] text-left text-sm">
            <thead class="text-on-surface-variant"><tr><th class="p-2">{{ __('Variant') }}</th><th class="p-2">{{ __('Price override') }}</th><th class="p-2">{{ __('Was price') }}</th><th class="p-2">{{ __('On sale') }}</th><th class="p-2"></th><th class="p-2">{{ __('In stock') }}</th><th class="p-2"></th></tr></thead>
            <tbody>
            @foreach ($p->variants as $v)
                <tr class="border-t border-surface-variant align-middle">
                    <form id="vf{{ $v->id }}" method="POST" action="{{ route('admin.products.variants.update', [$p->id, $v->id]) }}">@csrf @method('PATCH')</form>
                    <td class="p-2"><span class="font-bold text-primary">{{ collect([$v->color, $v->size])->filter()->implode(' / ') ?: __('Default') }}</span><span class="block text-xs text-outline">{{ $v->sku }}</span></td>
                    <td class="p-2"><input form="vf{{ $v->id }}" name="price" type="number" step="0.01" min="0" value="{{ $v->price }}" placeholder="{{ $p->base_price }}" aria-label="{{ __('Price override') }}" class="min-h-[40px] w-24 rounded-xl border border-outline-variant px-2"></td>
                    <td class="p-2"><input form="vf{{ $v->id }}" name="compare_at_price" type="number" step="0.01" min="0" value="{{ $v->compare_at_price }}" aria-label="{{ __('Was price') }}" class="min-h-[40px] w-24 rounded-xl border border-outline-variant px-2"></td>
                    <td class="p-2"><label class="flex min-h-[40px] items-center gap-2"><input form="vf{{ $v->id }}" type="checkbox" name="is_active" value="1" @checked($v->is_active) class="h-4 w-4 accent-[#1a3627]"> {{ __('Active') }}</label></td>
                    <td class="p-2"><button form="vf{{ $v->id }}" class="font-bold text-primary underline">{{ __('Save') }}</button></td>
                    <td class="p-2">
                        <form method="POST" action="{{ route('admin.stock.update', $v->id) }}" class="flex items-center gap-2">@csrf @method('PATCH')
                            <input name="quantity" type="number" min="{{ $v->reserved }}" value="{{ $v->quantity }}" aria-label="{{ __('Stock quantity') }}" class="min-h-[40px] w-20 rounded-xl border border-outline-variant px-2">
                            <button class="font-bold text-primary underline">{{ __('Set') }}</button>
                            @if ((int) $v->reserved > 0)<span class="text-xs text-outline">{{ __(':n reserved', ['n' => $v->reserved]) }}</span>@endif
                        </form></td>
                    <td class="p-2 text-right"><form method="POST" action="{{ route('admin.products.variants.delete', [$p->id, $v->id]) }}" onsubmit="return confirm('{{ __('Remove this variant?') }}')">@csrf @method('DELETE')<button class="font-bold text-on-surface-variant underline hover:text-error">{{ __('Remove') }}</button></form></td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    @else <p class="text-sm text-on-surface-variant">{{ __('No variants yet — shoppers can\'t buy this product until you create some.') }}</p> @endif
</section>

<form method="POST" action="{{ route('admin.products.delete', $p->id) }}" class="mt-8" onsubmit="return confirm('{{ __('Delete this product? Past orders keep their details.') }}')">@csrf @method('DELETE')<x-btn type="submit" variant="danger">{{ __('Delete product') }}</x-btn></form>
@endif
@endsection