@extends('layouts.app')

@section('content')

<!-- MODAL FORMULARIO -->
<div class="modal fade" id="modal-form" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="form-unidad-tributaria">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Unidad Tributaria</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="unidad_tributaria" class="col-form-label">Unidad Tributaria:</label>
                        <input type="number" class="form-control" id="unidad_tributaria" name="unidad_tributaria">
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="seleccionado" name="seleccionado">
                            <label class="form-check-label" for="seleccionado">
                                Seleccionado:
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-form-update" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="form-unidad-tributaria-update">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Editar Unidad</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="unidad_tributaria" class="col-form-label">Unidad Tributaria:</label>
                        <input type="number" class="form-control" id="unidad_tributaria_update" name="unidad_tributaria">
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="seleccionado_update" name="seleccionado">
                            <label class="form-check-label" for="seleccionado_update">
                                Seleccionado:
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- BOTON MODAL -->
<div class="d-flex justify-content-between align-items-center">
    <button class="btn btn-dark btn-lg" data-bs-toggle="modal" data-bs-target="#modal-form">
        <i class="fas fa-plus"></i> Agregar Unidad Tributaria
    </button>

    <div class="unidadT text-end">
        <h3>Unidad Tributaria vigente:</h3>
        <p id="unidadT-vigente" class="h4 text-center"> </p>
    </div>
</div>

<!-- TABLA -->
<div class="table-responsive m-b-40 m-t-40">
    <table class="table table-borderless table-data3">
        <thead>
            <tr>
                <th>Unidad Tributaria</th>
                <th>Seleccionado</th>
                <th>Fecha de vigencia</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
</div>
@endsection

@section('scripts')
<script>
    // Crear Unidad Tributaria
   $(document).on('submit', '#form-unidad-tributaria', function(e) {
       e.preventDefault();
       console.log("Hola");
       let form = new FormData(this);
       fetch('/api/unidad-tributaria', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
               'Accept': 'application/json'
           },
           body: JSON.stringify({
               unidad_tributaria: form.get('unidad_tributaria'),
               seleccionado: form.get('seleccionado') ? '1' : '0'
           })  
       })
       .then(response => response.json())
       .then(data => {
           $('#modal-form').modal('hide');
           $('#form-unidad-tributaria').trigger('reset');
           $('#alert-content').text(data.message);
           $('#alert').fadeIn();
           crearTabla();
       })
       .catch(error => console.error(error));
   });

   $(document).on('submit', '#form-unidad-tributaria-update', function(e) {
       e.preventDefault();
       console.log("Hola");
       let form = new FormData(this);
       let id = $(this).data('id');
       fetch('/api/unidad-tributaria/' + id + '/actualizar', {
           method: 'PUT',
           headers: {
               'Content-Type': 'application/json',
               'Accept': 'application/json'
           },
           body: JSON.stringify({
               unidad_tributaria: form.get('unidad_tributaria'),
               seleccionado: form.get('seleccionado') ? '1' : '0'
           })  
       })
       .then(response => response.json())
       .then(data => {
           $('#modal-form-update').modal('hide');
           $('#form-unidad-tributaria-update').trigger('reset');
           $('#alert-content').text(data.message);
           $('#alert').fadeIn();
           crearTabla();
       })
       .catch(error => console.error(error));
   });

//    Mostrar datos en la tabla
    function crearTabla(){
        fetch('/api/unidad-tributaria')
        .then(response => response.json())
        .then(data => {
            let tbody = document.querySelector('tbody');
            tbody.innerHTML = '';
            data.data.forEach(element => {
                let tr = document.createElement('tr');
                tr.innerHTML = `
                <td>${element.unidad_tributaria} Bs.</td>
                <td>${element.seleccionado == '1' ? 'Vigente' : 'No vigente'}</td>
                <td>${element.created_at}</td>
                <td>
                    <button class="btn btn-dark btn-sm seleccionado" data-id="${element.id}" onclick="cambioSeleccionado(${element.id}, '${element.seleccionado}')">
                        <i class="fas fa-check"></i>
                    </button>
                    <button class="btn btn-dark btn-sm" data-id="${element.id}" onclick="editarUnidadTributaria(${element.id})">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-danger btn-sm eliminar" data-id="${element.id}" onclick="eliminarUnidadTributaria(${element.id})">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
                `;
                tbody.appendChild(tr);
            });
        })
        .catch(error => console.error(error));
    }

    function editarUnidadTributaria(id){
        fetch('/api/unidad-tributaria/' + id)
        .then(response => response.json())
        .then(data => {
            $('#unidad_tributaria_update').val(data.data.unidad_tributaria);
            $('#seleccionado_update').prop('checked', data.data.seleccionado == '1');
            $('#form-unidad-tributaria-update').data('id', id);
            $('#modal-form-update').modal('show');
        })
        .catch(error => console.error(error));
    }

    // Cambiar seleccionado
    function cambioSeleccionado(id, seleccionado){
        console.log(id);
        console.log(seleccionado);
    fetch('/api/unidad-tributaria/' + id, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            seleccionado: seleccionado
        })
    })
    .then(response => response.json())
    .then(data => {
        $('#alert-content').text(data.message);
        $('#alert').fadeIn();
        crearTabla();
        mostrarUnidadTributariaVigente();
    })
    .catch(error => console.error(error));
}

// Eliminar Unidad Tributaria
$(document).on('click', '.eliminar', function() {
    let id = $(this).data('id');
    if(confirm('Estas seguro de eliminar la unidad tributaria?')) {
        fetch('/api/unidad-tributaria/' + id, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            $('#alert-content').html(data.message);
            $('#alert').fadeIn();
            crearTabla();
        })
        .catch(error => console.error(error));
    }
});

// Mostrar unidad tributaria vigente
function mostrarUnidadTributariaVigente() {
    fetch('/api/unidad-tributaria/vigente')
        .then(response => response.json())
        .then(data => {
            $('#unidadT-vigente').text(data.data.unidad_tributaria + ' Bs.');
        })
        .catch(error => console.error(error));
}
    
    crearTabla();
    mostrarUnidadTributariaVigente();

</script>
@endsection