@extends('User.layout')

@section('header')
@include('components.header-inner', ['title' => 'Add to cart',
'rightButton' => '
<a href="'.route('product_sales_history').'" class="link position-relative">
    <button class="btn btn-sm" style="border-radius: 6px; padding:4px 10px; color:#fff;font-size:12px;background: linear-gradient(180deg, rgba(51,176,44,0.88) 0%, #33B02C 100%);">
       View History
    </button>
</a>
'
])
@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">
    <form id="checkoutForm" method="POST" action="{{ route('checkout_product_form') }}">
        @csrf

        <label>Enter Name</label>
        <input type="text" name="customer_name" class="input-box" placeholder="Customer name"
            value="{{ old('customer_name') }}">

            <label>Enter Number</label>
        <input type="tel" name="customer_number" class="input-box" placeholder="Customer number"
            value="{{ old('customer_number') }}">

        @foreach($cartItems as $item)
        <div class="cart-item">
            <img src="{{ asset($item->product->images[0] ?? 'assets/web/img/product.png') }}"
                alt="Product">

            <div class="item-info">
                <div class="item-name">{{ $item->product->product_name ?? 'Unknown Product' }}</div>
                <div class="item-code">PC : {{ $item->product->product_id ?? 'N/A' }}</div>
                <div class="amount">Amount : ₹ {{ number_format($item->price * $item->quantity) }}</div>
            </div>



            <div class="item-right">
                <div class="qty-control">
                    <button class="qty-btn" type="button" onclick="updateQuantity({{ $item->id }}, -1, this)">-</button>
                    <span class="qty-val">{{ $item->quantity }}</span>
                    <button class="qty-btn" type="button" onclick="updateQuantity({{ $item->id }}, 1, this)">+</button>
                </div>



                <div class="remove-btn" onclick="showPopup({{ $item->id }})">Remove</div>
            </div>
        </div>
        @endforeach

        <br>

        <button class="action-btn bill-btn" id="submit_btn">
            Checkout<i class="fa fa-file-text-o"></i>
        </button>
    </form>



    <!-- <a class="preview-link">Preview</a> -->

</div>
<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="confirmDelete()">Yes, Sure</button>
        </div>
    </div>
</div>

<script>
    const csrfToken = '{{ csrf_token() }}';

    function updateQuantity(cartId, change, btnElement) {
        const qtySpan = btnElement.parentElement.querySelector('.qty-val');
        let currentQty = parseInt(qtySpan.innerText);
        let newQty = currentQty + change;

        if (newQty < 1) newQty = 1; 
        qtySpan.innerText = newQty;

        fetch('{{ route("update_product_quantity") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    cart_id: cartId,
                    quantity: newQty
                })
            })
            .then(response => response.json())
            .then(data => {
                if (!data.success) {
                    alert(data.message || 'Failed to update quantity.');
                    qtySpan.innerText = currentQty; // revert UI
                }
            })
            .catch(() => {
                alert('Something went wrong.');
                qtySpan.innerText = currentQty; // revert UI
            });
    }

    // Remove Item Logic (AJAX)
    let selectedCartId = null;

    function showPopup(cartId) {
        selectedCartId = cartId;
        document.getElementById("popupBox").style.display = "flex";
    }

    function hidePopup() {
        document.getElementById("popupBox").style.display = "none";
    }

    function confirmDelete() {
        if (!selectedCartId) return;

        fetch('{{ route("remove_product_from_cart") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    cart_id: selectedCartId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Remove the cart item from DOM
                    const cartItem = document.querySelector(`.cart-item[data-id="${selectedCartId}"]`);
                    if (cartItem) cartItem.remove();
                } else {
                    alert(data.message || 'Failed to remove item.');
                }
                hidePopup();
            })
            .catch(() => {
                alert('Something went wrong.');
                hidePopup();
            });
    }

    // Attach cart-item data-id for JS
    document.querySelectorAll('.cart-item').forEach(item => {
        const cartId = item.querySelector('.qty-btn')?.getAttribute('onclick')?.match(/\d+/)[0];
        if (cartId) item.setAttribute('data-id', cartId);
    });

    // Checkout button
    const submitBtn = document.getElementById('submit_btn');
    submitBtn.addEventListener('click', function(e) {
        e.preventDefault();
        const btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('checkoutForm').submit();
    });
</script>


@endsection