<?php use_helper( 'UrlFunctions' ); ?>
<?php use_helper( 'IncludePartial' ); ?>
<?php use_helper( 'UtilFunctions' ); ?>

<script type="text/javascript">
showAlertBootStrap = function( elm_id_content, class_default, message_alert )
{
    var html_alert = '<div class="alert ' + class_default + ' alert-dismissible fade show" role="alert"> ' +
            '' + message_alert +
            '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span>' +
            '</button>' +
        '</div>';
    $( "#" + elm_id_content ).append( html_alert );
}
</script>

<script type="text/javascript">
validacionExtra = function()
{
    //aqui una de las validaciones seria los detalles
    var a_elms = $( "#content_grid" ).find( "input[name='MontoTotal[]']" );
    if( a_elms.length <= 0 )
    {
        showAlertBootStrap( 'content_alert', 'alert-danger', "No se encontro Detalles." );
        $( '#myTab li:nth-child( 2 ) a' ).tab( 'show' );
        return false;
    }
    var SumaTotalValor = $( "#SumaMontoTotal" ).val();
    if( $( "#SumaMontoTotal" ).val() != "" )
    {
        var SumaTotal = parseFloat( SumaTotalValor );
        pr( SumaTotal );
        if( SumaTotal <= 0 )
        {
            showAlertBootStrap( 'content_alert', 'alert-danger', "Se necesita especificar las lineas." );
            $( '#myTab li:nth-child( 2 ) a' ).tab( 'show' );
            return false;
        }
    }
    else
    {
        showAlertBootStrap( 'content_alert', 'alert-danger', "No se encontro Detalles." );
        $( '#myTab li:nth-child( 2 ) a' ).tab( 'show' );
        return false;
    }

    return true;
}

ejecutarGuardar = function()
{
    if( !validacionExtra() )
    {
        return false;
    }

    x = confirm( "Esta seguro de guardar todos los cambios" );
    if( x )
    {
        //mostrarCargaImg();
        blockContent( 'content_buttons' );
        var strFormSerialize = $( 'form' ).serialize();

        executeAjaxJson
        ( 
            "<?php echo buildUrl( 'cajachica/guardarCajaChicaDet', "" ) ?>", 
            strFormSerialize,
            function( o_json )
            {
                unBlockContent( 'content_buttons' );
                if( o_json.error )
                {
                    showAlertBootStrap( 'content_alert', 'alert-danger', o_json.mensaje_error );
                    return false;
                }
                
                location.href = "<?=buildUrl( 'cajachica/listDetalles' )?>";
            } 
        );
    }
    return false;
}
</script>

<div class="shadow-sm p-3 mb-2 bg-white rounded card card-body">
    <div class="row">
        <div class="col mb-1">
            <h4 class="text-info text-nowrap mb-0"><?=$s_Titulo?></h4>
        </div>
        <?php if( $s_TipoProc != "nvo" ){ ?>
        <div class="col mb-1 text-right">
            <h5><?=$o_ObjectBN->getEstadoDesc()?></h5>
        </div>
        <?php } ?>
    </div>
</div>

<div id="content_alert" style=""></div>

<form name="form1" id="form1" method="POST" action="" onsubmit="return ejecutarGuardar();" class="needs-validation"  enctype="multipart/form-data">
    <input type="hidden" name="s_TipoProc" id="s_TipoProc" value="<?=$s_TipoProc?>">
    <input type="hidden" name="TypeSub" id="TypeSub" value="1">
    <input type="hidden" name="i_Id" id="i_Id" value="<?=$i_Id?>">
    <input type="hidden" name="EsInventariableFlag" id="EsInventariableFlag" value="N">

    <ul class="nav nav-tabs m-1" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Principal</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Detalle</a>
        </li>
        <?php if( $o_ObjectBN->getIdCajaDet() ){ ?>
        <li class="nav-item">
            <a class="nav-link" id="fileup-tab" data-toggle="tab" href="#fileup" role="tab" aria-controls="fileup" aria-selected="false">Archivos</a>
        </li>
        <?php } ?>
    </ul>

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">

            <div class="form-row mx-0">
                <div class="col-md-6 mb-1">
                    <label class="col-form-label" for="">Fecha</label>
                    <input type="text" class="form-control text-center" name="FechaDocumento" id="FechaDocumento" placeholder="" value="<?=$o_ObjectBN->getFechaDocumento()?>" onblur="" required readonly="readonly" >
                    <script type="text/javascript">
                    // $( "#FechaDocumento" ).datepicker( { dateFormat: "yy-mm-dd", changeYear:true, yearRange: "-1:+1", changeMonth: true, onClose: function (){ this.focus(); } } );
                    </script>
                </div>
                <div class="col-md-6 mb-1">
                    <label class="col-form-label" for="TipoDocProv">Proveedor</label>
                    <div class="form-inline">
                        <select class="form-control w-25" name="TipoDocProv" id="TipoDocProv" required>
                            <option value=""> Tipo Doc </option>
                            <option value="DNI" <?php if( $o_ObjectBN->getTipoDocProv()=="DNI" ){ echo "SELECTED"; } ?> > DNI </option>
                            <option value="RUC" <?php if( $o_ObjectBN->getTipoDocProv()=="RUC" ){ echo "SELECTED"; } ?> > RUC </option>
                        </select>
                        <input type="text" class="form-control w-75" name="NumDocProv" id="NumDocProv" placeholder="Numero" value="<?=$o_ObjectBN->getNumDocProv()?>" required>
                    </div>
                    <input type="text" class="form-control" name="NomProv" id="NomProv" placeholder="Nombre Completo" value="<?=$o_ObjectBN->getNomProv()?>" required>
                </div>
            </div>

            <div class="form-row mx-0">
                <div class="col-md-6 mb-1">
                    <label for="Comentario" class="col-form-label">Comentario:</label>
                    <textarea class="form-control" name="Comentario" id="Comentario" rows="2"><?=$o_ObjectBN->getComentario()?></textarea>
                </div>

                <div class="col-md-6 mb-1">
                    <label class="col-form-label" for="ReferenciaTipoDocumento">Tipo de Referencia</label>
                    <select class="form-control" name="ReferenciaTipoDocumento" id="ReferenciaTipoDocumento" required>
                        <option value=""> - Seleccione - </option>
                        <?php foreach ( $a_ALM_TipoDocumento as $i_Key => $o_ALM_TipoDocumentoBN ){ ?>
                        <option value="<?=$o_ALM_TipoDocumentoBN->getIdTipoDocumento()?>" <?php if( $o_ObjectBN->getReferenciaTipoDocumento()==$o_ALM_TipoDocumentoBN->getIdTipoDocumento() ){ echo "SELECTED"; } ?> > <?=utf8_encode( $o_ALM_TipoDocumentoBN->getDescripcion() )?> </option>
                        <?php } ?>
                    </select>
                    <div class="form-inline">
                        <input type="text" class="form-control w-25" name="ReferenciaSerieDocumento" id="ReferenciaSerieDocumento" value="<?=$o_ObjectBN->getReferenciaSerieDocumento()?>" placeholder="Serie" required>
                        <?php if( $s_TipoProc != "nvo" ){ ?><h5>-</h5><?php } ?>
                        <input type="text" class="form-control w-75" name="ReferenciaNumeroDocumento" id="ReferenciaNumeroDocumento" value="<?=$o_ObjectBN->getReferenciaNumeroDocumento()?>" placeholder="No Documento" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <?php if( $s_TipoProc == "nvo" ){ ?>
            <div class="col mb-1 text-right">
                <button id="btnAgregar" type="button" class="btn btn-primary">Agregar Item</button>
            </div>

            <script type="text/javascript">
            $( "#btnAgregar" )
            .click
            (
                function()
                {
                    $( "#content_nvo" ).append( $( "#content_copy_nvo" ).html() );
                    $( "#content_nvo tr:last input:first" ).focus();
                }
            );
            </script>
            <?php } ?>
            <div class="table-responsive" id="content_grid">
                <table class="table table-bordered table-hover"> <!-- table-sm -->
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">Descripcion</th>
                            <th scope="col" class="text-center">Cantidad</th>
                            <th scope="col" class="text-center">Precio Unit</th>
                            <th scope="col" class="text-center">Total</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody id="content_nvo">
                        <?php if( $o_ObjectBN->getCantRegCajaChicaItem() ){ ?>
                            <?php foreach ( $o_ObjectBN->getArrayCajaChicaItem() as $key => $o_ALM_CajaChicaItemBN ) { ?>
                                <tr>
                                    <td><input type="text" class="form-control" name="Descripcion" id="Descripcion_<?=$key?>" value="<?=$o_ALM_CajaChicaItemBN->getDescripcion()?>"></td>
                                    <td class="text-center"><input type="text" class="form-control text-center" name="Cantidad" id="Cantidad_<?=$key?>" value="<?=$o_ALM_CajaChicaItemBN->getCantidad()?>"></td>
                                    <td class="text-center"><input type="text" class="form-control text-right" name="MontoUnitarioConIGV" id="MontoUnitarioConIGV_<?=$key?>" value="<?=$o_ALM_CajaChicaItemBN->getMontoUnitarioConIGV()?>"></td>
                                    <td class="text-center"><input type="text" class="form-control text-right" name="MontoTotal" id="MontoTotal_<?=$key?>" value="<?=$o_ALM_CajaChicaItemBN->getMontoTotal()?>" readonly=""></td>
                                    <td style="vertical-align: middle; text-align: center;">
                                        
                                    </td>
                                </tr>
                            <?php } ?>
                        <?php } ?>
                    </tbody>

                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td style="text-align: right;"><b>TOTAL:</b></td>
                            <td  class="text-center">
                                <input type="hidden" name="SumaMontoSubTotal" id="SumaMontoSubTotal" value="">
                                <input type="hidden" name="SumaMontoIGV" id="SumaMontoIGV" value="">
                                <input type="text" class="form-control text-right" name="SumaMontoTotal" id="SumaMontoTotal" value="<?=$o_ObjectBN->getMontoTotal()?>" readonly="">
                            </td>
                            <td style=""></td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
        <?php if( $o_ObjectBN->getIdCajaDet() ){ ?>
        <div class="tab-pane fade" id="fileup" role="tabpanel" aria-labelledby="fileup-tab">

            <div class="form-row mx-0">
                <div class="col-md-8 mb-1">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="customFile" name="customFile"  lang="es">
                        <label class="custom-file-label" for="customFile">Seleccionar Archivo</label>
                    </div>
                </div>
                <div class="col-md-4 mb-1">
                    <input type="hidden" name="TipoOpeArchivo" id="TipoOpeArchivo" value="NUEVO">
                    <input type="hidden" name="SecuenciaArchivo" id="SecuenciaArchivo" value="">
                    <button type="button" class="btn btn-info btn-block" onclick="$( '#SecuenciaArchivo' ).val( '' ); $( '#TipoOpeArchivo' ).val( 'NUEVO' ); guardarArchivo();">Guardar Archivo</button>
                </div>
            </div>

            <script>
            $( ".custom-file-input" ).on
            (
                "change", 
                function() 
                {
                    var fileName = $( this ).val().split( "\\" ).pop();
                    $( this ).siblings( ".custom-file-label" ).addClass( "selected" ).html( fileName );
                }
            );
            </script>

            <hr noshade="noshade" align="center" style="border-color: #CFCFCF;  color: #CFCFCF; height: 0.1px; text-align: center;">
            
            <div class="table-responsive" id="content_archivos">
                <table class="table table-bordered table-hover"> <!-- table-sm -->
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">&nbsp;</th>
                            <th scope="col" class="text-center">Nombre</th>
                            <th scope="col" class="text-center">Tipo</th>
                            <th scope="col" class="text-center">Fecha</th>
                            <th scope="col" class="text-center">Usuario</th>
                            <th scope="col" class=""></th>
                        </tr>
                    </thead>
                    <tbody id="">
                        <?php foreach ( $o_ObjectBN->getArrayCajaChicaArchivos() as $i_Key => $o_ALM_CajaChicaArhivosBN ) { ?>
                        <tr>    
                            <td align="center"><?=$i_Key+1?></td>
                            <td> <?=$o_ALM_CajaChicaArhivosBN->getNombre()?> </td>
                            <td align="center"> <?=$o_ALM_CajaChicaArhivosBN->getTipo()?> </td>
                            <td align="center"> <?=substr( $o_ALM_CajaChicaArhivosBN->getFechaCreacion(), 0, 10 )?> </td>
                            <td align="center"> <?=$o_ALM_CajaChicaArhivosBN->getUsuarioCreacion()?> </td>
                            <td align="center">
                                <button class="btn" title="" onclick="window.open( '<?=$o_ALM_CajaChicaArhivosBN->getUbicacionURL()?>', '_BLANK' ); return false;"> <img src="<?=getUrlImage( "btnDisplay.gif" )?>" title="Ver Documento" style="cursor:pointer"> </button> 
                                <button class="btn" title="" onclick="$( '#SecuenciaArchivo' ).val( '<?=$o_ALM_CajaChicaArhivosBN->getIdSecuencia()?>' ); $( '#TipoOpeArchivo' ).val( 'ELIMINAR' ); guardarArchivo(); return false;">
                                    <img src="<?=getUrlImage( "btnDelete.gif" )?>" title="Eliminar" style="cursor:pointer">
                                </button> 
                            </td>
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>

            </div>

        </div>
        <?php } ?>
    </div>
    <?php if( $s_TipoProc == "nvo" ){ ?>
    <div class="form-row mx-0" id="content_buttons">
        <div class="col-md-6 mb-1">
            <button type="button" class="btn btn-primary btn-lg btn-block" onclick="location.href='<?php echo buildUrl( 'cajachica/listDetalles' ) ?>'">CANCELAR</button>
        </div>
        <div class="col-md-6 mb-1">
            <button type="submit" id="myButton" class="btn btn-primary btn-lg btn-block" onclick="$( '#TypeSub' ).val( '1' );">GRABAR Y SALIR</button>
        </div>
    </div>
    <?php } ?>

</form>

<div style="display: none;">
    <table>
        <tbody id="content_copy_nvo">
            <tr>
                <td><input type="text" class="form-control" name="Descripcion[]"></td>
                <td><input type="text" class="form-control text-center" name="Cantidad[]" onblur="calcularTotal( this );" onfocus="this.select()" onkeypress="return NumCheckDecimal( event, this );"></td>
                <td><input type="text" class="form-control text-right" name="MontoUnitarioConIGV[]" onblur="calcularTotal( this );" onfocus="this.select()" onkeypress="return NumCheckDecimal( event, this );"></td>
                <td><input type="text" class="form-control text-right" name="MontoTotal[]" onkeypress="return false;" readonly=""></td>
                <td style="vertical-align: middle; text-align: center;">
                    <input type="hidden" name="MontoSubTotal[]" value="">
                    <input type="hidden" name="MontoIGV[]" value="">
                    <button class="btn" title="" onclick="eliminarLinea( this );"> <img src="<?=getUrlImage( "btnDelete.gif" )?>" title="Eliminar" onclick="" style="cursor:pointer"> </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
guardarArchivo = function()
{
    if( $( '#SecuenciaArchivo' ).val() == ""  )
    {
        if( $( "#customFile" ).val() == "" )
        {
            showAlertBootStrap( 'content_alert', 'alert-danger', "Seleccione un archivo." );
            return false;
        }
    }
    x = confirm( "Esta seguro de realizar el procedimiento?" );
    if( x )
    {
        blockContent( 'content_archivos' );
        var formData = new FormData( document.getElementById( "form1" ) );
        $.ajax
        (
            {
                url: '<?php echo buildUrl( 'cajachica/guadarArchivoCjaChi', "" ) ?>',
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function ( response )
                {
                    var o_json = jQuery.parseJSON( response );
                    unBlockContent( 'content_archivos' );
                    if( o_json.error )
                    {
                        showAlertBootStrap( 'content_alert', 'alert-danger', o_json.mensaje_error );
                        return false;
                    }
                    location.reload();
                }
            }
        );
    }
}
</script>

<script type="text/javascript">
eliminarLinea = function( elm )
{
    pr( "ingresa para eliminar linea" );
    $( $( elm ).closest( 'tr' ) ).remove();
    calcularSumaTotal();
}

calcularTotal = function( elm_sel )
{
    var MontoUnitarioConIGV = $( $( elm_sel ).closest( 'tr' ) ).find( "input[name='MontoUnitarioConIGV[]']" ).val();
    if( MontoUnitarioConIGV != "" )
    {
        var Cantidad = $( $( elm_sel ).closest( 'tr' ) ).find( "input[name='Cantidad[]']" ).val();
        if( Cantidad != "" )
        {
            var Cantidad = parseFloat( $( $( elm_sel ).closest( 'tr' ) ).find( "input[name='Cantidad[]']" ).val() );
            pr( "Cantidad -> "  + Cantidad );

            var PrecioUnitario = parseFloat( MontoUnitarioConIGV );
            pr( "PrecioUnitario -> " + PrecioUnitario );

            var TotalNeto = PrecioUnitario * Cantidad;
            var SubTotal  = redondear( TotalNeto / 1.18, 13 );
            var IGVTotal  = redondear( SubTotal * 0.18, 13 );

            IGVTotal  = redondear( IGVTotal, 2 );
            SubTotal  = redondear( SubTotal, 2 );

            pr( " SubTotal -> " + SubTotal );
            pr( "IGVTotal -> " + IGVTotal );
            pr( "TotalNeto -> " + TotalNeto );
            
            $( $( elm_sel ).closest( 'tr' ) ).find( "input[name='MontoSubTotal[]']" ).val( SubTotal );
            $( $( elm_sel ).closest( 'tr' ) ).find( "input[name='MontoIGV[]']" ).val( IGVTotal );
            $( $( elm_sel ).closest( 'tr' ) ).find( "input[name='MontoTotal[]']" ).val( TotalNeto );

            calcularSumaTotal();
        }
    }
}

calcularSumaTotal = function()
{
    pr( "ingresa 1" );
    var a_elms = $( "#content_grid" ).find( "input[name='MontoTotal[]']" );
    var SumaTotal = 0;
    a_elms.each
    (
        function( index, elements )
        {
            if( $( elements ).val() != "" )
            {
                var MontoTotal = parseFloat( $( elements ).val() );
                SumaTotal = SumaTotal + MontoTotal;
            }
        }
    );
    $( "#SumaMontoTotal" ).val( SumaTotal );

    pr( "ingresa 2" );
    var a_elms = $( "#content_grid" ).find( "input[name='MontoSubTotal[]']" );
    var SumaSubTotal = 0;
    a_elms.each
    (
        function( index, elements )
        {
            if( $( elements ).val() != "" )
            {
                var MontoTotal = parseFloat( $( elements ).val() );
                SumaSubTotal = SumaSubTotal + MontoTotal;
            }
        }
    );
    $( "#SumaMontoSubTotal" ).val( SumaSubTotal );
    
    pr( "ingresa 3" );
    var a_elms = $( "#content_grid" ).find( "input[name='MontoIGV[]']" );
    var SumaMontoIGV = 0;
    a_elms.each
    (
        function( index, elements )
        {
            if( $( elements ).val() != "" )
            {
                var MontoTotal = parseFloat( $( elements ).val() );
                SumaMontoIGV = SumaMontoIGV + MontoTotal;
            }
        }
    );
    $( "#SumaMontoIGV" ).val( SumaMontoIGV );

}
</script>

<script type="text/javascript">
$( '#myTab a' ).on
(
    'click', function ( e ) 
    {
        e.preventDefault()
        $( this ).tab( 'show' )
    }
)
//$('#myTab li:nth-child(3) a').tab('show'); 
</script>

<script type="text/javascript">
//ESCAPE, DETECTA EL F5, CTRL+F5
$( document ).bind
(
    'keyup', 
    function( e ) 
    {
        //console.log( e.which );
        if( e.which === 116 ) 
        {
           
        }
        if( e.which === 82 && e.ctrlKey ) 
        {
           
        }
        if( e.which === 107 ) //tecla +
        {
            //openPopup();
            $( "#btnAgregar" ).trigger( "click" );
        }
        if( e.which === 119 ) 
        {
           
        }
        if( e.which === 27 ) //ESCAPE
        {
            
        }
    }
);
</script>
<script type="text/javascript">
convertirTextoTodosLosInputs = function()
{
    //$( "#form1 input, #form1 select" ).replaceWith
    $( "#form1 input:text, #form1 select, textarea" ).replaceWith
    (
        function () 
        {
            var nodeName = $( "#" + this.id ).prop( 'nodeName' );
            var nodeType = $( "#" + this.id ).prop( 'type' );
            
            if( this.id )
            {
                switch( nodeName )
                {
                    case "SELECT":
                        return '<h5>' + $( "#" + this.id + " option:selected" ).text() + '</h5>';
                    break;
                    case "TEXTAREA":
                    case "INPUT":
                        switch( nodeType )
                        {
                            case "hidden":
                                pr( nodeType );
                                
                                return true;
                            break;
                            case "textarea":
                            case "text":
                                return '<h5>' + $( "#" + this.id ).val() + '</h5>';
                            break;
                            case "button":
                                $( "#" + this.id ).remove();
                            break;
                            case "checkbox":
                                if( $( "#" + this.id ).is( ':checked' ) )
                                {
                                    return "<input type='checkbox' checked disabled />";
                                }
                                else
                                {
                                    return "<input type='checkbox' disabled />";
                                }
                            break;
                        }
                    break;
                }
                return '<h5>&nbsp;</h5>';
            }
            else
            {                
                return '<h5>' + $( this ).val() + '</h5>';
            }
        }
    );
}
<?php if( $s_TipoProc == "shw" ){ ?>
convertirTextoTodosLosInputs();
<?php } ?>
</script>