@extends('web.home.layout.master')

@section('content')
<div class="unsuccess-page-container">
    <div class="unsuccess-card animate__animated animate__zoomIn">
        <div class="unsuccess-icon-wrapper">
            <i class="fas fa-times-circle"></i>
        </div>
        
        <h2 class="unsuccess-title">Payment Could Not Be Processed</h2>
        <p class="unsuccess-message">
            We're sorry, but your transaction was unsuccessful. This usually happens due to incorrect payment details, insufficient funds, or a temporary connection issue.
        </p>

        <div class="unsuccess-actions">
            <a href="{{ route('american.plastic.web.view.user.cart') }}" class="btn btn-primary btn-lg unsuccess-btn">
                <i class="fas fa-shopping-cart me-2"></i> Return to Cart
            </a>
            <a href="{{ route('american.plastic.web.contact.us') }}" class="btn btn-outline-secondary btn-lg unsuccess-btn ml-md-2">
                <i class="fas fa-headset me-2"></i> Contact Support
            </a>
        </div>

        <div class="unsuccess-footer">
            <p>If you've been charged, please don't worry. Your funds will be automatically reversed by your bank within 3-5 business days.</p>
        </div>
    </div>
</div>

<style>
    .unsuccess-page-container {
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        background: #fbfbfb;
    }
    .unsuccess-card {
        background: #ffffff;
        max-width: 600px;
        width: 100%;
        padding: 50px 40px;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.05);
        text-align: center;
    }
    .unsuccess-icon-wrapper {
        font-size: 80px;
        color: #e74c3c;
        margin-bottom: 30px;
        background: #fdf2f2;
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    .unsuccess-title {
        font-size: 1.8rem;
        font-weight: 800;
        color: #2c3e50;
        margin-bottom: 20px;
    }
    .unsuccess-message {
        font-size: 1.05rem;
        color: #7f8c8d;
        line-height: 1.6;
        margin-bottom: 40px;
    }
    .unsuccess-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        margin-bottom: 35px;
    }
    .unsuccess-btn {
        border-radius: 10px;
        padding: 12px 30px !important;
        font-weight: 600;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .unsuccess-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .unsuccess-footer {
        border-top: 1px solid #f1f1f1;
        padding-top: 25px;
    }
    .unsuccess-footer p {
        font-size: 0.85rem;
        color: #95a5a6;
        margin: 0;
    }

    @media (max-width: 576px) {
        .unsuccess-card {
            padding: 30px 20px;
        }
        .unsuccess-title {
            font-size: 1.5rem;
        }
        .unsuccess-actions .unsuccess-btn {
            width: 100%;
            margin-left: 0 !important;
        }
    }
</style>
@endsection