@extends('admin.layouts.app')
@section('title', isset($product) ? 'Edit Product' : 'Add Product')
@section('page-title', isset($product) ? 'Edit Product: '.$product->name : 'Add Product')
@section('content')

<div class="d-flex gap-2 mb-3">
    <a href="{{ route('admin.products.index') }}" class="btn btn-sm" style="border:1px solid #e2e8f0;color:#374151"><i class="bi bi-arrow-left me-1"></i>Back</a>
</div>

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

    <div class="row g-3">
        <!-- LEFT COLUMN -->
        <div class="col-lg-8">
            <div class="card-admin p-4 mb-3">
                <div class="fw-700 mb-3" style="font-size:.88rem;color:#0f172a">Product Information</div>

                <div class="row g-3 mb-3">
                    <div class="col-md-8">
                        <label class="form-label">Product Name *</label>
                        <input type="text" name="name" class="form-control" value="{{ old('name', $product->name ?? '') }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Standard Badge</label>
                        <input type="text" name="standard_badge" class="form-control" value="{{ old('standard_badge', $product->standard_badge ?? '') }}" placeholder="e.g. EN14387">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Subtitle</label>
                    <input type="text" name="subtitle" class="form-control" value="{{ old('subtitle', $product->subtitle ?? '') }}" placeholder="Universal Gas Phase Test Rig — EN14387 Compliant">
                </div>

                <div class="mb-3">
                    <label class="form-label">Short Description (shown on homepage & listing)</label>
                    <textarea name="short_description" class="form-control" rows="3">{{ old('short_description', $product->short_description ?? '') }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label">Full Description (HTML allowed)</label>
                    <textarea name="full_description" class="form-control" id="full_description" rows="10">{{ old('full_description', $product->full_description ?? '') }}</textarea>
                </div>
            </div>

            <!-- FEATURES -->
            <div class="card-admin p-4 mb-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="fw-700" style="font-size:.88rem;color:#0f172a">Key Features</div>
                    <button type="button" class="btn btn-sm" style="background:#eff6ff;color:#1d4ed8;border:none" onclick="addFeature()"><i class="bi bi-plus me-1"></i>Add Feature</button>
                </div>
                <div id="features-container">
                    @if(isset($product) && $product->features->count())
                        @foreach($product->features->sortBy('sort_order') as $i => $feature)
                        <div class="d-flex gap-2 mb-2 feature-row">
                            <input type="text" name="features[]" class="form-control form-control-sm" value="{{ $feature->feature }}" placeholder="Feature description">
                            <button type="button" class="btn btn-sm" style="background:#fee2e2;color:#991b1b;border:none;flex-shrink:0" onclick="this.closest('.feature-row').remove()"><i class="bi bi-x"></i></button>
                        </div>
                        @endforeach
                    @else
                        <div class="d-flex gap-2 mb-2 feature-row">
                            <input type="text" name="features[]" class="form-control form-control-sm" placeholder="Feature description">
                            <button type="button" class="btn btn-sm" style="background:#fee2e2;color:#991b1b;border:none;flex-shrink:0" onclick="this.closest('.feature-row').remove()"><i class="bi bi-x"></i></button>
                        </div>
                    @endif
                </div>
            </div>

            <!-- SEO -->
            <div class="card-admin p-4">
                <div class="fw-700 mb-3" style="font-size:.88rem;color:#0f172a">SEO</div>
                <div class="mb-3">
                    <label class="form-label">Meta Title</label>
                    <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title', $product->meta_title ?? '') }}">
                </div>
                <div class="mb-0">
                    <label class="form-label">Meta Description</label>
                    <textarea name="meta_description" class="form-control" rows="2">{{ old('meta_description', $product->meta_description ?? '') }}</textarea>
                </div>
            </div>
        </div>

        <!-- RIGHT COLUMN -->
        <div class="col-lg-4">
            <!-- Publish -->
            <div class="card-admin p-4 mb-3">
                <div class="fw-700 mb-3" style="font-size:.88rem;color:#0f172a">Publish</div>
                <div class="mb-3">
                    <label class="form-label">Status</label>
                    <select name="is_active" class="form-select">
                        <option value="1" {{ old('is_active', $product->is_active ?? 1) == 1 ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ old('is_active', $product->is_active ?? 1) == 0 ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Sort Order</label>
                    <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $product->sort_order ?? 0) }}" min="0">
                </div>
                <button type="submit" class="btn btn-admin w-100">{{ isset($product) ? 'Update Product' : 'Save Product' }}</button>
            </div>

            <!-- Hero Image -->
            <div class="card-admin p-4 mb-3">
                <div class="fw-700 mb-3" style="font-size:.88rem;color:#0f172a">Hero Image</div>
                @if(isset($product) && $product->hero_image)
                <div class="mb-2 text-center">
                    <img src="{{ asset('uploads/images/'.$product->hero_image) }}" alt="" style="max-height:120px;max-width:100%;object-fit:contain;background:#f1f5f9;border-radius:8px;padding:8px">
                </div>
                @endif
                <input type="file" name="hero_image" class="form-control form-control-sm" accept="image/*">
                <div class="mt-1" style="font-size:.73rem;color:#94a3b8">Recommended: PNG/JPG, transparent bg preferred</div>
            </div>

            <!-- Brochure -->
            <div class="card-admin p-4 mb-3">
                <div class="fw-700 mb-3" style="font-size:.88rem;color:#0f172a">Product Brochure (PDF)</div>
                @if(isset($product) && $product->brochure_file)
                <div class="mb-2 d-flex align-items-center gap-2 p-2 rounded" style="background:#f8fafc;border:1px solid #e2e8f0">
                    <i class="bi bi-file-earmark-pdf" style="color:#E5943C;font-size:1.2rem"></i>
                    <span style="font-size:.78rem;color:#374151">{{ $product->brochure_file }}</span>
                </div>
                @endif
                <input type="file" name="brochure_file" class="form-control form-control-sm" accept=".pdf">
            </div>

            <!-- Thumbnail -->
            <div class="card-admin p-4">
                <div class="fw-700 mb-3" style="font-size:.88rem;color:#0f172a">Thumbnail (Hero widget)</div>
                @if(isset($product) && $product->thumbnail)
                <div class="mb-2 text-center">
                    <img src="{{ asset('uploads/images/'.$product->thumbnail) }}" alt="" style="max-height:80px;max-width:100%;object-fit:contain">
                </div>
                @endif
                <input type="file" name="thumbnail" class="form-control form-control-sm" accept="image/*">
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
function addFeature() {
    const container = document.getElementById('features-container');
    const div = document.createElement('div');
    div.className = 'd-flex gap-2 mb-2 feature-row';
    div.innerHTML = `<input type="text" name="features[]" class="form-control form-control-sm" placeholder="Feature description"><button type="button" class="btn btn-sm" style="background:#fee2e2;color:#991b1b;border:none;flex-shrink:0" onclick="this.closest('.feature-row').remove()"><i class="bi bi-x"></i></button>`;
    container.appendChild(div);
}
</script>
@endpush
@endsection