@extends('layout')

@section('content')
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="/">Home</a>
    <a class="breadcrumb-item" href="/cierres">Cierres de cajas</a>
    <a class="breadcrumb-item" href="/cierres/detalle/{{ $datos->id }}">{{ $datos->tienda->nombre.' - '.\Carbon\Carbon::parse($datos->fecha)->format('d/m/Y') }}</a>
    <span class="breadcrumb-item active">Editar</span>
</nav>

<header class="content__title">
    <h1>Editar cierre de caja</h1>
    <small>{{ $datos->tienda->nombre.' - '.\Carbon\Carbon::parse($datos->fecha)->format('d/m/Y') }}</small>
</header>

<form class="formulario" action="#" method="post" data-url="/cierres/editar">
    @csrf
    <input type="hidden" name="id" value="{{ $datos->id }}">
    <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</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th class="table-active">Efectivo ({{ $cantidad['efectivo'] }})</th>
                                <td class="text-right lead">${{ number_format($datos->efectivo,0,'.','.') }}</td>
                            </tr>
                            <tr>
                                <th class="table-active">Tarjeta ({{ $cantidad['tarjeta'] }})</th>
                                <td class="text-right lead">${{ number_format($datos->tarjeta,0,'.','.') }}</td>
                            </tr>
                            <tr>
                                <th class="table-active">Transferencia ({{ $cantidad['transferencia'] }})</th>
                                <td class="text-right lead">${{ number_format($datos->transferencias,0,'.','.') }}</td>
                            </tr>
                            <tr style="border-bottom:2px solid #e3e7eb">
                                <th class="table-active">TOTAL VENTAS</th>
                                @php
                                $total = $datos->efectivo + $datos->tarjeta + $datos->transferencias
                                @endphp
                                <td class="text-right lead font-weight-bold">${{ number_format($total,0,'.','.') }}</td>
                            </tr>
                            <tr>
                                <th class="table-active">Saldo inicial</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="{{ $datos->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="{{ $datos->gastos }}">- ${{ number_format($datos->gastos,0,'.','.') }}</td>
                            </tr>
                            <tr style="border-bottom:2px solid #e3e7eb">
                                <th class="table-active">
                                    SALDO CAJA CALCULADO<br>
                                    <small>(Saldo inicial + efectivo - Gastos)</small>
                                </th>
                                <td class="text-right font-weight-bold lead text-success" id="saldo-caja">${{ number_format($datos->efectivo + $datos->saldo_inicial - $datos->gastos,0,'.','.') }}</td>
                            </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" value="{{ $datos->saldo_real }}" autocomplete="off">
                                        <i class="form-group__bar"></i>
                                    </div>
                                    @php
                                        $resto = $datos->saldo_inicial + $datos->efectivo - $datos->gastos - $datos->saldo_real;
                                    @endphp
                                    @if($resto < 0)
                                    <small class="badge badge-success" id="monto-resto">Saldo a favor ${{ number_format(abs($resto),0,'.','.') }}</small>
                                    @elseif($resto > 0)
                                    <small class="badge badge-danger" id="monto-resto">Saldo en contra -${{ number_format(abs($resto),0,'.','.') }}</small>
                                    @else
                                    <small class="badge" id="monto-resto"></small>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="table-active">RETIRO</th>
                                <td class="text-right lead font-weight-bold">
                                    <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" value="{{ $datos->retiro }}" autocomplete="off">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="table-active">SALDO FINAL</th>
                                @php
                                $saldo_final = $datos->saldo_real - $datos->retiro;
                                @endphp
                                <td class="text-right lead @if($saldo_final > 0) text-success @else text-danger @endif font-weight-bold" id="saldo-final">${{ number_format($saldo_final,0,'.','.') }}</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">
                    @if(count($gastos) > 0)
                    <table class="table table-sm table-hover">
                        <thead class="thead-light2">
                            <tr>
                                <th width="70%">ITEM</th>
                                <th class="text-right">MONTO</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($gastos as $g)
                            <tr>
                                <td>{{ $g->item }}</td>
                                <td class="text-right text-cyan">${{ number_format($g->monto,0,'.','.') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @else
                    <p class="text-center pt-4">No hay gastos ingresados en este cierre de caja.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="total_gastos" value="{{ $datos->gastos }}">

    <div class="text-right">
        <button type="submit" class="btn btn-warning btn-lg btn--raised btn-editar-caja"><i class="zmdi zmdi-save"></i>&nbsp; Editar</button>
    </div>
</form>
@endsection

@push('scripts')
<script type="text/javascript">
$(function() {
    var item_gasto = 1;
    var efectivo = {{ $datos->efectivo }};
    $('.nuevo-gasto').click(function(e){
        var html = '<tr><td><div class="form-group mb-0"><input type="text" class="form-control required" name="gasto_item['+item_gasto+']" placeholder="Ingresar item"><i class="form-group__bar"></i></div></td><td><div class="form-group mb-0"><input type="text" class="form-control required digits gasto_monto" min="1" maxlength="7" name="gasto_monto['+item_gasto+']" placeholder="Monto"><i class="form-group__bar"></i></div></td><td><button type="button" class="btn btn-sm btn-danger eliminar-item" data-toggle="tooltip" data-original-title="Eliminar gasto"><i class="zmdi zmdi-minus"></i></button></td></tr>';
        item_gasto++;
        $('.table-gastos tbody').append(html);
        if($('.table-gastos .vacio').length > 0){
            $('.table-gastos .vacio').closest('tr').remove();
        }
    });
    $(document).on('click','.eliminar-item',function(e){
        var elem = $(this);
        $(this).tooltip('hide')
        $(this).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</td><tr>');
        }
        __recalcular_gasto();
        __recalcular();
        __recalcular_saldo();
        __recalcular_resto();
    });

    $(document).on('click','.eliminar-gasto',function(){
        if($('.table-gastos tbody tr').length > 0){
            $(this).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</td><tr>');
            }
        }
        __recalcular_gasto();
        __recalcular();
        __recalcular_saldo();
        __recalcular_resto();
    });
    $(document).on('keyup','.gasto_monto',function(){
        __recalcular_gasto();
        __recalcular_saldo();
        __recalcular_resto();
    });
    $('#saldo-real,#monto-retiro,#saldo-inicial').keyup(function(){
        __recalcular();
        __recalcular_saldo();
        __recalcular_resto();
    });

    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);
            $('#saldo-final').html('$' + number_format(total,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');
        }else{
            $('#saldo-caja').addClass('text-danger');
            $('#saldo-caja').removeClass('text-success');
        }

        $('#saldo-caja').html('$' + number_format(total,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') > 0 ? $('#monto-gastos').data('monto') : 0;
            var saldo_caja = parseInt(efectivo) + parseInt(saldo_inicial) - parseInt(monto_gastos) - parseInt(saldo_real);

            console.log(saldo_caja)

            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,'.','.'));
    }
});
</script>
@endpush