@extends('layouts.admin',['activePage' => 'webservices', 'menuParent' => 'Mantenimientos', 'titlePage'=>('Webservices')])


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

@section('breadcrumb')
    <li class="breadcrumb-item active">@yield('titulo')</li>
@endsection
@section('estilos')
    <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="gridWeb" 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">URL</th>
            </thead>
            <tbody>

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

    <a href="#" onclick="editarUrl(1)" class="btn-flotante">
        <i class="fa fa-edit"></i>
    </a>

    <div class="modal fade" id="editUrl" 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>URL</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label>URL <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="url" name="url">
                                    </div>
                                </div>


                            </div>

                        </div>
                        <div class="card-footer text-right">
                            <input type="hidden" id="id">
                            <button class="btn btn-primary" onclick="guardarURL()">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')
				}
			});

			loadgridWeb()
		});


		function loadgridWeb() {
			$('#gridWeb').dataTable().fnDestroy();
			$('#gridWeb').DataTable({
				// dom: 'Bfrtip',
				"scrollX": true,
				//serverSide: true,
				ajax: {
					url: "{{url('admin/get_webservices')}}",
					type: "POST",
				},
				columns: [{
					data: "url"
				},
				],
				order: [
					[0, "asc"]
				],

			});
		}

		function editarUrl(id) {


			$.ajax({
				url: "{{url('admin/get_url_webservice')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					id: id,
				}
			})
				.done(function (resp) {
					console.log("success");
					$('#id').val(resp.data['id']);
					$('#url').val(resp.data['url']);

					// $('#Estatus_co').selectpicker("refresh");
					$('#editUrl').modal('show');

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

		function guardarURL() {

			URL = $('#url').val(),
				Id = $('#id').val();

			if (URL == '') {
				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_url_webservices')}}",
				type: 'POST',
				dataType: 'json',
				data: {
					id: Id,
					url: URL,
				},
			})
				.done(function (resp) {
					Swal.fire({
						icon: 'success',
						title: resp.mensaje,
						showConfirmButton: false,
						timer: 2500
					});
					$('#gridWeb').DataTable().ajax.reload();
					limpiarSection()
				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					console.log("complete");
					$('#editUrl').modal('hide');
				});
		}


		function limpiarSection() {
			$('#id').val('');
			$('#url').val('');
			$('#editUrl').modal('hide');


		}
    </script>

@endsection