@extends('admin.layouts.app')

@section('title', $product->exists ? 'Edit product' : 'Add product')
@section('crumbs')
    <a href="{{ route('admin.products.index') }}">Products</a>
    <span>{{ $product->exists ? $product->name : 'New' }}</span>
@endsection

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

        <div class="grid-2">
            <div>
                <div class="card">
                    <div class="card-head"><h2>Basic info</h2></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'name', 'label' => 'Product name', 'value' => $product->name, 'required' => true, 'full' => true])
                        @include('admin.partials.slug-field', ['model' => $product, 'from' => 'f_name', 'source' => 'name'])
                        @include('admin.partials.field', ['name' => 'sku', 'label' => 'SKU', 'value' => $product->sku, 'placeholder' => 'IZ-0001'])

                        <div class="field">
                            <label for="f_category_id">Category <span class="req">*</span></label>
                            <select id="f_category_id" name="category_id" required class="{{ $errors->has('category_id') ? 'is-invalid' : '' }}">
                                <option value="">— Select category —</option>
                                @foreach ($categories as $c)
                                    <option value="{{ $c->id }}" @selected(old('category_id', $product->category_id) == $c->id)>
                                        {{ str_repeat("\u{00A0}\u{00A0}\u{00A0}\u{00A0}", $c->depth) }}{{ $c->depth ? '└ ' : '' }}{{ $c->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id') <div class="err">{{ $message }}</div> @enderror
                        </div>
                        <div class="field">
                            <label for="f_brand_id">Brand</label>
                            <select id="f_brand_id" name="brand_id" class="{{ $errors->has('brand_id') ? 'is-invalid' : '' }}">
                                <option value="">— No brand —</option>
                                @foreach ($brands as $b)
                                    <option value="{{ $b->id }}" @selected(old('brand_id', $product->brand_id) == $b->id)>{{ $b->name }}</option>
                                @endforeach
                            </select>
                            @error('brand_id') <div class="err">{{ $message }}</div> @enderror
                        </div>

                        @include('admin.partials.field', ['name' => 'short_description', 'label' => 'Short description', 'type' => 'textarea', 'rows' => 2, 'value' => $product->short_description, 'full' => true])
                        @include('admin.partials.field', ['name' => 'description', 'label' => 'Full description', 'type' => 'textarea', 'rows' => 7, 'value' => $product->description, 'full' => true])
                    </div>
                </div>

                <div class="card">
                    <div class="card-head"><h2>Price &amp; stock</h2></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'price', 'label' => 'Price (৳)', 'type' => 'number', 'value' => $product->price, 'required' => true, 'attrs' => 'step="0.01" min="0"'])
                        @include('admin.partials.field', ['name' => 'old_price', 'label' => 'Old price (৳)', 'type' => 'number', 'value' => $product->old_price, 'hint' => 'Optional — must be higher than price (shows discount).', 'attrs' => 'step="0.01" min="0"'])
                        @include('admin.partials.field', ['name' => 'stock', 'label' => 'Stock', 'type' => 'number', 'value' => $product->stock, 'required' => true, 'attrs' => 'min="0" step="1"'])
                        @include('admin.partials.field', ['name' => 'badge', 'label' => 'Badge', 'value' => $product->badge, 'placeholder' => 'e.g. New, Hot, Best Seller'])
                    </div>
                </div>

                <div class="card">
                    <div class="card-head"><h2>Variants &amp; details</h2></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'sizes', 'label' => 'Sizes', 'value' => implode(', ', $product->sizes ?? []), 'placeholder' => 'S, M, L, XL', 'hint' => 'Comma separated.'])
                        @php
                            // validation fail hole old() theke, na hole product theke
                            $colorRows = old('color_names')
                                ? collect(old('color_names'))->map(fn ($n, $i) => [$n, old("color_hex.$i", '#cccccc')])->values()->all()
                                : collect($product->colors ?? [])->map(fn ($n) => [$n, $product->colorHex($n)])->all();
                        @endphp
                        <div class="field">
                            <label>Colors</label>
                            <div class="color-rows" id="colorRows">
                                @foreach ($colorRows as [$cName, $cHex])
                                    <div class="color-row">
                                        <input type="color" name="color_hex[]" value="{{ $cHex }}" aria-label="Color">
                                        <input type="text" name="color_names[]" value="{{ $cName }}" placeholder="e.g. Navy Blue" maxlength="50">
                                        <button type="button" class="btn btn-ghost btn-sm" data-color-remove aria-label="Remove">✕</button>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-ghost btn-sm" id="colorAdd" style="align-self:flex-start">+ Add color</button>
                            <small class="hint">Nam likho, ar bam pasher box e click kore asol rong select koro.</small>
                            @error('color_hex.*') <div class="err">Color code thik nei.</div> @enderror
                        </div>
                        <template id="colorRowTpl">
                            <div class="color-row">
                                <input type="color" name="color_hex[]" value="#cccccc" aria-label="Color">
                                <input type="text" name="color_names[]" placeholder="e.g. Navy Blue" maxlength="50">
                                <button type="button" class="btn btn-ghost btn-sm" data-color-remove aria-label="Remove">✕</button>
                            </div>
                        </template>
                        @include('admin.partials.field', ['name' => 'fabric', 'label' => 'Fabric / material', 'value' => $product->fabric])
                        @include('admin.partials.field', ['name' => 'weight', 'label' => 'Weight / size', 'value' => $product->weight, 'placeholder' => 'e.g. 500g'])
                    </div>
                </div>
            </div>

            <div>
                <div class="card">
                    <div class="card-head"><h2>Media</h2></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'icon', 'label' => 'Icon (emoji)', 'value' => $product->icon, 'placeholder' => '📦', 'hint' => 'Shown when no image is uploaded.', 'full' => true])
                        @include('admin.partials.image', ['name' => 'image', 'label' => 'Product image', 'path' => $product->image])
                    </div>
                </div>
                <div class="card">
                    <div class="card-head"><h2>Visibility</h2></div>
                    <div class="card-body">
                        <div class="switches" style="flex-direction:column">
                            @include('admin.partials.check', ['name' => 'is_active', 'label' => 'Active', 'checked' => $product->is_active, 'hint' => 'Visible on the storefront'])
                            @include('admin.partials.check', ['name' => 'is_featured', 'label' => 'Featured', 'checked' => $product->is_featured, 'hint' => 'Show in featured section'])
                            @include('admin.partials.check', ['name' => 'is_flash', 'label' => 'Flash sale', 'checked' => $product->is_flash, 'hint' => 'Show in flash sale strip'])
                        </div>
                    </div>
                    <div class="form-actions">
                        <a href="{{ route('admin.products.index') }}" class="btn btn-ghost">Cancel</a>
                        <button type="submit" class="btn btn-primary">{{ $product->exists ? 'Save changes' : 'Create product' }}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script>
    // color row add / remove
    (function () {
        var rows = document.getElementById('colorRows');
        document.getElementById('colorAdd').addEventListener('click', function () {
            rows.appendChild(document.getElementById('colorRowTpl').content.cloneNode(true));
            rows.lastElementChild.querySelector('input[type=text]').focus();
        });
        rows.addEventListener('click', function (e) {
            var btn = e.target.closest('[data-color-remove]');
            if (btn) btn.closest('.color-row').remove();
        });
    })();
</script>
@endpush