@php
        @endphp
@include('system-layouts/head')
@include('mod-report.title-report-seller')
{{--{{dd($record_salesorder_completed)}}--}}
<div class="container-fluid">
    <!-- contentiner -->
    <!-- col -->

    <div class="row">
        <div class="col-lg-6 offset-lg-3">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="row-form">
                            <div class="col-12 p-0">
                                <h6 class="text-center text-warning">Faturado</h6>
                                <h4 class="text-center">
                                    <small>Recorrente | Padão</small><br>
                                    <small>R$</small><span id="concludedRecurrentInfo">0,00</span> |
                                    <small>R$</small><span id="concludedDefaultInfo">0,00</span>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card">
                        <div class="row-form">
                            <div class="col-12 p-0">
                                <h6 class="text-center text-warning">Pendente</h6>
                                <h4 class="text-center">
                                    <small>Recorrente | Padão</small><br>
                                    <small>R$</small><span id="pendingRecurrentInfo">0,00</span> |
                                    <small>R$</small><span id="pendingDefaultInfo">0,00</span></h4>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="card">
        <!-- card -->
        <div class="card-body" id="concludedRecurrent">
            <div class="card-header" style="background-color: #FFFFFF;">

                <div class="card-actions" style="margin-top: -15px; margin-right: -35px;">
                    <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>

                </div>
                <h2>FATURADAS</h2>
            </div>
            <h3 style="margin-top: -15px;">Recorrente</h3>
            @php
                $record=$record_so_billed_paymethod_recurrent;
                $l=1;
                $porc_rec='_fat';
                $reportResultPorc='Fat';
            @endphp
            @include('mod-report.table-sales-client-value-rec')
        </div>
        <!--/ card -->
        <!-- card -->
        <div class="card-body" id="concludedDefault">
            <div class="card-header" style="background-color: #FFFFFF;">
                <h3 style="margin-top: -15px;">Vendas</h3>
            </div>
            @php $record=$record_so_billed_paymethod_default; @endphp
            @include('mod-report.table-sales-client-value-parc')
        </div>
        <!--/ card -->
    </div>


    <div class="card">

        <!-- card -->
        <div class="card-body" id="pendingRecurrent">
            <div class="card-header" style="background-color: #FFFFFF;">

                <div class="card-actions" style="margin-top: -15px; margin-right: -35px;">
                    <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>

                </div>
                <h2>Pendente</h2>
            </div>
            <h3 style="margin-top: -15px;">Recorrente</h3>

            @php
                $record=$record_so_pending_paymethod_recurrent;
                $l=10000;
                $porc_rec='_pen';
                $reportResultPorc='Pen';
                @endphp
            @include('mod-report.table-sales-client-value-rec')


        </div>
        <!--/ card -->

        <!-- card -->
        <div class="card-body" id="pendingDefault">
            <div class="card-header" style="background-color: #FFFFFF;">
                <h3 style="margin-top: -15px;">Vendas</h3>
            </div>
            @php $record=$record_so_pending_paymethod_default;  @endphp
            @include('mod-report.table-sales-client-value-parc')

        </div>

        <!--/ card -->
    </div>
    <!--/ end col -->
    <!--/ end contentiner -->
    <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">

</div>
@include('system-layouts/footer')
@include('system-layouts.footer-plugin-datepicker')

<script type="text/javascript">
    $(function () {

        $('#concludedRecurrentInfo').html($('#concludedRecurrent .report-result').html());
        $('#concludedDefaultInfo').html($('#concludedDefault .report-result').html());
        $('#pendingDefaultInfo').html($('#pendingDefault .report-result').html());
        $('#pendingRecurrentInfo').html($('#pendingRecurrent .report-result').html());

        $('.daterangepicker-custom').daterangepicker(
            {
                timePicker: true,
                timePicker24Hour: true,
                locale: {
                    format: 'D/MM/YYYY H:mm',
                    applyLabel: 'Aplicar',
                    cancelLabel: 'Cancelar',
                    fromLabel: 'A partir',
                    toLabel: 'Para',
                    customRangeLabel: 'Personalizado',
                    daysOfWeek: ['Dom', 'Seg', 'ter', 'Qua', 'Qui', 'Sex', 'Sab'],
                    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                },
                ranges: {
                    'Hoje': [moment().startOf('days'), moment()],
                    'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
                    'Últimos 30dias': [moment().subtract(29, 'days'), moment()],
                    'Este mês': [moment().startOf('month'), moment().endOf('month')],
                    'Mês passado': [moment().subtract(1, 'month').startOf('month'), moment()],
                }
            });


    });
</script>
<script>
    $(function () {
        $('.porc_rec_fat').change(function () {
            var v_id = $(this).attr('id');
            var v_value = $(this).val();
            var v_rec_value = $('#recValue' + v_id).val();
            var v_subres = v_rec_value * v_value;
            v_subres = v_subres / 100;
            $('#recValueSubResultTxt' + v_id).html(convertVirgola(v_subres.toFixed(2)));
            $('#recValueSubResultInp' + v_id).val(v_subres.toFixed(2));

            sumPorcRecFat()

        });

        $('.porc_rec_pen').change(function () {
            var v_id = $(this).attr('id');
            var v_value = $(this).val();
            var v_rec_value = $('#recValue' + v_id).val();
            var v_subres = v_rec_value * v_value;
            v_subres = v_subres / 100;
            $('#recValueSubResultTxt' + v_id).html(convertVirgola(v_subres.toFixed(2)));
            $('#recValueSubResultInp' + v_id).val(v_subres.toFixed(2));

            sumPorcRecPen()

        });

    });

    function sumPorcRecFat() {
        var v_value = 0;
        var v_resul = 0;
        $(".rec_value_sub_result_fat").each(function () {
            v_value += parseFloat($(this).val());

        });
        $('#reportResultPorcFat').html(convertVirgola(v_value.toFixed(2)));
    }

    function sumPorcRecPen() {
        var v_value = 0;
        var v_resul = 0;
        $(".rec_value_sub_result_pen").each(function () {
            v_value += parseFloat($(this).val());

        });
        $('#reportResultPorcPen').html(convertVirgola(v_value.toFixed(2)));
    }
</script>