@extends('layout')

@section('content')
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="/">Home</a>
    <a class="breadcrumb-item" href="/ventas">Ventas</a>
    <span class="breadcrumb-item active">Cierre de Caja</span>
</nav>

<header class="content__title">
    <div class="float-right text-right">
        <div class="form-group m-0" style="width:300px">
            <label>Seleccionar fecha</label><br>
            <div class="input-group mb-0">
                <input type="text" class="form-control form-filter text-right fecha-simple" data-end="true" data-url="/cierres/generar" placeholder="" autocomplete="off" value="{{ $fecha }}">
                <div class="input-group-append">
                    <span class="input-group-text"><i class="zmdi zmdi-calendar"></i></span>
                </div>
            </div>
            <i class="form-group__bar"></i>
        </div>
    </div>
    <h1>CIERRE DE CAJA</h1>
    <small>Seleccionar día y completar campos.</small>
</header>

<form class="formulario" action="#" method="post" data-url="{{ url('cierres/generar') }}">
    @csrf
    <input type="hidden" name="fecha" value="{{ $fecha }}">
    <div class="row">
        <div class="col-lg-6 order-lg-last">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Totales cálculados</h4>
                </div>
                <div class="card-body p-0 pt-1">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr class="table-active">
                                <th width="50%">Forma de pago</th>
                                <th class="text-right">Confirmar montos</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th class="table-active">Efectivo ({{ $cantidad['efectivo'] }})</th>
                                <td class="text-right lead">${{ number_format($pagos['efectivo'],0,'.','.') }}</td>
                            </tr>
                            <tr>
                                <th class="table-active">Tarjeta ({{ $cantidad['tarjeta'] }})</th>
                                <td class="text-right lead">${{ number_format($pagos['tarjeta'],0,'.','.') }}</td>
                            </tr>
                            <tr>
                                <th class="table-active">Transferencia ({{ $cantidad['transferencia'] }})</th>
                                <td class="text-right lead">${{ number_format($pagos['transferencia'],0,'.','.') }}</td>
                            </tr>
                            <tr style="border-bottom:2px solid #e3e7eb">
                                <th class="table-active">TOTAL VENTAS</th>
                                @php
                                    $total = $pagos['efectivo'] + $pagos['tarjeta'] + $pagos['transferencia']
                                @endphp
                                <td class="text-right lead font-weight-bold">${{ number_format($total,0,'.','.') }}</td>
                            </tr>
                            <tr>
                                <th class="table-active">
                                    Saldo inicial<br>
                                    <small class="text-info">Último cierre: {{ $fecha_inicial }}</small>
                                </th>
                                <td class="text-right">
                                    <div class="form-group text-right mb-0">
                                        <input type="text" class="form-control text-right required digits" minlength="1" id="saldo-inicial" name="saldo_inicial" value="{{ $saldo_inicial }}" autocomplete="off">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="table-active">Gastos</th>
                                <td class="text-right lead text-red" id="monto-gastos" data-monto="{{ $gasto_total }}">
                                    -${{ number_format($gasto_total,0,'.','.') }}
                                </td>
                            </tr>
                            <tr style="border-bottom:2px solid #e3e7eb">
                                <th class="table-active">
                                    SALDO CAJA CALCULADO<br>
                                    <small class="text-info">(Saldo inicial + efectivo - Gastos)</small>
                                </th>
                                @php
                                $total = $pagos['efectivo'] + $saldo_inicial - $gasto_total;
                                @endphp
                                @if($total >= 0)
                                <td class="text-right font-weight-bold lead text-success" id="saldo-caja">${{ number_format($total,0,'.','.') }}</td>
                                @else
                                <td class="text-right font-weight-bold lead text-danger" id="saldo-caja">-${{ number_format($total * -1,0,'.','.') }}</td>
                                @endif
                            </tr>
                            <tr>
                                <th class="table-active">SALDO CAJA REAL</th>
                                <td class="text-right">
                                    <div class="form-group text-right mb-3">
                                        <input type="text" class="form-control text-right required digits" minlength="1" id="saldo-real" name="cierre_real" autocomplete="off">
                                        <i class="form-group__bar"></i>
                                    </div>
                                    <small class="badge" id="monto-resto"></small>
                                </td>
                            </tr>
                            
                            <tr style="border-bottom:2px solid #e3e7eb">
                                <th class="table-active">RETIRO</th>
                                <td class="text-right">
                                    <div class="form-group text-right mb-0">
                                        <input type="text" class="form-control text-right required digits" minlength="1" id="monto-retiro" name="cierre_retiro" autocomplete="off">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="table-active">SALDO FINAL</th>
                                <td class="text-right lead font-weight-bold" id="saldo-final">--</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-6 order-lg-first">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Gastos</h4>
                </div>
                <div class="card-body p-0">
                    <table class="table table-sm table-hover table-gastos">
                        <thead class="thead-light2">
                            <tr>
                                <th width="60%">ITEM</th>
                                <th class="text-right">MONTO</th>
                                <th width="50"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(count($gastos) > 0)
                            @foreach($gastos as $g)
                            <tr>
                                <td>
                                    <div class="form-group mb-0">
                                        {{ $g->item }}
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-0 text-right">
                                        ${{ number_format($g->monto,0,'.','.') }}
                                    </div>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-danger eliminar-gasto" data-id="{{ $g->id }}" data-toggle="tooltip" data-original-title="Eliminar gasto"><i class="zmdi zmdi-minus"></i></button>
                                </td>
                            </tr>
                            @endforeach
                            @else
                            <tr>
                                <td colspan="3"><p class="vacio text-center mt-3">No se han registrado gastos en la fecha del cierre.</p></td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="text-right">
        <button type="submit" class="btn btn-primary btn-lg btn--raised btn-cerrar-caja"><i class="zmdi zmdi-check-circle"></i>&nbsp; Cerrar Caja</button>
    </div>
</form>

<hr>
<div class="card mt-5">
    <div class="card-header">
        <h4 class="card-title">Resumen de ventas</h4>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mt-0" id="datatable_ajax">
                <thead class="thead-default">
                    <tr>
                        <th>DOCUMENTO</th>
                        <th>CLIENTE</th>
                        <th>FECHA</th>
                        <th>FORMA PAGO</th>
                        <th class="text-right pr-5">MONTO</th>
                    </tr>
                    <tr class="filter">
                        <td>
                            <div class="form-group mb-0">
                                <input type="text" class="form-control form-filter" placeholder="" data-column="0" autocomplete="off">
                                <i class="form-group__bar"></i>
                            </div>
                        </td>
                        <td>
                            <div class="form-group mb-0">
                                <input type="text" class="form-control form-filter" placeholder="" data-column="1" autocomplete="off">
                                <i class="form-group__bar"></i>
                            </div>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="/vendors/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/vendors/datatables/input.js"></script>
<script type="text/javascript">
$(function() {
    var item_gasto = 1;
    var efectivo = {{ $pagos['efectivo'] }};
    
    $('#saldo-real,#monto-retiro,#saldo-inicial').keyup(function(){
        __recalcular();
        __recalcular_saldo();
        __recalcular_resto();
    });

    $('.eliminar-gasto').click(function(){
        var elem = $(this);
        iziToast.question({
            timeout: false,
            close: false,
            overlay: true,
            displayMode: 'once',
            zindex: 999,
            maxWidth: 500,
            title: '¿Está seguro de eliminar este gasto?',
            position: 'center',
            buttons: [
                ['<button><b>SI</b></button>', function (instance, toast) {
                    elem.prop('disabled',true);
                    elem.find('i').removeClass('zmdi-minus');
                    elem.find('i').addClass('zmdi-refresh zmdi-hc-spin');
                    $.ajax({
                        url: '/ventas/eliminar-gasto'
                        ,type: 'POST'
                        ,data: { _token: '{{ csrf_token() }}', id: elem.data('id') }
                        ,dataType: 'json'
                    })
                    .done(function(json){
                        if(json.result){
                            if($('.table-gastos tbody tr').length > 0){
                                elem.closest('tr').remove();
                                if($('.table-gastos tbody tr').length == 0){
                                    $('.table-gastos tbody').append('<tr><td colspan="3" class="vacio text-center">No se han registrado gastos en la fecha del cierre</td><tr>');
                                }
                            }
                            mensaje('success','','Gasto eliminado');
                            __recalcular_gasto();
                            __recalcular();
                            __recalcular_saldo();
                            __recalcular_resto();
                        }else{
                            mensaje('error','ERROR',json.msg);
                        }
                        elem.prop('disabled',false);
                    });
                    instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
                }, true],
                ['<button>NO</button>', function (instance, toast) {
                    instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
                }],
            ],
        });
    });

    function __recalcular(){
        var saldo_real = $('#saldo-real').val() > 0 ? $('#saldo-real').val() : 0;
        var monto_retiro = $('#monto-retiro').val() > 0 ? $('#monto-retiro').val() : 0;

        if(saldo_real >= 0){
            var total = parseInt(saldo_real) - parseInt(monto_retiro);
            if(total >= 0)
                $('#saldo-final').html('$' + number_format(total,0,'.','.'));
            else
                $('#saldo-final').html('-$' + number_format(total * -1,0,'.','.'));
        }else{
            $('#saldo-final').html('--');
            $('#saldo-final').removeClass('text-primary');
            $('#saldo-final').removeClass('text-danger');
        }

        if(total >= 0){
            $('#saldo-final').addClass('text-primary');
            $('#saldo-final').removeClass('text-danger');
        }else{
            $('#saldo-final').addClass('text-danger');
            $('#saldo-final').removeClass('text-primary');
        }

    };

    function __recalcular_saldo(){
        var saldo_inicial = $('#saldo-inicial').val() > 0 ? $('#saldo-inicial').val() : 0;
        var monto_gastos = $('#monto-gastos').data('monto');

        var total = parseInt(efectivo) + parseInt(saldo_inicial) - parseInt(monto_gastos);
        
        if(total >= 0){
            $('#saldo-caja').addClass('text-success');
            $('#saldo-caja').removeClass('text-danger');
            $('#saldo-caja').html('$' + number_format(total,0,'.','.'));
        }else{
            $('#saldo-caja').addClass('text-danger');
            $('#saldo-caja').removeClass('text-success');
            $('#saldo-caja').html('-$' + number_format(total * -1,0,'.','.'));
        }

    };

    function __recalcular_resto(){
        var saldo_real = $('#saldo-real').val() > 0 ? $('#saldo-real').val() : 0;
        $('#monto-resto').show().html('').removeClass('badge-success').removeClass('badge-danger');
        if(saldo_real > 0){
            var saldo_inicial = $('#saldo-inicial').val() > 0 ? $('#saldo-inicial').val() : 0;
            var monto_gastos = $('#monto-gastos').data('monto');
            var saldo_caja = parseInt(efectivo) + parseInt(saldo_inicial) - parseInt(monto_gastos) - parseInt(saldo_real);
            if(saldo_caja > 0){
                $('#monto-resto').removeClass('badge-success');
                $('#monto-resto').addClass('badge-danger').html('Saldo en contra: - $' + number_format(Math.abs(saldo_caja),0,'.','.'));
            }else if(saldo_caja < 0){
                $('#monto-resto').removeClass('badge-danger');
                $('#monto-resto').addClass('badge-success').html('Saldo a favor: $' + number_format(Math.abs(saldo_caja),0,'.','.'));
            }
        }
    }

    function __recalcular_gasto(){
        var total = 0;
        $('.gasto_monto').each(function(){
            var monto = parseInt($(this).val());
            if(monto > 0){
                total += monto;
            }
        });
        $('#monto-gastos').data('monto',total).html('-$' + number_format(total,0,'.','.'));
    }

    $('#forma-pago').on('select2:select', function (e) {
        $('#box-tarjeta,#box-transferencia').hide().find('input,select').prop('disabled',true);
        if(e.params.data.id == 3 || e.params.data.id == 4){
            $('#box-tarjeta').show().find('input,select').prop('disabled',false);
        }else if(e.params.data.id == 5){
            $('#box-transferencia').show().find('input,select').prop('disabled',false);
        }
    });

    // Resumen de ventas
    $.extend( true, $.fn.dataTable.defaults, datatables_options);
    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
        mensaje('error','ERROR',message);
    };
    var table = $('#datatable_ajax').DataTable({
        ajax: '/ventas/datatables?tienda={{ $tienda }}&fi={{ $fecha_formato }}&ft={{ $fecha_formato }}',
        columns: [
            { 
                data: 'folio',
                name: 'folio',
                render: function(data,type,row){
                    return  '<a href="'+(row.tipo == 'm' ? '{{ url('ventas/detalle-manual') }}' : '{{ url('ventas/detalle') }}') + '/' + row.id +'" data-nc="'+(row.nota_credito ? true : false)+'">' + (row.tipo == 'b' ? 'BOLETA' : (row.tipo == 'f' ? 'FACTURA' : 'MANUAL')) + ' N°'+ row.folio +'</a>'
                }
            },
            { 
                data: 'cliente.nombre', 
                name: 'cliente.nombre',
                render: function(data,type,row){
                    if(row.clientes_id){
                        if(row.cliente.tipo == 'e'){
                            return '<a href="{{ url('clientes/detalle') }}/'+ row.cliente.id +'">'+ row.cliente.razon_social +'</a>'
                        }else{
                            return '<a href="{{ url('clientes/detalle') }}/'+ row.cliente.id +'">'+ row.cliente.nombre +' '+ (row.cliente.apellidos ? row.cliente.apellidos : '') +'</a>'
                        }
                    }else{
                        return 'No indicado'
                    }
                }
            },
            { data: 'fecha', name: 'fecha' },
            { 
                data: 'formas_pago_id', 
                name: 'formas_pago_id',
                render: function(data,type,row){
                    if(row.forma_pago){
                        return row.forma_pago.nombre;
                    }else{
                        return '<span class="badge badge-warning">No indicado</span>'
                    }
                }
            },
            { data: 'monto', name: 'monto', sClass: 'text-right text-cyan' },
        ],
        createdRow: function(row,data,index){
            if($(row,'td:eq(0)').find('a[data-nc="true"]').length){
                $(row).addClass('table-danger');
            }
        }
    });

    $('.form-filter').keyup(function(){
        var $this = $(this);
        delay(function(){
            table.columns($this.data('column'))
                .search($this.val())
                .draw();
        },600);
    });
});
</script>
@endpush