@extends('admin.layouts.app')
@section('title', $product->exists ? 'Edit Product' : 'New Product')
@section('heading', $product->exists ? 'Edit · ' . $product->name : 'New Product')

@section('content')
<div class="page-actions">
    <a href="{{ route('admin.products.index') }}" class="adm-btn adm-btn-ghost"><i class="fa-solid fa-arrow-left"></i> Back to products</a>
    @if($product->exists)
        <div class="page-actions-buttons">
            <a href="{{ route('product.show', $product) }}" target="_blank" data-no-pjax class="adm-btn adm-btn-ghost"><i class="fa-solid fa-eye"></i> View on site</a>
            <form method="POST" action="{{ route('admin.products.duplicate', $product) }}" style="display:inline;">
                @csrf
                <button class="adm-btn adm-btn-ghost"><i class="fa-solid fa-clone"></i> Duplicate</button>
            </form>
            <form method="POST" action="{{ route('admin.products.destroy', $product) }}" onsubmit="return confirm('Delete this product?');" style="display:inline;">
                @csrf @method('DELETE')
                <button class="adm-btn adm-btn-danger"><i class="fa-solid fa-trash"></i> Delete</button>
            </form>
        </div>
    @endif
</div>

@if($errors->any())
    <div class="alert alert-error">
        <i class="fa-solid fa-triangle-exclamation"></i>
        <div>
            <strong>Please fix the following:</strong>
            <ul style="margin:.3rem 0 0 1.2rem;">
                @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

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

    <div class="form-grid">
        <div class="form-col">

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-circle-info"></i>
                    <div><h3>Basic information</h3><p>Public name and description shoppers will see.</p></div>
                </header>

                <div class="form-field full">
                    <label>Product name <span class="req">*</span></label>
                    <input type="text" name="name" required maxlength="255" value="{{ old('name', $product->name) }}" placeholder="e.g. Tuscany Chelsea Boot">
                </div>

                <div class="form-field full">
                    <label>Description <small class="muted">(<span data-count-for="description">0</span>/2000)</small></label>
                    <textarea name="description" id="description" rows="6" maxlength="2000" data-count placeholder="Materials, craftsmanship, fit notes…">{{ old('description', $product->description) }}</textarea>
                </div>
            </section>

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-dollar-sign"></i>
                    <div><h3>Pricing</h3><p>Set the selling price and an optional compare-at price to show discounts.</p></div>
                </header>

                <div class="form-row">
                    <div class="form-field">
                        <label>Price <span class="req">*</span></label>
                        <div class="input-affix"><span class="affix">$</span><input type="number" name="price" id="price" step="0.01" min="0" required value="{{ old('price', $product->price) }}"></div>
                    </div>
                    <div class="form-field">
                        <label>Compare-at price <small class="muted">(optional)</small></label>
                        <div class="input-affix"><span class="affix">$</span><input type="number" name="original_price" id="original_price" step="0.01" min="0" value="{{ old('original_price', $product->original_price) }}"></div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-field">
                        <label>Sale %
                            <small class="muted">(auto-calculated, editable)</small>
                        </label>
                        <div class="input-affix"><input type="number" name="sale_percent" id="sale_percent" min="0" max="100" value="{{ old('sale_percent', $product->sale_percent) }}"><span class="affix">%</span></div>
                    </div>
                    <div class="form-field">
                        <label>Stock <span class="req">*</span></label>
                        <input type="number" name="stock" min="0" required value="{{ old('stock', $product->stock ?? 0) }}">
                        <small class="muted">Set to 0 to show "Out of stock".</small>
                    </div>
                </div>
            </section>

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-tags"></i>
                    <div><h3>Organization</h3><p>Helps customers browse and filter your catalog.</p></div>
                </header>

                <div class="form-row">
                    <div class="form-field">
                        <label>Category <span class="req">*</span></label>
                        <select name="category" required>
                            @foreach($categories as $c)
                                <option value="{{ $c }}" @selected(old('category', $product->category) === $c)>{{ ucfirst($c) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-field">
                        <label>Collection tag</label>
                        <select name="collection_tag">
                            <option value="">— None —</option>
                            @foreach($tags as $t)
                                <option value="{{ $t }}" @selected(old('collection_tag', $product->collection_tag) === $t)>{{ ucfirst(str_replace('_',' ',$t)) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </section>

        </div>

        <div class="form-col form-col-side">
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-image"></i>
                    <div><h3>Main image</h3><p>Primary display image · 300×300 · JPG/PNG · max 10MB.</p></div>
                </header>

                <label class="drop-zone" id="dropZone">
                    <input type="file" name="image_file" id="imageFile" accept="image/*" hidden>
                    <div class="drop-preview" id="dropPreview"
                         @if($product->image) style="background-image:url('{{ asset($product->publicImagePath()) }}')" @endif
                         @if(!empty($product->gallery[0])) data-hover="{{ asset($product->gallery[0]) }}" @endif></div>
                    <div class="drop-hint">
                        <i class="fa-solid fa-cloud-arrow-up"></i>
                        <strong>Click or drop to upload</strong>
                        <small>Replaces the current image</small>
                    </div>
                </label>

                <div class="form-field" style="margin-top:1rem;">
                    <label>Image path <small class="muted">(relative)</small></label>
                    <input type="text" name="image" value="{{ old('image', $product->image) }}" placeholder="uploads/products/xxx.jpg">
                </div>
            </section>

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-images"></i>
                    <div><h3>Gallery images</h3><p>Up to 4 extra images shown as thumbnails on the product detail page.</p></div>
                </header>

                <div class="gallery-grid" id="galleryGrid">
                    @php $existingGallery = $product->gallery ?? []; @endphp
                    @for($gi = 0; $gi < 4; $gi++)
                        @php $gImg = $existingGallery[$gi] ?? null; @endphp
                        <div class="gallery-slot" id="gslot-{{ $gi }}">
                            <label class="gallery-drop" data-slot="{{ $gi }}">
                                <input type="file" name="gallery_files[{{ $gi }}]" accept="image/*" hidden data-gallery-input="{{ $gi }}">
                                @if($gImg)
                                    <img class="gallery-preview" src="{{ asset($gImg) }}" alt="Gallery {{ $gi+1 }}">
                                    <input type="hidden" name="gallery_existing[{{ $gi }}]" value="{{ $gImg }}">
                                @else
                                    <img class="gallery-preview" style="display:none;" alt="">
                                    <input type="hidden" name="gallery_existing[{{ $gi }}]" value="">
                                @endif
                                <div class="gallery-hint {{ $gImg ? 'has-image' : '' }}">
                                    <i class="fa-solid fa-plus"></i>
                                    <span>Image {{ $gi+1 }}</span>
                                </div>
                            </label>
                            @if($gImg)
                                <button type="button" class="gallery-remove" data-slot="{{ $gi }}" title="Remove"><i class="fa-solid fa-xmark"></i></button>
                            @else
                                <button type="button" class="gallery-remove" data-slot="{{ $gi }}" title="Remove" style="display:none;"><i class="fa-solid fa-xmark"></i></button>
                            @endif
                        </div>
                    @endfor
                </div>
                <small class="muted" style="display:block; margin-top:.75rem;">Click a slot to upload · main image is always shown first.</small>
            </section>

            <section class="card form-section sticky-actions">
                <button type="submit" class="adm-btn adm-btn-primary adm-btn-lg">
                    <i class="fa-solid fa-save"></i> {{ $product->exists ? 'Save changes' : 'Create product' }}
                </button>
                <a href="{{ route('admin.products.index') }}" class="adm-btn adm-btn-ghost adm-btn-block">Cancel</a>
                @if($product->exists)
                    <div class="meta-note">
                        <div><span class="muted">Created</span><span>{{ $product->created_at?->format('M d, Y') }}</span></div>
                        <div><span class="muted">Updated</span><span>{{ $product->updated_at?->format('M d, Y · H:i') }}</span></div>
                    </div>
                @endif
            </section>
        </div>
    </div>
</form>
@endsection