@extends('base')
@section('title',"Cargos y Abonos de la cuenta")
@section('extracss')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

    <style>

        .tabladocs{

        }
        .table_container{
            max-height: 400px;
            /* overflow: scroll; */
        }
        .nav .nav-link.active{
            background: var(--primary) !important;
            color: white !important;
            font-weight: bolder;
        }
        .libres{
            background-color: aliceblue !important;
            padding: 10px;
        }
        .primeros{
            padding: 10px;
        }
        button:disabled{
            cursor: not-allowed !important;

        }
        .hidden{
            visibility: hidden
        }
    </style>
@endsection
@section('extrajs')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    {{-- <script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> --}}



    <script>
        function enviarForm(menu){
            if(menu ==1){
                $('#menu').val('cargo_abono');
            }
            if(menu ==2){
                $('#menu').val('cargo');
            }
            if(menu ==3){
                $('#menu').val('abono');
            }
            if(menu ==4){
                $('#menu').val('pago_proveedores');
            }
            if(menu ==5){
                $('#menu').val('ingreso_venta');
            }
         $('#form_tabs').submit();
        }

        $(document).ready(function() {
          $('#cuentas-select').select2();
        //   document.querySelector('#cliente-select').parentElement.querySelector('span.select2-container').style.width="100%"
         });
    </script>

@endsection
@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Cargo y abonos manuales</li>
        </ol>
    </nav>
    @include('sessions')



    <div class="">
     <div class="row">
        <div class="col-md-12">

              <form id="form_tabs" action="{{ route('cuenta.manuales', $id) }}">
                <input type="text" hidden name="id" value="{{ $id }}">
                <input type="text" hidden name="menu" id="menu" value="{{ $menu }}" >
                <nav class="nav nav-pills nav-justified">
                    <button type="button" onclick="enviarForm(1)" class="nav-item nav-link  @if ($menu=='cargo_abono')active @endif ">Cargo y abonos</button>
                    <button type="button" onclick="enviarForm(2)" class="nav-item nav-link @if ($menu=='cargo')active @endif" >cargos</button>
                    <button type="button" onclick="enviarForm(3)" class="nav-item nav-link @if ($menu=='abono')active @endif" >Abonos</button>
                    <button type="button" onclick="enviarForm(4)" class="nav-item nav-link @if ($menu=='pago_proveedores')active @endif" >Pagos a terceros</button>
                    <button type="button" onclick="enviarForm(5)" class="nav-item nav-link @if ($menu=='ingreso_venta')active @endif" >Ingreso de terceros</button>
                </nav>
              </form>

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


            @if ($menu == 'cargo_abono')

                @include('banco.cargosyAbonos.01cargoAbonos')
            @endif

            @if ($menu == 'cargo')
           <br>
               @include('banco.cargosyAbonos.02cargos')
            @endif

            @if ($menu == 'abono')
                <br>
               @include('banco.cargosyAbonos.03abonos')
            @endif


            @if ($menu == 'pago_proveedores')
           <br>
              @include('banco.cargosyAbonos.04pagoTerceros')
            @endif

            @if ($menu == 'ingreso_venta')
              <br>
              @include('banco.cargosyAbonos.05abonodeTerceros')
            @endif


        </div>
     </div>
    </div>



@endsection