@extends('theme::layouts.app', ['alias' => 'Account'])
@section('theme::title', __('reddington.seo.donations-silk'))
@section('theme::sidebar')
    @include('theme::frontend.account.sidebar', ['account_alias' => 'Donate'])
@endsection

@section('theme::content')
<div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
    <div class="container">
        <div class="donation-header mb-5">
            <h1 class="display-5 mb-3">{{ __('home.donations.title') }}</h1>
            <p class="lead">{{ __('home.donations.text') }}</p>
        </div>

        @if ($error = Session::get('error'))
        <div class="alert alert-glass alert-dismissible fade show" role="alert">
            {{ $error }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        <div class="row g-4 donation-grid">
            @forelse($donationMethods as $method)
            <div class="col-md-6 col-lg-4">
                <div class="donation-card">
                    <div class="card-inner">
                        <div class="card-image">
                            <img src="{{ asset('/image/donations/' . $method->image) }}" 
                                 alt="{{ $method->name }}"
                                 class="img-fluid">
                        </div>
                        <div class="card-overlay">
                            <div class="card-content">
                                <h3 class="card-title">{{ $method->name }}</h3>
                                <p class="card-description">Secure payment processing</p>
                                <a href="{{ route('donations-method-index', ['method' => $method->method]) }}" 
                                   class="btn btn-donate">
                                   <span class="btn-text">Select Method</span>
                                   <span class="btn-icon">
                                       <svg viewBox="0 0 16 8">
                                           <path d="M15.3536 4.35355c.1952-.19526.1952-.51184 0-.7071L12.1716.464466c-.1953-.195262-.5119-.195262-.7071 0-.1953.195262-.1953.511845 0 .707104L14.2929 4l-2.8284 2.82843c-.1953.19526-.1953.51184 0 .7071.1952.19527.5118.19527.7071 0l3.182-3.18198zM0 4.5h15v-1H0v1z"/>
                                       </svg>
                                   </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12">
                <div class="no-methods alert-glass text-center py-5">
                    {{ __('home.donations.no_methods') }}
                </div>
            </div>
            @endforelse
        </div>
    </div>
</div>

<style>
:root {
    --donation-primary: #C9553D;
    --donation-glass: rgba(255, 255, 255, 0.05);
    --donation-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.donation-header {
    text-align: center;
    padding: 2rem 0;
}

.donation-grid {
    position: relative;
    z-index: 1;
}

.donation-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.donation-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(201, 85, 61, 0.1) 50%, 
        transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.donation-card:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(-5deg);
    box-shadow: 0 25px 40px rgba(201, 85, 61, 0.2);
}

.donation-card:hover::before {
    opacity: 1;
}

.card-inner {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.card-image {
    position: relative;
    overflow: hidden;
    height: 250px;
    display: grid;
    place-items: center;
    background: var(--donation-glass);
    backdrop-filter: blur(10px);
}

.card-image img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.donation-card:hover .card-image img {
    transform: scale(1.1) rotate(5deg);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: grid;
    place-items: center;
}

.donation-card:hover .card-overlay {
    opacity: 1;
}

.card-content {
    text-align: center;
    padding: 2rem;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.donation-card:hover .card-content {
    transform: translateY(0);
}

.card-title {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.btn-donate {
    background: var(--donation-primary);
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.btn-donate::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 20%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 80%);
    animation: buttonShine 3s infinite;
    opacity: 0.4;
}

.btn-donate:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(201, 85, 61, 0.4);
}

.btn-donate svg {
    width: 16px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.btn-donate:hover svg {
    transform: translateX(5px);
}

@keyframes buttonShine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(200%) rotate(45deg); }
}

.alert-glass {
    background: var(--donation-glass);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    color: white;
}

@media (max-width: 768px) {
    .donation-card {
        margin-bottom: 2rem;
    }
    
    .card-image {
        height: 200px;
    }
    
    .card-title {
        font-size: 1.2rem;
    }
}
</style>
@endsection