@extends('layouts.yellow')
@section('content')
<style>
    .payment-container {
        --azul-primario: #2A4E6D;
        --azul-secundario: #3B6EA5;
        --azul-destacado: #4A90E2;
        --azul-suave: #E3F2FD;
        --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
    }

    .payment-header-card {
        background: var(--azul-suave);
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(42, 78, 109, 0.08);
    }

    .btn-payment-create {
        background: var(--degradado-azul);
        color: white !important;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .btn-payment-create:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(42, 78, 109, 0.2);
    }

    .payment-total {
        background: var(--azul-suave);
        padding: 1.25rem;
        border-radius: 12px;
        margin-top: 2rem;
        box-shadow: 0 4px 15px rgba(42, 78, 109, 0.08);
    }

    .payment-image {
        transition: all 0.3s ease;
        filter: drop-shadow(0 4px 8px rgba(42, 78, 109, 0.1));
    }

    .payment-image:hover {
        transform: rotate(-5deg) scale(1.05);
    }

    .livewire-table {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(42, 78, 109, 0.08);
    }

    .livewire-table thead {
        background: var(--degradado-azul);
        color: white;
    }

    @media (max-width: 768px) {
        .payment-header-card {
            border-radius: 12px;
        }
        
        .payment-image {
            max-width: 200px;
            margin: 0 auto !important;
        }
    }

    .payment-currencies-total {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .payment-currency-total {
        background: var(--degradado-azul);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 10px;
        flex: 1;
        min-width: 180px;
        max-width: 220px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 4px 8px rgba(42, 78, 109, 0.15);
    }

    .payment-currency-total:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(42, 78, 109, 0.25);
    }

    .currency-symbol {
        position: absolute;
        right: -20px;
        top: -20px;
        font-size: 6rem;
        opacity: 0.15;
        font-weight: 700;
    }

    .currency-info {
        position: relative;
        z-index: 1;
    }

    .currency-name {
        font-size: 0.9rem;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 0.5rem;
    }

    .currency-amount {
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    @media (max-width: 768px) {
        .payment-currencies-total {
            flex-direction: column;
        }
        
        .payment-currency-total {
            min-width: auto;
            width: 100%;
        }
        
        .currency-amount {
            font-size: 1.5rem;
        }
    }
</style>

<div class="container-fluid payment-container">
    <div class="row">
        <div class="col-12 p-3">
            <div class="card payment-header-card">
                <div class="card-header bg-transparent">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="mb-0">{{ __('view-payments.titleView') }}</h2>
                        <div>
                            <a href="{{URL::to('/admin/view-payments/export')}}" class="btn btn-primary me-2">
                                <i class="fas fa-file-excel me-1"></i>
                                {{__("view-payments.export")}}
                            </a>
                            <a href="{{URL::to('/admin/create-payment')}}" class="btn btn-payment-create">
                                <i class="bi bi-plus-circle me-2"></i>
                                {{__("view-payments.create")}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($payments->isNotEmpty())
    <div class="row mt-3">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="mb-3 fw-bold text-primary">{{ __('view-payments.totalsByCurrency') }}</h5>
                    <div class="payment-currencies-total">
                        @php
                            $groupedPayments = $payments->groupBy('currencies_id');
                        @endphp
                        @foreach($groupedPayments as $currencyId => $currencyPayments)
                            @php
                                $currency = App\Models\Currencies::find($currencyId);
                                if(!$currency) continue;
                                $total = $currencyPayments->sum('amount');
                            @endphp
                            <div class="payment-currency-total">
                                <div class="currency-info">
                                    <div class="currency-name">{{ $currency->title }}</div>
                                    <div class="currency-amount">{{ number_format($total, 2) }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <div class="row mt-4">
        <div class="col-12">
            <div class="container-fluid">
                <div class="row mb-4">
                    <div class="col-12 text-center">
                        <img class="payment-image w-40" src="{{asset('img/money2.png')}}" alt="Payments illustration">
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="livewire-table p-5">
                            <livewire:payments-table-view />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div style="height:5vh"></div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Animación para la imagen
    gsap.from('.payment-image', {
        duration: 0.8,
        rotation: 15,
        opacity: 0,
        ease: 'back.out(1.7)'
    });

    // Animación para el total
    gsap.from('.payment-total', {
        duration: 0.6,
        y: 20,
        opacity: 0,
        delay: 0.3,
        ease: 'power2.out'
    });
});
</script>
@endsection