@extends('layout')

@section('header')
@include('components.header-inner', [
    'title' => 'Add Product',
    '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;">
                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">

    {{-- PRODUCT NAME --}}
    <label>Product Name</label>
    <input type="text" id="productName" class="input-box" placeholder="Enter Product Name">

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

    {{-- DESCRIPTION --}}
    <label class="mt-3">Description</label>
    <textarea class="input-box" rows="2" placeholder="Enter Description"></textarea>

    {{-- 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" 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>
    </div>

    {{-- SEARCH KEYWORD --}}
    <label class="mt-3">Search Name</label>
    <input type="text" class="input-box" placeholder="Enter Keywords">

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

</div>

<script>

let uploadCount = 3;

/* 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" 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;

    parent.innerHTML = `
        <img src="${url}" style="width:100%; height:100%; object-fit:cover; border-radius:10px;">
    `;
}

/* Quantity change */
let qty = 1;
function changeQty(val) {
    qty = Math.max(1, qty + val);
    document.getElementById('qtyNumber').innerText = qty;
}

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

</script>

@endsection