@push('styles')

<style> 

    .card { 
        margin-left: 25px;
        margin-right: 5%;
        padding: 30px;
    }

    .contain-body button {
    margin-right: 1%; 
    }

    .border-right{ 
        border-right: 2px solid #ccc;
    }

    input{ 
        padding: 5px;
        margin-top: 10px !important;
        margin-left: 10px !important;
        margin-bottom: 45px !important;
        margin-right: 10px !important;
        font-size: .925rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        background-color: var(--bs-secondary-bg);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        appearance: none;
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        height: 35px !important;
        width: 100% !important;

    }

    .input{ 
        padding: 5px;
        margin-top: 10px !important;
        margin-left: 10px !important;
        margin-bottom: 25px !important;
        margin-right: 10px !important;
        height: 35px !important;
    }

    .label-totales{ 
        margin-top: 35px !important;
        text-align: center ;
    }

    .label-subtotales{ 
        margin-top: 35px !important;
        text-align: center ;
    }

    .margin-button{ 
        margin-right: 20px;
    }

    .btn-color{ 
        background-color: #1fa8e0; 
        color: white;
    }
    h3 {
        margin-bottom: 50px !important;
        font-size: 1.5rem !important;
        /* color: #1fa8e0 !important; */
        color: #1fa8e0;
        padding-right: 0 !important;
        text-align: start;
    }

    h1 { 
        margin-top: 20px !important;
        margin-bottom: 0;
    }

    p{ 
        font-weight: 500;
        margin-left: 10px;
        font-size: 18px;
        margin-bottom: 20px !important;
        height: 30px !important;
        color: var(--bs-heading-color);

    }

    .flujo-positivo{ 
       color: green;
    }

    .flujo-negativo{ 
       color: #B81C00 ;
    }

    .input-center{ 
        text-align: center;
    }

    .tab-container{ 
        margin-top: 50px;
        padding-right: 120px;
        padding-left: 40px;
    }

    .modal-nuevo {
        display: flex;
        position: fixed;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .modal-nuevo button {
        font-size: 18px;
        margin: 15px;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 70px;
        padding-right: 70px;
    }

    .modal-content {
        padding: 20px;
        width: 550px !important;
        height: 200px;
    }

    h5.modal-title{ 
        margin-top: 10px;
        color: #ed5555;
        font-size: 1.5rem;
    }
    h6{ 
        margin-top: 10px;
        color: var(--bs-heading-color);
        font-weight: 500;
    }

    .botonera{ 
        margin-top: 20px;
    }
</style>
@endpush
@section('title')
    Flujo
@endsection

@section('css')

@endsection
@section('page-title')
    Flujo
@endsection


<div>
    @can('generar flujo')
    <h1> Generar Flujo </h1>


    <div class="row">
        <div class="col-12 tab-container">

                <ul class="row nav nav-tabs nav-tabs-custom nav-justified" role="tablist">

                <div class="col-2">
                    <li class="nav-item" wire:click="cambiarTab('{{$empresaDefault->id}}')">
                        <a class="nav-link {{ $activeTab == $empresaDefault->id ? 'active' : '' }}" data-bs-toggle="tab" href="#tab-{{ $empresaDefault->id }}"  role="tab">
                            <span class="d-block d-sm-none"><i class="fas fa-home"></i></span>
                            <span class="d-none d-sm-block">{{$empresaDefault->nombre}}</span>
                        </a>
                    </li>
                </div>

                @foreach($empresas as $empresa)
                <div class="col-2">
                    <li class="nav-item  " wire:click="cambiarTab('{{$empresa->id}}')">
                        <a class="nav-link {{ $activeTab == $empresa->id ? 'active' : '' }}" data-bs-toggle="tab" href="#tab-{{ $empresa->id }}"  role="tab">
                            <span class="d-block d-sm-none"><i class="fas fa-home"></i></span>
                            <span class="d-none d-sm-block">{{$empresa->nombre}}</span>
                        </a>
                    </li>
                </div>
    
                @endforeach    
                </ul>
            </div>
    </div>
    <div class="card"> 

        <div class="row">
    

            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 border-right row"> 
                <h3 class="col-12">Activo circulante</h3>
                 
                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Inventario Nuevos</p>
                <input id="number-mask1" class="input" type="number" wire:model="inventario_nuevos" placeholder="Inserte la cantidad en inventario" >
                </div>
                
                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Valor Nuevos</p>
                <input  
                    id="number-mask"  type="text" wire:model="valor_nuevos" placeholder="Inserte el valor monetario por unidad" wire:keyup="actualizarSuma()">
                </div>

                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Inventario Seminuevos</p>
                <input  type="number" wire:model="inventario_seminuevos" placeholder="Inserte la cantidad en inventario">
    

                </div>
                
                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Valor Seminuevos</p>
                <input id="number-mask2" type="text" wire:model="valor_seminuevos" placeholder="Inserte el valor monetario por unidad" wire:keyup="actualizarSuma()">

                </div>
                
              <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
              <p>Cobranzas Ventas</p>
              <input id="number-mask3" type="text" wire:model="cobranzas_ventas" placeholder="Cobranzas Ventas" wire:keyup="actualizarSuma()">
              </div>
                
              <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Cobranzas Postventa</p>                
                <input id="number-mask4" type="text" wire:model="cobranzas_postventas"  placeholder="Cobranzas Postventa" wire:keyup="actualizarSuma()">


              </div>
               
                
                 <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                    <p>Bancos</p>
                    <input id="number-mask5"  type="text" wire:model="bancos"  placeholder="Bancos"  wire:keyup="actualizarSuma()">

                 </div>

                 <div  class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                    <p>Anticipos</p>

                 <input id="number-mask6" type="text" wire:model="anticipos" placeholder="Anticipos" wire:keyup="actualizarSuma()">

                 </div>
                
                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                    <p>Préstamo A</p>
                    <input id="number-mask7" type="text" wire:model="prestamos" placeholder="Prestamos" wire:keyup="actualizarSuma()">
                </div>

                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                    <p>Préstamo B</p>
                    <input id="number-mask23" type="text" wire:model="prestamos_B" placeholder="Prestamos" wire:keyup="actualizarSuma()">
                </div>

                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                    <p>Por Cobrar</p>
                    <input id="number-mask8" type="text" wire:model="por_cobrar"  placeholder="Por cobrar" wire:keyup="actualizarSuma()">
                </div>       
                
                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                    <p>Inventario Refacciones</p>
                    <input id="number-mask18" type="text" wire:model="inventarioRefacciones"  placeholder="Inventario de refacciones" wire:keyup="actualizarSuma()">
                </div>    
                
                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                    <p>Depósito Garantía Renta</p>
                    <input id="number-mask19" type="text" wire:model="garantia"  placeholder="Depósito de garantía de renta" wire:keyup="actualizarSuma()">
                </div>      

                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                    <p>Incentivos por cobrar</p>
                    <input id="number-mask20" type="text" wire:model="incentivos"  placeholder="Incentivos sin cobrar" wire:keyup="actualizarSuma()">
                </div> 

                <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                    <p>Activo Fijo (obras y Equipos)</p>
                    <input id="number-mask21" type="text" wire:model="obrasequipos"  placeholder="Activo Fijo (obras y Equipos)" wire:keyup="actualizarSuma()">
                </div> 
                
                <div class="col-12 row justify-content-center">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                        <h5 class=" label-subtotales">Ingresos Total:</h5>
                        <input  id="number-mask9" class="input-center" disabled type="text" wire:model="ingresos_total" >
                    </div>
                </div>
              
            </div>


            
               
              

            <div class="col-md-6 row" style="margin-left: 30px;">
            <h3 class="col-12">Pasivos</h3>

            <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">                
            <p>Plan BBVA</p>    
            <input id="number-mask10" type="text" wire:model="plan_bbva" placeholder="Plan BBVA" wire:keyup="actualizarSuma()">


            </div>

            <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Plan Banorte</p>
                <input id="number-mask11" type="text" wire:model="plan_banorte"  placeholder="Plan Banorte" wire:keyup="actualizarSuma()">


            </div>

            <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Préstamo A</p>
                <input id="number-mask21" type="text" wire:model="prestamosA" placeholder="Préstamos A" wire:keyup="actualizarSuma()"> 
            </div>

            <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Préstamo B</p>
                <input id="number-mask12" type="text" wire:model="prestamosB" placeholder="Préstamos B" wire:keyup="actualizarSuma()"> 
            </div>

            <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Intereses por pagar</p>
                <input id="number-mask22" type="text" wire:model="intereses" placeholder="Intereses sin pagar" wire:keyup="actualizarSuma()"> 
            </div>
                
            <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12" >
                <p>Planta</p>
                <input id="number-mask13" type="text" wire:model="planta" placeholder="Planta" wire:keyup="actualizarSuma()">
            </div>

            <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <p>Anticipos Sin Aplicar</p>
                <input id="number-mask14" type="text" wire:model="anticipos_sinAplicar" placeholder="Anticipos sin aplicar" wire:keyup="actualizarSuma()">
            </div>
                
            <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12" >
                <p>Otros</p>
                <input id="number-mask15"  type="text" wire:model="otros" placeholder="Otros" wire:keyup="actualizarSuma()">
            </div>
                
                

                <div class="col-12 input"> </div>
                <div class="col-12 input"> </div>
                <div class="col-12 input"> </div>
                <div class="col-12 input"> </div>
                <div class="col-12 input"> </div>


                <div class="col-12 row justify-content-center">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                        <h5 class="label-subtotales" >Deuda Total:</h5>
                        <input id="number-mask16" class="input-center" disabled type="text" wire:model.live="deuda_total" >
                    </div>
                   
                </div>
            </div>

           
            <div class="col-12 row justify-content-center label-totales"> 
                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3" >
                <h5> Total Flujo:</h5>
                <input  id="number-mask17" class="{{ $positivo ? 'flujo-positivo input-center' : 'flujo-negativo input-center' }}" disabled type="text" wire:model.live="total_flujo" >
                </div>
              
                
            </div>



            <div class="row justify-content-end label-totales">
            <button wire:click="cancelar()" type="button" class="btn btn-secondary btn-rounded waves-effect waves-light col-xl-2 col-lg-2 col-md-4 col-sm-4 margin-button"><a class="text-white " href="dashboard">Cancelar</a></button>

                <button class="col-xl-2 col-lg-2 col-md-4 col-sm-4 btn btn-color btn-rounded waves-effect waves-light" wire:click="generarFlujo()">Guardar flujo</button>
            </div>
        </div>

        @if($modal === true) 
            
           
            <div class="modal-nuevo" tabindex="-1" role="dialog"
                               >
                                <div class="modal-dialog modal-dialog-centered ">
                                    <div class="card contenido-modal" style="margin-right: 25px;" >
                                    <div class="modal-content" >

                                        <div class="d-flex justify-content-center texto-principal" style="text-align: center;">
                                                <h5 class="modal-title" >Hay datos ingresados, estos se perderán</h5>
                                        </div> 
                                    
                                        <div class="d-flex elemento justify-content-center">
                                            <h6> ¿Desea cambiar de pestaña de todas formas? </h6>
                                        </div>

                                        
                                        <!-- <div class="d-flex justify-content-center fw-semibold font-size-20 texto-terciario"  >

                                        ¡Esta acción es irreversible!
                                        </div> -->

                                        <div class="d-flex flex-wrap justify-content-center botonera" >
                                            
                                            <button class="btn btn-secondary" wire:click="cambiarModal()">Cancelar</button>

                                            <button class="btn btn-danger" wire:click="cambiarDatoTab()">Cambiar</button>

                                        </div>
                                    
                                    </div>

                                      
                                        

                                </div><!-- /.modal-dialog -->
                            </div>
                            </div><!-- /.modal -->
        @endif  
       
        


    </div>

   @endcan

</div>



@section('scripts')

<script src="{{ URL::asset('build/libs/imask/imask.min.js') }}"></script>

    <script>
        Livewire.on('change', function(data){ 
            function applyMask(id) {
                IMask(document.getElementById(id),{
                    mask: '$num',
                    blocks: {
                        num: {
                            mask: Number,
                            thousandsSeparator: ','
                        }
                    }
                });
            }

            for (let i = 1; i < 24; i++) {
                let id = 'number-mask' + (i === 1 ? '' : i); 
                applyMask(id);
            }

            setTimeout(() => {
                applyMask('number-mask9');
                applyMask('number-mask16');
            }, 500); 
            setTimeout(() => {
                applyMask('number-mask17');
            }, 2000); 
        });

    </script>

    <script>
        Livewire.on('validar', function(data){ 
            let cambios = data[0];
            console.log(cambios);
            if (cambios == true) {
                event.preventDefault();
                Livewire.dispatch('cambiarModal');
            }
        });
    </script>

    <script>
        function logout() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route('logout') }}';
            form.style.display = 'none';

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = csrfToken;

            form.appendChild(csrfInput);

            document.body.appendChild(form);

            form.submit();
        }
    </script>

        <script>
            const body = document.body;

            document.addEventListener('readystatechange', function () {
                document.addEventListener('set-tema', function (data) {
                    body.setAttribute('data-bs-theme', data.detail.tema);
                    });

            });


            document.addEventListener('cambiar-tema', function (data) {
                    body.setAttribute('data-bs-theme', data.detail.tema);
                });
            
            document.addEventListener('cambiar-tamaño', function (data) {
                if (body.getAttribute('data-sidebar-size') =='sm') {
                    body.setAttribute('data-sidebar-size', '');
                    localStorage.setItem('size', '');

                } else {
                body.setAttribute('data-sidebar-size', 'sm');
                // localStorage.setItem('size', 'sm');

                }

            });
    

        </script>
@endsection