@extends('layouts.app')

@section('title', 'Notificaciones')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">📱 Notificaciones WhatsApp</h4>
                <div class="page-title-right">
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalPersonalizado">
                        <i class="fas fa-plus"></i> Nueva Notificación
                    </button>
                    <button class="btn btn-info" onclick="procesarCola()">
                        <i class="fas fa-paper-plane"></i> Procesar Cola
                    </button>
                    <button class="btn btn-warning" onclick="verificarWhatsApp()">
                        <i class="fas fa-wifi"></i> Verificar WhatsApp
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas -->
    <div class="row">
        <div class="col-md-2">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Total</h5>
                    <h3 class="text-primary">{{ number_format($estadisticas['total']) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Pendientes</h5>
                    <h3 class="text-warning">{{ number_format($estadisticas['pendientes']) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Enviadas</h5>
                    <h3 class="text-success">{{ number_format($estadisticas['enviadas']) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Fallidas</h5>
                    <h3 class="text-danger">{{ number_format($estadisticas['fallidas']) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">WhatsApp</h5>
                    <h3 class="text-info">{{ number_format($estadisticas['whatsapp']) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <div class="card-body">
                    <button class="btn btn-sm btn-outline-danger" onclick="notificarDeudasVencidas()">
                        <i class="fas fa-exclamation-triangle"></i> Notificar Deudas Vencidas
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-3">
                            <select name="estado" class="form-select">
                                <option value="">Todos los estados</option>
                                <option value="pendiente" {{ request('estado') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                <option value="enviado" {{ request('estado') == 'enviado' ? 'selected' : '' }}>Enviado</option>
                                <option value="fallido" {{ request('estado') == 'fallido' ? 'selected' : '' }}>Fallido</option>
                                <option value="cancelado" {{ request('estado') == 'cancelado' ? 'selected' : '' }}>Cancelado</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select name="tipo" class="form-select">
                                <option value="">Todos los tipos</option>
                                @foreach(\App\Models\Notificacion::TIPOS as $key => $value)
                                    <option value="{{ $key }}" {{ request('tipo') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select name="canal" class="form-select">
                                <option value="">Todos los canales</option>
                                @foreach(\App\Models\Notificacion::CANALES as $key => $value)
                                    <option value="{{ $key }}" {{ request('canal') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-filter"></i> Filtrar
                            </button>
                            <a href="{{ route('notificaciones.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Limpiar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Lista de Notificaciones -->
    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Cliente</th>
                                    <th>Tipo</th>
                                    <th>Canal</th>
                                    <th>Destinatario</th>
                                    <th>Estado</th>
                                    <th>Prioridad</th>
                                    <th>Enviado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($notificaciones as $notificacion)
                                    <tr>
                                        <td>{{ $notificacion->id }}</td>
                                        <td>{{ $notificacion->cliente->nombre ?? 'N/A' }}</td>
                                        <td>
                                            <span class="badge bg-secondary">
                                                {{ \App\Models\Notificacion::TIPOS[$notificacion->tipo] ?? $notificacion->tipo }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-info">
                                                {{ \App\Models\Notificacion::CANALES[$notificacion->canal] ?? $notificacion->canal }}
                                            </span>
                                        </td>
                                        <td>{{ $notificacion->destinatario }}</td>
                                        <td>
                                            @php
                                                $badgeClass = match($notificacion->estado) {
                                                    'pendiente' => 'bg-warning',
                                                    'enviado' => 'bg-success',
                                                    'fallido' => 'bg-danger',
                                                    'cancelado' => 'bg-secondary',
                                                    default => 'bg-light'
                                                };
                                            @endphp
                                            <span class="badge {{ $badgeClass }}">
                                                {{ \App\Models\Notificacion::ESTADOS[$notificacion->estado] ?? $notificacion->estado }}
                                            </span>
                                        </td>
                                        <td>
                                            @php
                                                $prioridadClass = match($notificacion->prioridad) {
                                                    'urgente' => 'bg-danger',
                                                    'alta' => 'bg-warning',
                                                    'normal' => 'bg-info',
                                                    'baja' => 'bg-secondary',
                                                    default => 'bg-light'
                                                };
                                            @endphp
                                            <span class="badge {{ $prioridadClass }}">
                                                {{ \App\Models\Notificacion::PRIORIDADES[$notificacion->prioridad] ?? $notificacion->prioridad }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($notificacion->enviado_at)
                                                {{ $notificacion->enviado_at->format('d/m/Y H:i') }}
                                            @else
                                                <span class="text-muted">No enviado</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                @php
                                                    $num = preg_replace('/[^0-9]/', '', $notificacion->destinatario);
                                                    if (!str_starts_with($num, '591')) { $num = '591' . $num; }
                                                    $waUrl = 'https://wa.me/' . $num . '?text=' . urlencode($notificacion->mensaje);
                                                @endphp
                                                <a href="{{ $waUrl }}" class="btn btn-sm btn-outline-success" target="_blank" title="Abrir en WhatsApp">
                                                    <i class="fab fa-whatsapp"></i>
                                                </a>
                                                <a href="{{ route('notificaciones.show', $notificacion) }}" class="btn btn-sm btn-info">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                @if($notificacion->estado === 'pendiente')
                                                    <button class="btn btn-sm btn-success" onclick="enviarNotificacion({{ $notificacion->id }})">
                                                        <i class="fas fa-paper-plane"></i>
                                                    </button>
                                                    <button class="btn btn-sm btn-danger" onclick="cancelarNotificacion({{ $notificacion->id }})">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center">No hay notificaciones</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    {{ $notificaciones->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Nueva Notificación -->
<div class="modal fade" id="modalPersonalizado" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nueva Notificación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formPersonalizado">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="cliente_id" class="form-label">Cliente</label>
                        <select name="cliente_id" id="cliente_id" class="form-select" required>
                            <option value="">Seleccionar cliente...</option>
                            @foreach(\App\Models\Cliente::all() as $cliente)
                                <option value="{{ $cliente->id }}">{{ $cliente->nombre }} - {{ $cliente->telefono }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="tipo" class="form-label">Tipo</label>
                        <select name="tipo" id="tipo" class="form-select" required>
                            @foreach(\App\Models\Notificacion::TIPOS as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="mensaje" class="form-label">Mensaje</label>
                        <textarea name="mensaje" id="mensaje" class="form-control" rows="5" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Enviar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function enviarNotificacion(id) {
    if (confirm('¿Enviar esta notificación?')) {
        fetch(`/notificaciones/${id}/enviar`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Notificación enviada exitosamente');
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al enviar notificación');
        });
    }
}

function cancelarNotificacion(id) {
    if (confirm('¿Cancelar esta notificación?')) {
        fetch(`/notificaciones/${id}/cancelar`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Notificación cancelada exitosamente');
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al cancelar notificación');
        });
    }
}

function procesarCola() {
    if (confirm('¿Procesar cola de notificaciones pendientes?')) {
        fetch('/notificaciones/procesar-cola', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Cola procesada: ' + data.message);
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al procesar cola');
        });
    }
}

function verificarWhatsApp() {
    fetch('/notificaciones/verificar-whatsapp', {
        method: 'GET',
        headers: {
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Estado de WhatsApp: ' + JSON.stringify(data.estado, null, 2));
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al verificar WhatsApp');
    });
}

function notificarDeudasVencidas() {
    if (confirm('¿Crear notificaciones para todas las deudas vencidas?')) {
        fetch('/notificaciones/deudas-vencidas', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Éxito: ' + data.message);
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al crear notificaciones');
        });
    }
}

// Enviar notificación personalizada
document.getElementById('formPersonalizado').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch('/notificaciones/personalizado', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Mensaje enviado exitosamente');
            document.getElementById('modalPersonalizado').querySelector('.btn-close').click();
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al enviar mensaje');
    });
});
</script>
@endsection