@extends('layouts.app')

@section('title', 'Notificaciones')

@section('content')
<div class="mb-3">
    <a href="{{ route('prestamos.index') }}" class="btn btn-sm btn-outline-light">
        <i class="bi bi-arrow-left"></i> Volver
    </a>
</div>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="section-title">
        <i class="bi bi-bell-fill"></i> Notificaciones
    </h1>
    <div>
        <form action="{{ route('notificaciones.marcarTodasLeidas') }}" method="POST" class="d-inline">
            @csrf
            <button type="submit" class="btn btn-sm btn-outline-light me-2">
                <i class="bi bi-check-all"></i> Marcar todas como leídas
            </button>
        </form>
        <form action="{{ route('notificaciones.limpiarAntiguas') }}" method="POST" class="d-inline">
            @csrf
            <button type="submit" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-trash"></i> Limpiar antiguas
            </button>
        </form>
    </div>
</div>

@if($notificaciones->isEmpty())
    <div class="card-custom">
        <div class="card-body text-center py-5">
            <i class="bi bi-bell-slash" style="font-size: 4rem; color: #cbd5e1;"></i>
            <h3 class="mt-3 text-muted">No tienes notificaciones</h3>
            <p class="text-muted">Cuando tengas nuevas notificaciones aparecerán aquí</p>
        </div>
    </div>
@else
    <div class="row g-3">
        @foreach($notificaciones as $notificacion)
            <div class="col-12">
                <div class="card-custom notification-card {{ !$notificacion->leida ? 'unread' : '' }}"
                     onclick="window.location='{{ route('prestamos.show', $notificacion->prestamo_id) }}'"
                     style="cursor: pointer;">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-start">
                            <!-- Ícono -->
                            <div class="notification-icon-lg {{ $notificacion->prioridad }} me-3">
                                <i class="{{ $notificacion->icono }}"></i>
                            </div>

                            <!-- Contenido -->
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h6 class="mb-0" style="color: #f3f4f6; font-weight: 600;">
                                        {{ $notificacion->titulo }}
                                    </h6>
                                    <div class="d-flex gap-2 align-items-center">
                                        @if(!$notificacion->leida)
                                            <span class="badge bg-warning" style="font-size: 0.7rem;">Nueva</span>
                                        @endif
                                        <span class="badge" style="background: linear-gradient(135deg,
                                            @if($notificacion->prioridad === 'critica') #ef4444, #dc2626
                                            @elseif($notificacion->prioridad === 'alta') #f59e0b, #d97706
                                            @elseif($notificacion->prioridad === 'media') #3b82f6, #2563eb
                                            @else #10b981, #059669
                                            @endif
                                        ); font-size: 0.7rem;">
                                            {{ ucfirst($notificacion->prioridad) }}
                                        </span>
                                    </div>
                                </div>

                                <p class="mb-2" style="color: #9ca3af; font-size: 0.9rem;">
                                    {{ $notificacion->mensaje }}
                                </p>

                                <div class="d-flex justify-content-between align-items-center">
                                    <small style="color: #6b7280;">
                                        <i class="bi bi-clock"></i>
                                        {{ $notificacion->created_at->diffForHumans() }}
                                    </small>

                                    <div>
                                        <span style="color: #9ca3af; font-size: 0.85rem;">
                                            <i class="bi bi-person"></i>
                                            {{ $notificacion->prestamo->cliente_nombre_completo }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Botón eliminar -->
                            <form action="{{ route('notificaciones.destroy', $notificacion) }}" method="POST"
                                  onclick="event.stopPropagation()" class="ms-2">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-link text-danger"
                                        onclick="return confirm('¿Eliminar esta notificación?')">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Paginación -->
    <div class="mt-4">
        {{ $notificaciones->links() }}
    </div>
@endif

<style>
    .notification-card {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }

    .notification-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    }

    .notification-card.unread {
        background: rgba(212, 175, 55, 0.05);
        border-left-color: var(--primary-color);
    }

    .notification-icon-lg {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .notification-icon-lg.critica {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

    .notification-icon-lg.alta {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .notification-icon-lg.media {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
    }

    .notification-icon-lg.baja {
        background: linear-gradient(135deg, #10b981, #059669);
    }

    .notification-icon-lg i {
        color: white;
        font-size: 1.2rem;
    }
</style>
@endsection