@extends('backEnd.layouts.master')
@section('title', 'Add Product')

@section('content')
<div class="page-header">
    <div>
        <h4><i class="fas fa-plus me-2 text-success"></i>Add New 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">Add</li>
            </ol>
        </nav>
    </div>
</div>

@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Please fix the following errors:</strong>
    <ul class="mb-0 mt-1">
        @foreach($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" id="productForm" novalidate>
    @csrf

    {{-- Tab Navigation --}}
    <ul class="nav nav-tabs mb-4" id="productTabs">
        <li class="nav-item">
            <a class="nav-link active wizard-tab" href="#tab-basic" data-step="0">
                <i class="fas fa-info-circle me-1"></i>Basic Info
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link wizard-tab" href="#tab-price" data-step="1">
                <i class="fas fa-tag me-1"></i>Price & Stock
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link wizard-tab" href="#tab-images" data-step="2">
                <i class="fas fa-images me-1"></i>Images
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link wizard-tab" href="#tab-variants" data-step="3">
                <i class="fas fa-layer-group me-1"></i>Variants
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link wizard-tab" href="#tab-seo" data-step="4">
                <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">

                {{-- Tab 1: 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" id="productName" class="form-control @error('name') is-invalid @enderror"
                                       value="{{ old('name') }}" placeholder="Product name in Bengali/English"
                                       oninput="generateSlug(this.value)">
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-600">Category *</label>
                                <select name="category_id" id="productCategory" class="form-select @error('category_id') is-invalid @enderror">
                                    <option value="">Select Category</option>
                                    @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                    @if($cat->children->count())
                                    @foreach($cat->children as $sub)
                                    <option value="{{ $sub->id }}" {{ old('category_id') == $sub->id ? 'selected' : '' }}>
                                        &nbsp;&nbsp;↳ {{ $sub->name }}
                                    </option>
                                    @endforeach
                                    @endif
                                    @endforeach
                                </select>
                                @error('category_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>

                            <div class="mb-3">
                                <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') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-600">Slug (URL)</label>
                                <input type="text" name="slug" id="slugField" class="form-control font-monospace"
                                       value="{{ old('slug') }}" placeholder="auto-generated-slug">
                                <small class="text-muted">Leave empty to auto-generate</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-600">Description</label>
                                <textarea name="description" id="description" class="form-control" rows="6"
                                          placeholder="Full product description...">{{ old('description') }}</textarea>
                            </div>

                            <div class="mb-0">
                                <label class="form-label fw-600">Short Description</label>
                                <textarea name="short_description" class="form-control" rows="3"
                                          placeholder="Brief description (shown in listing)...">{{ old('short_description') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tab 2: 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-6">
                                    <label class="form-label fw-600">Regular Price *</label>
                                    <div class="input-group">
                                        <span class="input-group-text">৳</span>
                                        <input type="number" name="price" id="productPrice"
                                               class="form-control @error('price') is-invalid @enderror"
                                               value="{{ old('price') }}" step="0.01" min="0" placeholder="0">
                                    </div>
                                    @error('price')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <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') }}" step="0.01" min="0" placeholder="0">
                                    </div>
                                    <small class="text-muted">Leave empty = no sale</small>
                                </div>
                                <div class="col-md-6">
                                    <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') }}" step="0.01" min="0" placeholder="0">
                                    </div>
                                    <small class="text-muted">Report-এ profit হিসাবের জন্য</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-600">Initial Stock</label>
                                    <input type="number" name="stock" class="form-control"
                                           value="{{ old('stock', 0) }}" min="0" placeholder="0">
                                    <small class="text-muted">Variant product হলে stock Variants tab-এ প্রতিটি variant-এ দিন</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-600">SKU</label>
                                    <input type="text" name="sku" id="productSku" class="form-control font-monospace"
                                           value="{{ old('sku') }}" placeholder="Unique product code">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tab 3: 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 Image</label>
                                <div class="image-upload-box" onclick="document.getElementById('thumbnailInput').click()">
                                    <img id="thumbnailPreview" src="" alt="" style="display:none; max-height:200px; max-width:100%; object-fit:contain;">
                                    <div id="thumbnailPlaceholder">
                                        <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
                                        <div class="text-muted">Click to upload thumbnail</div>
                                        <small class="text-muted">Recommended: 800×800px, JPG/PNG/WebP</small>
                                    </div>
                                </div>
                                <input type="file" id="thumbnailInput" name="thumbnail" accept="image/*" class="d-none"
                                       onchange="previewImage(this, 'thumbnailPreview', 'thumbnailPlaceholder')">
                                @include('backEnd.product.partials.image-seo-fields', [
                                    'prefix' => 'thumbnail_seo',
                                    'values' => [
                                        'alt_text' => old('thumbnail_seo.alt_text'),
                                        'title' => old('thumbnail_seo.title'),
                                        'caption' => old('thumbnail_seo.caption'),
                                        'description' => old('thumbnail_seo.description'),
                                    ],
                                ])
                            </div>

                            <div>
                                <label class="form-label fw-600">Gallery Images</label>
                                <div class="gallery-upload-area" onclick="document.getElementById('galleryInput').click()">
                                    <i class="fas fa-images fa-2x text-muted mb-2"></i>
                                    <div class="text-muted">Click to add gallery images</div>
                                    <small class="text-muted">Multiple images — each image can have its own SEO fields</small>
                                </div>
                                <input type="file" id="galleryInput" name="gallery[]" accept="image/*" multiple class="d-none"
                                       onchange="previewGallery(this)">
                                <div id="galleryPreview" class="mt-2"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tab 4: 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>

                {{-- Tab 5: SEO --}}
                <div class="tab-pane fade" id="tab-seo">
                    <div class="admin-card">
                        <div class="admin-card-header"><h5>SEO Information</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') }}" placeholder="SEO title (leave empty to use product name)">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-600">Meta Description</label>
                                <textarea name="meta_description" class="form-control" rows="3"
                                          placeholder="SEO description (150-160 chars recommended)">{{ old('meta_description') }}</textarea>
                            </div>
                            <div class="mb-0">
                                <label class="form-label fw-600">Tags</label>
                                <input type="text" name="tags" class="form-control"
                                       value="{{ old('tags') }}" placeholder="tag1, tag2, tag3">
                                <small class="text-muted">Comma separated</small>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {{-- Right Sidebar --}}
        <div class="col-lg-4">
            {{-- Actions — Save + Next (always visible) --}}
            <div class="admin-card mb-3" id="wizardActions">
                <div class="admin-card-header"><h5>Actions</h5></div>
                <div class="admin-card-body">
                    <div class="text-muted small mb-2" id="stepIndicator">Step 1 of 5 — Basic Info</div>
                    <div class="d-flex gap-2 mb-2" id="actionRow">
                        <button type="submit" class="btn btn-primary flex-fill" id="btnSave">
                            <i class="fas fa-save me-1"></i> Save
                        </button>
                        <button type="button" class="btn btn-success flex-fill" id="btnNext">
                            Next <i class="fas fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                    <button type="button" class="btn btn-outline-secondary w-100 mb-2" id="btnPrev" style="display:none">
                        <i class="fas fa-arrow-left me-1"></i> Previous
                    </button>
                    <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary w-100">
                        <i class="fas fa-times me-1"></i> Cancel
                    </a>
                </div>
            </div>

            {{-- Progress --}}
            <div class="admin-card mb-3">
                <div class="admin-card-header"><h5>Progress</h5></div>
                <div class="admin-card-body p-0">
                    <ul class="list-group list-group-flush wizard-progress" id="wizardProgress">
                        <li class="list-group-item active-step" data-step="0"><i class="fas fa-circle-notch fa-spin me-2"></i> Basic Info</li>
                        <li class="list-group-item" data-step="1"><i class="far fa-circle me-2"></i> Price & Stock</li>
                        <li class="list-group-item" data-step="2"><i class="far fa-circle me-2"></i> Images</li>
                        <li class="list-group-item" data-step="3"><i class="far fa-circle me-2"></i> Variants</li>
                        <li class="list-group-item" data-step="4"><i class="far fa-circle me-2"></i> SEO & Save</li>
                    </ul>
                </div>
            </div>

            {{-- Publishing --}}
            <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', 1) == 1 ? 'selected' : '' }}>Active (Visible)</option>
                            <option value="0" {{ old('status') == 0 ? 'selected' : '' }}>Draft (Hidden)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_featured" id="isFeatured"
                                   value="1" {{ old('is_featured') ? 'checked' : '' }}>
                            <label class="form-check-label" for="isFeatured">
                                <strong>Featured Product</strong>
                                <div class="text-muted small">Show on homepage</div>
                            </label>
                        </div>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_new" id="isNew"
                               value="1" {{ old('is_new', 1) ? 'checked' : '' }}>
                        <label class="form-check-label" for="isNew">
                            <strong>New Arrival</strong>
                            <div class="text-muted small">Show "New" badge</div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('styles')
<style>
.image-upload-box {
    border: 2px dashed #ccc; border-radius: 8px; padding: 24px;
    text-align: center; cursor: pointer; transition: .2s; min-height: 140px;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.image-upload-box:hover { border-color: var(--primary); background: rgba(45,106,79,0.04); }
.gallery-upload-area {
    border: 2px dashed #ccc; border-radius: 8px; padding: 20px;
    text-align: center; cursor: pointer; transition: .2s;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.gallery-upload-area:hover { border-color: var(--primary); }
.gallery-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; }
.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; box-shadow: 0 0 0 2px rgba(45, 106, 79, .2); }
.size-chip span { color: #334155; background: #fff; font-weight: 600; }
.size-chip span:hover { border-color: var(--primary); }

.wizard-tab { cursor: default; pointer-events: none; color: #9ca3af !important; }
.wizard-tab.active { pointer-events: auto; cursor: pointer; color: inherit !important; }
.wizard-tab.done { pointer-events: auto; cursor: pointer; color: var(--primary) !important; }

.wizard-progress .list-group-item { font-size: 13px; padding: 10px 16px; border: none; color: #9ca3af; }
.wizard-progress .list-group-item.active-step { color: var(--primary); font-weight: 600; background: #f0fdf4; }
.wizard-progress .list-group-item.done-step { color: #166534; }
.wizard-progress .list-group-item.done-step i { color: #16a34a; }

#wizardActions { position: sticky; top: 70px; z-index: 10; }
#wizardActions .btn { font-weight: 600; }
</style>
@endpush

@push('scripts')
<script>
const STEPS = [
    { id: 'tab-basic',    label: 'Basic Info',    href: '#tab-basic' },
    { id: 'tab-price',    label: 'Price & Stock', href: '#tab-price' },
    { id: 'tab-images',   label: 'Images',        href: '#tab-images' },
    { id: 'tab-variants', label: 'Variants',      href: '#tab-variants' },
    { id: 'tab-seo',      label: 'SEO',           href: '#tab-seo' },
];

let currentStep = 0;
let maxReached = 0;

function generateSlug(name) {
    const slug = name.toLowerCase()
        .replace(/[\u0980-\u09FF]/g, m => m)
        .replace(/[^a-zA-Z0-9\u0980-\u09FF ]/g, '')
        .replace(/\s+/g, '-');
    const slugField = document.getElementById('slugField');
    if (!slugField.dataset.manual) slugField.value = slug;
}

document.getElementById('slugField').addEventListener('input', function() {
    this.dataset.manual = '1';
});

function previewImage(input, previewId, placeholderId) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById(previewId).src = e.target.result;
            document.getElementById(previewId).style.display = 'block';
            document.getElementById(placeholderId).style.display = 'none';
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function previewGallery(input) {
    const container = document.getElementById('galleryPreview');
    container.innerHTML = '';
    const productName = document.getElementById('productName')?.value?.trim() || '';

    [...input.files].forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = e => {
            const wrap = document.createElement('div');
            wrap.className = 'gallery-seo-card border rounded p-2 mb-3 bg-white';
            wrap.innerHTML = `
                <div class="d-flex gap-3 align-items-start flex-wrap">
                    <img src="${e.target.result}" class="gallery-thumb rounded border" style="width:90px;height:90px;object-fit:cover">
                    <div class="flex-grow-1">
                        <div class="small fw-bold mb-2">Gallery Image #${index + 1}</div>
                        <div class="img-seo-fields border rounded bg-light p-2">
                            <div class="small fw-bold text-success mb-2"><i class="fas fa-search me-1"></i>Image SEO</div>
                            <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}" placeholder="Alt text">
                            </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}" placeholder="Title">
                            </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" placeholder="Caption">
                            </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" placeholder="Description"></textarea>
                            </div>
                        </div>
                    </div>
                </div>`;
            container.appendChild(wrap);
        };
        reader.readAsDataURL(file);
    });
}

function validateStep(step) {
    if (step === 0) {
        const name = document.getElementById('productName');
        const cat  = document.getElementById('productCategory');
        if (!name.value.trim()) {
            name.focus();
            toastr.error('Product name দিন।');
            return false;
        }
        if (!cat.value) {
            cat.focus();
            toastr.error('Category select করুন।');
            return false;
        }
    }
    if (step === 1) {
        const price = document.getElementById('productPrice');
        if (!price.value || parseFloat(price.value) < 0) {
            price.focus();
            toastr.error('Regular price দিন।');
            return false;
        }
    }
    return true;
}

function goToStep(step) {
    if (step < 0 || step >= STEPS.length) return;
    currentStep = step;
    if (step > maxReached) maxReached = step;

    const target = STEPS[step].href;
    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('show', 'active'));
    document.querySelector(target)?.classList.add('show', 'active');

    document.querySelectorAll('.wizard-tab').forEach((tab, i) => {
        tab.classList.remove('active', 'done');
        if (i === step) tab.classList.add('active');
        else if (i < maxReached || i < step) tab.classList.add('done');
    });

    document.querySelectorAll('#wizardProgress li').forEach((li, i) => {
        li.classList.remove('active-step', 'done-step');
        const icon = li.querySelector('i');
        if (i === step) {
            li.classList.add('active-step');
            icon.className = 'fas fa-circle-notch fa-spin me-2';
        } else if (i < step) {
            li.classList.add('done-step');
            icon.className = 'fas fa-check-circle me-2';
        } else {
            icon.className = 'far fa-circle me-2';
        }
    });

    document.getElementById('stepIndicator').textContent =
        `Step ${step + 1} of ${STEPS.length} — ${STEPS[step].label}`;

    document.getElementById('btnPrev').style.display = step === 0 ? 'none' : 'block';

    const isLast = step === STEPS.length - 1;
    const btnNext = document.getElementById('btnNext');
    const btnSave = document.getElementById('btnSave');

    if (isLast) {
        btnNext.style.display = 'none';
        btnSave.classList.remove('flex-fill');
        btnSave.classList.add('w-100');
        btnSave.innerHTML = '<i class="fas fa-save me-1"></i> Save Product';
    } else {
        btnNext.style.display = 'inline-flex';
        btnSave.classList.add('flex-fill');
        btnSave.classList.remove('w-100');
        btnSave.innerHTML = '<i class="fas fa-save me-1"></i> Save';
    }
}

document.getElementById('btnNext').addEventListener('click', function() {
    if (!validateStep(currentStep)) return;
    goToStep(currentStep + 1);
});

document.getElementById('btnPrev').addEventListener('click', function() {
    goToStep(currentStep - 1);
});

document.getElementById('productTabs').addEventListener('click', function(e) {
    const tab = e.target.closest('.wizard-tab');
    if (!tab || !tab.classList.contains('done')) return;
    e.preventDefault();
    goToStep(parseInt(tab.dataset.step, 10));
});

document.querySelectorAll('#wizardProgress li').forEach(li => {
    li.style.cursor = 'pointer';
    li.addEventListener('click', function() {
        const step = parseInt(this.dataset.step, 10);
        if (step <= maxReached) goToStep(step);
    });
});

document.getElementById('productForm').addEventListener('submit', function(e) {
    if (!validateStep(0)) {
        e.preventDefault();
        goToStep(0);
        return;
    }
    if (!validateStep(1)) {
        e.preventDefault();
        goToStep(1);
    }
});

document.addEventListener('DOMContentLoaded', function() {
@if($errors->any())
    maxReached = STEPS.length - 1;
    @if($errors->has('price'))
    goToStep(1);
    @elseif($errors->has('name') || $errors->has('category_id'))
    goToStep(0);
    @else
    goToStep(4);
    @endif
@else
    goToStep(0);
@endif
});
</script>
@endpush