@extends('backend-inquiro/header_iv')
@section('main')
<!-- -->
<style>
    .photo img {
        width: 40%;
        object-fit: contain;
        margin-left: 100px;
    }
</style>
<!--  -->
<div class="container-fluid pt-5 mt-5">
    <div class="row justify-content-center my-2">
        <div class="col-xl-12 col-lg-12 col-md-12">
            <h3 class="text-center text-fidelitas">Administrador de Sitios Web</h3>
        </div>
    </div>
    <div class="row justify-content-center mt-3">
        <div class="col-12">
            <div class="col-xl-3 col-lg-6 col-md-12 mb-3 text-start">
                <button type="button" class="btn btn-outline-fidelitas-secondary ml-auto btnVal" data-bs-toggle="modal" data-bs-target="#modalSitios" id="btnNew">Agregar Sitio</button>
            </div>
            <input type="hidden" id="token" value="{{ csrf_token() }}">
            <div id="fancyTablaSitios"></div>
        </div>
    </div>
<div>
<!--MODAL AGREGAR SITIO WEB-->
<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 CAMBIO DE ESTADO DEL SITIO WEB-->
<div id="modalActivarDesactivar" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalActivarDesactivarTitle">Cambiar estado del sitio web</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 del sitio?</p>
            </div>
            <div class="modal-footer">
                <form method="post" id="frmActDesactSitio">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="id">
                    <input type="hidden" name="estado">
                    <button type="button" class="btn btn-fidelitas" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-fidelitas" id="btnDesactivar"><i class="bi bi-x-circle-fill"></i> Desactivar</button>
                    <button type="button" class="btn btn-success" id="btnActivar"><i class="bi bi-check-circle-fill"></i> Activar</button>
                </form>
                <div class="alert alert-success estado_alert_ok" role="alert">
                    Se ha cambiado de estado satisfactoriamente
                </div>
                <div class="alert alert-danger estado_alert" role="alert">
                    Ocurrio un error. Contactarse con sistema
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL EDITAR SITIO WEB -->
<div id='modalEditarSitio' class="modal fade">
    <div class="modal-dialog">
        <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="modalEditar">
                    <!-- Contenido del modal -->
                </div>
            </div>

        </div>

    </div>

</div>
@endsection
@section('funcionesJS')
<script src="{{ URL::asset('Libreria_CA/Js/funciones_config_sitios.js') }}"></script>
<script>
    $(document).ready(function(){
        let data = '<?php echo(json_encode($tabla)); ?>';
        fancyWeb(data); 
        //escondo los alertas del modal de cambio de estado del sitio web
        $('.estado_alert_ok').addClass('d-none')
        $('.estado_alert').addClass('d-none')
        //desactivar web
        $('#btnDesactivar').on('click', function(e) {
            cambioEstado(e)
        });   
        //activar web       
        $('#btnActivar').on('click', function(e) {
            cambioEstado(e)
        });  
    });
    function cambioEstado(e) {
        e.preventDefault();
            var token = $('#frmActDesactSitio [name="_token"]').val();
            var id = $('#frmActDesactSitio [name="id"]').val();
            var estado = $('#frmActDesactSitio [name="estado"]').val();
            $.ajax({
                method: 'post',
                url: '/configuracion-sitios/cambio-estado-sitio',
                data: {'_token': token,'web_id': id,'estado':estado},
                success: function(data) {
                    console.log()
                    if (data > 0) {
                        //$('#modalActivarDesactivar').modal('hide');
                        $('.estado_alert_ok').removeClass('d-none')
                        setTimeout(() => {
                            window.location.replace('/configuracion-sitios/adm_config_sitios');
                        }, 2000);
                    } else {
                        $('.estado_alert').removeClass('d-none')
                    }
                }
            });
    }
</script>       
@endsection