@extends('header_nuevo_generico')
@section('main')
<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">Panel de Monotributo</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">
                <a class="btn btn-outline-fidelitas-secondary nuevo-monotributo"><i class="bi bi-person-plus"></i> Nuevo Monotributo</a>
            </div>
            <input type="hidden" id="token" value="{{ csrf_token() }}">
            <div id="fancyTablaUsuarios"></div>
        </div>
    </div>  
    <div class="col-12">
        <div id="fancyTablaMonotributo"></div>
    </div>
</div>
<!-- -->
<div class="modal fade" id="modalAgregarNuevoMonotributo">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-body" id="body_usuario">
            <div class="modal-header">
                <h5 class="modal-title" id="title_monotributo"><span class="tituloMod">Nuevo</span> Monotributo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
                <form name="alta_monotributo" id="alta_monotributo" class="form-signin">
                    <input type="hidden" name="_token"  id="token" value="{{ csrf_token() }}">
                    <input type="hidden" name="accion"  id="accion" value="A">
                    <input type="hidden" name="id_monotributo" id="id_monotributo" >
                    <div class="row justify-content-center my-3">
                        <div class="col-8 col-md-8" id="catInsert">
                            <label class="form-label text-fidelitas" for="categoria">Categoria</label>
                            <input name="categoria" type="text" id="categoria" class="form-control form-control-sm required"  placeholder="categoria" data-format="categoria" value="">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="col-8 col-md-8" style="margin-top:20px;">
                            <label class="form-label text-fidelitas" for="monto">Monto <b>(Ingrese el monto completo)</b></label>
                            <div class="col-md-8">
                                <input name="montoUno" type="number" id="montoUno" class="form-control form-control-sm required" min="1" max="3"  placeholder="ejemplo: 4565657" data-format="monto" value="">
                            </div>
                            <div class="col-md-4" style="margin-left:67%; transform:translateY(-32px);">
                                <input name="montoDos" type="number" id="montoDos" class="form-control form-control-sm required"  placeholder="ejemplo: 45" data-format="monto" value="">
                            </div>
                            <label class="form-label text-fidelitas" for="monto" style="transform:translateY(-32px);">Completar ambos campos</label>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="col-8 col-md-8">
                            <label class="form-label text-fidelitas" for="periodo">Periodo</label>
                            <input name="periodo" type="date" id="periodo" class="form-control form-control-sm required"  placeholder="periodo" data-format="periodo" value="">
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <!-- <input type="hidden" name="user_id"  id="user_id" value=""> -->
                </form>
                <div class="row justify-content-end mt-3 pt-3" style="margin-right:10px;">
                    <div class="col-8 col-md-2 text-end">
                        <button type="button" class="btn btn-sm btn-success px-4 mb-4 add-mod-monotributo" id="add-monotributo">Agregar Monotributo</button>
                        <button type="button" class="btn btn-sm btn-success px-4 mb-4 add-mod-monotributo" id="mod-monotributo">Modificar Monotributo</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('funcionesJS')
<!-- -->
<script src="{{ asset('/Libreria_CA/Js/funciones_monotributo.js') }}?v={{rand()}}"></script>
<script>
    $(document).ready(function(){
        let data = '<?php echo(json_encode($monotributo)); ?>';
        eventosPanelMonotributo(data);   
    });
</script>
@endsection
<style>
    #add-monotributo, #mod-monotributo{
        transform : translateX(-100%);
    }
</style>