@extends('admin.layouts.admin')

@section('title', $product->exists ? 'Edit Product' : 'New Product')

@section('content')

    <h1 class="text-lg font-semibold text-brand-ink lg:text-2xl lg:font-extrabold">{{ $product->exists ? 'Edit Product' : 'New Product' }}</h1>

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

        <div class="card border border-brand-green-200 p-6">
            <label class="mb-1.5 block text-sm font-semibold text-brand-ink">Category <span class="text-accent-liver">*</span></label>
            <select name="category_id" required
                    class="w-full max-w-sm rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
                <option value="">Select a category…</option>
                @foreach ($categories as $option)
                    <option value="{{ $option->id }}" @selected(old('category_id', $product->category_id) == $option->id)>
                        {{ $option->getTranslation('name', 'kn') }}
                    </option>
                @endforeach
            </select>
            @error('category_id') <p class="mt-2 text-xs text-accent-liver">{{ $message }}</p> @enderror
        </div>

        <div class="card border border-brand-green-200 p-6" data-autotranslate-group>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-brand-ink/65 lg:text-sm lg:font-bold">Name</h2>
                <x-autotranslate-button label="Auto-translate name" />
            </div>
            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                @foreach (config('site.locales') as $code => $meta)
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-brand-ink">
                            {{ $meta['name_en'] }} ({{ $meta['name'] }}) @if ($code === 'kn') <span class="text-accent-liver">*</span> @endif
                        </label>
                        <input type="text" name="name[{{ $code }}]" data-locale="{{ $code }}"
                               value="{{ old('name.'.$code, $product->getRawTranslations('name')[$code] ?? '') }}"
                               {{ $code === 'kn' ? 'required' : '' }}
                               class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
                    </div>
                @endforeach
            </div>
            @error('name.kn') <p class="mt-2 text-xs text-accent-liver">{{ $message }}</p> @enderror
        </div>

        <div class="card border border-brand-green-200 p-6" data-autotranslate-group>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-brand-ink/65 lg:text-sm lg:font-bold">Short Description <span class="font-normal normal-case text-brand-ink/65">(shown on product cards)</span></h2>
                <x-autotranslate-button label="Auto-translate" />
            </div>
            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                @foreach (config('site.locales') as $code => $meta)
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-brand-ink">{{ $meta['name_en'] }}</label>
                        <input type="text" name="short_description[{{ $code }}]" data-locale="{{ $code }}"
                               value="{{ old('short_description.'.$code, $product->getRawTranslations('short_description')[$code] ?? '') }}"
                               class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card border border-brand-green-200 p-6" data-autotranslate-group>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-brand-ink/65 lg:text-sm lg:font-bold">Full Description <span class="font-normal normal-case text-brand-ink/65">(shown on the product page)</span></h2>
                <x-autotranslate-button label="Auto-translate" />
            </div>
            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                @foreach (config('site.locales') as $code => $meta)
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-brand-ink">{{ $meta['name_en'] }}</label>
                        <textarea name="description[{{ $code }}]" rows="4" data-locale="{{ $code }}"
                                  class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">{{ old('description.'.$code, $product->getRawTranslations('description')[$code] ?? '') }}</textarea>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card border border-brand-green-200 grid grid-cols-1 gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3">
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-brand-ink">Price (₹)</label>
                <input type="number" step="0.01" name="price" value="{{ old('price', $product->price) }}"
                       class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700"
                       placeholder="Leave blank for &quot;Price on request&quot;">
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-brand-ink">MRP (₹, optional)</label>
                <input type="number" step="0.01" name="mrp" value="{{ old('mrp', $product->mrp) }}"
                       class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700"
                       placeholder="For showing a strike-through offer price">
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-brand-ink">Pack Size / Unit</label>
                <input type="text" name="unit_label" value="{{ old('unit_label', $product->unit_label) }}" placeholder="e.g. 200 ml, 60 capsules"
                       class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-brand-ink">Sort Order</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', $product->sort_order ?? 0) }}"
                       class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
            </div>
            <label class="flex items-center gap-2 self-end text-sm font-semibold text-brand-ink">
                <input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $product->is_featured ?? false)) class="rounded border-brand-green-100">
                Feature on homepage
            </label>
            <label class="flex items-center gap-2 self-end text-sm font-semibold text-brand-ink">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $product->is_active ?? true)) class="rounded border-brand-green-100">
                Visible on the website
            </label>
        </div>

        <div class="card border border-brand-green-200 p-6">
            <label class="mb-1.5 block text-sm font-semibold text-brand-ink">Photos</label>
            <input type="file" name="images[]" accept="image/*" multiple class="w-full text-sm">
            <p class="mt-1 text-xs text-brand-ink/65">The first photo (existing or newly uploaded) is used as the cover image. New uploads are added to the gallery.</p>
            @if (! empty($product->images))
                <div class="mt-4 flex flex-wrap gap-3">
                    @foreach ($product->galleryUrls() as $url)
                        <img src="{{ $url }}" alt="" class="h-20 w-20 rounded-xl object-cover">
                    @endforeach
                </div>
            @endif
        </div>

        <div class="flex gap-3">
            <button type="submit" class="btn-primary">Save Product</button>
            <a href="{{ route('admin.products.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>

@endsection