@extends('template.default')
@section('text-field')
@stop
@section('content')

    <form id="reportForm" method="post" action="/reports/make/report" target="_blank">

        <input hidden name="type_view" value="" id="typeView">

        {{ csrf_field() }}

        <br>

        <div class="row">
            <div class="col offset-s1 s10">
                <h6 class="font-weight-600 grey-text text-darken-1 valign-wrapper">Relatórios
                    &nbsp;<i class="material-icons md-18" style="cursor: pointer;"
                             onclick="openModalHelp()">
                        help
                    </i>
                </h6>
                <div class="card z-depth-2 padding-2 border-radius-5 no-padding"
                     style="max-height: 316px; overflow-y: auto;"
                >
                    <ul class="collection no-margin">

                        @foreach($reports->data as  $report)

                            <li onclick="makeField('{{ $report->report->id }}' ,{{ \GuzzleHttp\json_encode($report->field) }}, {{ \GuzzleHttp\json_encode($report->filter) }})"
                                id="report_select_{{ $report->report->id }}" class="collection-item"
                                style="cursor: pointer;">
                                <span class="title">{{ $report->report->name }}</span>
                                <p class="no-margin grey-text text-darken-1">{{ $report->report->description }}</p>
                            </li>

                        @endforeach

                    </ul>

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

        <div class="row">
            <div class="col offset-s1 s10">
                <h6 class="font-weight-600 grey-text text-darken-1 valign-wrapper">Campos
                    &nbsp;<i class="material-icons md-18" style="cursor: pointer;"
                             onclick="openModalHelp()">
                        help
                    </i>
                </h6>
                <div class="card z-depth-2 padding-2 border-radius-5 no-padding"
                     style="max-height: 316px; overflow-y: auto;"
                >
                    <div id="contentFields" class="min-height-150">

                        <div class="valign-wrapper min-height-150">
                            <h6 class="font-weight-600 grey-text center-align msgLoadReport" style="width: 100%;">Você
                                deve escolher
                                um relatório</h6>
                        </div>

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

        <div class="row">
            <div class="col offset-s1 s10">
                <h6 class="font-weight-600 grey-text text-darken-1 valign-wrapper">Filtros
                    &nbsp;<i class="material-icons md-18" style="cursor: pointer;"
                             onclick="openModalHelp()">
                        help
                    </i>
                </h6>
                <div class="card z-depth-2 border-radius-5"
                     style=" overflow-y: auto;"
                >
                    <div id="contentFilters" class="min-height-150">

                        <div class="valign-wrapper min-height-150">
                            <h6 class="font-weight-600 grey-text center-align msgLoadReport" style="width: 100%;">Você
                                deve escolher
                                um relatório</h6>
                        </div>

                    </div>

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

        <div id="btnActionReport" hidden>

            <div class="fixed-action-btn click-to-toggle">
                <a class="btn-floating btn-large z-depth-3">
                    <i class="large material-icons">menu</i>
                </a>
                <ul>
                    <li>
                        <a class="btn-floating white z-depth-3" onclick="makeCSV()">
                            <i class="material-icons"
                               style="color: {{ custom_system('___SECONDARY_COLOR___') }}">format_list_numbered</i>
                        </a>
                    </li>
{{--                    <li>--}}
{{--                        <a class="btn-floating white z-depth-3" onclick="makePdf()">--}}
{{--                            <i class="material-icons"--}}
{{--                               style="color: {{ custom_system('___SECONDARY_COLOR___') }}">picture_as_pdf</i>--}}
{{--                        </a>--}}
{{--                    </li>--}}
                    <li>
                        <a class="btn-floating white z-depth-3" onclick="makeForm()">
                            <i class="material-icons" style="color: {{ custom_system('___SECONDARY_COLOR___') }}">pageview</i>
                        </a>
                    </li>
                </ul>
            </div>

        </div>

        <br>

    </form>

    <div id="modalHelp" class="modal">
        <div class="modal-content">
            <h5 class="font-weight-700 grey-text text-darken-3">Ajuda</h5>

            <br>

            <p class="font-weight-500 no-margin">Relatórios</p>
            <p class="grey-text text-darken-1 no-margin">Nessa opção você deve escolher qual o tipo de relatório
                pretendido.</p>

            <br>

            <p class="font-weight-500 no-margin">Campos</p>
            <p class="grey-text text-darken-1 no-margin">Nessa opção você pode marcar os campos que devem aparecer no
                relatório.</p>

            <br>

            <p class="font-weight-500 no-margin">Filtros</p>
            <p class="grey-text text-darken-1 no-margin">Nessa opção são mostradas todas as possibilidades de filtro
                para o relatório escolhido.</p>
            <p class="grey-text text-darken-1 no-margin">A utilização do filtro podem acompanhar operadores logicos que
                são eles:</p>
            <div style="padding-left: 40px;">
                <p class="grey-text text-darken-1 no-margin"><b>= (Igual)</b>: Os registros no relátorio são serão
                    mostrada caso a
                    informação seja igual a que você filtrou.</p>
                <p class="grey-text text-darken-1 no-margin"><b>!= (Diferente)</b>: Os registros no relátorio são serão
                    mostrada caso a
                    informação seja diferente a que você filtrou.</p>
                <p class="grey-text text-darken-1 no-margin"><b>>= (Maior ou igual)</b>: Os registros no relátorio são
                    serão mostrada caso a
                    informação seja maior ou igual a que você filtrou.</p>

                <p class="grey-text text-darken-1 no-margin"><b><= (Menor ou igual)</b>: Os registros no relátorio são
                    serão mostrada caso a
                    informação seja menor ou igual a que você filtrou.</p>
            </div>

            <br>

            <p class="font-weight-500 no-margin">Modos de visualização</p>
            <p class="grey-text text-darken-1 no-margin">Ao final é possivel ter acesso ao relatório de 3 formas:</p>
            <div style="padding-left: 40px;">
                <p class="grey-text text-darken-1 no-margin"><b>Visualização</b></p>
                <p class="grey-text text-darken-1 no-margin"><b>PDF</b></p>
                <p class="grey-text text-darken-1 no-margin"><b>CSV</b></p>
            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Fechar</a>
        </div>
    </div>

@endsection
@section('specific-scripts')

    <script>

        $(document).ready(function () {
            $('.tooltipped').tooltip();
        });

        function openModalHelp(view) {

            $('#modalHelp').modal('open');

            console.log(view);

        }


        $('.titulo_pagina').text('Relatórios');

        function makeField(report_id, fields, filters) {

            $('li').removeClass('grey lighten-3');
            $('#report_select_' + report_id).addClass('grey lighten-3');

            makeFilter(filters);

            $.ajax({
                type: 'GET',
                dataType: 'html',
                url: '/reports/make/field',
                data: {
                    report_id: report_id,
                    fields: fields
                },
                beforeSend: function () {

                    $('.msgLoadReport').text('Carregando...');

                },
                success: function (data) {

                    $('#contentFields').empty();
                    $('#contentFields').append(data);

                },
                error: function (xhr) {

                }
            });

        }

        function makeFilter(filters) {

            $.ajax({
                type: 'GET',
                dataType: 'html',
                url: '/reports/make/filter',
                data: {
                    filters: filters
                },
                beforeSend: function () {

                    $('.msgLoadReport').text('Carregando...');

                },
                success: function (data) {

                    $('#contentFilters').empty();
                    $('#contentFilters').append(data);

                },
                error: function (xhr) {

                }
            });

        }

        function makeForm() {

            $('#typeView').val('preview');
            $('#reportForm').submit();

        }

        function makePdf() {

            $('#typeView').val('pdf');
            $('#reportForm').submit();

        }

        function makeCSV() {

            $('#typeView').val('csv');
            $('#reportForm').submit();

        }

        $("#reportForm")
            .on("input", function () {

                if ($('.reportField:checked').length > 0) {

                    $('#btnActionReport').removeAttr('hidden', 'hidden');

                } else {

                    $('#btnActionReport').attr('hidden', 'hidden');

                }

            });

    </script>

@stop