@extends('layout')

@section('header')
@include('components.header-inner', ['title' => 'Add to cart'])
@endsection

@section('content')

<style>
    .cart-page {
        padding: 15px;
        font-family: sans-serif; /* basic font reset */
    }

    /* Input */
    .input-box {
        width: 100%;
        padding: 12px;
        border-radius: 10px;
        background: #f8f8f8;
        border: 1px solid #e5e5e5;
        font-size: 14px;
        margin-bottom: 20px;
        margin-top: 5px;
        box-sizing: border-box; /* Ensures padding doesn't affect width */
    }

    label {
        font-weight: 600;
        font-size: 16px;
        color: #222;
    }

    /* Cart Item */
    .cart-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 12px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        border: 1px solid #f0f0f0;
        margin-bottom: 12px;
    }

    .cart-item img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        background: #eee; /* placeholder color */
    }

    /* Product Info */
    .item-info {
        flex: 1;
        margin-left: 12px;
    }

    .item-name {
        font-size: 14px;
        font-weight: 700;
        color: #222;
    }

    .item-code {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
    }

    .amount {
        font-size: 13px;
        font-weight: 600;
        margin-top: 6px;
        color: #333;
    }

    /* Quantity Control */
    .item-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .qty-control {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Updated Green Buttons */
    .qty-btn {
        background: #4CAF50; /* Green matches image */
        color: white;
        border: none;
        width: 24px;
        height: 24px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 0;
        padding-bottom: 3px; /* visual adjustment for text alignment */
    }

    .qty-btn:hover {
        background: #43a047;
    }

    .qty-val {
        font-weight: 600;
        font-size: 16px;
        min-width: 15px;
        text-align: center;
    }

    .remove-btn {
        font-size: 12px;
        color: #ff4d4d; /* Red color */
        cursor: pointer;
        margin-top: 8px;
        text-decoration: underline;
        font-weight: 500;
    }

    /* Action Buttons */
    .action-btn {
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 10px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 12px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .bill-btn, .receipt-btn {
        background: linear-gradient(180deg, #5dc656 0%, #4CAF50 100%);
        box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
    }

    .preview-link {
        text-align: right;
        display: block;
        font-size: 13px;
        color: #4CAF50;
        font-weight: 600;
        cursor: pointer;
        margin-top: 5px;
    }

    /* Popup Styles */
    .popup-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        justify-content: center;
        align-items: center;
        z-index: 999;
    }
    
    .popup-box {
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        width: 80%;
        max-width: 300px;
        text-align: center;
    }

    .popup-title { font-weight: bold; margin-bottom: 10px; font-size: 18px; }
    .popup-text { margin-bottom: 20px; color: #666; font-size: 14px; }
    
    .popup-btn {
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
.cancel-btn {
    background: #e8fff0;
    color: #28b05c;
    border: 1px solid #8ee3a1;
}

.sure-btn {
    background: #ff6b6b;
    color: #fff;
}

    /* Responsive */
    @media (max-width: 480px) {
        .cart-item img { width: 50px; height: 50px; }
    }
</style>

<div class="cart-page mt-4">

    {{-- Enter Name --}}
    <label>Enter Name</label>
    <input type="text" class="input-box" placeholder="Jane Cooper" value="Jane Cooper">

    {{-- Cart Items --}}
    @foreach(range(1,3) as $item)
    <div class="cart-item">
        {{-- Ensure image path is correct --}}
        <img src="{{ asset('/assets/web/img/product.png') }}" alt="Product">
        
        <div class="item-info">
            <div class="item-name">Single Seater Sofa Chair</div>
            <div class="item-code">PC : #1234567</div>
            <div class="amount">Amount : ₹ 30,000</div>
        </div>

        <div class="item-right">
            <div class="qty-control">
                {{-- MINUS BUTTON --}}
                <button class="qty-btn" type="button" onclick="updateQuantity(this, -1)">-</button>
                
                {{-- QUANTITY VALUE --}}
                <span class="qty-val">1</span>
                
                {{-- PLUS BUTTON --}}
                <button class="qty-btn" type="button" onclick="updateQuantity(this, 1)">+</button>
            </div>
            <div class="remove-btn" onclick="showPopup()">Remove</div>
        </div>
    </div>
    @endforeach

    <br>

    {{-- Buttons --}}
    <button class="action-btn bill-btn">
        Customer Bill <i class="fa fa-file-text-o"></i> 🧾
    </button>
    
    <button class="action-btn receipt-btn">
        Order Receipt <i class="fa fa-print"></i> 🧾
    </button>

    {{-- Preview --}}
    <a class="preview-link">Preview</a>

</div>

{{-- POPUP --}}
<div class="popup-overlay" id="popupBox">
    <div class="popup-box">
        <div class="popup-title">Are you Sure !!</div>
        <div class="popup-text">Are you Confirm to Remove ?</div>

        <div style="display:flex; justify-content:space-between;">
            <button class="popup-btn cancel-btn" onclick="hidePopup()">Cancel</button>
            <button class="popup-btn sure-btn" onclick="hidePopup()">Yes, Sure</button>
        </div>
    </div>
</div>

<script>
    // Quantity Logic
    function updateQuantity(element, change) {
        // Find the parent container (.qty-control) of the clicked button
        const controlDiv = element.parentElement;
        
        // Find the span with class .qty-val inside that specific container
        const qtySpan = controlDiv.querySelector('.qty-val');
        
        // Get current number
        let currentQty = parseInt(qtySpan.innerText);
        
        // Calculate new number
        let newQty = currentQty + change;
        
        // Prevent going below 1
        if (newQty < 1) {
            newQty = 1;
        }
        
        // Update the text
        qtySpan.innerText = newQty;
    }

    // Popup Logic
    function showPopup() {
        document.getElementById("popupBox").style.display = "flex";
    }
    function hidePopup() {
        document.getElementById("popupBox").style.display = "none";
    }
</script>

@endsection