{{-- New-Unity ERP | resources/views/admin_views/smtp/index.blade.php | v1.4 | 21/06/2026 --}}
{{-- v1.4 — Fix: tooltips inicializados dentro de $(document).ready(). --}}
{{-- v1.3 — Usa showNotification() de notifications.js para notificaciones. --}}
{{-- v1.2 — Toast notification Bootstrap para resultado de prueba SMTP. --}}
{{-- v1.1 — Tooltips y ayuda en todos los campos. --}}
{{-- v1.0 — Configuración SMTP: servidor, emisores por departamento, prueba de conexión. --}}

@extends('layouts.vertical', ['pageTitle' => 'SMTP Configuration'])

@section('content')
<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-envelope-open-text me-2"></i>SMTP Configuration</h1>
            <p class="text-muted mb-0">Settings — Email Server</p>
        </div>
    </div>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Unity ERP</a></li>
            <li class="breadcrumb-item active">SMTP Configuration</li>
        </ol>
    </nav>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show py-2">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show py-2">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form method="POST" action="{{ route('admin.smtp.store') }}" id="formSmtp">
        @csrf

        {{-- ── Servidor SMTP ── --}}
        <div class="card mb-3">
            <div class="card-header bg-primary text-white py-2">
                <h6 class="mb-0"><i class="fad fa-server me-2"></i>Servidor SMTP</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">Servidor SMTP *
                            <i class="fas fa-info-circle text-muted ms-1" data-bs-toggle="tooltip"
                               title="Dirección del servidor de correo. Ej: mail.empresa.com o smtp.gmail.com"></i>
                        </label>
                        <input type="text" name="host" class="form-control form-control-sm"
                               value="{{ old('host', $config->host ?? '') }}" required
                               placeholder="mail.tudominio.com">
                        <small class="text-muted">Ej: mail.empresa.com</small>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold small">Puerto *
                            <i class="fas fa-info-circle text-muted ms-1" data-bs-toggle="tooltip"
                               title="SSL=465 · TLS/STARTTLS=587 · Sin encriptación=25"></i>
                        </label>
                        <input type="number" name="port" class="form-control form-control-sm"
                               value="{{ old('port', $config->port ?? 587) }}" required>
                        <small class="text-muted">SSL:465 · TLS:587</small>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold small">Encriptación *
                            <i class="fas fa-info-circle text-muted ms-1" data-bs-toggle="tooltip"
                               title="SSL: puerto 465 · TLS/STARTTLS: puerto 587 · Ninguna: no recomendado"></i>
                        </label>
                        <select name="encryption" class="form-select form-select-sm" required>
                            @foreach(['tls' => 'TLS', 'ssl' => 'SSL', 'starttls' => 'STARTTLS', 'ninguna' => 'Ninguna'] as $val => $label)
                                <option value="{{ $val }}" @selected(old('encryption', $config->encryption ?? 'tls') == $val)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">Usuario *
                            <i class="fas fa-info-circle text-muted ms-1" data-bs-toggle="tooltip"
                               title="Generalmente es la dirección de correo completa que se usa para autenticarse en el servidor"></i>
                        </label>
                        <input type="text" name="username" class="form-control form-control-sm"
                               value="{{ old('username', $config->username ?? '') }}" required
                               placeholder="usuario@tudominio.com">
                        <small class="text-muted">Email de autenticación en el servidor</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">Contraseña *
                            <i class="fas fa-info-circle text-muted ms-1" data-bs-toggle="tooltip"
                               title="Contraseña del correo. Se almacena encriptada en la BD. Deja vacío si no deseas cambiarla."></i>
                        </label>
                        <div class="input-group input-group-sm">
                            <input type="password" name="password" id="smtp_password"
                                   class="form-control form-control-sm"
                                   placeholder="{{ $config ? '••••••• (vacío = sin cambios)' : 'Contraseña' }}"
                                   {{ $config ? '' : 'required' }}>
                            <button type="button" class="btn btn-outline-secondary"
                                    onclick="togglePassword()">
                                <i class="fas fa-eye" id="eye-icon"></i>
                            </button>
                        </div>
                        <small class="text-muted">Se guarda encriptada</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">Nombre del Emisor *
                            <i class="fas fa-info-circle text-muted ms-1" data-bs-toggle="tooltip"
                               title="Nombre que verá el destinatario en el campo 'De:'. Ej: Cotización Empresa"></i>
                        </label>
                        <input type="text" name="from_name" class="form-control form-control-sm"
                               value="{{ old('from_name', $config->from_name ?? '') }}" required
                               placeholder="Mi Empresa">
                        <small class="text-muted">Nombre visible en el campo "De:"</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">Correo del Emisor *
                            <i class="fas fa-info-circle text-muted ms-1" data-bs-toggle="tooltip"
                               title="Dirección de correo que aparecerá como remitente en los emails enviados"></i>
                        </label>
                        <input type="email" name="from_address" class="form-control form-control-sm"
                               value="{{ old('from_address', $config->from_address ?? '') }}" required
                               placeholder="no-reply@tudominio.com">
                        <small class="text-muted">Email visible como remitente</small>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Emisores por Departamento ── --}}
        <div class="card mb-3">
            <div class="card-header bg-primary text-white py-2">
                <h6 class="mb-0"><i class="fad fa-users me-2"></i>Emisores por Departamento</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    {{-- Ventas --}}
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Emisor Ventas
                            <i class="fas fa-info-circle text-muted ms-1" data-bs-toggle="tooltip"
                               title="Nombre del remitente para emails de cotizaciones. Ej: Ventas Empresa"></i>
                        </label>
                        <input type="text" name="sales_sender" class="form-control form-control-sm"
                               value="{{ old('sales_sender', $config->sales_sender ?? '') }}"
                               placeholder="Ventas Empresa">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Correo Ventas
                            <i class="fas fa-info-circle text-muted ms-1" data-bs-toggle="tooltip"
                               title="Email desde el que se enviarán las cotizaciones a clientes"></i>
                        </label>
                        <input type="email" name="sales_email" class="form-control form-control-sm"
                               value="{{ old('sales_email', $config->sales_email ?? '') }}"
                               placeholder="ventas@tudominio.com">
                    </div>
                    {{-- Compras --}}
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Emisor Compras</label>
                        <input type="text" name="purchases_sender" class="form-control form-control-sm"
                               value="{{ old('purchases_sender', $config->purchases_sender ?? '') }}"
                               placeholder="Compras">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Correo Compras</label>
                        <input type="email" name="purchases_email" class="form-control form-control-sm"
                               value="{{ old('purchases_email', $config->purchases_email ?? '') }}"
                               placeholder="compras@tudominio.com">
                    </div>
                    {{-- Facturación --}}
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Emisor Facturación</label>
                        <input type="text" name="billing_sender" class="form-control form-control-sm"
                               value="{{ old('billing_sender', $config->billing_sender ?? '') }}"
                               placeholder="Facturación">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Correo Facturación</label>
                        <input type="email" name="billing_email" class="form-control form-control-sm"
                               value="{{ old('billing_email', $config->billing_email ?? '') }}"
                               placeholder="facturacion@tudominio.com">
                    </div>
                    {{-- Finanzas --}}
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Emisor Finanzas</label>
                        <input type="text" name="finance_sender" class="form-control form-control-sm"
                               value="{{ old('finance_sender', $config->finance_sender ?? '') }}"
                               placeholder="Cobranza">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small">Correo Finanzas</label>
                        <input type="email" name="finance_email" class="form-control form-control-sm"
                               value="{{ old('finance_email', $config->finance_email ?? '') }}"
                               placeholder="cobranza@tudominio.com">
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Prueba de Conexión ── --}}
        <div class="card mb-3">
            <div class="card-header bg-secondary text-white py-2">
                <h6 class="mb-0"><i class="fad fa-vial me-2"></i>Prueba de Conexión</h6>
            </div>
            <div class="card-body">
                <div class="row g-2 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label fw-bold small">Email de Prueba</label>
                        <input type="email" id="email_prueba" class="form-control form-control-sm"
                               placeholder="tucorreo@ejemplo.com">
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-secondary btn-sm w-100" id="btnProbar">
                            <i class="fas fa-paper-plane me-1"></i>Enviar Prueba
                        </button>
                    </div>
                    <div class="col-md-4">
                        <div id="test-result"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-end mb-4">
            <button type="submit" class="btn btn-primary">
                <i class="fad fa-save me-1"></i>Guardar Configuración
            </button>
        </div>

    </form>
</div>
@endsection

@section('scripts')
<script>
function showToast(type, message) {
    showNotification(message, type === 'success' ? 'success' : 'error');
}

function togglePassword() {
    var input = document.getElementById('smtp_password');
    var icon  = document.getElementById('eye-icon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}

// Inicializar tooltips dentro del ready
$(document).ready(function() {
    $('[data-bs-toggle="tooltip"]').each(function() {
        new bootstrap.Tooltip(this);
    });
});

document.getElementById('btnProbar').addEventListener('click', function() {
    var email = document.getElementById('email_prueba').value;
    if (!email) { alert('Ingresa un email de prueba.'); return; }

    var btn = this;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Enviando...';

    fetch('{{ route("admin.smtp.test") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ email_prueba: email })
    })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Enviar Prueba';
        showToast(data.success ? 'success' : 'danger', data.mensaje);
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Enviar Prueba';
        showToast('danger', 'Error de conexión. Verifica tu configuración SMTP.');
    });
});
</script>
@endsection