@extends('layouts.yellow')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 style="color: white !important;">Notificaciones</h3>
                    <div>
                        <a href="#" id="mark-all-read" class="btn btn-primary">
                            <i class="fas fa-check-double me-1"></i> Marcar todas como leídas
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if(count($notifications) > 0)
                        <div class="list-group">
                            @foreach($notifications as $notification)
                                <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center 
                                    {{ is_null($notification->read_at) ? 'list-group-item-light fw-bold' : '' }}">
                                    <div class="d-flex w-100">
                                        <div class="me-3">
                                            <div class="notification-icon bg-{{ $notification->type }} text-white p-2 rounded-circle">
                                                <i class="fas fa-{{ $notification->icon }}"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex w-100 justify-content-between">
                                                <h5 class="mb-1">{{ $notification->title }}</h5>
                                                <small>{{ $notification->created_at->diffForHumans() }}</small>
                                            </div>
                                            <p class="mb-1">{{ $notification->message }}</p>
                                            <div class="d-flex mt-2">
                                                @if(is_null($notification->read_at))
                                                    <button class="btn btn-sm btn-success me-2 mark-read-btn" data-id="{{ $notification->id }}">
                                                        <i class="fas fa-check me-1"></i> Marcar como leída
                                                    </button>
                                                @endif
                                                @if($notification->link)
                                                    <a href="{{ $notification->link }}" class="btn btn-sm btn-primary me-2">
                                                        <i class="fas fa-external-link-alt me-1"></i> Ver detalles
                                                    </a>
                                                @endif
                                                <button class="btn btn-sm btn-danger notification-delete-btn" data-id="{{ $notification->id }}">
                                                    <i class="fas fa-trash-alt me-1"></i> Eliminar
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <div class="d-flex justify-content-center mt-4">
                            {{ $notifications->links() }}
                        </div>
                    @else
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i> No tienes notificaciones.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .notification-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .bg-info {
        background-color: #17a2b8 !important;
    }
    
    .bg-success {
        background-color: #28a745 !important;
    }
    
    .bg-warning {
        background-color: #ffc107 !important;
    }
    
    .bg-danger {
        background-color: #dc3545 !important;
    }
</style>
<!-- Meta tag CSRF para peticiones AJAX -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- Incluir script de notificaciones -->
<script src="{{ asset('js/notifications.js') }}"></script>
@endsection