<?php use_helper('UrlFunctions'); ?>
<?php use_helper( 'IncludePartial' ); ?>
<?php use_helper( 'UtilFunctions' ); ?>
<script>
activarOnoBusquedaCliente = function( elm )
{
    if ( $( elm ).is( ':checked' ) )
    {
        $( "#find_numero" ).val( "" );
        $( "#content_div_find_clie" ).show();
        $( "#find_numero" ).focus();
    }
    else
    {
        $( "#find_numero" ).val( "" );
        $( "#content_div_find_clie" ).hide();
    }
}
buscarEnApi = function()
{
    var txt = trim( $( "#find_numero" ).val() );
    var str_serialize = "TipoProc=buscar_api_cliente&txt=" + txt 
    $( '#load_img_find_clie' ).show();

    executeAjaxJson
    ( 
        "<?php echo buildUrl( 'pro/request' ) ?>", 
        str_serialize,
        function( o_json )
        {
            $( '#load_img_find_clie' ).hide();
            if( o_json.error )
            {
                mostrarMensajeError( o_json.mensaje_error );
                return false;
            }
            $( "#ClienteNumero" ).val( o_json.id_cliente );
            buscarInfoCliente();
        } 
    );
}
</script>
<script>
$( "#ClienteNombre" ).autocomplete
(
    {
        source: "<?=buildUrl( 'pro/request', "TipoProc=Autocomplete" )?>",
        minLength: 2,
        select: function( event, ui ) 
        {
            console.log( ui.item.id );
            $( "#ClienteNumero" ).val( ui.item.id );
            buscarInfoCliente();
        }
    }
);
$( "#btnCliente" ).click
(
    function()
    {
        $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'pro/clie', '' )?>' );
        $( '#dialog' ).dialog( 'open' );
    }
);
</script>
<script>
asignarValores = function( Id, Nombre, Documento )
{
    $( "#ClienteNumero" ).val( Id );
    $( "#ClienteNombre" ).val( Nombre );
    //$( "#ClienteRUC" ).val( Documento );
    $( '#dialog' ).dialog( 'close' );
    $( '#dialog2' ).dialog( 'close' );
    buscarInfoCliente();
}
limpiarValores = function()
{
    //LIMPIAR
    $( "#ClienteNombre" ).val( "" );
    $( "#ClienteRUC" ).val( "" );
    $( "#sDireccion" ).val( "" );
    $( "#sDepartamento" ).val( "" );
    $( "#sProvincia" ).val( "" );
    $( "#sDistrito" ).val( "" );
    $( "#sPais" ).val( "PERU" );
}
buscarInfoCliente = function()
{
    limpiarValores();
    /////////
    mostrarCargaImg();
    var IdPersona= $( "#ClienteNumero" ).val();
    var strFormSerialize = "IdTipoDocumento=<?=$IdTipoDocumento?>&TipoProc=getClienteInfo&IdPersona=" + IdPersona;
    executeAjaxJson
    ( 
        "<?php echo buildUrl( 'pro/request', "" ) ?>", 
        strFormSerialize,
        function( o_json )
        {
            console.log( o_json );
            ocultarCargaImg();
            if( o_json.error )
            {
                mostrarMensajeError( o_json.mensaje_error );
                return false;
            }
            $( "#ClienteNombre" ).val( o_json.Nombre );
            $( "#ClienteRUC" ).val( o_json.Documento );
            $( "#ClienteTipoDoc" ).val( o_json.TipoDocumento );
            $( "#sDireccion" ).val( o_json.Direccion );
            $( "#sDepartamento" ).val( o_json.DepartamentoDesc );
            $( "#sProvincia" ).val( o_json.ProvinciaDesc );
            $( "#sDistrito" ).val( o_json.DistritoDesc );
            $( "#IdUbigeo" ).val( o_json.IdUbigeo );
            $( "#cboCanal" ).val( o_json.CanalCliente );
            $( "#sPais" ).val( "PERU" );
        } 
    );
}
</script>
<style>
    fieldset
    {
        padding: 1px;
    }
</style>
<form id="form1" name="form1" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="Control" id="Control" value="ok" >
    <table border="0" cellspacing="0" cellpadding="0" style=""  width="100%">
        <tr>
            <td nowrap="nowrap" width="">
                <input type="hidden" name="ClienteNumero" id="ClienteNumero" value="">
                <fieldset>
                    <legend>Buscar - Extraer Cliente</legend>
                    <table border="0" cellspacing="0" cellpadding="0" style=""  width="100%">
                        <tr>
                            <td>
                                <input type="checkbox" id="get_cliente" name="get_cliente" value="ok" onclick="activarOnoBusquedaCliente(this);">
                            </td>
                            <td>
                                <div style="" id="content_div_find_clie">
                                    <table border="0" cellspacing="0" cellpadding="0" style=""  width="">
                                        <tr>
                                            <td>
                                                <label><b>Número (RUC, DNI)</b></label>
                                            </td>
                                            <td>
                                                <input type="text" id="find_numero" onfocus="this.select()"
                                                        name="find_numero" value="" class="text" maxlength="11" 
                                                        style="text-align: center;">
                                                <script>
                                                $( "#find_numero" ).keypress
                                                ( 
                                                    function( e ) 
                                                    {
                                                        //console.log( e.which );
                                                        if( e.which == 0 ){ return true; }
                                                        if( e.which == 8 ){ return true; }
                                                        if( e.which == 13 ) { buscarEnApi(); return false; }
                                                    }
                                                );
                                                </script>
                                                <input type="button" id="button" class="ui-button ui-corner-all ui-widget" onclick="buscarEnApi();" value="BUSCAR">
                                                <input type="submit" value="OK" class="ui-button ui-corner-all ui-widget">
                                            </td>
                                            <td>
                                                <div id="load_img_find_clie" style="display: none;"><img src="<?php echo Constantes::ROOT_DIR_APP ?>web/images/progress.gif" border="0"/></div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <fieldset>
                    <legend>Cliente</legend>
                    <table border="0" cellpadding="6" cellspacing="0" width="100%">
                        <tr>
                            <td width="20%" align="center">
                                <input type="text" class="text" id="ClienteRUC" 
                                        name="ClienteRUC" 
                                        value=""  
                                        placeholder="RUC o DNI" 
                                        onblur="buscarInfoxNumDocumento( this.value )" onfocus="this.select();"
                                        style="width:95%; text-align:center;">
                            </td>
                            <td width="10%" align="center">
                                <input type="text" class="text" id="ClienteTipoDoc" placeholder="Tipo"  value="" style="width: 95%; text-align: center;" readonly="">
                            </td>
                            <td width="50%" align="center">
                                <input class="text required" type="text" 
                                    name="ClienteNombre" id="ClienteNombre" placeholder="Nombre o Razon Social" 
                                    value="" style="width:95%" onfocus="this.select();"/>
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <fieldset>
                    <legend>Direcci&oacute;n</legend>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td nowrap="nowrap" colspan="3">
                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                    <tr>
                                        <td style="width: 60%;">
                                            <textarea class="" name="sDireccion" id="sDireccion" rows="1" style="width: 95%"></textarea>
                                            <br><label style="color:DarkGrey;">Direcci&oacute;n</label>
                                        </td>
                                        <td style="width: 35%;">
                                            <input type="text" class="text" name="sDistrito" id="sDistrito" value="" style="width: 95%;" /><br>
                                            <label style="color:DarkGrey;">Distrito</label>
                                        </td>                             
                                    </tr>
                                </table>
                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                    <tr>
                                        <td>
                                            <input type="text" readonly class="text" name="sDepartamento" id="sDepartamento" value="" /><br>
                                            <label style="color:DarkGrey;">Departamento</label>
                                        </td>
                                        <td>
                                            <input type="text" readonly class="text" name="sProvincia" id="sProvincia" value="" /><br>
                                            <label style="color:DarkGrey;">Provincia</label>
                                        </td>
                                        <td>
                                            <input type="text" readonly class="text" name="sPais" id="sPais" value="" /><br>
                                            <label style="color:DarkGrey;">Pa&iacute;s</label>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <fieldset>
                    <legend>Comentario</legend>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td nowrap="nowrap" colspan="3">
                                <textarea class=""  name="Comentario" id="Comentario" style="width:99%" rows="2"></textarea>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </td>
        </tr>
    </table>
</form>

<script>
$( "#ClienteNombre" ).autocomplete
(
    {
        source: "<?=buildUrl( 'pro/request', "TipoProc=Autocomplete" )?>",
        minLength: 2,
        select: function( event, ui ) 
        {
            console.log( ui.item.id );
            $( "#ClienteNumero" ).val( ui.item.id );
            buscarInfoCliente();
        }
    }
);
$( "#btnCliente" ).click
(
    function()
    {
        $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'pro/clie', '' )?>' );
        $( '#dialog' ).dialog( 'open' );
    }
);
</script>
<script>
    /*
asignarValores = function( Id, Nombre, Documento )
{
    $( "#ClienteNumero" ).val( Id );
    $( "#ClienteNombre" ).val( Nombre );
    //$( "#ClienteRUC" ).val( Documento );
    $( '#dialog' ).dialog( 'close' );
    $( '#dialog2' ).dialog( 'close' );
    buscarInfoCliente();
}
limpiarValores = function()
{
    //LIMPIAR
    $( "#ClienteNombre" ).val( "" );
    $( "#ClienteRUC" ).val( "" );
    $( "#sDireccion" ).val( "" );
    $( "#sDepartamento" ).val( "" );
    $( "#sProvincia" ).val( "" );
    $( "#sDistrito" ).val( "" );
    $( "#sPais" ).val( "PERU" );
}
*/
/*
buscarInfoCliente = function()
{
    limpiarValores();
    /////////
    mostrarCargaImg();
    var IdPersona= $( "#ClienteNumero" ).val();
    var strFormSerialize = "TipoProc=getClienteInfo&IdPersona=" + IdPersona;
    executeAjaxJson( 
                        "<?php echo buildUrl( 'pro/request', "" ) ?>", 
                        strFormSerialize,
                        function( o_json )
                        {
                            console.log( o_json );
                            ocultarCargaImg();
                            if( o_json.error )
                            {
                                mostrarMensajeError( o_json.mensaje_error );
                                return false;
                            }
                            $( "#ClienteNombre" ).val( o_json.Nombre );
                            $( "#ClienteRUC" ).val( o_json.Documento );
                            $( "#ClienteTipoDoc" ).val( o_json.TipoDocumento );
                            $( "#sDireccion" ).val( o_json.Direccion );
                            $( "#sDepartamento" ).val( o_json.DepartamentoDesc );
                            $( "#sProvincia" ).val( o_json.ProvinciaDesc );
                            $( "#sDistrito" ).val( o_json.DistritoDesc );
                            $( "#IdUbigeo" ).val( o_json.IdUbigeo );
                            $( "#cboCanal" ).val( o_json.CanalCliente );
                            $( "#sPais" ).val( "PERU" );
                        } 
                   );
}
*/
buscarInfoxNumDocumento = function( value )
{
    mostrarCargaImg();
    var idtipodocumento = $( "#IdTipoDocumento" ).val();
    executeAjaxJson
    ( 
        '<?php echo buildUrl( 'pro/request' ) ?>', 
        'TipoProc=getInfoCliexNumDocCustom&NumDniRuc=' + value, 
        function( o_json )
        {
            console.log( o_json );
            ocultarCargaImg();
            if( o_json.Result )
            {
                $( "#ClienteNumero" ).val( o_json.idpersona );
                buscarInfoCliente();
            }
            else
            {
                limpiarValores();
            }
        }
    );
}
</script>

<?php if( $b_Save ){ ?>
<script type="text/javascript">
    parent.location.reload();
</script>
<?php } ?>