@extends('layouts.admin',['activePage' => 'correos_config', 'menuParent' => 'Mantenimientos', 'titlePage'=>('Correos Configuracion')])


@section('titulo', 'Correos Configuracion')

@section('breadcrumb')
    <li class="breadcrumb-item active">@yield('titulo')</li>
@endsection
@section('estilos')
    <script src="https://cdn.tiny.cloud/1/sjv6q4h8z9rv3smegxq0wcu05jf5ju8vfpkqdlp6cm4n29dx/tinymce/6/tinymce.min.js"
            referrerpolicy="origin"></script>
    <style>
        .btn-flotante {
            font-size: 12px; /* Cambiar el tamaño de la tipografia */
            text-transform: uppercase; /* Texto en mayusculas */
            font-weight: bold; /* Fuente en negrita o bold */
            color: #ffffff; /* Color del texto */
            border-radius: 20px; /* Borde del boton */
            letter-spacing: 2px; /* Espacio entre letras */
            background-color: #0a1433; /* Color de fondo */
            padding: 18px 21px; /* Relleno del boton */
            position: fixed;
            bottom: 40px;
            right: 40px;
            transition: all 300ms ease 0ms;
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
            z-index: 99;
        }

        .btn-flotante:hover {
            background-color: #fff; /* Color de fondo al pasar el cursor */
            color: #0a1433;
            box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
            transform: translateY(-7px);
        }

        @media only screen and (max-width: 600px) {
            .btn-flotante {
                font-size: 14px;
                padding: 12px 20px;
                bottom: 20px;
                right: 20px;
            }
        }
    </style>
@endsection


@section('contenido')
    <style>
        .contentImg {
            cursor: pointer;
        }

        .delete {
            color: white;
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .contentImg:hover .delete {
            display: block;
            filter: brightness(150%);
        }

        .contentImg:hover {
            filter: brightness(50%);
            transition: .4s;
        }
    </style>

    <div class="col-12 table-responsive">
        <table class="table table-bordered table-hover" id="gridCorreos" width="100%">
            <thead>
            <!-- <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th> -->
            <th class="xt-xxs font-weight-bolder opacity-7">Correo</th>
            <th class="text-xxs font-weight-bolder opacity-7">Usuario</th>
            <th class="text-xxs font-weight-bolder opacity-7">Contraseña</th>
            <th class="text-xxs font-weight-bolder opacity-7">Host</th>
            <th class="text-xxs font-weight-bolder opacity-7">Servidor</th>
            <th class="text-xxs font-weight-bolder opacity-7">Puerto</th>
            <th class="text-xxs font-weight-bolder opacity-7">Tipo</th>
            <th class="text-xxs font-weight-bolder opacity-7">Acciones</th>

            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <a href="#" data-toggle="modal" data-target="#addCorreo" class="btn-flotante">
        <i class="fa fa-plus"></i>
    </a>

    <div class="modal fade" id="addCorreo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header card-header-primary">
                            <div class="card-title text-center">
                                <h5>AGREGAR CORREO</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <label>Correo <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="Correo">
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="form-group">
                                        <label>Usuario <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="Usuario">
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="form-group">
                                        <label>Contraseña <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="Contraseña">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Host <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="Host">
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Puerto <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="Puerto">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Seguridad <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="Seguridad">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Tipo <span class="text-danger">*</span></label>
                                <select class="form-control" id="Estatus_co" select-choices>
                                    <option value="0" selected disabled> -[Selecciona una opción]-</option>
                                    <option value="P">Principal</option>
                                    <option value="S">Alterno</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-footer text-right">
                            <input type="hidden" id="id_correo_hidden">
                            <button class="btn btn-secondary" onclick="limpiarSection()">Limpiar</button>
                            <button class="btn btn-primary" onclick="guardarCorreo()">Guardar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="loadingSave" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h6 class="text-center">Guardando...</h6>
                    <label class="text-secondary">Se esta guardando la información, por favor espera.</label>
                    <div class="logo text-center" id="modalImg">
                        <img src="{{ asset('asset') }}/images/load.gif" class="img-responsive logo-mini" width="50">
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('scripts')
    <script>
		$(document).ready(function () {

			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});

			loadGridCorreos()
		});

		function limpiarSection() {
			$('#id_correo_hidden').val('');
			$('#Correo').val('');
			$('#Usuario').val('');
			$('#Contraseña').val('');
			$('#Host').val('');
			$('#Puerto').val('');
			$('#Seguridad').val('');
			$('#Estatus').val(0);
			// $('#Estatus').selectpicker("refresh");

		}

		function loadGridCorreos() {
			$('#gridCorreos').dataTable().fnDestroy();
			$('#gridCorreos').DataTable({
				// dom: 'Bfrtip',
				"scrollX": true,
				//serverSide: true,
				ajax: {
					url: "{{url('admin/get_correos')}}",
					type: "POST",
				},
				columns: [{
					data: "correo"
				},
					{
						data: "usuario"
					},
					{
						data: "contrasena"
					},
					{
						data: "host"
					},
					{
						data: "puerto"
					},
					{
						data: "seguridad"
					},
					{
						data: "estatus"
					},
					{
						data: "acciones"
					},
				],
				order: [
					[0, "asc"]
				],

			});
		}

		function editarCorreo(id) {


			$.ajax({
				url: "{{url('admin/get_correo')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					id: id,
				}
			})
				.done(function (resp) {
					console.log("success");
					$('#id_correo_hidden').val(resp.data['id']);
					$('#Correo').val(resp.data['correo']);
					$('#Usuario').val(resp.data['usuario']);
					$('#Contraseña').val(resp.data['contrasena']);
					$('#Puerto').val(resp.data['puerto']);
					$('#Host').val(resp.data['host']);
					$('#Seguridad').val(resp.data['seguridad']);
					$('#Estatus_co').val(resp.data['estatus']);
					// $('#Estatus_co').selectpicker("refresh");
					$('#addCorreo').modal('show');

				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					console.log("complete");
				});
		}

		function guardarCorreo() {
			var Estatus = $('#Estatus_co option:selected').val(),
				Correo = $('#Correo').val(),
				Usuario = $('#Usuario').val(),
				Contrasena = $('#Contraseña').val(),
				Host = $('#Host').val(),
				Puerto = $('#Puerto').val(),
				Seguridad = $('#Seguridad').val(),
				Id = $('#id_correo_hidden').val();

			if (Correo == '' || Usuario == '' || Contrasena == '' || Host == '' || Puerto == '' || Seguridad == '' || Estatus == 0) {
				Swal.fire({
					icon: 'error',
					title: 'Oops...',
					text: 'Debes ingresar toda la información obligatoria.',
					showConfirmButton: false,
					timer: 2500
				});
				return false;
			}
			$.ajax({
				url: "{{ url('admin/guarda_correos')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					id: Id,
					estatus: Estatus,
					correo: Correo,
					usuario: Usuario,
					contrasena: Contrasena,
					host: Host,
					puerto: Puerto,
					seguridad: Seguridad
				},
			})
				.done(function (resp) {
					Swal.fire({
						icon: 'success',
						title: resp.mensaje,
						showConfirmButton: false,
						timer: 2500
					});
					$('#gridCorreos').DataTable().ajax.reload();
					limpiarSection()
				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					console.log("complete");
					$('#addCorreo').modal('hide');
				});
		}

		function eliminarCorreo(id) {
			Swal.fire({
				title: '¿Estás seguro de eliminar el correo?',
				text: "Esta acción no es reversible",
				icon: 'warning',
				showCancelButton: true,
				confirmButtonColor: '#3085d6',
				cancelButtonColor: '#d33',
				cancelButtonText: 'Cancelar',
				confirmButtonText: 'Si, eliminar.'
			}).then((result) => {
				if (result.value) {
					//$('#cargandoModal').modal()
					$.ajax({
						url: "{{url('admin/delete_correo')}}",
						type: 'POST',
						dataType: 'json',
						data: {
							id: id,
						}
					})
						.done(function (resp) {
							console.log("success");
							Swal.fire({
								icon: 'success',
								title: resp.mensaje,
								showConfirmButton: false,
								timer: 2500
							});
							$('#gridCorreos').DataTable().ajax.reload();
							// limpiarSection()
						})
						.fail(function () {
							console.log("error");
						})
						.always(function () {
							console.log("complete");
						});

				}
			})
		}

    </script>

@endsection