@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.smtp-card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1.5rem;
    background: #f8f9fa;
    margin-bottom: 1.5rem;
}

.smtp-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.provider-card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: white;
    transition: all 0.2s;
}

.provider-card:hover {
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0,123,255,0.1);
}

.test-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
}

.test-failed {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
}

.security-note {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Configuración SMTP</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('settings.smtp.update') }}" method="POST">
            @csrf
            @method('PUT')

            <div class="card">
                <div class="card-body p-0">

                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="smtpTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-smtp-tab" data-bs-toggle="tab" data-bs-target="#general-smtp"
                                    type="button" role="tab" aria-controls="general-smtp" aria-selected="true">
                                <i class="ri-mail-line tab-icon"></i>
                                Configuración SMTP
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="smtpTabContent">

                        <!-- Configuración SMTP -->
                        <div class="tab-pane fade show active" id="general-smtp" role="tabpanel" aria-labelledby="general-smtp-tab">

                            {{-- Estado Actual --}}
                            @if($smtp_setting->enabled)
                            <div class="alert alert-success">
                                <h5>✅ SMTP Habilitado</h5>
                                <p class="mb-0">Servidor: <code>{{ $smtp_setting->host }}:{{ $smtp_setting->port }}</code></p>
                            </div>
                            @else
                            <div class="alert alert-warning">
                                <h5>⚠️ SMTP Deshabilitado</h5>
                                <p class="mb-0">Configura los datos del servidor SMTP y habilita el envío de emails.</p>
                            </div>
                            @endif

                            <div class="smtp-card">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="smtp-icon">
                                        <i class="ri-mail-line"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Configuración del Servidor de Correo</h5>
                                        <p class="text-muted mb-0">Configura el servidor SMTP para el envío de emails desde tu tienda</p>
                                    </div>
                                </div>

                                <!-- Proveedores populares -->
                                <h6 class="form-section-title">
                                    <i class="ri-server-line text-primary"></i>
                                    Proveedores Recomendados
                                </h6>

                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <div class="provider-card">
                                            <div class="d-flex align-items-center">
                                                <div style="background: #ea4335; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 0.75rem;">
                                                    <i class="ri-google-fill"></i>
                                                </div>
                                                <div>
                                                    <strong>Gmail</strong>
                                                    <small class="d-block text-muted">smtp.gmail.com:587 (TLS)</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="provider-card">
                                            <div class="d-flex align-items-center">
                                                <div style="background: #0078d4; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 0.75rem;">
                                                    <i class="ri-microsoft-fill"></i>
                                                </div>
                                                <div>
                                                    <strong>Outlook/Hotmail</strong>
                                                    <small class="d-block text-muted">smtp-mail.outlook.com:587 (TLS)</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-settings-3-line text-primary"></i>
                                    Configuración del Servidor
                                </h6>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="mailer" class="form-label">Mailer</label>
                                            <select name="mailer" id="mailer" class="form-select @error('mailer') is-invalid @enderror">
                                                <option value="smtp" @if($smtp_setting->mailer == 'smtp') selected @endif>SMTP</option>
                                                <option value="sendmail" @if($smtp_setting->mailer == 'sendmail') selected @endif>Sendmail</option>
                                                <option value="mail" @if($smtp_setting->mailer == 'mail') selected @endif>PHP Mail</option>
                                            </select>
                                            @error('mailer')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="host" class="form-label">Host del Servidor <span class="text-danger">*</span></label>
                                            <input type="text" name="host" id="host" class="form-control @error('host') is-invalid @enderror"
                                                   value="{{ old('host', $smtp_setting->host) }}"
                                                   placeholder="smtp.gmail.com">
                                            @error('host')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="mb-3">
                                            <label for="port" class="form-label">Puerto <span class="text-danger">*</span></label>
                                            <input type="number" name="port" id="port" class="form-control @error('port') is-invalid @enderror"
                                                   value="{{ old('port', $smtp_setting->port ?? 587) }}"
                                                   placeholder="587">
                                            @error('port')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="mb-3">
                                            <label for="timeout" class="form-label">Timeout</label>
                                            <input type="number" name="timeout" id="timeout" class="form-control @error('timeout') is-invalid @enderror"
                                                   value="{{ old('timeout', $smtp_setting->timeout ?? 30) }}"
                                                   min="5" max="300" placeholder="30">
                                            @error('timeout')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="encryption" class="form-label">Encriptación</label>
                                            <select name="encryption" id="encryption" class="form-select @error('encryption') is-invalid @enderror">
                                                <option value="">Sin encriptación</option>
                                                <option value="tls" @if($smtp_setting->encryption == 'tls') selected @endif>TLS</option>
                                                <option value="ssl" @if($smtp_setting->encryption == 'ssl') selected @endif>SSL</option>
                                                <option value="starttls" @if($smtp_setting->encryption == 'starttls') selected @endif>STARTTLS</option>
                                            </select>
                                            @error('encryption')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label class="form-label d-block">Estado</label>
                                            <div class="mt-2">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" name="enabled" id="enabled" class="custom-control-input"
                                                           value="1" @if($smtp_setting->enabled) checked @endif>
                                                    <label class="custom-control-label" for="enabled">
                                                        <strong>Habilitado</strong>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="daily_limit" class="form-label">Límite Diario</label>
                                            <input type="number" name="daily_limit" id="daily_limit" class="form-control @error('daily_limit') is-invalid @enderror"
                                                   value="{{ old('daily_limit', $smtp_setting->daily_limit ?? 1000) }}"
                                                   min="1">
                                            <small class="text-muted">Enviados hoy: {{ $smtp_setting->sent_today ?? 0 }}</small>
                                            @error('daily_limit')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="hourly_limit" class="form-label">Límite por Hora</label>
                                            <input type="number" name="hourly_limit" id="hourly_limit" class="form-control @error('hourly_limit') is-invalid @enderror"
                                                   value="{{ old('hourly_limit', $smtp_setting->hourly_limit ?? 100) }}"
                                                   min="1">
                                            <small class="text-muted">Enviados esta hora: {{ $smtp_setting->sent_this_hour ?? 0 }}</small>
                                            @error('hourly_limit')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="username" class="form-label">Usuario SMTP</label>
                                            <input type="text" name="username" id="username" class="form-control @error('username') is-invalid @enderror"
                                                   value="{{ old('username', $smtp_setting->username) }}"
                                                   placeholder="tu-email@ejemplo.com">
                                            <small class="text-muted">Dejar vacío para mantener el valor actual</small>
                                            @error('username')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="password" class="form-label">Contraseña SMTP</label>
                                            <div class="input-group">
                                                <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror"
                                                       value="{{ old('password', $smtp_setting->password) }}"
                                                       placeholder="Contraseña SMTP">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-outline-secondary" onclick="togglePassword()">
                                                        <i class="ri-eye-line" id="password-icon"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <small class="text-muted">La contraseña se guarda encriptada automáticamente</small>
                                            @error('password')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="from_address" class="form-label">Email Remitente <span class="text-danger">*</span></label>
                                            <input type="email" name="from_address" id="from_address" class="form-control @error('from_address') is-invalid @enderror"
                                                   value="{{ old('from_address', $smtp_setting->from_address) }}"
                                                   required>
                                            @error('from_address')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="from_name" class="form-label">Nombre Remitente <span class="text-danger">*</span></label>
                                            <input type="text" name="from_name" id="from_name" class="form-control @error('from_name') is-invalid @enderror"
                                                   value="{{ old('from_name', $smtp_setting->from_name) }}"
                                                   required>
                                            @error('from_name')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                @if($smtp_setting->last_test_at)
                                <div class="@if($smtp_setting->last_test_success) test-success @else test-failed @endif">
                                    <h6>
                                        @if($smtp_setting->last_test_success)
                                            <i class="ri-checkbox-circle-line text-success"></i> Última Prueba: Exitosa
                                        @else
                                            <i class="ri-close-circle-line text-danger"></i> Última Prueba: Falló
                                        @endif
                                    </h6>
                                    <p class="mb-0"><strong>Fecha:</strong> {{ $smtp_setting->last_test_at->format('d/m/Y H:i:s') }}</p>
                                    <p class="mb-0"><strong>Mensaje:</strong> {{ $smtp_setting->last_test_message }}</p>
                                </div>
                                @endif

                                <div class="security-note mt-4">
                                    <h6><i class="ri-shield-check-line text-warning"></i> Seguridad</h6>
                                    <ul class="mb-0">
                                        <li>✅ Las credenciales se <strong>encriptan automáticamente</strong> al guardar</li>
                                        <li>✅ Rate limiting previene abuso de SPAM</li>
                                        <li>📧 <strong>Gmail:</strong> Usa "Contraseñas de aplicación" en lugar de tu contraseña principal</li>
                                        <li>🔒 Usa siempre conexiones cifradas (TLS/SSL)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="ri-save-line me-2"></i>Guardar Configuración
                        </button>
                        <button type="button" class="btn btn-info btn-lg ms-2" onclick="testSmtpConnection()">
                            <i class="ri-send-plane-line me-2"></i>Probar Conexión
                        </button>
                        <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-lg ms-3">
                            <i class="ri-close-line me-2"></i>Cancelar
                        </a>
                    </div>

                </div>
            </div>

        </form>

        {{-- Form oculto para test --}}
        <form id="testForm" action="{{ route('settings.smtp.test') }}" method="post" style="display: none;">
            @csrf
        </form>


@endsection

@section('customJs')
<script>
function togglePassword() {
    const passwordInput = document.getElementById('password');
    const passwordIcon = document.getElementById('password-icon');

    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        passwordIcon.classList.remove('fa-eye');
        passwordIcon.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = 'password';
        passwordIcon.classList.remove('fa-eye-slash');
        passwordIcon.classList.add('fa-eye');
    }
}

function testSmtpConnection() {
    if(confirm('¿Desea probar la conexión SMTP con la configuración actual?\n\nSe enviará un email de prueba a: {{ $smtp_setting->from_address ?? "la dirección configurada" }}')) {
        document.getElementById('testForm').submit();
    }
}
</script>
@endsection