@extends('backEnd.layouts.master')
@section('title', 'Edit: ' . $product->name)

@section('content')
<div class="page-header">
    <div>
        <h4><i class="fas fa-edit me-2 text-success"></i>Edit Product</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.products.index') }}">Products</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div>
    <div class="d-flex gap-2">
        @if($product->slug && $product->status)
        <a href="{{ \App\Support\AppUrl::shopRoute('frontend.product', $product->slug) }}" target="_blank" class="btn btn-outline-primary btn-sm">
            <i class="fas fa-eye me-1"></i>View on Site
        </a>
        @elseif($product->slug)
        <span class="btn btn-outline-secondary btn-sm disabled" title="Set status to Active and save to view on site">
            <i class="fas fa-eye-slash me-1"></i>Draft (not visible)
        </span>
        @endif
        <a href="{{ route('admin.inventory.ledger', $product->id) }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-history me-1"></i>Stock History
        </a>
    </div>
</div>

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

    <ul class="nav nav-tabs mb-4" id="productTabs">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-basic"><i class="fas fa-info-circle me-1"></i>Basic Info</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-price"><i class="fas fa-tag me-1"></i>Price & Stock</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-images"><i class="fas fa-images me-1"></i>Images</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-variants"><i class="fas fa-layer-group me-1"></i>Variants</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-seo"><i class="fas fa-search me-1"></i>SEO</a></li>
    </ul>

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="tab-content">
                {{-- Basic Info --}}
                <div class="tab-pane fade show active" id="tab-basic">
                    <div class="admin-card">
                        <div class="admin-card-header"><h5>Basic Information</h5></div>
                        <div class="admin-card-body">
                            <div class="mb-3">
                                <label class="form-label fw-600">Product Name *</label>
                                <input type="text" name="name" class="form-control" value="{{ old('name', $product->name) }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-600">Slug</label>
                                <input type="text" name="slug" class="form-control font-monospace" value="{{ old('slug', $product->slug) }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-600">Description</label>
                                <textarea name="description" class="form-control" rows="8">{{ old('description', $product->description) }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-600">Short Description</label>
                                <textarea name="short_description" class="form-control" rows="3">{{ old('short_description', $product->short_description) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Price & Stock --}}
                <div class="tab-pane fade" id="tab-price">
                    <div class="admin-card">
                        <div class="admin-card-header"><h5>Price & Stock</h5></div>
                        <div class="admin-card-body">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fw-600">Regular Price *</label>
                                    <div class="input-group">
                                        <span class="input-group-text">৳</span>
                                        <input type="number" name="price" class="form-control" value="{{ old('price', $product->price) }}" step="0.01" min="0" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600">Sale Price</label>
                                    <div class="input-group">
                                        <span class="input-group-text">৳</span>
                                        <input type="number" name="sale_price" class="form-control" value="{{ old('sale_price', $product->sale_price) }}" step="0.01" min="0">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600">Purchase Cost</label>
                                    <div class="input-group">
                                        <span class="input-group-text">৳</span>
                                        <input type="number" name="purchase_price" class="form-control" value="{{ old('purchase_price', $product->purchase_price ?? '') }}" step="0.01" min="0">
                                    </div>
                                    <small class="text-muted">Product Wise Report-এ Cost/Profit হিসাবের জন্য</small>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600">Current Stock</label>
                                    <input type="number" name="stock" class="form-control" value="{{ old('stock', $product->stock) }}" min="0"
                                           @if($product->variants->isNotEmpty()) readonly @endif>
                                    <small class="text-muted">
                                        @if($product->variants->isNotEmpty())
                                            Variant product — stock Variants tab-এ manage করুন (এখানে auto total)
                                        @else
                                            <a href="{{ route('admin.inventory.ledger', $product->id) }}">View stock history</a>
                                        @endif
                                    </small>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600">SKU</label>
                                    <input type="text" name="sku" id="productSku" class="form-control font-monospace" value="{{ old('sku', $product->sku) }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600">Weight (gm)</label>
                                    <input type="number" name="weight" class="form-control" value="{{ old('weight', $product->weight ?? '') }}" min="0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Images --}}
                <div class="tab-pane fade" id="tab-images">
                    <div class="admin-card">
                        <div class="admin-card-header"><h5>Product Images</h5></div>
                        <div class="admin-card-body">
                            <div class="mb-4">
                                <label class="form-label fw-600">Thumbnail</label>
                                <div class="d-flex gap-3 align-items-start flex-wrap">
                                    @if($product->thumbnail)
                                    <div>
                                        <img src="{{ asset($product->thumbnail) }}" alt="{{ $product->thumbnailAlt() }}"
                                             width="100" height="100" class="rounded border" style="object-fit:cover;">
                                        <div class="small text-muted mt-1">Current</div>
                                    </div>
                                    @endif
                                    <div class="flex-grow-1" style="min-width:260px">
                                        <input type="file" name="thumbnail" accept="image/*" class="form-control mb-2">
                                        <small class="text-muted d-block mb-2">Upload new to replace current</small>
                                        @include('backEnd.product.partials.image-seo-fields', [
                                            'prefix' => 'thumbnail_seo',
                                            'values' => [
                                                'alt_text' => old('thumbnail_seo.alt_text', $product->thumbnail_alt),
                                                'title' => old('thumbnail_seo.title', $product->thumbnail_title),
                                                'caption' => old('thumbnail_seo.caption', $product->thumbnail_caption),
                                                'description' => old('thumbnail_seo.description', $product->thumbnail_description),
                                            ],
                                        ])
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="form-label fw-600">Gallery</label>
                                @if($product->images && $product->images->count())
                                <div class="mb-3">
                                    @foreach($product->images as $img)
                                    <div class="border rounded p-2 mb-3 bg-white">
                                        <div class="d-flex gap-3 align-items-start flex-wrap">
                                            <div class="position-relative">
                                                <img src="{{ asset($img->image) }}" class="rounded border" style="width:90px;height:90px;object-fit:cover;">
                                                <a href="{{ route('admin.products.image.destroy', $img->id) }}"
                                                   class="position-absolute top-0 end-0 btn btn-danger btn-sm py-0 px-1 m-1"
                                                   onclick="return confirm('Delete this image?')" style="font-size:10px;line-height:1.2">×</a>
                                            </div>
                                            <div class="flex-grow-1" style="min-width:240px">
                                                @include('backEnd.product.partials.image-seo-fields', [
                                                    'prefix' => 'image_seo[' . $img->id . ']',
                                                    'values' => [
                                                        'alt_text' => old('image_seo.'.$img->id.'.alt_text', $img->alt_text),
                                                        'title' => old('image_seo.'.$img->id.'.title', $img->title),
                                                        'caption' => old('image_seo.'.$img->id.'.caption', $img->caption),
                                                        'description' => old('image_seo.'.$img->id.'.description', $img->description),
                                                    ],
                                                ])
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                @endif
                                <label class="form-label fw-600">Add Gallery Images</label>
                                <input type="file" id="galleryInputEdit" name="gallery[]" accept="image/*" multiple class="form-control mb-2">
                                <div id="galleryPreviewEdit"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Variants --}}
                <div class="tab-pane fade" id="tab-variants">
                    <div class="admin-card">
                        <div class="admin-card-header"><h5>Sizes & Colors</h5></div>
                        <div class="admin-card-body">
                            @include('backEnd.product.partials.variant-fields')
                        </div>
                    </div>
                </div>

                {{-- SEO --}}
                <div class="tab-pane fade" id="tab-seo">
                    <div class="admin-card">
                        <div class="admin-card-header"><h5>SEO</h5></div>
                        <div class="admin-card-body">
                            <div class="mb-3">
                                <label class="form-label fw-600">Meta Title</label>
                                <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title', $product->meta_title) }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-600">Meta Description</label>
                                <textarea name="meta_description" class="form-control" rows="3">{{ old('meta_description', $product->meta_description) }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-600">Tags / Keywords</label>
                                <input type="text" name="tags" class="form-control" value="{{ old('tags', $product->meta_keywords) }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right Sidebar --}}
        <div class="col-lg-4">
            <div class="admin-card mb-3">
                <div class="admin-card-header"><h5>Category & Brand</h5></div>
                <div class="admin-card-body">
                    <div class="mb-3">
                        <label class="form-label fw-600">Category *</label>
                        <select name="category_id" class="form-select" required>
                            <option value="">Select Category</option>
                            @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @if($cat->children->count())
                            @foreach($cat->children as $sub)
                            <option value="{{ $sub->id }}" {{ old('category_id', $product->category_id) == $sub->id ? 'selected' : '' }}>
                                &nbsp;&nbsp;↳ {{ $sub->name }}
                            </option>
                            @endforeach
                            @endif
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label fw-600">Brand</label>
                        <select name="brand_id" class="form-select">
                            <option value="">No Brand</option>
                            @foreach($brands as $brand)
                            <option value="{{ $brand->id }}" {{ old('brand_id', $product->brand_id) == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="admin-card mb-3">
                <div class="admin-card-header"><h5>Publishing</h5></div>
                <div class="admin-card-body">
                    <div class="mb-3">
                        <label class="form-label fw-600">Status</label>
                        <select name="status" class="form-select">
                            <option value="1" {{ old('status', $product->status) == 1 ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ old('status', $product->status) == 0 ? 'selected' : '' }}>Draft</option>
                        </select>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" name="is_featured" value="1"
                               {{ old('is_featured', $product->is_featured) ? 'checked' : '' }}>
                        <label class="form-check-label">Featured Product</label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" name="is_new" value="1"
                               {{ old('is_new', $product->is_new_arrival) ? 'checked' : '' }}>
                        <label class="form-check-label">New Arrival</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_best_seller" value="1"
                               {{ old('is_best_seller', $product->is_best_seller) ? 'checked' : '' }}>
                        <label class="form-check-label">Best Seller</label>
                    </div>
                </div>
            </div>

            <div class="admin-card">
                <div class="admin-card-body d-flex flex-column gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Update Product
                    </button>
                    <button type="button" class="btn btn-outline-danger w-100" id="deleteProductBtn">
                        <i class="fas fa-trash me-1"></i>Delete Product
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<form id="deleteProductForm" method="POST" action="{{ route('admin.products.destroy', $product->id) }}" class="d-none">
    @csrf @method('DELETE')
</form>
@endsection

@push('scripts')
<script>
document.getElementById('deleteProductBtn')?.addEventListener('click', function () {
    if (confirm('Delete this product?')) {
        document.getElementById('deleteProductForm').submit();
    }
});

document.getElementById('galleryInputEdit')?.addEventListener('change', function() {
    const container = document.getElementById('galleryPreviewEdit');
    container.innerHTML = '';
    const productName = @json($product->name);

    [...this.files].forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = e => {
            const wrap = document.createElement('div');
            wrap.className = 'border rounded p-2 mb-3 bg-light';
            wrap.innerHTML = `
                <div class="d-flex gap-3 flex-wrap">
                    <img src="${e.target.result}" class="rounded border" style="width:90px;height:90px;object-fit:cover">
                    <div class="flex-grow-1">
                        <div class="small fw-bold mb-2">New Gallery Image #${index + 1}</div>
                        <div class="img-seo-fields border rounded bg-white p-2">
                            <div class="mb-2"><label class="form-label small mb-1">Alt Text</label>
                            <input type="text" name="gallery_seo[${index}][alt_text]" class="form-control form-control-sm" value="${productName}"></div>
                            <div class="mb-2"><label class="form-label small mb-1">Title</label>
                            <input type="text" name="gallery_seo[${index}][title]" class="form-control form-control-sm" value="${productName}"></div>
                            <div class="mb-2"><label class="form-label small mb-1">Caption</label>
                            <input type="text" name="gallery_seo[${index}][caption]" class="form-control form-control-sm"></div>
                            <div class="mb-0"><label class="form-label small mb-1">Description</label>
                            <textarea name="gallery_seo[${index}][description]" class="form-control form-control-sm" rows="2"></textarea></div>
                        </div>
                    </div>
                </div>`;
            container.appendChild(wrap);
        };
        reader.readAsDataURL(file);
    });
});
</script>
@endpush

@push('styles')
<style>
.size-chip input { display: none; }
.size-chip span {
    display: inline-block; padding: 4px 12px; border: 1px solid #ccc;
    border-radius: 20px; cursor: pointer; font-size: 13px; transition: .2s;
}
.size-chip input:checked + span { background: #2d6a4f; color: #fff; border-color: #2d6a4f; }
</style>
@endpush