@extends('Admin.layout')
<style>
    textarea.form-control {

        height: 90px;

        resize: none;

    }

    .upload-container {

        border: 2px dashed #cbd5e1;

        border-radius: 12px;

        background: #fdfdfd;

        min-height: 164px;

        padding: 15px;

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        align-content: flex-start;

    }

    .image-preview-wrapper {

        position: relative;

        width: 100px;

        height: 100px;

        border-radius: 8px;

        border: 1px solid #e2e8f0;

    }

    .image-preview-wrapper img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        border-radius: 7px;

    }

    .remove-img-btn {

        position: absolute;

        top: -5px;

        right: -5px;

        background: #ff4d4d;

        color: white;

        border: none;

        border-radius: 50%;

        width: 20px;

        height: 20px;

        font-size: 12px;

        cursor: pointer;

        z-index: 10;

    }

    .add-image-box {

        width: 100px;

        height: 100px;

        border: 2px dashed #0056b3;

        border-radius: 8px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        color: #0056b3;

        transition: 0.3s;

        background: #f0f7ff;

    }

    .add-image-box:hover {

        background: #e0eeff;

    }
</style>
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('products') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Add Product
            </h5>
        </div>
    </div>
    <div class="card p-5">
        <form id="staffForm" action="{{ route('create_staff') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <h4 class="mb-3">Add Products</h4>
            <div class="row">

                <div class="col-lg-8">
                    <div class="row">
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Select Category</label>

                            <select class="form-select" name="name">
                                <option value="">Select Category</option>
                                {{-- <option value="Mobile Recharge">Mobile Recharge</option> --}}
                                
                            </select>

                            <div class="text-danger small error-name"></div>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Product Name</label>
                            <input type="text" class="form-control @error('father_name') is-invalid @enderror"
                                name="father_name" value="{{ old('father_name') }}" placeholder="Enter product Name">
                            <div class="text-danger small error-father_name"></div>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Tax</label>
                            <input type="text" class="form-control @error('phone_number') is-invalid @enderror" placeholder="Enter tax"
                                name="phone_number" value="{{ old('phone_number') }}">
                            <div class="text-danger small error-phone_number"></div>
                        </div>

                    </div>

                    <div class="col-lg-12 mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control @error('address') is-invalid @enderror" name="address"
                            placeholder="Enter Description" rows="5">{{ old('address') }}</textarea>
                        <div class="text-danger small error-address"></div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <label class="form-label">Product Images</label>

                    <div class="upload-container" id="image-gallery">

                        <!-- Add Image Box -->
                        <div class="add-image-box" id="addImageTrigger">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                                    stroke="#2F2B3D" stroke-width="1.5" />
                                <path d="M8 12H16" stroke="#2F2B3D" stroke-width="1.5" />
                                <path d="M12 16V8" stroke="#2F2B3D" stroke-width="1.5" />
                            </svg>
                            <span>Add New</span>
                        </div>
                        <input type="file" id="file-input" multiple hidden accept="image/*">

                        <small class="text-muted">
                            (Max file size: 5MB, PNG/JPG only)
                        </small>

                    </div>


                </div>

            </div>




            <style>
                .plan-grid {
                    display: grid;
                    grid-template-columns: repeat(7, 1fr);
                    gap: 15px;
                }

                @media(max-width:992px) {
                    .plan-grid {
                        grid-template-columns: repeat(3, 1fr);
                    }
                }

                @media(max-width:768px) {
                    .plan-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }

                @media(max-width:576px) {
                    .plan-grid {
                        grid-template-columns: 1fr;
                    }
                }
            </style>


            <div id="planRows">

                <div class="plan-block">

                    <!-- 7 Fields Same Row -->
                    <div class="plan-grid mb-3 mt-4">

                        <div>
                            <label class="form-label">Unit Value</label>
                            <input type="text" name="unit_value[]" class="form-control" placeholder="₹299">
                        </div>

                        <div>
                            <label class="form-label">Unit</label>
                            <select name="unit[]" class="form-select">
                                <option value="">Select Unit</option>
                                <option value="Days">gm</option>
                                {{-- <option value="Months">Months</option>
                                <option value="Years">Years</option> --}}
                            </select>
                        </div>

                        <div>
                            <label class="form-label">MRP</label>
                            <input type="text" name="mrp[]" class="form-control" placeholder="300">
                        </div>

                        <div>
                            <label class="form-label">Price</label>
                            <input type="text" name="price[]" class="form-control" placeholder="1.5GB/Day">
                        </div>

                        <div>
                            <label class="form-label">Stock</label>
                            <input type="text" name="stock[]" class="form-control" placeholder="100/day">
                        </div>

                        <div>
                            <label class="form-label">Display</label>
                            <select name="display[]" class="form-select">
                                <option value="">Select Plan Type</option>
                                <option value="Prepaid">Yes</option>
                                <option value="Postpaid">No</option>

                            </select>
                        </div>


                        <div class="mt-auto d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-add px-4 w-100">
                                Add More
                            </button>

                            <button type="button" class="btn btn-danger btn-remove px-4 w-100">
                                Remove
                            </button>
                        </div>

                    </div>



                </div>

            </div>

           <div class="form-actions mt-4 d-flex gap-3 justify-content-center">
                <button type="submit" id="finalUpdate" class="btn btn-primary">
                    Submit
                </button>
                <button type="reset" class="btn btn-label-secondary me-2" onclick="window.location.reload()">
                    Discard
                </button>

            </div>
    </div>

    </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const fileInput = document.getElementById('file-input');
            const gallery = document.getElementById('image-gallery');
            const addBox = document.getElementById('addImageTrigger');

            let selectedFiles = [];

            
            addBox.addEventListener('click',function(){
                fileInput.click();
            });


            /* Upload + Preview */
            fileInput.addEventListener('change', function () {

                Array.from(this.files).forEach(file => {

                    // Optional validation
                    if (file.size > 5 * 1024 * 1024) {
                        alert(file.name + ' exceeds 5MB');
                        return;
                    }

                    const reader = new FileReader();

                    reader.onload = function (e) {

                        const base64 = e.target.result;

                        selectedFiles.push({
                            file: file,
                            base64: base64
                        });

                        const wrapper = document.createElement('div');

                        wrapper.className = 'image-preview-wrapper new-image';
                        wrapper.dataset.index = selectedFiles.length - 1;

                        wrapper.innerHTML = `
                                        <img src="${base64}" alt="preview">
                                        <button type="button" class="remove-img-btn">
                                            ✕
                                        </button>

                                        <input type="hidden"
                                            name="product_image[]"
                                            value="${base64}">

                                        <input type="hidden"
                                            name="new_images_filenames[]"
                                            value="${file.name}">
                                    `;

                        gallery.insertBefore(wrapper, addBox);
                    };

                    reader.readAsDataURL(file);

                });

                // allow selecting same image again
                this.value = '';
            });



            /* Remove Image */
            gallery.addEventListener('click', function (e) {

                if (e.target.classList.contains('remove-img-btn')) {

                    const wrapper = e.target.closest('.image-preview-wrapper');
                    const index = wrapper.dataset.index;

                    selectedFiles.splice(index, 1);

                    wrapper.remove();

                    // re-index after delete
                    document.querySelectorAll('.new-image').forEach((item, i) => {
                        item.dataset.index = i;
                    });

                }

            });

        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {

            const planRows = document.getElementById("planRows");

            // ADD MORE
            document.addEventListener("click", function (e) {

                if (e.target.classList.contains("btn-add")) {

                    let firstBlock = planRows.querySelector(".plan-block");
                    let newBlock = firstBlock.cloneNode(true);

                    // clear inputs
                    newBlock.querySelectorAll("input").forEach(input => input.value = "");

                    planRows.appendChild(newBlock);
                    updateButtons();
                }

                // REMOVE
                if (e.target.classList.contains("btn-remove")) {

                    let block = e.target.closest(".plan-block");

                    if (planRows.querySelectorAll(".plan-block").length > 1) {
                        block.remove();
                    }

                    updateButtons();
                }
            });

            function updateButtons() {
                let blocks = planRows.querySelectorAll(".plan-block");

                blocks.forEach((block, index) => {

                    let addBtn = block.querySelector(".btn-add");
                    let removeBtn = block.querySelector(".btn-remove");

                    if (index === 0) {
                        // First row
                        addBtn.style.display = "inline-block";
                        removeBtn.style.display = "none";
                    } else {
                        // Other rows
                        addBtn.style.display = "none";
                        removeBtn.style.display = "inline-block";
                    }
                });
            }

            updateButtons();
        });
    </script>
@endsection