@extends('layouts.painel')

@section('head')
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
@endsection

@section('title')
    {{ $title }}
@endsection

@section('content')
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary">
                <h3 class="card-title">Relatório</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div class="row justify-content-center align-items-center">

                    <!-- Date -->
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>De:</label>
                            <div class="input-group date" id="fromDateInput" data-target-input="nearest">
                                <div class="input-group-append" data-target="#fromDateInput" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                                <input type="text" class="form-control datetimepicker-input" data-target="#fromDateInput"
                                    id="from" value="{{ date('01-m-Y') }}" />

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

                    <!-- Date -->
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Até:</label>
                            <div class="input-group date" id="toDateInput" data-target-input="nearest">
                                <div class="input-group-append" data-target="#toDateInput" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                                <input type="text" class="form-control datetimepicker-input" data-target="#toDateInput"
                                    id="to" value="{{ date('d-m-Y') }}" />

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

                    <div class="col-lg-4">

                        <div class="row justify-content-center align-items-center">

                            <button type="button" id="report" class="btn btn-primary mt-3">
                                <i class="fas fa-search"></i>&nbsp; Consultar
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center align-items-center">
                    <div class="col-lg-9" id="response_report">

                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
@endsection

@section('scripts')
    <!-- InputMask -->
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/inputmask/jquery.inputmask.min.js') }}"></script>

    <!-- Tempusdominus Bootstrap 4 -->
    <script src="{{ asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>


    <script>
        $(function() {
            let delay = 2000;
            let Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: delay
            });

            //Date picker
            $('#fromDateInput').datetimepicker({
                format: "DD/MM/YYYY"
            });

            $('#toDateInput').datetimepicker({
                format: "DD/MM/YYYY"
            });


            //Datemask dd/mm/yyyy
            $('.datetime').inputmask({
                alias: "datetime",
                inputFormat: "dd/mm/yyyy"
            });

            $("#report").click(function() {
                var from = $("#from").val();
                var to = $("#to").val();

                if (from.length < 10) {
                    Toast.fire({
                        icon: 'error',
                        text: 'Data "De" é inválida.'
                    });
                    return false;
                }

                if (to.length < 10) {
                    Toast.fire({
                        icon: 'error',
                        text: 'Data "Até" é inválida.'
                    });
                    return false;
                }

                $('#report').prop('disabled', true);
                $('#report').html('<i class="fas fa-cog fa-spin"></i> Consultando...');

                $.post("{{ route('report.sales') }}", {
                    _token: '{{ csrf_token() }}',
                    from: from,
                    to: to
                }, function(response) {
                    var html_report = `
                    <div class="col-lg-12 mt-3">
                        <h1 class="text-muted text-center">Totais</h1>
                        <table class="table caption-top">
                            <thead>
                                <tr class="border-0">
                                    <td scope="col" class="border-0">
                                        <table class="table caption-top">
                                            <thead>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="3">
                                                        <h4  class="text-muted">Vendas Simplificadas</h4>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <td scope="col"colspan="2">Total</td>
                                                    <td scope="col" align="right">R$ ` + response.totalSimple + `</td>
                                                </tr>
                                                <tr>
                                                    <td scope="col"colspan="2">Comissão</td>
                                                    <td scope="col" align="right">R$ ` + response
                        .totalSimpleComission + `</td>
                                                </tr>
                                                <tr>
                                                    <td scope="col"colspan="2">Correspondente ao Total de Comissão</td>
                                                    <td scope="col" align="right"> ` + response
                        .totalSimplePercentage + `%</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </td>
                                </tr>
                                <tr class="border-0">
                                    <td scope="col" class="border-0">
                                        <table class="table caption-top">
                                            <thead>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="3">
                                                        <h4 class="text-muted">Vendas Detalhadas</h4>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <td scope="col" colspan="2">Total</td>
                                                    <td scope="col" align="right">R$ ` + response.totalDetailed + `</td>
                                                </tr>
                                                <tr>
                                                    <td scope="col"colspan="2">Comissão</td>
                                                    <td scope="col" align="right">R$ ` + response
                        .totalDetailedCommission + `</td>
                                                </tr>
                                                <tr>
                                                    <td scope="col"colspan="2">Correspondente ao Total de Comissão</td>
                                                    <td scope="col" align="right"> ` + response
                        .totalDetailedPercentage + `%</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </td>
                                </tr>

                                <tr class="border-0">
                                    <td scope="col" class="border-0">
                                        <table class="table caption-top">
                                            <thead>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="3">
                                                        <h4 class="text-muted">Entradas</h4>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <td scope="col" colspan="2">Total de Entradas</td>
                                                    <td scope="col" align="right" class="text-danger">R$ -` + response
                        .totalEntries + `</td>
                                                </tr>
                                                <tr>
                                                    <td scope="col"colspan="2">Desconto de Comissão</td>
                                                    <td scope="col" align="right" class="text-danger">R$ -` + response
                        .totalEntriesCommission + `</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </td>
                                </tr>

                                <tr class="border-0">
                                    <td scope="col" class="border-0">
                                        <table class="table caption-top">
                                            <thead>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="3">
                                                        <h4  class="text-muted">Vendas por Categorias</h4>
                                                    </th>
                                                </tr>`;

                    $(response.totalCategory).each(function(idx, elem) {

                        html_report = html_report + `
                                                    <tr>
                                                        <td scope="col">` + elem.category + ` (${elem.comission}%)</td>
                                                        <td scope="col" align="right">R$ ` + elem.value + `</td>
                                                        <td scope="col" align="right">` + elem.percentage + `%</td>
                                                    </tr>
                                                `;

                    });
                    html_report = html_report + `
                                            </thead>
                                        </table>
                                    </td>
                                </tr>
                                <tr class="border-0">
                                    <td scope="col" class="border-0">
                                        <table class="table caption-top">
                                            <thead>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-muted">Total Geral de Vendas Simplificadas</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-muted  text-right"><b>R$ ` + response
                        .totalSimple + `</b></h4>
                                                    </th>
                                                </tr>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-muted">Total Geral de Vendas Detalhadas</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-muted  text-right"><b>R$ ` + response
                        .totalDetailed + `</b></h4>
                                                    </th>
                                                </tr>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-muted">Total Geral de Vendas</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-muted  text-right"><b>R$ ` + response
                        .totalSales + `</b></h4>
                                                    </th>
                                                </tr>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-muted">Total Geral Comissão Simplificada</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-muted  text-right"><b>R$ ` + response
                        .totalSimpleComission + `</b></h4>
                                                    </th>
                                                </tr>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-muted">Total Geral Comissão Detalhada</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-muted  text-right"><b>R$ ` + response
                        .totalDetailedCommission + `</b></h4>
                                                    </th>
                                                </tr>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-muted">Total Geral Comissão</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-muted  text-right"><b>R$ ` + response
                        .totalSalesComission + `</b></h4>
                                                    </th>
                                                </tr>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-danger">Total Geral de Entradas</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-danger  text-right"><b>- R$ ` + response
                        .totalEntries + `</b></h4>
                                                    </th>
                                                </tr>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-danger">Total Geral de Comissão Entradas</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-danger  text-right"><b>- R$ ` + response
                        .totalEntriesCommission + `</b></h4>
                                                    </th>
                                                </tr>
                                                
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-muted">Total Final Comissão</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-muted  text-right"><b>R$ ` + response
                        .totalComission + `</b></h4>
                                                    </th>
                                                </tr>
                                                <tr style="background-color:#f9f9f9">
                                                    <th scope="col" colspan="2">
                                                        <h4  class="text-muted">Total A Receber</h4>
                                                    </th>
                                                    <th scope="col" colspan="2" align="right">
                                                        <h4  class="text-muted  text-right"><b>R$ ` + response
                        .toRecive + `</b></h4>
                                                    </th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </td>
                                </tr>
                            </thead>
                        </table>

                    </div>`;

                    $('#response_report').html(html_report);
                    $('#report').prop('disabled', false);
                    $('#report').html(' <i class="fas fa-search"></i>&nbsp; Consultar');
                });



            });


        });

        function print_pdf() {

            $('#report_print').prop('disabled', true);
            $('#report_print').html('<i class="fas fa-cog fa-spin"></i> imprimindo...');

            var data = htmlToPdfmake($('#response_report').html());
            var docDefinition = {
                content: [data]
            };
            pdfMake.createPdf(docDefinition).download("Score_Details.pdf");


        }
    </script>
@endsection