@section('header')

    <link rel="stylesheet" href="/plugins/datatables/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/plugins/datatables/dataTables.bootstrap.min.css">

    <!-- DATABLES BUTTONS CSS -->
    <link href="/plugins/datatables/buttons.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="//cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css"/>

    <style>
        .revisadoRow, .revisadoRow__ td {
            background: #a9d2f2 !important;
            font-weight: bold !important;
            color: #222 !important;
            text-shadow: 1px 1px 2px rgba(0,0,0, 0.2) !important;
        }
        .llamadoRow, .llamadoRow td {
            background: #eac48f !important;
            font-weight: bold !important;
            color: #222 !important;
            text-shadow: 1px 1px 2px rgba(0,0,0, 0.2) !important;
        }
    </style>
@stop

@include('layouts.breadcumb')

<div class="row">
    <div class="card-content">
        <div class="panel panel-orange panel-border" data-collapsed="0">

            <!-- panel head -->
            <div class="panel-heading">

            </div>

            <!-- panel body -->
            <div class="panel-body">
                <strong>FILTRAR:</strong>
                <div class="btn-group" data-toggle="buttons">
                    <label id="btn-revisado-no" class="btn btn-default waves-effect">
                        <input type="radio" class="" />PEDIDO NO REVISADO                    </label>
                    <label id="btn-revisado-yes" class="btn btn-danger waves-light waves-effect">
                        <input type="radio" class="" />PEDIDO REVISADO                    </label>
                </div>
                <div class="btn-group" data-toggle="buttons">
                    <label id="btn-recaudo-yes" class="btn btn-success waves-light waves-effect">
                        <input type="radio" class="" />CON RECAUDO RECIENTE                    </label>
                    <label id="btn-recaudo-no" class="btn btn-orange waves-light waves-effect">
                        <input type="radio" class="" />SIN RECAUDO RECIENTE                    </label>
                </div>
                <div class="btn-group" data-toggle="buttons">
                    <label id="btn-todos-yes" class="btn btn-inverse waves-light waves-effect">
                        <input type="checkbox"  />TODOS                    </label>
                </div>

                <div id="totalCarteraInfo" style="float:right; width:360px;">
                    <div class="col-lg-6 col-md-6 col-sm-6 pull-right">
                        <div class="card-box widget-box-one" style="padding: 1px 10px 1px; margin-bottom: 0; background: #efefef;">
                            <div class="wigdet-one-content">
                                <p class="m-0 text-uppercase font-600 font-secondary text-overflow">RETENIDO 1E</p>
                                <h3 class="text-danger"><span>$</span><span id="retenido-1e" class="counterup">0</span></h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 pull-right">
                        <div class="card-box widget-box-one" style="padding: 1px 10px 1px; margin-bottom: 0; background: #efefef;">
                            <div class="wigdet-one-content">
                                <p class="m-0 text-uppercase font-600 font-secondary text-overflow">RETENIDO APP</p>
                                <h3 class="text-danger"><span>$</span><span id="retenido-app" class="counterup">0</span></h3>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>

                <hr />

                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-colored-bordered table-bordered-inverse table-hover table-responsive" id="table-1" data-page-length="500" style="font-size: 12px !important;">
                        <thead>
                        <tr>
                            <th width="1%">&nbsp;</th>
                            <th>F. PEDIDO</th>
                            <th>F. RECEPCIÓN</th>
                            <th>PEDIDO</th>
                            <th>NIT</th>
                            <th>SUCURSAL</th>
                            <th>CIUDAD</th>
                            <th>VENDEDOR</th>
                            <th>VALOR</th>
                            <th>OK</th>
                            <th>VER</th>
                            <th>LINEA TIEMPO</th>
                        </tr>
                        <tr class="filter-column-tr">
                            <td>&nbsp;</td>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        </thead>
                        <tbody>

                                                @foreach( $pedidos as $pedido )
                                                        <tr id="tr_{{ $cont }}" class="{{ $classCss }}" >
                                <td style="background-color:#F5F5F6 !important;">{{ $cont }}</td>
                                <td style="text-align: center" data-order="{{ strtotime( $pedido->fecha ) }}">
                                    {{ date("d-m-Y", strtotime($pedido->fecha)) }}
                                </td>
                                <td style="text-align: center" data-order="{{ strtotime( $pedido->created_at ) }}">
                                    {{ date("d-m-Y H:i", strtotime($pedido->created_at)) }}
                                </td>
                                <td style="text-align: right" data-search="{{ str_pad($pedido->id, 6, 0, STR_PAD_LEFT ) }}">
                                    <span class="{{ $clase }}" style="font-size: 1.2em;">{{ str_pad($pedido->id, 6, 0, STR_PAD_LEFT ) }}</span>

                                    @if($pedido->ac == 4)
                                        <span class="badge badge-warning">{{ MODIFICADO }}</span>
                                    @endif
                                </td>
                                <td>{{ $pedido->nit }}</td>
                                <td>{{ $pedido->sucursal_nombre }}</td>
                                <td>{{ $pedido->ciudad }}</td>
                                <td>{{ $pedido->nombre }}</td>
                                <td style="text-align: right">${{ number_format( $pedido->total, 0) }}</td>
                                <td class="centered" data-search="{{ ( $pedido->cartera_revisado == 1 ) ? '1' : '0' }}">
                                    <a rel="tooltip"
                                       data-original-title="Aprobar Pedido"
                                       data-toggle='modal-confirm-ajax'
                                       data-element="tr_{{ $cont }}"
                                       data-url="/cartera/pedidos/accion/{{ $pedido->id }}/aprobar"
                                       data-title="Está seguro de aprobar el pedido <strong>#{{ str_pad($pedido->id, 6, 0, STR_PAD_LEFT ) }}</strong> ?"
                                       class="btn btn-primary waves-light waves-effect">
                                        <i class="fa fa-2x fa-check-square-o"></i>
                                    </a>
                                </td>
                                <td class="centered" data-search="{{ ( (int) $pedido->reca > 0 ) ? '1' : '0' }}">
                                    <a href="/cartera/ajax/modal-pedido/{{ $pedido->id }}?_tr_id=tr_{{ $cont }}"
                                       rel="tooltip"
                                       data-toggle="modal-ajax-big"
                                       data-original-title="Revisar Pedido"
                                       onclick="blockMessage('CARGANDO FICHA CLIENTE')"
                                       class="btn btn-primary waves-light waves-effect">
                                        <i class="fa fa-2x fa-eye"></i>
                                    </a>
                                </td>
                                <td class="centered">
                                    <a href="/ventas/informes/linea-tiempo-ajax/?pedido_id={{ $pedido->id }}"
                                       rel="tooltip"
                                       data-toggle="modal-ajax-big"
                                       data-original-title="Revisar Pedido"
                                       onclick="blockMessage('CARGANDO FICHA CLIENTE')"
                                       class="btn btn-primary waves-light waves-effect">
                                        <i class="fa fa-2x fa-history"></i>
                                    </a>
                                </td>
                                                    @endforeach

                        </tbody>
                        <tfoot>
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th>TOTAL:</th>
                            <th id="totalCartera" style="text-align: right; font-weight: bold; font-size: 1.5em;">${{ number_format( $totalCartera, 0) }}</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section('footer')

    <!-- Counter js  -->
    <script src="/plugins/waypoints/jquery.waypoints.min.js"></script>
    <script src="/plugins/counterup/jquery.counterup.min.js"></script>

    <script src="/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="/plugins/datatables/dataTables.bootstrap.js"></script>

    <!-- DATABLES BUTTONS JS -->
    <script src="/plugins/datatables/dataTables.buttons.min.js"></script>
    <script src="/plugins/datatables/buttons.bootstrap.min.js"></script>
    <script src="/plugins/datatables/jszip.min.js"></script>
    <script src="/plugins/datatables/pdfmake.min.js"></script>
    <script src="/plugins/datatables/vfs_fonts.js"></script>
    <script src="/plugins/datatables/buttons.html5.min.js"></script>
    <script src="/plugins/datatables/buttons.print.min.js"></script>

    <script src="//cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<!-- ROTAR IMAGEN -->
    <script type="text/javascript" src="/plugins/jquery-rotate/jQueryRotateCompressed.2.3.js"></script>

    <script type="text/javascript">

        $('#retenido-app').html( '{{ number_format( $totalCartera, 0) }}' );
        $('#retenido-1e').html( '{{ number_format( $retenidoIE->pendiente_cartera, 0) }}' );


        setTimeout(function(){
            $('.counterup').counterUp({
                delay: 10,
                time: 1000
            });
        }, 500);


        var table1 = setDataTables("#table-1",true, false);

        $( window ).resize(function() {
            table1.columns.adjust().draw();
            table1.fixedHeader.adjust();

        });


        $('#btn-recaudo-yes').click(function(e){
            var table = $('#table-1').DataTable();
            // Apply the search
            table.columns(10).every( function () {
                var that = this;
                that
                        .search( '1' )
                        .draw();
            });
        });
        $('#btn-recaudo-no').click(function(e){
            var table = $('#table-1').DataTable();
            // Apply the search
            table.columns(10).every( function () {
                var that = this;
                that
                        .search( '0' )
                        .draw();
            });
        });
        $('#btn-revisado-yes').click(function(e){
            var table = $('#table-1').DataTable();
            // Apply the search
            table.columns(9).every( function () {
                var that = this;
                that
                        .search( '1' )
                        .draw();
            });
        });
        $('#btn-revisado-no').click(function(e){
            var table = $('#table-1').DataTable();
            // Apply the search
            table.columns(9).every( function () {
                var that = this;
                that
                        .search( '0' )
                        .draw();
            });
        });
        $('#btn-todos-yes').click(function(e){

            $('#btn-recaudo-yes').removeClass('active');
            $('#btn-recaudo-no').removeClass('active');
            $('#btn-revisado-yes').removeClass('active');
            $('#btn-revisado-no').removeClass('active');

            var table = $('#table-1').DataTable();
            // Apply the search
            table.columns(9).every( function () {
                var that = this;
                that
                        .search( '' )
                        .draw();
            });
            table.columns(10).every( function () {
                var that = this;
                that
                        .search( '' )
                        .draw();
            });
        });

        $(document).on("click","[data-toggle='modal-confirm-ajax']",function(e) {
            e.preventDefault();
            var url = $(this).data('url');
            var title = $(this).data('title');
            var element = $(this).data('element');
            var acc = $(this).data('acc');

            var rowData = $("#"+element).get(0);

            bootbox.confirm(title, function(result) {
                if( result ) {
                    blockMessage('CARGANDO');

                    $.get( url, function( data ) {

                        if( acc == 'revisar' ) {
                            $("#"+element).addClass('revisadoRow');
                        }else {
                            if( acc == 'llamado' ) {
                                $("#"+element).addClass('llamadoRow');
                            }else {
                                table.row( rowData ).remove().draw();
                            }

                        }

                        $('#ajax-modal-big').modal('hide');
                        messageSimple( data );
                        hideMessage();


                    });
                }
            });

        });

        $(document).on('click', '.ajax-detalle-cancelado', function() {

            showMessage('CARGANDO DETALLE DOCUMENTO');

            var url = $(this).attr('href');
            var title = $(this).data('title')

            jQuery.ajax({
                type: 'GET',
                url: url,
                success: function(data) {
                    bootbox.dialog({
                        message: data,
                        title: title,
                        buttons: {
                            success: {
                                label: "CERRAR"
                            },
                        }
                    }).find("div.modal-dialog").addClass("bootbox-90-percent");
                }
            });

            return false;
        });

        /*setInterval(function(){ blockMessage( 'RECARGANDO' ); location.reload(); }, 120000);*/


    </script>
@stop