@extends('User.layout')

@section('header')
@include('components.header-inner', [
'title' => 'Add Product',
'backUrl' => route('welcome'),

'rightButton' => '
<a href="'.route('product_history').'" class="link position-relative">
    <button class="btn btn-sm btn-success" style="border-radius: 6px; padding:4px 10px; font-size:12px;">
       View History
    </button>
</a>
'
])
@endsection

@section('content')

<style>
    .add-product-container {
        margin: 0 auto;
        padding: 12px;
    }

    .add-product-container label {
        font-size: 13px;
        font-weight: 600;
    }

    .input-box,
    textarea {
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        padding: 10px;
        width: 100%;
        font-size: 13px;
    }

    /* Textarea */
    textarea {
        resize: none;
    }

    /* ---------------- QTY ---------------- */
    .qty-box {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .qty-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: linear-gradient(180deg, #33b02c90 0%, #33b02c 100%);
        color: #fff;
        font-size: 18px;
        border: none;
    }

    #qtyNumber {
        font-size: 15px;
        font-weight: 600;
    }

    /* ---------------- IMAGE UPLOAD ---------------- */
    .upload-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .upload-box {
        width: 90px;
        height: 90px;
        border: 2px dashed #bfc6d1;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #f8faff;
        cursor: pointer;
        transition: 0.2s;
    }

    .upload-box:hover {
        border-color: #89aeff;
    }

    .upload-icon {
        font-size: 24px;
    }

    .upload-text {
        font-size: 11px;
        margin-top: 4px;
        color: #555;
    }

    .upload-info {
        font-size: 9px;
        color: #888;
    }

    /* Add More Button */
    .add-more-btn {
        display: flex;
        align-items: center;
        gap: 5px;
        background: #e6f9eb;
        border: 1px solid #93e2a1;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 12px;
        font-weight: 600;
        color: #28b05c;
        cursor: pointer;
    }

    /* ---------------- SUBMIT ---------------- */
    .submit-btn {
        width: 100%;
        padding: 12px;
        border-radius: 8px;
        border: none;
        color: white;
        background: linear-gradient(180deg, #33b02c90 0%, #33b02c 100%);
        font-size: 14px;
        margin-top: 15px;
        opacity: 0.4;
    }

    .submit-btn.active {
        opacity: 1;
    }

    /* ---------------- MOBILE RESPONSIVE ---------------- */
    @media (max-width: 380px) {
        .upload-box {
            width: 80px;
            height: 80px;
        }

        .qty-btn {
            width: 26px;
            height: 26px;
            font-size: 16px;
        }

        .submit-btn {
            font-size: 13px;
        }
    }
</style>

<div class="add-product-container mt-3">

    <form id="productForm" action="{{ route('add_product_form') }}" method="POST" enctype="multipart/form-data">
        @csrf

        {{-- PRODUCT NAME --}}
        <label>Product Name</label>
        <input type="text" id="product_name" name="product_name" class="input-box" placeholder="Enter Product Name" value="{{ old('product_name') }}">
        @error('product_name') <small class="text-danger">{{ $message }}</small> @enderror


        {{-- QUANTITY --}}
        <label class="mt-3">Quantity</label>
        <div class="qty-box">
            <button type="button" class="qty-btn" onclick="changeQty(-1)">−</button>
            <span id="qtyNumber">1</span>
            <button type="button" class="qty-btn" onclick="changeQty(1)">+</button>
        </div>
        <input type="hidden" name="quantity" id="quantity" value="1">



        {{-- DESCRIPTION --}}
        <label class="mt-3">Description</label>
        <textarea name="description" class="input-box" rows="2" placeholder="Enter Description"></textarea>
        @error('description') <small class="text-danger">{{ $message }}</small> @enderror

        {{-- IMAGES --}}
        <div class="product-image-section mt-3">
            <label>Product Image</label>

            <div id="uploadContainer" class="upload-wrapper">
                @for($i=1; $i<=3; $i++)
                    <div class="upload-box" onclick="document.getElementById('imageInput{{ $i }}').click()">
                    <div class="upload-icon">📄</div>
                    <div class="upload-text">Upload</div>
                    <div class="upload-info">JPG • Max 5MB</div>

                    <input type="file" name="images[]" id="imageInput{{ $i }}" class="d-none"
                        accept="image/jpeg" onchange="showPreview(event, this)">
            </div>
            @endfor

            <div id="addMoreBtn" class="add-more-btn" onclick="addMoreUpload()">
                + Add More
            </div>

        </div>
        @error('images.*') <small class="text-danger">{{ $message }}</small> @enderror

</div>

{{-- SEARCH KEYWORD --}}
<label class="mt-3">Search Name</label>
<input type="text" name="key_search" class="input-box" placeholder="Enter Keywords" value="{{ old('key_search') }}">
@error('key_search') <small class="text-danger">{{ $message }}</small> @enderror


{{-- SUBMIT --}}
<button type="submit" id="submitBtn" class="submit-btn" disabled>Submit</button>
</form>

</div>

<script>
    let uploadCount = 3;

    /* Add more upload boxes */
    /* Add more upload boxes */
    function addMoreUpload() {
        uploadCount++;

        let box = document.createElement("div");
        box.classList.add("upload-box");
        box.setAttribute("onclick", `document.getElementById('imageInput${uploadCount}').click()`);

        box.innerHTML = `
        <div class="upload-icon">📄</div>
        <div class="upload-text">Upload</div>
        <div class="upload-info">JPG • Max 5MB</div>
        <input type="file" name="images[]" id="imageInput${uploadCount}" class="d-none"
            accept="image/jpeg" onchange="showPreview(event, this)">
    `;

        let container = document.getElementById("uploadContainer");
        let addMoreBtn = document.getElementById("addMoreBtn");
        container.insertBefore(box, addMoreBtn);
    }


    /* Show preview */
function showPreview(event, input) {
    let file = event.target.files[0];
    if (!file) return;

    let url = URL.createObjectURL(file);
    let parent = input.parentElement;

    // Remove only preview-related elements, not input
    [...parent.children].forEach(child => {
        if (child !== input) child.remove();
    });

    // Add preview image
    let img = document.createElement("img");
    img.src = url;
    img.style.width = "100%";
    img.style.height = "100%";
    img.style.objectFit = "cover";
    img.style.borderRadius = "10px";
    parent.prepend(img); // show preview above input (input remains hidden)
}



    /* Quantity change */
    let qty = 1;

    function changeQty(val) {
        qty = Math.max(1, qty + val);
        document.getElementById('qtyNumber').innerText = qty;
        document.getElementById('quantity').value = qty;
    }


    /* Enable submit */
    document.getElementById("product_name").addEventListener("input", function() {
        let btn = document.getElementById("submitBtn");
        btn.disabled = this.value.trim().length === 0;
        btn.classList.toggle("active", !btn.disabled);
    });

    document.getElementById('productForm').addEventListener('submit', function(e) {
        let btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>

@endsection