@extends('backend.admin.layouts.app')
@section('content')
    <div class="pagetitle">
        <h1>Dashboard</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item">Dashboard</li>
                <li class="breadcrumb-item active">{{ $PageTitle }}</li>

            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section dashboard">
        <div class="row">
            <div class="col-lg-12">

                <div class="card">
                    <div class="card-body mt-3 p-5">
                        <form action="{{ route('admin.product.update', $product->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row mb-3">
                                <label for="name" class="col-sm-2 col-form-label">Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                                        value="{{ $product->name }}" name="name" id="name">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="title" class="col-sm-2 col-form-label">Title</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control @error('title') is-invalid @enderror"
                                        value="{{ $product->title }}" name="title" id="title">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="description" class="col-sm-2 col-form-label">Description</label>
                                <div class="col-sm-10">
                                    <textarea class="tinymce-editor @error('description') is-invalid @enderror" value="{{ old('description') }}"
                                        name="description" id="description">{{ $product->description }}</textarea>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="details" class="col-sm-2 col-form-label">Details</label>
                                <div class="col-sm-10">
                                    <textarea class="tinymce-editor @error('details') is-invalid @enderror" value="{{ old('detail') }}" name="detail"
                                        id="details">{{ $product->detail }}</textarea>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="material" class="col-sm-2 col-form-label">Material</label>
                                <div class="col-sm-10">
                                    <textarea class="tinymce-editor @error('material') is-invalid @enderror" value="{{ old('material') }}" name="material"
                                        id="material">{{ $product->matetial }}</textarea>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="care" class="col-sm-2 col-form-label">Care</label>
                                <div class="col-sm-10">
                                    <textarea class="tinymce-editor @error('care') is-invalid @enderror" value="{{ old('care') }}" name="care"
                                        id="care">{{ $product->care }}</textarea>
                                </div>
                            </div>
                            {{-- product variant --}}

                            {{-- <label class="border-bottom mb-4 pb-2 fw-semibold">Has Variants?</label>
                             <input type="checkbox" class="has_variants mb-4 p-4" name="has_variants"> --}}


                            <div class="row mb-3">
                                <label for="inputText" for="care" class="col-sm-2 col-form-label">Product
                                    Variants</label>
                                <div class="col-sm-6">
                                    @if (count($product->variants) > 0)
                                        <div class="variant">
                                            @foreach ($product->variants as $variant)
                                                <div class="repeater-item d-flex align-items-center mt-2">
                                                    <input class="form-control w-100 me-4" type="text"
                                                        name="variation[size][]" value="{{ $variant->size }}" />
                                                    <input class="form-control w-100 quantity" type="text"
                                                        name="variation[quantity][]" oninput="updateStock()"
                                                        value="{{ $variant->stock }}" />
                                                    <button type="button" class="remove-btn btn btn-primary ms-4"
                                                        onclick="removeItem(event, this)">
                                                        <a href="" class="mr-1" title="Edit">
                                                            <img src="{{ asset('assets/img/minus.png') }}" alt="">
                                                        </a>
                                                    </button>
                                                </div>
                                            @endforeach

                                        </div>
                                    @else
                                        <div class="variant">

                                            <div class="repeater-item d-flex align-items-center mt-2">
                                                <input class="form-control w-100 me-4" type="text"
                                                    name="variation[size][]" />
                                                <input class="form-control w-100 quantity" type="text"
                                                    name="variation[quantity][]" oninput="updateStock()" />
                                                <button type="button" class="remove-btn btn btn-primary ms-4"
                                                    onclick="removeItem(event, this)">
                                                    <a href="" class="mr-1" title="Edit">
                                                        <img src="{{ asset('assets/img/minus.png') }}" alt="">
                                                    </a>
                                                </button>
                                            </div>
                                        </div>
                                    @endif

                                    <button type="button" class="add-btn btn btn-primary mt-4"
                                        onclick="addVariant(event)">Add Variant</button>
                                </div>
                            </div>





                            {{-- product variant --}}

                            <div class="row mb-3">
                                <label for="price" class="col-sm-2 col-form-label">Price</label>
                                <div class="col-sm-4">
                                    <input type="munber" class="form-control @error('price') is-invalid @enderror"
                                        value="{{ $product->price }}" name="price" id="price">
                                </div>

                                <label for="discount_price" class="col-sm-2 col-form-label">Discount
                                    Price</label>
                                <div class="col-sm-4">
                                    <input type="munber"
                                        class="form-control @error('discount_price') is-invalid @enderror"
                                        value="{{ $product->discount_price }}" name="discount_price"
                                        id="discount_price">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label">Category</label>
                                <div class="col-sm-4">
                                    <select class="form-select" name="category_id" aria-label="Default select example">
                                        <option value="" disabled selected>select category</option>
                                        @foreach ($menus as $menu)
                                            <option value="{{ $menu->id }}" {{ $product->category_id === $menu->id ? 'selected' : '' }}>{{ $menu->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                               
                                <label class="col-sm-2 col-form-label">Subcategory</label>
                                <div class="col-sm-4">
                                    <select class="form-select" name="subcategory_id"
                                        aria-label="Default select example">
                                        <option value="" selected>Subcategory</option>
                                        @if ($subMenu->count() > 0)
                                            @foreach ($subMenu as $submenu)
                                                <option value="{{ $submenu->id }}" {{ $product->subcategory_id === $submenu->id ? 'selected' : '' }}>{{ $submenu->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                            </div>

                            <div class="row mb-3">
                                <label for="stock" class="col-sm-2 col-form-label">Stock</label>
                                <div class="col-sm-4">
                                    <input type="munber" class="form-control @error('stock') is-invalid @enderror"
                                        value="{{ $product->stock }}" name="stock" id="stock">
                                </div>
                                <label for="brand_name" class="col-sm-2 col-form-label">Brand
                                    Name</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control @error('brand_name') is-invalid @enderror"
                                        value="{{ $product->brand_name }}" name="brand_name" id="brand_name">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="sku" class="col-sm-2 col-form-label">Sku</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control @error('sku') is-invalid @enderror"
                                        value="{{ $product->sku }}" name="sku" id="sku">
                                </div>

                                <label for="status" class="col-sm-2 col-form-label">Status</label>
                                <div class="col-sm-4">
                                    <select class="form-select" name="status" id="status"
                                        aria-label="Default select example">
                                        <option value="in-stock"{{ $product->status === 'in-stock' ? 'selected' : '' }}>
                                            In-stock</option>
                                        <option value="out-of-stock"
                                            {{ $product->status === 'out-of-stock' ? 'selected' : '' }}>Out-of-stock
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3 mt-3">
                                <label for="tags" class="col-sm-2 col-form-label">Tag</label>
                                <div class="col-sm-4">
                                    <input name="tags[]" id="tags"
                                        class="form-control @error('tags') is-invalid @enderror"
                                        value="{{ implode(',', $product->tags->pluck('tag')->toArray()) }}">
                                </div>
                                <label for="product_code" class="col-sm-2 col-form-label">Product Code</label>
                                <div class="col-sm-4">
                                    <input name="product_code" id="product_code"
                                        class="form-control @error('product_code') is-invalid @enderror"
                                        value="{{ $product->product_code }}">
                                </div>
                            </div>

                            <div class="row">
                                <label for="image" class="col-sm-2 col-form-label">Add Gallary Image</label>

                                <div class="col-sm-6 mb-25">
                                    <div class="repeater-container">

                                        @if (count($product->galleries) > 0)
                                            {{-- @foreach ($experiences as $experience) --}}
                                            <div id="repeater">
                                                <!-- Initial Repeater Item -->
                                                @foreach ($product->galleries as $gallery)
                                                    <div class="hello d-flex">

                                                        <div class="repeater-item d-flex align-items-center mt-2">
                                                            <input class="form-control w-100 image-input" type="file"
                                                                name="gallary_image[]"
                                                                onchange="previewImage(event, this)" />

                                                            <button type="button" class="remove-btn btn btn-primary ms-4"
                                                                onclick="removeItem(event, this)">
                                                                <img src="{{ asset('assets/img/minus.png') }}"
                                                                    alt="">
                                                            </button>
                                                        </div>
                                                        <div class="preview-img mt-2">
                                                            <img class="ms-3 preview-img-tag"
                                                                src="{{$gallery->image ? asset('storage/' . $gallery->image) : getDefaultImage()}}"
                                                                alt="Preview"
                                                                style="width: 80px; height: 80px; object-fit: cover; border-radius: 5px;">
                                                        </div>

                                                    </div>
                                                @endforeach
                                            </div>
                                            {{-- @endforeach --}}
                                        @else
                                            <div class="mt-4" id="repeater">
                                                <!-- Initial Repeater Item -->
                                                <div class="hello d-flex">
                                                    <div class="repeater-item d-flex align-items-center mt-2">
                                                        <input class="form-control w-100 image-input" type="file"
                                                            name="gallary_image[]" onchange="previewImage(event, this)" />
                                                        <button type="button" class="remove-btn btn btn-primary ms-4"
                                                            onclick="removeItem(event, this)">
                                                            <a href="" class="mr-1" title="Edit">
                                                                <img src="{{ asset('assets/img/minus.png') }}"
                                                                    alt="">
                                                            </a>
                                                        </button>
                                                    </div>
                                                    <div class="preview-img mt-2">
                                                        <img class="ms-3 preview-img-tag" src="" alt="Preview"
                                                            style="display: none; width: 80px; height: 80px; object-fit: cover; border-radius: 5px;">
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        <button type="button" class="add-btn btn btn-primary mt-4"
                                            onclick="addRepeaterItem(event)">Add Gallary Image</button>
                                    </div>
                                </div>

                            </div>
                            <div class="row mt-5 mb-4">

                                <label for="image" class="col-sm-2 col-form-label">Image</label>
                                <div class="col-sm-4 mb-25">
                                    <div class="upload-img-box">
                                        <img
                                            src="{{ $product->thumbnail ? asset('storage/' . $product->thumbnail) : getDefaultImage() }}">
                                        <input type="file" name="image" id="image" accept="image/*"
                                            onchange="previewFile(this)">
                                        <div class="upload-img-box-icon">
                                            <i class="fa-solid fa-camera"></i>
                                        </div>
                                    </div>
                                    <p class="col-sm-10 mt-2">Size: 400 x 400 (100kb)</p>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="alt" class="col-sm-2 col-form-label">Image Alternative Info</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control @error('alt') is-invalid @enderror"
                                        value="{{ $product->alt }}" name="alt" id="alt">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-10">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </div>

                        </form><!-- End General Form Elements -->

                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection
@push('style')
    <style>
        .upload-img-box {
            width: 500px;
            height: 500px;
        }

        .tagify--focus {
            border-color: #86b7fe !important;
            box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;

        }
    </style>
@endpush

@push('script')
    <!--start repeater -->
    <script>
        const repeater = document.getElementById('repeater');

        function addRepeaterItem() {
            // Create a new div element
            const newItem = document.createElement('div');
            newItem.className = 'hello d-flex';
            newItem.innerHTML = `
        <div class="repeater-item d-flex align-items-center mt-2">
                                                    <input class="form-control w-90 image-input" type="file" name="gallary_image[]" onchange="previewImage(event, this)" />
                                                    <button type="button" class="remove-btn btn btn-primary ms-4" onclick="removeItem(event, this)">
                                                        <a href="" class="mr-1" title="Edit">
                                                            <img src="{{ asset('assets/img/minus.png') }}" alt="">
                                                        </a>
                                                    </button>
                                                </div>
                                                <div class="preview-img mt-2">
                                                    <img class="ms-3 preview-img-tag" src="" alt="Preview" 
                                                        style="display: none; width: 80px; height: 80px; object-fit: cover; border-radius: 5px;">
                                                </div>
    `;

            repeater.appendChild(newItem);
        }


        function removeItem(event, button) {
            event.preventDefault();
            const repeaterItem = button.closest('.repeater-item');
            const wrapper = button.closest('.hello');
            if (wrapper) {
                wrapper.remove();
            }
            repeaterItem.remove();
            updateStock();
        }


        function previewImage(event, input) {
            const file = input.files[0];
            if (file) {
                const previewDiv = input.closest('.repeater-item').nextElementSibling;
                const previewImg = previewDiv.querySelector('.preview-img-tag');
                previewImg.src = URL.createObjectURL(file);
                previewImg.style.display = "block";
            }
        }

        //start Tagify
        new Tagify(document.querySelector("#tags"));
        //end Tagify
        function addVariant() {
            const variant = document.querySelector('.variant')
            const newVari = document.createElement('div');
            newVari.className = 'repeater-item d-flex align-items-center mt-2';
            newVari.innerHTML = `
         <input class="form-control w-100 me-4" type="text" name="variation[size][]" />
                                                    <input class="form-control w-100 quantity" type="text" name="variation[quantity][]" oninput="updateStock()"/>
                                                    <button type="button" class="remove-btn btn btn-primary ms-4"
                                                        onclick="removeItem(event, this)">
                                                        <a href="" class="mr-1" title="Edit">
                                                            <img src="{{ asset('assets/img/minus.png') }}" alt="">
                                                        </a>
                                                    </button>
                    `;

            variant.appendChild(newVari);
        }

function hasAnyRealVariant() {
    let any = false;
    document.querySelectorAll('input[name="variation[size][]"]').forEach(inp => {
        if ((inp.value || '').trim() !== '') any = true;
    });
    return any;
}

function updateStock() {
    // ✅ সব size খালি হলে stock overwrite করবে না
    if (!hasAnyRealVariant()) return;

    let totalStock = 0;

    const sizeInputs = document.querySelectorAll('input[name="variation[size][]"]');
    const qtyInputs  = document.querySelectorAll('input[name="variation[quantity][]"]');

    sizeInputs.forEach((s, i) => {
        if ((s.value || '').trim() === '') return;
        totalStock += parseInt(qtyInputs[i]?.value) || 0;
    });

    const stockEl = document.getElementById('stock');
    if (stockEl) stockEl.value = totalStock;
}

// ✅ page load এ কেবল বাস্তব variant থাকলে stock calc হবে
if (hasAnyRealVariant()) updateStock();

    </script>
@endpush