@extends('layout')

@section('header')
@include('components.header-inner', ['title' => 'Customise Product'])
@endsection

@section('content')

<style>
/* CONTAINER */
.customise-box {
    margin: 0 auto;
    padding: 15px;
}

/* LABEL */
.customise-box label {
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
}

/* INPUTS */
.custom-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    font-size: 14px;
}

/* READONLY GREY BOX */
.readonly-box {
    background: #dedede;
}

/* TOTAL */
.total-text {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
}

/* SUBMIT BUTTON */
.add-btn {
    width: 100%;
    margin-top: 25px;
    padding: 14px;
    font-size: 15px;
    border: none;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(180deg, #3ed66a 0%, #2fb751 100%);
}

/* MOBILE */
@media (max-width: 380px) {
    .custom-input { font-size: 13px; padding: 10px; }
    .add-btn { font-size: 14px; }
}
</style>


<div class="customise-box">

    {{-- PRODUCT NAME --}}
    <label>Product Name</label>
    <input type="text" class="custom-input" value="Window Border Wood" readonly>

    {{-- MATERIAL --}}
    <label>Material</label>
    <select id="material" class="custom-input">
        <option value="10">Neem Wood</option>
        <option value="12">Rose Wood</option>
        <option value="15">Teak Wood</option>
    </select>

    {{-- PER SQ --}}
    <label>Per Sq</label>
    <input type="text" id="perSq" class="custom-input readonly-box" value="₹ 10" readonly>

    {{-- ENTER SQ --}}
    <label>Enter Sq</label>
    <input type="number" id="enterSq" class="custom-input" value="10" min="1">

    {{-- TOTAL --}}
    <p class="total-text">Total : ₹ <span id="totalAmount">100</span></p>

    {{-- SUBMIT --}}
    <button class="add-btn">Add To Cart</button>

</div>


<script>
function updateTotal() {
    let price = parseFloat(document.getElementById("material").value);
    let sq = parseFloat(document.getElementById("enterSq").value) || 0;

    document.getElementById("perSq").value = "₹ " + price;
    document.getElementById("totalAmount").innerText = price * sq;
}

document.getElementById("material").addEventListener("change", updateTotal);
document.getElementById("enterSq").addEventListener("input", updateTotal);

updateTotal();
</script>

@endsection