@extends('admin.layout') 
@section('title', $product->exists ? 'Edit Saree':'Add Saree') 
@section('heading', $product->exists ? 'Edit Saree Product':'Add New Saree') 

@section('content')
<div class="card-custom p-4 w-100">
    <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

        <!-- TOP ROW: Details & Main Cover Image -->
        <div class="row g-4 mb-4">
            <!-- Left Column: Details, Pricing, Description -->
            <div class="col-lg-7">
                <!-- Section 1: General Product Information -->
                <div class="mb-4">
                    <h6 class="fw-bold mb-3 text-uppercase text-muted" style="letter-spacing: 1px; font-size: 0.78rem;">
                        1. General Information
                    </h6>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label" for="name">Product Title / Name *</label>
                            <input id="name" class="form-control" name="name" value="{{ old('name', $product->name) }}" placeholder="e.g. Kanjeevaram Pure Silk Saree" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="category_id">Category</label>
                            <select id="category_id" class="form-select" name="category_id">
                                <option value="">-- Select Category --</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}" @selected(old('category_id', $product->category_id) == $cat->id || old('category', $product->category) == $cat->name)>
                                        {{ $cat->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="brand_id">Brand</label>
                            <select id="brand_id" class="form-select" name="brand_id">
                                <option value="">-- Select Brand --</option>
                                @foreach($brands as $br)
                                    <option value="{{ $br->id }}" @selected(old('brand_id', $product->brand_id) == $br->id || old('brand', $product->brand) == $br->name)>
                                        {{ $br->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 mt-3">
                            <div class="form-check form-switch p-0 w-100 d-flex align-items-center gap-3">
                                <input class="form-check-input ms-0" type="checkbox" role="switch" id="is_active" name="is_active" value="1" @checked(old('is_active', $product->is_active ?? true)) style="width: 2.8em; height: 1.4em; cursor: pointer;">
                                <label class="form-check-label fw-semibold" for="is_active" style="cursor: pointer;">
                                    Visible on Storefront
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Section 2: Pricing & Inventory -->
                <div class="mb-4 pt-3 border-top">
                    <h6 class="fw-bold mb-3 text-uppercase text-muted" style="letter-spacing: 1px; font-size: 0.78rem;">
                        2. Pricing & Stock Inventory
                    </h6>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label" for="price">Regular Price (₹) *</label>
                            <input id="price" class="form-control" type="number" step="0.01" min="0" name="price" value="{{ old('price', $product->price) }}" placeholder="2999.00" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="sale_price">Sale Price (₹)</label>
                            <input id="sale_price" class="form-control" type="number" step="0.01" min="0" name="sale_price" value="{{ old('sale_price', $product->sale_price) }}" placeholder="2499.00">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="stock">Stock Quantity *</label>
                            <input id="stock" class="form-control" type="number" min="0" name="stock" value="{{ old('stock', $product->stock ?? 0) }}" placeholder="10" required>
                        </div>
                    </div>
                </div>

                <!-- Section 3: Detailed Description -->
                <div class="pt-3 border-top">
                    <h6 class="fw-bold mb-3 text-uppercase text-muted" style="letter-spacing: 1px; font-size: 0.78rem;">
                        3. Product Description
                    </h6>
                    <div>
                        <label class="form-label" for="description">Saree Details & Weave Description</label>
                        <textarea id="description" class="form-control" name="description" rows="4" placeholder="Enter details about fabric, weave type, pallu design, blouse piece inclusion, care instructions...">{{ old('description', $product->description) }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Right Column: Main Cover Image -->
            <div class="col-lg-5">
                <div class="p-4 rounded-4 h-100 d-flex flex-column justify-content-between" style="background: #FAF6F8; border: 1px dashed #E5D5DD;">
                    <div>
                        <h6 class="fw-bold mb-3" style="color: var(--text-dark);">Main Featured Image *</h6>
                        
                        <div class="mb-3 text-center">
                            <div id="imagePreviewContainer" class="d-flex flex-column align-items-center justify-content-center p-3 rounded-3 mb-2" style="min-height: 220px; background: #ffffff; border: 1px solid #EAE0E5;">
                                @if($product->image)
                                    <img id="imagePreview" src="{{ asset($product->image) }}" class="rounded-3" style="max-height: 200px; max-width: 100%; object-fit: contain;">
                                @else
                                    <img id="imagePreview" src="" class="rounded-3 d-none" style="max-height: 200px; max-width: 100%; object-fit: contain;">
                                    <div id="imagePlaceholder" class="text-muted">
                                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--ul-primary)" stroke-width="1.5" class="mb-2">
                                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                            <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                            <polyline points="21 15 16 10 5 21"></polyline>
                                        </svg>
                                        <div class="small fw-semibold">Upload Main Saree Cover Photo</div>
                                        <div class="small text-muted">PNG, JPG, WEBP formats</div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="form-label fw-semibold" for="image">Choose Cover Image File</label>
                        <input id="image" class="form-control" type="file" name="image" accept="image/*">
                    </div>
                </div>
            </div>
        </div>

        <!-- BOTTOM FULL WIDTH ROW: Additional Gallery Photos (Max 5 Photos) -->
        <div class="p-4 rounded-4 mb-4" style="background: #FAF6F8; border: 1px dashed #E5D5DD;">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h6 class="fw-bold mb-1" style="color: var(--text-dark);">Additional Saree Gallery Photos</h6>
                    <p class="small text-muted mb-0">Upload up to 5 additional saree angles (pallu design, border detail, blouse piece, weave texture).</p>
                </div>
                <span class="badge" style="background: rgba(239, 40, 83, 0.1); color: var(--ul-primary); font-weight: 600; font-size: 0.85rem; padding: 8px 14px;">Max 5 Photos</span>
            </div>

            @php
                $gallery = $product->gallery_images ?? [];
            @endphp

            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-5 g-3">
                @for($i = 0; $i < 5; $i++)
                    @php
                        $existingImg = $gallery[$i] ?? null;
                    @endphp
                    <div class="col">
                        <div class="p-3 border rounded-3 bg-white h-100 text-center d-flex flex-column justify-content-between shadow-sm">
                            <div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge bg-light text-dark fw-bold border">Slot #{{ $i + 1 }}</span>
                                </div>

                                <div class="d-flex align-items-center justify-content-center border rounded-2 bg-light mb-2 mx-auto" style="width: 100%; height: 110px; overflow: hidden;">
                                    @if($existingImg)
                                        <img id="galleryPreview_{{ $i }}" src="{{ asset($existingImg) }}" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                                    @else
                                        <img id="galleryPreview_{{ $i }}" src="" class="d-none" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                                        <span id="galleryPlaceholder_{{ $i }}" class="text-muted small">No Image</span>
                                    @endif
                                </div>
                            </div>

                            <div>
                                <label class="form-label mb-1 small fw-semibold" for="galleryInput_{{ $i }}">Photo #{{ $i + 1 }}</label>
                                <input type="file" name="gallery_images[{{ $i }}]" id="galleryInput_{{ $i }}" class="form-control form-control-sm gallery-file-input" accept="image/*" data-index="{{ $i }}">
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>

        <!-- Form Action Buttons -->
        <div class="pt-3 border-top d-flex align-items-center gap-3">
            <button type="submit" class="btn-brand-primary px-4 py-2">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
                <span>{{ $product->exists ? 'Save Changes' : 'Publish Product' }}</span>
            </button>
            
            <a class="btn btn-light px-4 py-2 text-muted rounded-3" href="{{ route('admin.products.index') }}" style="border: 1px solid #E5DADF;">
                Cancel
            </a>
        </div>
    </form>
</div>

<!-- Image Preview Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const imageInput = document.getElementById('image');
        const imagePreview = document.getElementById('imagePreview');
        const imagePlaceholder = document.getElementById('imagePlaceholder');

        if (imageInput && imagePreview) {
            imageInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(evt) {
                        imagePreview.src = evt.target.result;
                        imagePreview.classList.remove('d-none');
                        if (imagePlaceholder) imagePlaceholder.classList.add('d-none');
                    };
                    reader.readAsDataURL(file);
                }
            });
        }

        // Live Preview for 5 Gallery Slots
        const galleryInputs = document.querySelectorAll('.gallery-file-input');
        galleryInputs.forEach(input => {
            input.addEventListener('change', function(e) {
                const index = this.getAttribute('data-index');
                const file = e.target.files[0];
                const previewImg = document.getElementById('galleryPreview_' + index);
                const placeholder = document.getElementById('galleryPlaceholder_' + index);

                if (file && previewImg) {
                    const reader = new FileReader();
                    reader.onload = function(evt) {
                        previewImg.src = evt.target.result;
                        previewImg.classList.remove('d-none');
                        if (placeholder) placeholder.classList.add('d-none');
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    });
</script>
@endsection