@extends('User.layout')


@section('header')
@include('components.header-inner', [
'title' => 'Seller Orders',
'cartCount' => $cartCount,

'rightButton' =>
'
<a href="' .
            route('user.cart') .
            '" class="link position-relative">

    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g filter="url(#filter0_d_1795_14299)">
            <rect x="10" y="6" width="44" height="44" rx="10" fill="#FDFDFD" />
        </g>
        <path d="M22 18H23.74C24.82 18 25.67 18.93 25.58 20L24.75 29.96C24.61 31.59 25.9 32.99 27.54 32.99H38.19C39.63 32.99 40.89 31.81 41 30.38L41.54 22.88C41.66 21.22 40.4 19.87 38.73 19.87H25.82" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M36.25 38C36.9404 38 37.5 37.4404 37.5 36.75C37.5 36.0596 36.9404 35.5 36.25 35.5C35.5596 35.5 35 36.0596 35 36.75C35 37.4404 35.5596 38 36.25 38Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M28.25 38C28.9404 38 29.5 37.4404 29.5 36.75C29.5 36.0596 28.9404 35.5 28.25 35.5C27.5596 35.5 27 36.0596 27 36.75C27 37.4404 27.5596 38 28.25 38Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M29 24H41" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
        <defs>
            <filter id="filter0_d_1795_14299" x="0" y="0" width="64" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1795_14299" />
                <feOffset dy="4" />
                <feGaussianBlur stdDeviation="6" />
                <feComposite in2="hardAlpha" operator="out" />
                <feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.690196 0 0 0 0 0.176471 0 0 0 0.1 0" />
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1795_14299" />
                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1795_14299" result="shape" />
            </filter>
        </defs>
    </svg>

    <!-- Cart Count Badge --><span class="cart-count-badge"> ' . ($cartCount ?? 0) . ' </span>

</a>',
])
@endsection
<style>
    /* FORCE visible outline for inputs */
    .measure-box {
        border: 1.5px solid #e6e6e6 !important;
        border-radius: 10px !important;
        background-color: #fff !important;
        box-shadow: none !important;
        text-align: center;
    }

    /* Select dropdown border */
    #wood {
        border: 1.5px solid #e6e6e6 !important;
        border-radius: 10px !important;
        background-color: #fff !important;
        box-shadow: none !important;
    }

    /* Remove BLACK shadow on focus */
    .measure-box:focus,
    #wood:focus {
        border-color: #32CD32 !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(50, 205, 50, 0.2) !important;
    }

    /* Remove mobile/WebView tap highlight */
    select,
    input {
        -webkit-tap-highlight-color: transparent;
    }

    .cart-count-badge {
        position: absolute;
        top: 10px;
        right: 30px;
        background: linear-gradient(180deg, rgba(51, 176, 44, 0.7) 0%, #33B02C 100%) !important;
        color: #fff;
        font-size: 8px;
        padding: 2px 6px;
        border-radius: 50%;
        font-weight: bold;
        width: 12.413330078125;
        height: 14;
        angle: 0 deg;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .measure-box {
        height: 50px;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        opacity: 1;
        border-radius: 0px;
        border: 1px solid #1F1F3012;
        background: #F9F9F9;
        padding: 0;
    }

    .form-select {
        height: 50px;
        border-radius: 10px;
        border: 1px solid #ced4da;
        font-size: 16px;
    }

    .card {
        border-radius: 15px;
    }

    .btn-success {
        background: linear-gradient(180deg, rgba(51, 176, 44, 0.7) 0%, #33B02C 100%) !important;
        border-radius: 10px;
        box-shadow: 0px 2px 6px 0px rgba(51, 176, 44, 0.3);
        border: none !important;
        color: #fff !important;
    }

    #resultBox .btn-success {
        height: 50px;
    }

    small {
        display: block;
        color: #777;
        font-size: 12px;
        margin-top: 2px;
    }

    #resultBox .btnminus,
    .btnplus {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        font-weight: bold;
        line-height: 1;
        padding: 0;
        flex-shrink: 0;
    }

    #resultBox .btnminus {
        background: #E8E8E8;
        border: 1px solid #BEBEBE;
    }

    #resultBox .btnplus {
        background: #33B02C;
        border: 1px solid #33B02C;
        color: white;
    }

    #rackNoBox {
        background-color: #F9F9F9;
        padding: 2px 6px;
        border-radius: 5px;
    }

    #countValue {
        min-width: 20px;
        text-align: center;
    }
</style>


@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container mt-5 mb-5 px-3">
    <div class="row g-0 text-center">
        <div class="col-4">
            <input type="text" step="0.1" class="form-control measure-box" id="length" placeholder="0.0">
            <small>Length</small>
        </div>
        <div class="col-4">
            <input type="text" step="0.1" class="form-control measure-box" id="width" placeholder="0.0">
            <small>Width</small>
        </div>
        <div class="col-4">
            <input type="text" step="0.1" class="form-control measure-box" id="thickness" placeholder="0.0">
            <small>Thickness</small>
        </div>
    </div>
    <div class="text-center mt-4">
        <button type="button" class="btn btn-success px-4" id="searchBtn" style="height: 50px;">Search</button>
    </div>

    <label class="mt-4 mb-1">Select Wood</label>
    <select id="wood" class="form-control">
        <option value="">Select</option>
    </select>

    <form id="addToCartForm" action="{{ route('user.add_to_cart') }}" method="POST">
        @csrf
        <input type="hidden" name="stock_id" id="formStockId" value="">
        <input type="hidden" name="quantity" id="formQuantity" value="1">

        <div id="resultBox" class="mt-4 d-none">
            <div class="card shadow-sm p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <small><b>Available:</b> <b id="availableQty">120</b></small>
                    <div id="rackNoBox">
                        <small class="mb-0"><b>Rack No:</b> <b id="rackNo">21</b></small>
                    </div>
                </div>
                <hr>
                <div class="d-flex align-items-center justify-content-between">
                    <div class="mt-2">
                        <p class="mb-1 fw-bold" id="woodName"></p>
                        <p class="mb-1" id="woodSize"></p>
                    </div>
                    <div class="d-flex align-items-center gap-3 mt-2 justify-content-end">
                        <button type="button" class="btn btnminus" id="minusBtn">-</button>
                        <span id="countValue" class="fw-bold">1</span>
                        <button type="button" class="btn btnplus" id="plusBtn">+</button>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-success w-100 mt-4 py-2">Add To Cart</button>
        </div>
    </form>


</div>

<script>
    let countValue = document.getElementById("countValue");
    let plusBtn = document.getElementById("plusBtn");
    let minusBtn = document.getElementById("minusBtn");

    let searchBtn = document.getElementById("searchBtn");
    let woodSelect = document.getElementById("wood");
    let resultBox = document.getElementById("resultBox");
    let addToCartForm = document.getElementById("addToCartForm");
    let quantityInput = document.getElementById("formQuantity");

    // Helper to show alert on errors
    function showError(msg) {
        alert(msg || "Something went wrong. Please try again.");
    }

    // Update quantity hidden input
    function updateQuantity() {
        quantityInput.value = countValue.innerText;
    }

    // Search button
    searchBtn.addEventListener("click", function() {
        const btn = this;
        if (btn.disabled) return;

        let length = document.getElementById("length").value;
        let width = document.getElementById("width").value;
        let thickness = document.getElementById("thickness").value;

        if (!length || !width || !thickness) {
            showError("Please enter all dimensions!");
            return;
        }

        btn.disabled = true;
        btn.innerText = "Searching...";

        fetch('{{ route("search_wood_list") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    length: parseFloat(length),
                    width: parseFloat(width),
                    thickness: parseFloat(thickness)
                })
            })
            .then(res => res.json())
            .then(data => {
                woodSelect.innerHTML = '<option value="">--Select--</option>';
                if (data.status && data.data.wood_names.length > 0) {
                    data.data.wood_names.forEach(name => {
                        woodSelect.innerHTML += `<option value="${name}">${name}</option>`;
                    });
                } else {
                    woodSelect.innerHTML = '<option value="">No wood available</option>';
                    resultBox.classList.add("d-none");
                }
            })
            .catch(err => {
                console.error(err);
                showError();
            })
            .finally(() => {
                btn.disabled = false;
                btn.innerText = "Search";
            });
    });

    // Wood selection → get rack
    woodSelect.addEventListener("change", function() {
        let wood_name = this.value;
        if (!wood_name) {
            resultBox.classList.add("d-none");
            return;
        }

        let length = document.getElementById("length").value;
        let width = document.getElementById("width").value;
        let thickness = document.getElementById("thickness").value;

        let formData = new FormData();
        formData.append('length', length);
        formData.append('width', width);
        formData.append('thickness', thickness);
        formData.append('wood_name', wood_name);

        fetch('{{ route("get_rack_by_wood") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.status && data.data.wood_details.length > 0) {
                    let d = data.data.wood_details[0];
                    document.getElementById("woodName").innerText = d.wood_name;
                    document.getElementById("woodSize").innerText = `${d.length} x ${d.width} x ${d.thickness}`;
                    document.getElementById("availableQty").innerText = d.quantity;
                    document.getElementById("rackNo").innerText = d.rack_number;
                    countValue.innerText = 1;
                    resultBox.classList.remove("d-none");

                    // ✅ Set the stock_id for form submission
                    document.getElementById("formStockId").value = d.id;
                } else {
                    resultBox.classList.add("d-none");
                    document.getElementById("formStockId").value = ''; // clear if no stock
                }
            })
            .catch(err => {
                console.error(err);
                showError();
            });
    });


    // Plus / Minus buttons
    plusBtn.addEventListener("click", () => {
        let value = parseInt(countValue.innerText);
        let availableQty = parseInt(document.getElementById("availableQty").innerText);
        if (value < availableQty) countValue.innerText = value + 1;
        updateQuantity();
    });

    minusBtn.addEventListener("click", () => {
        let value = parseInt(countValue.innerText);
        if (value > 1) countValue.innerText = value - 1;
        updateQuantity();
    });

    // Prevent double submission
    addToCartForm.addEventListener('submit', function(e) {
        const btn = this.querySelector('button[type="submit"]');

        if (btn.disabled) {
            e.preventDefault();
            return;
        }

        updateQuantity();
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>



@endsection