@extends('User.layout')

@section('header')
@include('components.header-inner', ['title' => 'Add to cart',
'backUrl' => route('user.custom_products'),
'rightButton' => '
<a href="'.route('custom_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>
    /* 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>

<form id="checkoutForm" method="POST" action="{{ route('checkout_custom_product') }}" novalidate m>
    @csrf

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

        <label>Enter Name</label>
        <input type="text" name="customer_name" id="customer_name" class="input-box" placeholder="Enter Name">
        <label>Enter Number</label>
        <input type="text" name="customer_number" id="customer_number" class="input-box" placeholder="Enter Number">
        <div id="cartItems">
            @foreach($cartItems as $item)
            <div class="cart-item" id="cartItem-{{ $item->id }}" data-cart-id="{{ $item->id }}">
                <img src="{{ $item->product->image ? asset($item->product->image) : asset('/assets/web/img/product.png') }}">

                <div>
                    <div class="item-name">{{ $item->product->product_name }}</div>
                    <div class="item-material">{{ $item->product->material }}</div>
                    <div class="amount">Amount : ₹ {{ $item->amount }}</div>
                </div>

                <div class="item-right">
                    <div>Sq : {{ $item->sq }}</div>
                    <div class="remove-btn" onclick="confirmDelete({{ $item->id }})" type="button">Remove</div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Buttons --}}
        <button type="submit" class="action-btn bill-btn" id="checkoutBtn">Checkout</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 type="button" class="popup-btn sure-btn" id="popupConfirmBtn">Yes, Sure</button>
            </div>
        </div>
    </div>

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

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

        let selectedCartId = null;
        let deleteInProgress = false;

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

        // Hide popup
        function hidePopup() {
            document.getElementById('popupBox').style.display = 'none';
            selectedCartId = null;
        }

        // Remove via AJAX
        document.getElementById('popupConfirmBtn').addEventListener('click', function() {
            if (!selectedCartId || deleteInProgress) return;

            deleteInProgress = true;

            fetch('{{ route("remove_custom_cart") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        cart_id: selectedCartId
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        const elem = document.getElementById('cartItem-' + selectedCartId);
                        if (elem) elem.remove();
                    } else {
                        alert(data.message || 'Failed to remove item');
                    }
                    hidePopup();
                    deleteInProgress = false;
                })
                .catch(err => {
                    console.error(err);
                    alert('Something went wrong');
                    hidePopup();
                    deleteInProgress = false;
                });
        });
    </script>

    @endsection