@extends('layout')

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

@section('content')

<style>
/* GENERAL PAGE */
.cart-page {
    margin: 0 auto;
    padding: 15px;
}

/* Input */
.input-box {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    margin-bottom: 15px;
}

/* Item Card */
.cart-item {
    display: flex;
    gap: 12px;
    background: white;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 3px 10px #00000010;
    margin-bottom: 12px;
    align-items: center;
}

/* Product Image */
.cart-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Product Info */
.item-name {
    font-size: 15px;
    font-weight: 700;
}

.item-material {
    font-size: 13px;
    color: #777;
}

.amount {
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
}

/* Right Side */
.item-right {
    text-align: right;
    flex-grow: 1;
}

.item-right div {
    font-size: 13px;
}

.remove-btn {
    font-size: 13px;
    color: #d9534f;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
}

/* Buttons */
.action-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 15px;
    margin-bottom: 12px;
    cursor: pointer;
}

.bill-btn, .receipt-btn {
    background: linear-gradient(180deg, rgba(51, 176, 44, 0.7) 0%, #33B02C 100%) !important;
}

/* Preview */
.preview-link {
    text-align: right;
    display: block;
    font-size: 14px;
    color: #8a8a8a;
    margin-top: 5px;
}

/* POPUP OVERLAY */
.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #00000070;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* POPUP BOX */
.popup-box {
    background: #fff;
    width: 90%;
    max-width: 350px;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.popup-title {
    font-size: 18px;
    font-weight: 700;
}

.popup-text {
    font-size: 14px;
    color: #777;
    margin: 10px 0 20px;
}

/* Popup Buttons */
.popup-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    width: 48%;
}

.cancel-btn {
    background: #e8fff0;
    color: #28b05c;
    border: 1px solid #8ee3a1;
}

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

/* ----------------------- RESPONSIVE ----------------------- */
@media (max-width: 480px) {

    .cart-page {
        padding: 10px;
    }

    .cart-item {
        padding: 10px;
    }

    .cart-item img {
        width: 50px;
        height: 50px;
    }

    .item-name {
        font-size: 14px;
    }

    .item-material {
        font-size: 12px;
    }

    .amount {
        font-size: 13px;
    }

    .action-btn {
        padding: 12px;
        font-size: 14px;
    }

    .popup-box {
        width: 90%;
        padding: 18px;
    }
}
</style>


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

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

    {{-- Cart Item 1 --}}
    <div class="cart-item">
        <img src="{{ asset('/assets/web/img/product.png') }}">
        
        <div>
            <div class="item-name">Window Border Wood</div>
            <div class="item-material">Neem Wood</div>
            <div class="amount">Amount : ₹ 88</div>
        </div>

        <div class="item-right">
            <div>Sq : 10</div>
            <div class="remove-btn" onclick="showPopup()">Remove</div>
        </div>
    </div>

    {{-- Cart Item 2 --}}
    <div class="cart-item">
        <img src="{{ asset('/assets/web/img/product.png') }}">
        
        <div>
            <div class="item-name">Window Border Wood</div>
            <div class="item-material">Neem Wood</div>
            <div class="amount">Amount : ₹ 88</div>
        </div>

        <div class="item-right">
            <div>Sq : 10</div>
            <div class="remove-btn" onclick="showPopup()">Remove</div>
        </div>
    </div>

    {{-- Cart Item 3 --}}
    <div class="cart-item">
        <img src="{{ asset('/assets/web/img/product.png') }}">
        
        <div>
            <div class="item-name">Window Border Wood</div>
            <div class="item-material">Neem Wood</div>
            <div class="amount">Amount : ₹ 88</div>
        </div>

        <div class="item-right">
            <div>Sq : 10</div>
            <div class="remove-btn" onclick="showPopup()">Remove</div>
        </div>
    </div>


    {{-- Buttons --}}
    <button class="action-btn bill-btn">Customer Bill 🧾</button>
    <button class="action-btn receipt-btn">Order Receipt 🧾</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>
function showPopup() {
    document.getElementById("popupBox").style.display = "flex";
}
function hidePopup() {
    document.getElementById("popupBox").style.display = "none";
}
</script>

@endsection