<div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-5">
    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50 font-medium">
        <h4>Order Summary</h4>
    </div>
    <div class="p-6">
        <div class="items-list mb-5">
            @foreach(Cart::getContent() as $item)
                <div class="flex items-center justify-between mb-4 pb-4 border-b border-gray-100">
                    <div class="flex items-center gap-2">
                        <span class="item-name font-medium text-gray-800">{{ $item->name }}</span>
                        <span class="item-quantity text-gray-500">× {{ $item->quantity }}</span>
                    </div>
                    <span class="item-price font-medium text-gray-800">${{ number_format($item->price * $item->quantity, 2) }}</span>
                </div>
            @endforeach
        </div>

        <div class="summary-totals border-t-2 border-gray-200 pt-4">
            <div class="flex justify-between mb-2 text-gray-600">
                <span>Subtotal</span>
                <span id="subtotal" data-value="{{ Cart::getSubTotal() }}">${{ number_format(Cart::getSubTotal(), 2) }}</span>
            </div>
            <div class="flex justify-between mb-2 text-gray-600">
                <span>Shipping</span>
                <span id="shipping-cost">$0.00</span>
            </div>
            <div class="flex justify-between mb-2 text-gray-600">
                <span>Tax</span>
                <span id="tax" data-value="{{ Cart::getSubTotal() * 0.08 }}">${{ number_format(Cart::getSubTotal() * 0.08, 2) }}</span>
            </div>
            <div class="flex justify-between mt-4 pt-4 border-t-2 border-gray-200 text-lg font-bold text-gray-800">
                <span>Total</span>
                <span id="order-total">${{ number_format(Cart::getSubTotal() + (Cart::getSubTotal() * 0.08), 2) }}</span>
            </div>
        </div>

        <div id="validation-messages" class="mt-3"></div>
        
        <button type="submit" class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors bg-green-600 hover:bg-green-700 text-white w-full mt-3" id="checkout-button" disabled>
            <span class="button-text">Complete Order</span>
            <div class="button-loader hidden">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                Processing...
            </div>
        </button>
    </div>
</div>
<style>
    .order-summary-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.order-summary-card .card-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.order-summary-card .card-header h4 {
    margin: 0;
    color: #333;
}

.order-summary-card .card-body {
    padding: 20px;
}

.items-list {
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
}

.item-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-name {
    font-weight: 500;
}

.item-quantity {
    color: #666;
}

.item-price {
    font-weight: 500;
    color: #333;
}

.summary-totals {
    border-top: 2px solid #eee;
    padding-top: 15px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #666;
}

.summary-row.total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #eee;
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
}



.validation-error {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 5px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .validation-error i {
        font-size: 14px;
    }

    #validation-messages {
        padding: 10px;
        border-radius: 5px;
        display: none;
    }

    #validation-messages.show {
        display: block;
        background-color: #fff3f3;
        border: 1px solid #ffcdd2;
    }

    #checkout-button {
        position: relative;
        transition: all 0.3s ease;
    }

    #checkout-button:disabled {
        background-color: #6c757d;
        border-color: #6c757d;
        cursor: not-allowed;
    }

    .button-loader {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .form-control.is-invalid {
        border-color: #dc3545;
        padding-right: calc(1.5em + 0.75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    .form-control.is-valid {
        border-color: #198754;
        padding-right: calc(1.5em + 0.75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }</style>
