@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = __('SMTP Configuration');
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <form id="smtp-form" method="post" action="{{ route('smtp.update') }}">
            @method('POST')
            <div class="card card-default">
                <div class="card-body">
                    <div class="alert alert-danger col-md-12" style="display:none"></div>
                    <div class="alert alert-success col-md-12" style="display:none"></div>
                    <div class="alert alert-secondary col-md-12" style="color:white">
                        Te invitamos a configurar los envíos de correo del sistema con una cuenta propia de tu empresa, para
                        lo cual deberás contar con la siguiente información:
                    </div>
                    <h5 style="padding: 10px 0;font-weight:bold">Datos Básicos de Configuración SMTP</h5>
                    <div class="form-group">
                        <label for="name" style="font-weight:normal"><b>Nombre de la cuenta</b> (El nombre con el que
                            quieres que reciban los correos, ejemplo: el nombre de tu empresa)</label>
                        <div class="col-md-10 col-lg-8">
                            <input class="form-control" id="name" name="name"
                                value="{{ !empty($smtp->id) ? $smtp->name : '' }}">
                            <span id="name-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="host" style="font-weight:normal"><b>Servidor SMTP</b> (Host)</label>
                        <div class="col-md-10 col-lg-8">
                            <input class="form-control" id="host" name="host"
                                value="{{ !empty($smtp->id) ? $smtp->host : '' }}">
                            <span id="host-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="port">Puerto SMTP</label>
                        <div class="col-md-10 col-lg-8">
                            <div class="custom-control custom-radio" style="margin-right: 2rem;">
                                <input class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                    type="radio" id="port_25" name="port" value="25"
                                    @if (!empty($smtp->id) && $smtp->port == '25') checked @endif>
                                <label for="port_25" class="custom-control-label" style="font-weight:normal">25 (Sin
                                    cifrado, a menudo bloqueado por ISP)</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                    type="radio" id="port_465" name="port" value="465"
                                    @if (!empty($smtp->id) && $smtp->port == '465') checked @endif>
                                <label for="port_465" class="custom-control-label" style="font-weight:normal">465
                                    (SSL/TLS)</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                    type="radio" id="port_587" name="port" value="587"
                                    @if (!empty($smtp->id) && $smtp->port == '587') checked @endif>
                                <label for="port_587" class="custom-control-label" style="font-weight:normal">587
                                    (STARTTLS, recomendado)</label>
                            </div>
                            <span id="port-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" style="font-weight:normal"><b>Usuario</b> (Tu dirección de correo electrónico
                            completa)</label>
                        <div class="col-md-10 col-lg-8">
                            <input type="email" class="form-control" id="email" name="email"
                                value="{{ !empty($smtp->id) ? $smtp->email : '' }}" placeholder="mail@example.com">
                            <span id="email-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" style="font-weight:normal"><b>Contraseña</b> (La contraseña de tu
                            cuenta)</label>
                        <div class="col-md-10 col-lg-8">
                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                id="password" name="password" placeholder="contraseña"
                                value="{{ !empty($smtp->id) ? base64_decode($smtp->password) : '' }}">
                            <span id="password-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="encryption">Tipo de Cifrado</label>
                        <div class="col-md-10 col-lg-8">
                            <div class="custom-control custom-radio" style="margin-right: 2rem;">
                                <input
                                    class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                    type="radio" id="encryption_SSL" name="encryption" value="ssl"
                                    @if (!empty($smtp->id) && $smtp->encryption == 'ssl') checked @endif>
                                <label for="encryption_SSL" class="custom-control-label"
                                    style="font-weight:normal">SSL/TLS (seguro)</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input
                                    class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                    type="radio" id="encryption_STARTTLS" name="encryption" value="tls"
                                    @if (!empty($smtp->id) && $smtp->encryption == 'tls') checked @endif>
                                <label for="encryption_STARTTLS" class="custom-control-label"
                                    style="font-weight:normal">STARTTLS
                                    (seguro y recomendado si
                                    está disponible)</label>
                            </div>
                            <span id="encryption-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <h5 style="padding: 10px 0;font-weight:bold">Ejemplo de Configuración para Proveedores Comunes</h5>
                    <div class="form-group">
                        <div>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Proveedor</th>
                                        <th>Servidor SMTP</th>
                                        <th>Puerto</th>
                                        <th>Cifrado</th>
                                    <tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Gmail</td>
                                        <td>smtp.gmail.com</td>
                                        <td>465 (SSL) / 587 (STARTTLS)</td>
                                        <td>Sí</td>
                                    </tr>
                                    <tr>
                                        <td>Outlook/Hotmail</td>
                                        <td>smtp.office365.com</td>
                                        <td>587 (STARTTLS)</td>
                                        <td>Sí</td>
                                    </tr>
                                    <tr>
                                        <td>Yahoo</td>
                                        <td>smtp.mail.yahoo.com</td>
                                        <td>465 (SSL) / 587 (STARTTLS)</td>
                                        <td>Sí</td>
                                    </tr>
                                    <tr>
                                        <td>iCloud</td>
                                        <td>smtp.mail.me.com</td>
                                        <td>587 (STARTTLS)</td>
                                        <td>Sí</td>
                                    </tr>
                                    <tr>
                                        <td>Zoho Mail</td>
                                        <td>smtp.zoho.com</td>
                                        <td>465 (SSL) / 587 (STARTTLS)</td>
                                        <td>Sí</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="test-connection-button">
                        Para probar tu configuración, da click aqui:
                        <button type="button" class="btn btn-default custom-btn" onclick="saveAndTestSmtp()"
                            style="font-weight:bold;margin-left:10px;width:200px">{{ __('Send test mail') }}</button>
                    </div>
                </div>
            </div>
            {{-- buttons --}}
            <div class="card">
                <div class="card-body">
                    <div class="form-group row" style="margin-bottom:0">
                        <div class="col-md-6">
                            <a href="javascript:loadContent('{{ route('panel') }}')" id="cancel" name="cancel"
                                class="btn btn-default custom-btn">{{ __('Cancel') }}</a>
                            <button type="submit" class="btn btn-info custom-btn">{{ __('Save') }}</button>
                            <button type="button" class="btn btn-default custom-btn" id="clear-settings-button"
                                @if (empty($smtp->id)) style="display:none" @endif
                                onclick="clearSettings()">{{ __('Clear Settings') }}</button>
                        </div>
                    </div>
                </div>
            </div>
            <br>
        </form>
    </div>
    <script>
        @if (empty($smtp->id))
            $('#test-connection-button').hide();
        @endif

        function saveAndTestSmtp() {
            testSmtp = 1;
            submitForm($('#smtp-form'));
        }

        function clearSettings() {
            $.ajax({
                    url: '{{ route('smtp.clear') }}',
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content')
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#smtp-form').find('input:not([type="radio"])').val('');
                            $('#smtp-form').find('input[type="radio"], input[type="checkbox"]').prop('checked',
                                false);
                            $("#test-connection-button").hide();
                            $("#clear-settings-button").hide();

                            showStatus(true, response.status);
                        } else {
                            showStatus(false, response.error);
                        }
                    }
                })
                .fail(function(xhr) {
                    if (xhr.status === 401 || xhr.status === 419) {
                        window.location.href = "/login";
                    } else {
                        console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
                        showStatus(false, `Error: ${xhr.status} - ${xhr.statusText}`);
                    }
                })
                .always(function() {
                    $(".overlay").hide();
                });
        }

        function sendTestEmail() {
            $.ajax({
                    url: '{{ route('smtp.test') }}',
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content')
                    },
                    success: function(response) {
                        if (response.success) {
                            showStatus(true, response.status);
                        } else {
                            showStatus(false, response.error);
                        }
                    }
                })
                .fail(function(xhr) {
                    if (xhr.status === 401 || xhr.status === 419) {
                        window.location.href = "/login";
                    } else {
                        console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
                        showStatus(false, `Error: ${xhr.status} - ${xhr.statusText}`);
                    }
                })
                .always(function() {
                    $(".overlay").hide();
                });
        }
    </script>
@endsection