@extends('User.layout')

@section('header')
@include('components.header-inner', ['title' => 'Customise Product',
'backUrl' => route('user.custom_products'),
'rightButton' => '
<a href="' . route('add_to_cart_custom_products') . '" 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" />
    </svg>
    <span class="cart-count-badge">' . ($cartCount ) . '</span>
</a>
'

])
@endsection

@section('content')

<style>

    .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;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .customise-box {
        margin: 0 auto;
        padding: 15px;
    }

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

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

    .readonly-box {
        background: #dedede;
    }

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

    .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%);
    }

    @media (max-width: 380px) {
        .custom-input {
            font-size: 13px;
            padding: 10px;
        }

        .add-btn {
            font-size: 14px;
        }
    }
</style>

<form method="POST" action="{{ route('add_to_custom_cart') }}" id="customForm">
    @csrf
    <div class="customise-box">

        <label>Product Name</label>
        <input type="text" class="custom-input" value="{{ $product->product_name }}" readonly>


        <input type="hidden" name="product_id" value="{{ $product->id }}">

        <label>Material</label>
        <select id="material" name="material" class="custom-input">
            @foreach($materials as $material)
            <option value="{{ $material->id }}" data-rate="{{ $material->rate }}">{{ $material->material }}</option>
            @endforeach
        </select>
        @error('material')
        <div class="text-danger">{{ $message }}</div>
        @enderror


        <label>Per Sq</label>
        <input type="text" name="per_sq_rate" id="per_sq_rate" class="custom-input readonly-box" value="{{ $product->per_sq_rate }}" readonly>

        <label>Enter Sq</label>
        <input type="number" id="Sq" name="sq" class="custom-input" placeholder="sq.feet" min="1" value="{{ old('sq') }}">
        @error('sq')
        <div class="text-danger">{{ $message }}</div>
        @enderror

        <p class="total-text">Total : ₹ <span id="totalAmount">{{ $product->per_sq_rate }}</span></p>

        <input type="hidden" name="total" id="totalInput">

        <button type="submit" id="submitBtn" class="add-btn">Add To Cart</button>

    </div>
</form>

<script>
    function updateTotal() {
        const materialSelect = document.getElementById("material");
        const selectedOption = materialSelect.options[materialSelect.selectedIndex];
        const rate = parseFloat(selectedOption.getAttribute("data-rate"));

        // Use product default per_sq_rate if selected rate is invalid
        const perSqRate = !isNaN(rate) && rate > 0 ? rate : parseFloat("{{ $product->per_sq_rate }}");

        const sq = parseFloat(document.getElementById("Sq").value) || 0;

        const total = perSqRate * sq;

        document.getElementById("per_sq_rate").value = "₹ " + perSqRate.toFixed(2);
        document.getElementById("totalAmount").innerText = total.toFixed(2);
        document.getElementById("totalInput").value = total.toFixed(2);
    }

    // Live update
    document.getElementById("material").addEventListener("change", updateTotal);
    document.getElementById("Sq").addEventListener("input", updateTotal);

    // Initial total
    updateTotal();
</script>

@endsection