@extends('layouts.app')

@section('title', 'Configuración SMTP')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-server me-2"></i>Configuración SMTP
                    </h3>
                    <div>
                        <a href="{{ route('correo.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Volver
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('correo.guardar-configuracion') }}" method="POST">
                        @csrf
                        @if(isset($configuracion))
                            @method('PUT')
                            <input type="hidden" name="id" value="{{ $configuracion->id }}">
                        @endif

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="nombre" class="form-label">Nombre de la Configuración *</label>
                                    <input type="text" name="nombre" id="nombre" 
                                           class="form-control @error('nombre') is-invalid @enderror" 
                                           value="{{ old('nombre', $configuracion->nombre ?? '') }}" required>
                                    @error('nombre')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="host" class="form-label">Host SMTP *</label>
                                    <input type="text" name="host" id="host" 
                                           class="form-control @error('host') is-invalid @enderror" 
                                           value="{{ old('host', $configuracion->host ?? '') }}" required>
                                    @error('host')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="puerto" class="form-label">Puerto *</label>
                                    <input type="number" name="puerto" id="puerto" 
                                           class="form-control @error('puerto') is-invalid @enderror" 
                                           value="{{ old('puerto', $configuracion->puerto ?? '587') }}" required>
                                    @error('puerto')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="encriptacion" class="form-label">Encriptación</label>
                                    <select name="encriptacion" id="encriptacion" 
                                            class="form-control @error('encriptacion') is-invalid @enderror">
                                        <option value="">Ninguna</option>
                                        <option value="tls" {{ old('encriptacion', $configuracion->encriptacion ?? '') == 'tls' ? 'selected' : '' }}>TLS</option>
                                        <option value="ssl" {{ old('encriptacion', $configuracion->encriptacion ?? '') == 'ssl' ? 'selected' : '' }}>SSL</option>
                                    </select>
                                    @error('encriptacion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="usuario" class="form-label">Usuario *</label>
                                    <input type="text" name="usuario" id="usuario" 
                                           class="form-control @error('usuario') is-invalid @enderror" 
                                           value="{{ old('usuario', $configuracion->usuario ?? '') }}" required>
                                    @error('usuario')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="password" class="form-label">Contraseña *</label>
                                    <input type="password" name="password" id="password" 
                                           class="form-control @error('password') is-invalid @enderror" 
                                           value="{{ old('password', $configuracion->password ?? '') }}" required>
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="from_address" class="form-label">Dirección From *</label>
                                    <input type="email" name="from_address" id="from_address" 
                                           class="form-control @error('from_address') is-invalid @enderror" 
                                           value="{{ old('from_address', $configuracion->from_address ?? '') }}" required>
                                    @error('from_address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="from_name" class="form-label">Nombre From *</label>
                                    <input type="text" name="from_name" id="from_name" 
                                           class="form-control @error('from_name') is-invalid @enderror" 
                                           value="{{ old('from_name', $configuracion->from_name ?? '') }}" required>
                                    @error('from_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="descripcion" class="form-label">Descripción</label>
                                    <input type="text" name="descripcion" id="descripcion" 
                                           class="form-control @error('descripcion') is-invalid @enderror" 
                                           value="{{ old('descripcion', $configuracion->descripcion ?? '') }}">
                                    @error('descripcion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-check mb-3">
                                    <input type="checkbox" name="predeterminada" id="predeterminada" 
                                           class="form-check-input" 
                                           {{ old('predeterminada', $configuracion->predeterminada ?? false) ? 'checked' : '' }}>
                                    <label for="predeterminada" class="form-check-label">
                                        Establecer como configuración predeterminada
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input type="checkbox" name="activa" id="activa" 
                                           class="form-check-input" 
                                           {{ old('activa', $configuracion->activa ?? true) ? 'checked' : '' }}>
                                    <label for="activa" class="form-check-label">
                                        Configuración activa
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-info" onclick="probarConfiguracion()">
                                        <i class="fas fa-test-tube me-2"></i>Probar Configuración
                                    </button>
                                    <div>
                                        <a href="{{ route('correo.index') }}" class="btn btn-secondary me-2">
                                            <i class="fas fa-times me-2"></i>Cancelar
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-2"></i>Guardar Configuración
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function probarConfiguracion() {
    const formData = new FormData();
    formData.append('host', document.getElementById('host').value);
    formData.append('puerto', document.getElementById('puerto').value);
    formData.append('usuario', document.getElementById('usuario').value);
    formData.append('password', document.getElementById('password').value);
    formData.append('encriptacion', document.getElementById('encriptacion').value);
    formData.append('from_address', document.getElementById('from_address').value);
    formData.append('from_name', document.getElementById('from_name').value);
    formData.append('_token', document.querySelector('input[name="_token"]').value);

    fetch('{{ route("correo.probar") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ Configuración probada exitosamente');
        } else {
            alert('❌ Error al probar configuración: ' + data.message);
        }
    })
    .catch(error => {
        alert('❌ Error al probar configuración: ' + error.message);
    });
}
</script>
@endpush
@endsection