3
This commit is contained in:
Laucha1312
@@ -0,0 +1,197 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Mis Notificaciones — OnAPB')
|
||||
|
||||
@section('content')
|
||||
<div class="container py-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2 class="mb-0">
|
||||
<i class="bi bi-bell-fill text-warning me-2"></i>
|
||||
Mis Notificaciones
|
||||
@if($totalNoLeidas > 0)
|
||||
<span class="badge bg-danger ms-2">{{ $totalNoLeidas }} nuevas</span>
|
||||
@endif
|
||||
</h2>
|
||||
</h2>
|
||||
<div class="d-flex gap-2">
|
||||
@if($totalNoLeidas > 0)
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm px-3 fw-bold" onclick="marcarTodasLeidas()">
|
||||
<i class="bi bi-check2-all me-1"></i>MARCAR LEÍDAS
|
||||
</button>
|
||||
@endif
|
||||
@if(!$notificaciones->isEmpty())
|
||||
<button type="button" class="btn btn-outline-danger btn-sm px-3 fw-bold" onclick="eliminarTodas()">
|
||||
<i class="bi bi-trash me-1"></i>BORRAR TODAS
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($notificaciones->isEmpty())
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-bell-slash display-1 text-muted"></i>
|
||||
<p class="mt-3 text-muted">No tenés notificaciones todavía.</p>
|
||||
<a href="{{ route('panel.usuario') }}" class="btn btn-primary mt-2">Ir a mi panel</a>
|
||||
</div>
|
||||
@else
|
||||
<div class="list-group shadow-sm">
|
||||
@foreach($notificaciones as $notif)
|
||||
<div class="list-group-item list-group-item-action d-flex gap-3 py-3 {{ !$notif->leida ? 'border-start border-4 border-primary bg-light' : '' }}"
|
||||
id="notif-{{ $notif->id }}">
|
||||
{{-- Ícono según tipo --}}
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
@php
|
||||
$iconos = [
|
||||
'partido' => ['class' => 'bi-calendar-event', 'color' => 'text-primary'],
|
||||
'resultado' => ['class' => 'bi-trophy-fill', 'color' => 'text-warning'],
|
||||
'sistema' => ['class' => 'bi-info-circle-fill','color' => 'text-secondary'],
|
||||
'seguimiento' => ['class' => 'bi-star-fill', 'color' => 'text-success'],
|
||||
];
|
||||
$icono = $iconos[$notif->tipo] ?? ['class' => 'bi-bell-fill', 'color' => 'text-muted'];
|
||||
@endphp
|
||||
<i class="bi {{ $icono['class'] }} {{ $icono['color'] }} fs-4"></i>
|
||||
</div>
|
||||
|
||||
{{-- Contenido --}}
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1 {{ !$notif->leida ? 'fw-bold' : '' }}">{{ $notif->titulo }}</h6>
|
||||
<small class="text-muted text-nowrap ms-2">{{ $notif->creada_en->diffForHumans() }}</small>
|
||||
</div>
|
||||
<p class="mb-1 text-secondary small">{{ $notif->mensaje }}</p>
|
||||
<div class="d-flex gap-2 mt-1">
|
||||
@if($notif->url_accion)
|
||||
<a href="{{ $notif->url_accion }}" class="btn btn-sm btn-outline-primary py-0 px-2"
|
||||
onclick="marcarLeida({{ $notif->id }})">
|
||||
Ver detalle <i class="bi bi-arrow-right ms-1"></i>
|
||||
</a>
|
||||
@endif
|
||||
@if(!$notif->leida)
|
||||
<button class="btn btn-sm btn-outline-secondary py-0 px-2"
|
||||
onclick="marcarLeida({{ $notif->id }}, true)">
|
||||
<i class="bi bi-check2 me-1"></i>Marcar leída
|
||||
</button>
|
||||
@endif
|
||||
<button class="btn btn-sm btn-link text-danger p-0 ms-auto"
|
||||
onclick="eliminarNotificacion({{ $notif->id }})" title="Eliminar">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Paginación --}}
|
||||
<div class="mt-4">
|
||||
{{ $notificaciones->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
|
||||
|
||||
function marcarLeida(id, soloMarcar = false) {
|
||||
fetch(`/notificaciones/${id}/leer`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(r => r.json())
|
||||
.then(data => {
|
||||
const el = document.getElementById('notif-' + id);
|
||||
if (el) {
|
||||
el.classList.remove('border-start', 'border-4', 'border-primary', 'bg-light');
|
||||
const titulo = el.querySelector('h6');
|
||||
if (titulo) titulo.classList.remove('fw-bold');
|
||||
const btnLeida = el.querySelector('button[onclick*="marcarLeida"]');
|
||||
if (btnLeida) btnLeida.remove();
|
||||
}
|
||||
actualizarBadge();
|
||||
});
|
||||
}
|
||||
|
||||
function marcarTodasLeidas() {
|
||||
Swal.fire({
|
||||
title: '¿Marcar todas como leídas?',
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#b00000',
|
||||
confirmButtonText: 'Sí, marcar todas',
|
||||
cancelButtonText: 'Cancelar'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
fetch('{{ route("notificaciones.leer.todas") }}', {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
|
||||
}).then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function eliminarNotificacion(id) {
|
||||
Swal.fire({
|
||||
title: '¿Eliminar notificación?',
|
||||
text: 'Esta acción no se puede deshacer.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#d33',
|
||||
confirmButtonText: 'Sí, eliminar',
|
||||
cancelButtonText: 'Cancelar'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
fetch(`/notificaciones/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
|
||||
}).then(() => {
|
||||
const el = document.getElementById('notif-' + id);
|
||||
if (el) el.remove();
|
||||
actualizarBadge();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function eliminarTodas() {
|
||||
Swal.fire({
|
||||
title: '¿Eliminar TODO el historial?',
|
||||
text: 'Se borrarán todas tus notificaciones permanentemente.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#d33',
|
||||
confirmButtonText: 'Sí, borrar todo',
|
||||
cancelButtonText: 'Cancelar'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
fetch('{{ route("notificaciones.eliminar.todas") }}', {
|
||||
method: 'DELETE',
|
||||
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
|
||||
}).then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function actualizarBadge() {
|
||||
fetch('/notificaciones/count')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const badge = document.getElementById('notif-badge');
|
||||
if (!badge) return;
|
||||
if (data.count > 0) {
|
||||
badge.textContent = data.count > 99 ? '99+' : data.count;
|
||||
badge.classList.remove('d-none');
|
||||
} else {
|
||||
badge.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user