@extends('backend-inquiro/header_iv')
@section('main')
    <style>
        #tablaSitios_wrapper {
            margin-top: 50px;
            margin-bottom: 40px;
        }
    </style>
    <div class="container mt-5 pt-2">
        <div class="row pt-5 pb-2 mb-4">
            <!--<div class="col-md-8 h3 text-fidelitas">@traducir('adm_config_sitios', 'Administracion de configuracion de sitios')</div>-->
            <div class="col-md-8 h3 text-fidelitas text-end">Administrador de Sitios Web</div>
            <div class="col-md-4 text-end">
                <button type="button" class="btn btn-primary btn-fidelitas ml-auto btnVal" data-bs-toggle="modal"
                    data-bs-target="#modalSitios" id="btnNew">Agregar Sitio</button>
            </div>
        </div>
        <table class="table table-condensed table-striped mb-4" id="tablaSitios">
            <thead>
                <tr class="table-header-fidelitas">
                    <th class="text-center">ID</th>
                    <th class="text-center">Nombre</th>
                    <th class="text-center">Titulo</th>
                    <th class="text-center">Logo</th>
                    <th class="text-center">Web</th>
                    <th class="text-center">Accion</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($tabla as $sitios)
                    <tr>
                        <td class="text-center-left">{{ $sitios->web_id }}</td>
                        <td class="text-center">{{ $sitios->web_title }} </td>
                        <td class="text-center">{{ $sitios->web_name }} </td>
                        <td class="text-center">
                            @if (pathinfo($sitios->uri_logo, PATHINFO_EXTENSION) === 'png' && str_contains($sitios->uri_logo,'http'))
                                <img src="{{ $sitios->uri_logo }}" alt="Logo" class="img-fluid img-thumbnail w-25" />
                            @else
                                <i class="bi bi-exclamation-triangle text-danger" title="No hay logo."></i>
                            @endif
                        </td>
                        <td class="text-center">
                            @php
                                $httpHost = $sitios->http_host;
                                if (strpos($httpHost, 'http://') !== 0 && strpos($httpHost, 'https://') !== 0) {
                                    $httpHost = 'http://' . $httpHost;
                                }
                            @endphp
                            <a href='{{ $httpHost }}' target="_blank">{{ $sitios->http_host }}</a>
                        <td class="text-center" nowrap="nowrap">
                            <a class="btn btn-fidelitas btn-primary editbtn btnVal" data-title="{{ $sitios->web_title }}"
                                data-id="{{ $sitios->web_id }}" 
                                title="Editar"><i class="bi bi-pencil-square"></i></a>
                            <button type="submit"
                                class="btn @if ($sitios->active == '1') btn-danger @else btn-success @endif btn-active-inactive"
                                data-estado="{{ $sitios->active }}"
                                data-title="{{ $sitios->web_title }}" data-id="{{ $sitios->web_id }}" id="btnDesact"> 
                                @if ($sitios->active == '1')
                                    <i class="bi bi-dash-circle" title="Activar"></i>
                                @else
                                    <i class="bi bi-plus-circle" title="Desactivar"></i>
                                @endif
                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <!-- -->
    <div id="modalSitios" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title"></h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modal-body">
                    <!-- Contenido del modal -->
                </div>
            </div>
        </div>
    </div>
    <!-- Modal de Activar/Desactivar Sitio -->
    <div id="modalActivarDesactivar" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <!-- <h5 class="modal-title" id="modalActivarDesactivarTitle">Activar/Desactivar Sitio</h5> -->
                    <h5 class="modal-title" id="modalActivarDesactivarTitle"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>¿Estás seguro de que deseas cambiar el estado de este sitio?</p>
                </div>
                <div class="modal-footer">
                    <form action="/configuracion-sitios/desactivar-sitios" method="post" id="frmActDesactSitio">
                        {{ csrf_field() }}
                        <input type="hidden" name="desactivar">
                        <input type="hidden" name="activo">  
                         <button type="button" class="btn btn-fidelitas" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-fidelitas" id="btnDesactivar">Desactivar</button>
                        <button type="submit" class="btn btn-fidelitas" id="btnActivar">Activar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- -->
@endsection
@section('funcionesJS')
    <script src="{{ asset('/Libreria_CA/Js/funciones_config_sitios.js') }}?v={{ rand() }}"></script>
    <script language="javascript">
        $(document).ready(function() {
            //
            var nameRegex = /^[A-Za-z0-9\s]+$/; // Solo letras y espacios
            var titleRegex = /^[a-zA-Z\s]+$/; // Solo letras y espacios
            var logoRegex = /^\/.*\.png$/; //  .png extension
            var cssRegex = /^\/.*\.css$/; // .css extension
            var bootstrapRegex = /^\/.*\.css$/; //  .css extension
            var iconRegex = /^\/.*(\.ico|\.png)$/; //  .ico extension
            var appIdRegex = /^[0-9]+$/; //Solo numeros
            //var servicioContratadoRegex = /\b(?:47|73|10|null)\b/; //Solo 47, 73, 10 y nulo
            var copyrightRegex = /^[a-zA-Z ]{1,30}$/ //Solo letras y espacios
            var idPlataformaRegex = /^[a-zA-Z ]{1,10}$/; //Solo letras y espacios
            //
            eventosConfigSitios();
            //
            // $(document).on('click', '#btnNew', function() {
            //     $.ajax({
            //         method: 'post',
            //         url: '/configuracion-sitios/agregar_adm_config_sitios',
            //         data: {
            //             '_token': '{{ csrf_token() }}'
            //         },
            //         beforeSend: function() {
            //             $('#modal-body').html('');
            //             $('#modal-title').html('Nuevo Sitio');
            //         },
            //         success: function(data) {
            //             $('#modal-body').html(data);
            //         }
            //     });
            // });
            // //
            // $(document).on('click', '.editbtn', function() {
            //     var id = $(this).data('id');
            //     $.ajax({
            //         method: 'post',
            //         url: '/configuracion-sitios/edit_adm_cfg_sitios',
            //         data: {
            //             'web_id': id,
            //             '_token': '{{ csrf_token() }}'
            //         },
            //         beforeSend: function() {
            //             $('#modal-title').html('Editar Sitio');
            //         },
            //         success: function(data) {
            //             // Actualiza el contenido del modal y muéstralo
            //             $('#modal-body').html(data);
            //             $('#modalSitios').modal('show');
            //         }
            //     });
            // });
            // //
            // $(document).on('click', '#btnCambioEstado', function() {
            //     var id = $(this).data('id');
            //     var estado = $(this).data('estado');
            //     var title = $(this).data('title');
            //     //
            //     $('#frmActDesactSitio [name="desactivar"]').val(id);
            //     $('#frmActDesactSitio [name="activo"]').val(estado);
            //     $('#modalActivarDesactivarTitle').text("Activar/Desactivar Sitio - " + title);
            //     // Actualizar el texto del botón y su clase en función del estado actual
            //     if (estado == 1) {
            //         $('#btnActivar').hide();
            //         $('#btnDesactivar').show();
            //     } else {
            //         $('#btnActivar').show();
            //         $('#btnDesactivar').hide();
            //     }
            //     // Asignar el ID del sitio a los botones de activar/desactivar
            //     $('#btnActivar').data('id', id);
            //     $('#btnDesactivar').data('id', id);
            //     // Mostrar el modal de activar/desactivar
            //     $('#modalActivarDesactivar').modal('show');
            // });
            // // Controlar el evento clic del botón "Desactivar"
            // $(document).on('click', '#btnDesactivar', function() {
            //     var id = $(this).data('id');
            //     // Realizar la petición AJAX para desactivar el sitio con el ID correspondiente
            //     $.ajax({
            //         method: 'post',
            //         url: '/configuracion-sitios/desactivar-sitios',
            //         data: {
            //             'web_id': id,
            //             '_token': '{{ csrf_token() }}'
            //         },
            //         beforeSend: function() {
            //             // Aquí puedes mostrar un spinner de carga o realizar otras acciones previas
            //         },
            //         success: function(data) {
            //             // Actualizar la interfaz de usuario o realizar otras acciones después de desactivar el sitio
            //         }
            //     });
            //     // Cerrar el modal de activar/desactivar
            //     $('#modalActivarDesactivar').modal('hide');
            // });
            // // Controlar el evento clic del botón "Editar"
            // $(document).on('click', '.btnVal', function() {
            //     //
            //     var id = $(this).data('id');
            //     // Valide y envíe el formulario para agregar/editar un sitio
            //     $(document).on('submit', '#modal-body form', function(event) {
            //         event.preventDefault();
            //         // Obtener entradas de formulario
            //         var nameInput = $('#modal-body form input[name="nombre_del_sitio"]');
            //         var titleInput = $('#modal-body form input[name="titulo_del_sitio"]');
            //         var logoInput = $('#modal-body form input[name="logo_del_sitio"]');
            //         var cssInput = $('#modal-body form input[name="css_del_sitio"]');
            //         var bootstrapInput = $('#modal-body form input[name="boostrap_del_sitio"]');
            //         var iconInput = $('#modal-body form input[name="icono_del_sitio"]');
            //         var appIdInput = $('#modal-body form input[name="app_id_del_sitio"]');
            //         var servicioContratadoInput = $(
            //             '#modal-body form select[name="serv_contratado_del_sitio"]');
            //         var copyrightInput = $('#modal-body form input[name="copyright_del_sitio"]');
            //         var idPlataformaInput = $(
            //             '#modal-body form input[name="id_plataforma_del_sitio"]');
                
            //         // Validar name
            //         var name = nameInput.val();
            //         if (!nameRegex.test(name)) {
            //             // Muestreo error mensaje
            //             nameInput.addClass('is-invalid');
            //             return;
            //         }else{
            //             nameInput.removeClass('is-invalid');
            //             //return;
            //         }
            //         // Validar title
            //         var title = titleInput.val();
            //         if (!titleRegex.test(title)) {
            //             // Muestreo error mensaje
            //             titleInput.addClass('is-invalid');
            //             return;
            //         }else{
            //             titleInput.removeClass('is-invalid');
            //             //return;
            //         }
            //         // Validar logo
            //         var logo = logoInput.val();
            //         if (!logoRegex.test(logo)) {
            //             // Muestre error mensaje
            //             logoInput.addClass('is-invalid');
            //             return;
            //         }else{
            //             logoInput.removeClass('is-invalid');
            //             //return;
            //         }
            //         // Validar CSS
            //         var css = cssInput.val();
            //         if (!cssRegex.test(css)) {
            //             // Muestre error mensaje
            //             cssInput.addClass('is-invalid');
            //             return;
            //         }else{
            //             cssInput.removeClass('is-invalid');
            //         }
            //         // Validar Bootstrap
            //         var bootstrap = bootstrapInput.val();
            //         if (!bootstrapRegex.test(bootstrap)) {
            //             // Muestre error mensaje
            //             bootstrapInput.addClass('is-invalid');
            //             return;
            //         }else{
            //             bootstrapInput.removeClass('is-invalid');
            //         }
            //         // Validar icon
            //         var icon = iconInput.val();
            //         if (!iconRegex.test(icon)) {
            //             // Muestre error mensaje
            //             iconInput.addClass('is-invalid');
            //             return;
            //         }else{
            //             iconInput.removeClass('is-invalid');
            //         }
            //         // Validar appId
            //         var appId = appIdInput.val();
            //         if (!appIdRegex.test(appId)) {
            //             // Muestre error mensaje
            //             appIdInput.addClass('is-invalid');
            //             return;
            //         }else{
            //             appIdInput.removeClass('is-invalid');
            //         }
            //         //Servicio contratado
            //         var servicioContratado = servicioContratadoInput.val();
            //         if(!(servicioContratado == '47' || servicioContratado == '10' || servicioContratado == '73'|| servicioContratado == "")){
            //                 servicioContratadoInput.addClass('is-invalid');
            //                 return;
            //             }else{
            //                 servicioContratadoInput.removeClass('is-invalid');
            //         }
            //         // Validar COPYRIGHT
            //         var copyright = copyrightInput.val();
            //         if (!copyrightRegex.test(copyright)) {
            //             // Muestre error mensaje
            //             copyrightInput.addClass('is-invalid');
            //             return;
            //         }else{
            //             copyrightInput.removeClass('is-invalid');
            //         }
            //         // Validar ID Plataforma
            //         var idPlataforma = idPlataformaInput.val();
            //         if (!idPlataformaRegex.test(idPlataforma)) {
            //             // Muestre error mensaje
            //             idPlataformaInput.addClass('is-invalid');
            //             return;
            //         }else{
            //             idPlataformaInput.removeClass('is-invalid');
            //         }                            
            //         this.submit();                      
            //     });
            // });
        });
    </script>
@endsection