@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-lg-6">
            <form name="form_correoSW" id="form_correosTransaccionales" role="form">
                <section class="card">
                    <div class="card-header">
                        <h4>Crear/Actualizar</h4>
                    </div>
                    <div class="card-body">
                        <input value="" name="id" type="hidden">
                        <div class="form-group row">
                            <label class="col-lg-3 control-label">Tipo</label>
                            <div class="col-lg-9">
                                <select maxlength="60" name="tipo" id="tipo" class="form-control system_validador_vacio">
                                    <option value="pedido">Pedido</option>
                                    <option value="cliente">Cliente</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 control-label">Nombre</label>
                            <div class="col-lg-9">
                                <input maxlength="60" value="" name="nombre" type="text" class="form-control system_validador_vacio">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 control-label">Asunto</label>
                            <div class="col-lg-9">
                                <input maxlength="60" value="" name="asunto" type="text" class="form-control system_validador_vacio">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 control-label">Remitente</label>
                            <div class="col-lg-9">
                                <input maxlength="60" value="" name="remitente" type="text" class="form-control system_validador_vacio">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 control-label">Mensaje</label>
                            <div class="col-lg-9">
                                <textarea name="mensaje" class="form-control system_validador_vacio" id="mensaje_email" rows="4"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 control-label">Estado</label>
                            <div class="col-lg-9">
                                <select maxlength="60" name="estado" id="estado" class="form-control system_validador_vacio">
                                    <option selected value="1">Activo</option>
                                    <option value="0">Inactivo</option>
                                </select>
                            </div>
                        </div>
                        <div class="text-right mt-3">
                                                        <button type="button" class="btn btn-sm btn-primary btn-flat" id="btn-guardar-correo">Guardar</button>
                                                    </div>
                    </div>
                </section>

                <section class="card mt-3">
                    <div class="card-header">
                        <h4>Correo de prueba</h4>
                    </div>
                    <div class="card-body">
                        <div class="form-group row mt-3">
                            <label class="col-lg-3 control-label">Dirección email</label>
                            <div class="col-lg-6">
                                <input maxlength="60" type="text" name="direccionEmail" class="form-control">
                            </div>
                            <div class="col-lg-3">
                                <button type="button" class="btn  btn-sm btn-primary btn-flat btn-correo-prueba">Enviar</button>
                            </div>

                        </div>
                        <hr>
                        <div class="card-body" id="prototipo_email"></div>
                    </div>
                </section>
            </form>
        </div>

        <div class="col-lg-6">
            <section class="card">
                <div class="card-header">
                    <div class="card-actions">
                        <ul class="nav nav-pills nav-pills-sm">
                            <li class="nav-item">
                                <a href="#" class="nav-link active filter-tab" data-filter="todos">Todos</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link filter-tab" data-filter="pedido">Pedido</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link filter-tab" data-filter="cliente">Cliente</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Tipo</th>
                                <th>Nombre</th>
                                <th>Remitente</th>
                                <th>Asunto</th>
                                <th>Estado</th>
                            </tr>
                            </thead>
                            <tbody>
                                                        </tbody>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <script>
        jQuery(document).on('click', '#btn-guardar-correo', function () {
            if (system_validarcampos("form_correosTransaccionales")) {
                Mostrarloader()
                axios.post('correos/crear', getDataJson("form_correosTransaccionales")).then(function (resp) {
                    Ocultarloader()
                    if (resp.data.error === 0) {
                        Swal.fire("Correo Creado", '', 'success').then(function () {
                            location.reload()
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery(document).on('click', '#btn-actualizar-correo', function () {
            if (system_validarcampos("form_correosTransaccionales")) {
                Mostrarloader()
                axios.put('correos/actualizar', getDataJson("form_correosTransaccionales")).then(function (resp) {
                    Ocultarloader()
                    if (resp.data.error === 0) {
                        Swal.fire("Pagina actualizado", '', 'success').then(function () {
                            location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery(document).on('click', '.btn-correo-prueba', function () {
            let campoEmail = jQuery('input[name="direccionEmail"]');

            campoEmail.addClass('system_validador_vacio');
            if (system_validarcampos("form_correosTransaccionales")) {
                Mostrarloader()
                axios.post('correos/enviarCorreoPrueba', getDataJson("form_correosTransaccionales")).then(function (resp) {
                    Ocultarloader()
                    if (resp.data.error === 0) {
                        Swal.fire("Se ha enviado el correo de prueba", '', 'success').then(function () {
                            location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
            campoEmail.removeClass('system_validador_vacio');
        });


        jQuery(document).ready(function () {
            jQuery('#estado').val('{{$infoCorreo["estado"] ?? '1'}}').change();
            jQuery('#tipo').val('{{$infoCorreo["tipo"] ?? 'pedido'}}').change();

            jQuery('.filter-tab').on('click', function (e) {
                e.preventDefault();
                let filtro = jQuery(this).data('filter');

                jQuery('.filter-tab').removeClass('active');
                jQuery(this).addClass('active');

                if (filtro === 'todos') {
                    jQuery('tbody tr').show();
                } else {
                    jQuery('tbody tr').hide();
                    jQuery('tbody tr[data-tipo="' + filtro + '"]').show();
                }
            });

            jQuery('#mensaje_email').on('change', function () {
                let mensaje = jQuery(this).val();
                jQuery('#prototipo_email').html(mensaje || '<em>Vista previa del mensaje</em>');
            });

            jQuery('#mensaje_email').trigger('change');
        });
    </script>
@endsection