@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.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row mb-3">
                                <label for="inputText" 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="{{ old('name') }}" name="name" id="name">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="inputText" 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="{{ old('title') }}" name="title" id="title">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="inputText" 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"></textarea>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="inputText" 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('details') }}" name="detail"
                                        id="details"></textarea>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="inputText" 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"></textarea>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="inputText" 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"></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="variant_section">
                                <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">
                                        <div class="variant">

                                            {{-- <div class="hello d-flex"> --}}
                                            <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> --}}

                                        </div>
                                        {{-- @endif --}}

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




                            {{-- product variant --}}

                            <div class="row mb-3">
                                <label for="inputText" 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="{{ old('price') }}" name="price" id="price">
                                </div>

                                <label for="inputText" 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="{{ old('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 }}">{{ $menu->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                {{-- <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 ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->category_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="" disabled selected>Subcategory</option>
                                        @if ($subMenu->count() > 0)
                                            @foreach ($subMenu as $submenu)
                                                <option value="{{ $submenu->id }}">{{ $submenu->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </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="" disabled selected>Subcategory</option>
                                        @foreach ($sub_categories as $sub_category)
                                            <option value="{{ $sub_category->id }}">{{ $sub_category->subcategory_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div> --}}
                            </div>

                            <div class="row mb-3">
                                <label for="inputText" 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="{{ old('stock') }}" name="stock" id="stock">
                                </div>
                                <label for="inputText" 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="{{ old('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="{{ old('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" selected>In-stock</option>
                                        <option value="out-of-stock" disabled>Out-of-stock</option>
                                    </select>
                                </div>
                            </div>


                            <div class="row mb-3 mt-3">
                                <label for="name" class="col-sm-2 col-form-label">Tag</label>
                                <div class="col-sm-4">
                                    <input name="tags[]" id="tags"
                                        class="form-control @error('tag') is-invalid @enderror"
                                        value="{{ old('tag') }}">
                                </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="{{ old('product_code') }}">
                                </div>
                            </div>

                            {{-- <div class="row mb-3">
                                <label for="size" class="col-sm-2 col-form-label">Size</label>
                                <div class="col-sm-4">
                                                <select name="size[]" id="ms1" multiple>
                                                        <option value="" disabled selected>Select size</option>
                                                        @foreach ($sizes as $size)
                                                            <option value="{{ $size->id }}">{{ $size->name }}</option>
                                                        @endforeach
                                                    </select>
                                    <select class="form-multi-select" name="size[]" id="ms1" multiple data-coreui-search="global">
                                        <option value="" disabled selected>Select size</option>
                                        <option value="XS">XS</option>
                                        <option value="S">S</option>
                                        <option value="M">M</option>
                                        <option value="XL">XL</option>
                                        <option value="2XL">2XL</option>
                                        <option value="3XL">3XL</option>
                                    
                                    </select>
                                </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">

                                        <div id="repeaters">
                                        </div>
                                        <div class="mt-4" id="repeater">
                                            <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="{{ getDefaultImage() }}">
                                        <input type="file" name="image" id="image" accept="image/*"
                                            onchange="previewFile(this)" required>
                                        <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="{{ old('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;

        }

        .variant_section {
            display: none;
        }
    </style>
@endpush

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

        function addRepeaterItem() {
            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

        //start product varient
//start product variant
function isVariantMode() {
    const cb = document.querySelector(".has_variants");
    return cb && cb.checked;
}

function toggleVariantMode() {
    const variantSection = document.querySelector(".variant_section");
    const enabled = isVariantMode();

    if (variantSection) variantSection.style.display = enabled ? "block" : "none";

    // ✅ variant off থাকলে input submit হবে না (স্টক 0 করে overwriteও হবে না)
    document.querySelectorAll('input[name="variation[size][]"], input[name="variation[quantity][]"]').forEach(el => {
        el.disabled = !enabled;
    });

    if (enabled) updateStock();
}

const hasVarCb = document.querySelector(".has_variants");
if (hasVarCb) {
    hasVarCb.addEventListener("change", toggleVariantMode);
}

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);

    // ✅ নতুন row add হলে যদি variant mode on থাকে তাহলে enable রাখি
    toggleVariantMode();
}

function updateStock() {
    if (!isVariantMode()) return; // ✅ manual stock overwrite করবে না

    let totalStock = 0;
    document.querySelectorAll('.variant .quantity').forEach(input => {
        totalStock += parseInt(input.value) || 0;
    });

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

// ✅ page load init
toggleVariantMode();
    </script>
@endpush