@extends('layouts.app')

@section('title', 'Notificaciones')

@section('content')
<div class="container-fluid">
    <!-- Título de la página -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-bell me-2"></i>Notificaciones
        </h1>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-success" onclick="marcarTodasLeidas()">
                <i class="fas fa-check-double me-2"></i>Marcar Todas como Leídas
            </button>
            <button type="button" class="btn btn-outline-danger" onclick="eliminarLeidas()">
                <i class="fas fa-trash me-2"></i>Eliminar Leídas
            </button>
            <button type="button" class="btn btn-outline-secondary" onclick="location.reload()">
                <i class="fas fa-sync-alt me-2"></i>Actualizar
            </button>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-filter me-2"></i>Filtros
            </h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('notificaciones.index') }}" class="row g-3">
                <div class="col-md-4">
                    <label for="tipo" class="form-label">Tipo</label>
                    <select class="form-select" id="tipo" name="tipo">
                        <option value="">Todos los tipos</option>
                        <option value="info" {{ request('tipo') == 'info' ? 'selected' : '' }}>Información</option>
                        <option value="success" {{ request('tipo') == 'success' ? 'selected' : '' }}>Éxito</option>
                        <option value="warning" {{ request('tipo') == 'warning' ? 'selected' : '' }}>Advertencia</option>
                        <option value="error" {{ request('tipo') == 'error' ? 'selected' : '' }}>Error</option>
                    </select>
                </div>
                
                <div class="col-md-4">
                    <label for="leida" class="form-label">Estado</label>
                    <select class="form-select" id="leida" name="leida">
                        <option value="">Todas</option>
                        <option value="0" {{ request('leida') == '0' ? 'selected' : '' }}>No leídas</option>
                        <option value="1" {{ request('leida') == '1' ? 'selected' : '' }}>Leídas</option>
                    </select>
                </div>
                
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fas fa-search"></i>
                    </button>
                    <a href="{{ route('notificaciones.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Lista de notificaciones -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-list me-2"></i>Mis Notificaciones
                <span class="badge bg-primary ms-2">{{ $notificaciones->count() }} notificaciones</span>
            </h5>
        </div>
        <div class="card-body">
            @if($notificaciones->count() > 0)
                <div class="list-group">
                    @foreach($notificaciones as $notificacion)
                        <div class="list-group-item list-group-item-action {{ $notificacion->leida ? '' : 'bg-light' }}" 
                             id="notificacion-{{ $notificacion->id }}">
                            <div class="d-flex w-100 justify-content-between">
                                <div class="d-flex align-items-start">
                                    <div class="me-3">
                                        <i class="fas fa-{{ $notificacion->icono_mostrar }} text-{{ $notificacion->color }} fa-lg"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1 {{ $notificacion->leida ? '' : 'fw-bold' }}">
                                            {{ $notificacion->titulo }}
                                            @if(!$notificacion->leida)
                                                <span class="badge bg-primary ms-2">Nueva</span>
                                            @endif
                                        </h6>
                                        <p class="mb-1">{{ $notificacion->mensaje }}</p>
                                        <small class="text-muted">
                                            <i class="fas fa-clock me-1"></i>{{ $notificacion->tiempo_transcurrido }}
                                            <span class="badge bg-{{ $notificacion->color }} ms-2">{{ $notificacion->tipo_formateado }}</span>
                                        </small>
                                    </div>
                                </div>
                                <div class="btn-group-vertical" role="group">
                                    @if(!$notificacion->leida)
                                        <button type="button" class="btn btn-sm btn-outline-success" 
                                                onclick="marcarLeida({{ $notificacion->id }})" title="Marcar como leída">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    @endif
                                    @if($notificacion->url)
                                        <a href="{{ $notificacion->url }}" class="btn btn-sm btn-outline-primary" title="Ver">
                                            <i class="fas fa-external-link-alt"></i>
                                        </a>
                                    @endif
                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                            onclick="eliminarNotificacion({{ $notificacion->id }})" title="Eliminar">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Información de resultados -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        Mostrando {{ $notificaciones->count() }} notificaciones en total
                    </div>
                    <div>
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Notificaciones del usuario
                        </small>
                    </div>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No se encontraron notificaciones</h5>
                    <p class="text-muted">Intenta ajustar los filtros de búsqueda</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal de confirmación -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Acción</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="confirmButton" onclick="confirmAction()">Confirmar</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let actionType = null;
let actionId = null;

function marcarLeida(id) {
    fetch(`/notificaciones/${id}/marcar-leida`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const notificacion = document.getElementById(`notificacion-${id}`);
            notificacion.classList.remove('bg-light');
            notificacion.querySelector('.fw-bold').classList.remove('fw-bold');
            notificacion.querySelector('.badge').remove();
            notificacion.querySelector('.btn-outline-success').remove();
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function marcarTodasLeidas() {
    actionType = 'marcarTodas';
    document.getElementById('confirmMessage').textContent = '¿Deseas marcar todas las notificaciones como leídas?';
    document.getElementById('confirmButton').textContent = 'Marcar Todas';
    document.getElementById('confirmButton').className = 'btn btn-success';
    
    const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
    modal.show();
}

function eliminarLeidas() {
    actionType = 'eliminarLeidas';
    document.getElementById('confirmMessage').textContent = '¿Deseas eliminar todas las notificaciones leídas? Esta acción no se puede deshacer.';
    document.getElementById('confirmButton').textContent = 'Eliminar Leídas';
    document.getElementById('confirmButton').className = 'btn btn-danger';
    
    const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
    modal.show();
}

function eliminarNotificacion(id) {
    actionType = 'eliminar';
    actionId = id;
    document.getElementById('confirmMessage').textContent = '¿Deseas eliminar esta notificación? Esta acción no se puede deshacer.';
    document.getElementById('confirmButton').textContent = 'Eliminar';
    document.getElementById('confirmButton').className = 'btn btn-danger';
    
    const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
    modal.show();
}

function confirmAction() {
    let url = '';
    let method = 'POST';
    
    switch(actionType) {
        case 'marcarTodas':
            url = '/notificaciones/marcar-todas-leidas';
            break;
        case 'eliminarLeidas':
            url = '/notificaciones/eliminar-leidas';
            break;
        case 'eliminar':
            url = `/notificaciones/${actionId}`;
            method = 'DELETE';
            break;
    }
    
    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('confirmModal')).hide();
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
</script>
@endpush
@endsection