@extends('app')

@section('content')

<div class="container">

    {!! Form::open([
        'action' => 'ChargesController@save',
        ]) !!}

        <div class="row">
            <div class="col-sm-offset-3 col-sm-2 month-container">
                @php
                $months = [];
                $date = \Carbon\Carbon::today()->startOfMonth();
                $date->subMonths(6);
                while(count($months) < 18) {
                $months[$date->format('Y-m')] = ucfirst($date->formatLocalized('%B %Y'));
                $date->addMonth();
            }
            @endphp

            {!! Form::select('month', $months, \Carbon\Carbon::today()->format('Y-m'), ['class' => 'form-control']) !!}
        </div>
        <div class="col-sm-2">
            <h5 class="text-primary">Estado Cta Bancario</h5>
        </div>
        <div class="col-sm-1">
            <h5 class="text-primary">Variación en conciliación</h5>
        </div>
        <div class="col-sm-1">
            <h5 class="text-primary">VAR vs Mes anterior</h5>
        </div>
        <div class="col-sm-3">
            <h5 class="text-primary">Comentarios de variación</h5>
        </div>
    </div>


    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#income" aria-controls="dolar" role="tab" data-toggle="tab">Ingresos</a></li>
        <li role="presentation"><a href="#outcome" aria-controls="profile" role="tab" data-toggle="tab">Egresos</a></li>
    </ul>

    @foreach ($containers as $kind => $groups)

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane {{ $kind == 'income' ? 'active':'' }}" id="{{ $kind }}">


            <fieldset class="{{ $kind }}">
<!--        <legend class="text-primary" style="font-weight: bold; margin: 50px 0; padding-bottom: 10px;">
            @if($kind === 'income')
            <h2>
                Ingresos
            </h2>
            @else
            <h2>
                Egresos
            </h2>
            @endif
        </legend>-->
        <div class="row summary form-group">
            <div class="col-sm-2 col-sm-offset-3">
                <h5 class="text-primary">Total</h5>
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input title="{{ $kind }}" class="form-control clevar" type="text" readonly name="{{ $kind }}">
                </div>
            </div>
            <div class="col-sm-2">
                <h5 class="text-primary">Estado Cta Bancario</h5>
                <input title="bank_{{ $kind }}" class="form-control clevar" type="text" readonly name="bank_{{ $kind }}">
            </div>
            <div class="col-sm-2">
                <h5 class="text-primary">Variación en conciliación</h5>
                <input title="diff_{{ $kind }}" class="form-control clevar" type="text" readonly name="diff_{{ $kind }}">
            </div>
            <div class="col-sm-3">
                <h5 class="text-primary">Comentarios de variación</h5>
                <input title="diffprev_{{ $kind }}" class="form-control clevar" type="text" readonly name="diffprev_{{ $kind }}">
            </div>
        </div>

        @foreach($groups as $group)

        @if($group->categories->count() == 1 && $group->categories->first()->name == $group->name)
        @php
        $category = $group->categories->first();
        @endphp

        <div class="row form-group">
            <div class="col-sm-3">
                <strong>{{ $category->name }}</strong>
            </div>
            <div class="col-sm-2">
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    {!! Form::number("data[$category->id]", 0, ['class' => 'form-control category-input', 'data-category-id' => $category->id, 'data-group-id' => $group->id]) !!}
                </div>
            </div>
            <div class="col-sm-2 col-sm-offset-2">
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    {!! Form::hidden("data_last[$category->id]", 0, ['class' => 'category-input', 'data-group-id' => $group->id]) !!}
                    {!! Form::number("data_diffprev[$category->id]", 0, ['class' => 'form-control category-input', 'readonly' => true]) !!}
                </div>
            </div>
            <div class="col-sm-2">
                {!! Form::textarea("data_diffcomments[$category->id]", null, ['class' => 'form-control', 'rows' => 2]) !!}
            </div>
        </div>
        @else

        <!-- drop menu -->
        <div class="row" style="margin-bottom: 20px;">
            <div class="col-md-3">
                <div class="dropdown">
                    <button style="white-space: normal;" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                        {{ $group->name }}
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        @foreach($group->categories as $category)
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">     
                            <div class="row form-group">
                                <div class="col-sm-3">
                                    {{ $category->name }}
                                </div>
                                <div class="col-sm-2">
                                    <h5 class="text-primary">Monto</h5>
                                    <div class="input-group">
                                        <div class="input-group-addon">$</div>
                                        {!! Form::number("data[$category->id]", 0, ['class' => 'form-control category-input', 'data-category-id' => $category->id, 'data-group-id' => $group->id]) !!}
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <h5 class="text-primary">VAR vs Mes anterior</h5>
                                    <div class="input-group">
                                        <div class="input-group-addon">$</div>
                                        {!! Form::hidden("data_last[$category->id]", 0, ['class' => 'category-input', 'data-group-id' => $group->id]) !!}
                                        {!! Form::number("data_diffprev[$category->id]", 0, ['class' => 'form-control category-input', 'readonly' => true]) !!}
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <h5 class="text-primary">Comentarios de variación</h5>
                                    {!! Form::textarea("data_diffcomments[$category->id]", null, ['class' => 'form-control', 'rows' => 2]) !!}
                                </div>
                            </div>
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
            <!--             menu header 
                        <div class="col-md-9">
                            <div class="row form-group">
                                
                            </div>
                        </div>-->
                        <div class="col-sm-2">
                           <div class="input-group">
                            <div class="input-group-addon">$</div>
                            {!! Form::text("datasum[$group->id]", 0, ['class' => 'form-control clevar', 'readonly' => true, 'data-group-id' => $group->id]) !!}
                        </div>
                    </div>
                    <div class="col-sm-2 col-sm-offset-2">
                        <div class="input-group">
                            <div class="input-group-addon">$</div>
                            {!! Form::text("datasum_diffprev[$group->id]", 0, ['class' => 'form-control clevar', 'readonly' => true]) !!}
                        </div>
                    </div>
                </div>
                <!--dropmenu -->



                <!-- sub menu campos -->
<!--                       @foreach($group->categories as $category)
                      <div class="row form-group">
                        <div class="col-sm-3">
                          {{ $category->name }} Campo
                        </div>
                        <div class="col-sm-2">
                          {!! Form::number("data[$category->id]", 0, ['class' => 'form-control category-input', 'data-category-id' => $category->id, 'data-group-id' => $group->id]) !!}
                        </div>
                        <div class="col-sm-1 col-sm-offset-3">
                          {!! Form::hidden("data_last[$category->id]", 0, ['class' => 'category-input', 'data-group-id' => $group->id]) !!}
                          {!! Form::number("data_diffprev[$category->id]", 0, ['class' => 'form-control category-input', 'readonly' => true]) !!}
                        </div>
                        <div class="col-sm-2">
                          {!! Form::textarea("data_diffcomments[$category->id]", null, ['class' => 'form-control', 'rows' => 2]) !!}
                        </div>
                      </div>
                      @endforeach -->


                      @endif
                      @endforeach
                  </fieldset>
              </div></div>
              @endforeach

              <div class="text-center">
                <button class="btn btn-primary btn-lg" style="margin-top: 30px;" type="submit">Guardar</button>
                {!! Form::close() !!}
                <button id="export_report" type="button" class="btn btn-primary btn-lg" style="margin-top: 30px;"  >Generar Reporte</button>
            </div>
            <div class="row">
                <hr>
                <div class="text-center">                
                   {!! Form::open([
                    'action' => 'ChargesController@download_flow',
                    ]) !!}
                    <button class="btn btn-primary export-button download_flow" type="submit" id="export_download" style="display: none;" >
                        Descargar<i class="fas fa-file-alt"></i>
                    </button>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
        @endsection

        @section('script')
        <script>
            function loadAccountsData() {
                var month = $('[name=month]').val();
                var momentMonth = moment(month, 'YYYY-MM');
                axios.get('/api/accounts', {
                    params: {
                        since: momentMonth.clone().startOf('month').format('YYYY-MM-DD'),
                        until: momentMonth.clone().endOf('month').format('YYYY-MM-DD'),
                    }
                }).then(function (response) {
                    $('input[name=bank_income]').val(0);
                    $('input[name=bank_outcome]').val(0);
                    var data = response.data;
                    var accounts = data.accounts;
                    var income = 0;
                    var outcome = 0;
                    _.forEach(accounts, function (account) {
                        // console.log(account);
                        income += account.referenced_income + account.unreferenced_income;
                        outcome += account.referenced_outcome + account.unreferenced_outcome;
                    });
                    $('input[name=bank_income]').val(income.toFixed(2));
                    $('input[name=bank_outcome]').val(-outcome.toFixed(2));
                     $('.clevar').each(function (i, v) {
                new Cleave(v, {
                    numeral: true,
                    numeralThousandsGroupStyle: 'thousand'
                });
            });
                });
                loadData();

            }

            function loadData() {
                $('.category-data').val(0);
                var month = $('[name=month]').val();
                axios.get('/api/charges', {
                    params: {
                        month: month,
                    },
                }).then(function (response) {

                    var data = response.data;
                    _.forEach(data, function (datum, categoryID) {
                        // console.log(data);
                        $('input[name="data[' + categoryID + ']"]').val(datum.amount.toFixed(2).toLocaleString());
                        $('[name="data_diffcomments[' + categoryID + ']"]').val(datum.comments);
                         $('.clevar').each(function (i, v) {
                new Cleave(v, {
                    numeral: true,
                    numeralThousandsGroupStyle: 'thousand'
                });
            });

                    });

                    var lastMonth = moment(month, 'YYYY-MM').add(-1, 'month').format('YYYY-MM');
                    axios.get('/api/charges', {
                        params: {
                            month: lastMonth,
                        },
                    }).then(function (response) {

                        var data = response.data;
                        _.forEach(data, function (datum, categoryID) {
                            $('input[name="data_last[' + categoryID + ']"]').val(datum.amount.toFixed(2));
                        });

                        calculateCategory();
                        calculateTotal('income');
                        calculateTotal('outcome');
                         $('.clevar').each(function (i, v) {
                new Cleave(v, {
                    numeral: true,
                    numeralThousandsGroupStyle: 'thousand'
                });
            });
                    });
                });
            }

            function calculateCategory(categoryID) {
                var selector = categoryID ? '[data-category-id=' + categoryID + ']' : '[data-category-id]';
                $('[name^="data["]' + selector).each(function () {
                    var categoryID = $(this).attr('data-category-id');
                    var current = $('input[name="data[' + categoryID + ']"]').val();
                    var last = $('input[name="data_last[' + categoryID + ']"]').val();
                    var diff = current - last;
                    $('input[name="data_diffprev[' + categoryID + ']"]').val(diff.toFixed(2));
                    calculateGroup($(this).attr('data-group-id'));
                });
            }

            function numberWithCommas(x) {
                x = x.toString();
                var pattern = /(-?\d+)(\d{3})/;
                while (pattern.test(x))
                    x = x.replace(pattern, "$1,$2");
                return x;
            }

            function calculateGroup(groupID) {
                var current = 0;
                var last = 0;
                $('[name^="data["][data-group-id=' + groupID + ']').each(function () {
                    current += parseFloat($(this).val() || 0);
                });
                $('[name^="data_last["][data-group-id=' + groupID + ']').each(function () {
                    last += parseFloat($(this).val() || 0);
                });

                var diff = current - last;
                $('[name="datasum[' + groupID + ']"]').val(current.toFixed(2));
                $('[name="datasum_diffprev[' + groupID + ']"]').val(diff.toFixed(2));
            }

            function calculateTotal(kind) {
                var current = 0;
                var last = 0;
                const fieldset = $('.' + kind);
                fieldset.find('[name^="data["]').each(function () {
                    current += parseFloat($(this).val() || 0);
                });
                fieldset.find('[name^="data_last["]').each(function () {
                    last += parseFloat($(this).val() || 0);
                });

                var bankCurrent = $('[name=bank_' + kind + ']').val();
                var bankDiff = current - bankCurrent;
                $('[name=' + kind + ']').val(current.toFixed(2));
                $('[name=diffprev_' + kind + ']').val(last.toFixed(2));
                $('[name=diff_' + kind + ']').val(bankDiff.toFixed(2));
            }

            $('[name^="data["]').on('change', function () {
                calculateCategory($(this).attr('data-category-id'));
                calculateTotal('income');
                calculateTotal('outcome');
            });

            $('[name=month]').on('change', function () {
                loadAccountsData();
            });

            loadAccountsData();
            $('[data-toggle="tab"]').click(function(){  
                $('.tab-pane').removeClass('active');
            });
        </script>
        <script>
            $(document).ready(function(){
                $('#export_report').click(function(){
                    var month = $('[name=month]').val();
                    var data = [];
                    $('[name^="data["]').each(function() {
                        data.push($(this).val());
                    });
                    console.log(data);
                    axios.post('/export_flow', {
                      month: month,
                      data:data
                  }).then(function (response) {

                  });
                  $(".download_flow").show(1000);
              });
                $("#export_download").click(function(){
                    $(".download_flow").hide(1000);
                });    
            });
        </script>
        <script>
            $('.drop-down-show-hide').hide();

            $('#dropDown').change(function () {
                $('.drop-down-show-hide').hide();
                $('#' + this.value).show();
            });
        </script>
        <script type="text/javascript">
            $('.clevar').each(function (i, v) {
                new Cleave(v, {
                    numeral: true,
                    numeralThousandsGroupStyle: 'thousand'
                });
            });
        </script>


        @endsection