@php
    $isPublic = 0;

    if(env('FILESYSTEM_DRIVER') == 's3') {
        $fileurlbase = env('URLS3') . '/' . env('FILEKEY') . '/';
    } else {
        $fileurlbase = env('APP_URL') . '/';
    }

@endphp


@extends($isPublic ? 'layouts.app-public' : 'layouts.app')

@section('content')

@section('style')

    <style type="text/css">

        .form-data {
            margin-top: 15px;
            margin-left: 30px;
        }

        .form-data {
            margin-top: 15px;
            margin-left: 30px;
        }

        .main-card {
            width: 95%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 25px;
            margin-left: 30px;
        }

        .cards-acompanhamentos {
            min-width: 240px;
            width: 19%;
            height: 100px;
            border-radius: 15px;
            box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .card-total {
            background-color: #007bff;
        }

        .card-acompanhamentos {
            background-color: #ffc107;
        }

        .card-mediacoes {
            background-color: #28a745;
        }

        .card-feedbacks {
            background-color: #dc3545;
        }

        .card-relatorios {
            background-color: #17a2b8;
        }

        .img-acompanhamentos {
            background-color: white;
            border-radius: 50%;
            width: 58px;
            height: 58px;
            margin-left: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }

        .img-acompanhamentos-total {
            color: #007bff;
        }

        .img-acompanhamentos-acompanhamentos {
            color: #ffc107;
        }

        .img-acompanhamentos-mediacoes {
            color: #28a745;
        }
        .img-acompanhamentos-feedbacks {
            color: #dc3545;
        }

        .img-acompanhamentos-relatorios {
            color: #17a2b8;
        }

        .text-acompanhamentos {
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            color: white;
            font-size: 18px;
            margin-left: 20px;
        }

        .valor-acompanhamentos {
            text-align: center;
        }

        th, td {
            white-space: nowrap;
        }

        .main-chart {
            display: flex;
            justify-content: space-between;
            width: 95%;
            margin-left: 30px;
            flex-wrap: wrap;
        }

        .chart-geral {
            width: 100%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
            margin-bottom: 30px;
        }

        .chart-geral-meio {
            width: 49%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
            margin-bottom: 30px;
        }

        .header-chart {
            border-radius: 10px 10px 0 0;
            font-size: 18px;
            text-align: center;
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            color: white;
            background-color: #007bff;
            padding: 5px;
        }

        @media (max-width: 1250px) {

            .main-card {
                width: 100%;
                margin-left: 0px;
                justify-content: center;
            }

            .main-chart {
                display: flex;
                justify-content: center;
            }

            .chart-geral-meio {
                margin-left: 0px;
            }

            .chart-geral {
                margin-left: 0px;
            }
            .cards-acompanhamentos {
                width: 95%;
            }
            .chart-geral-meio {
                width: 95%;
            }
        }

    </style>

@endsection

<div class="form-data">
    <form>
        <div style="display:flex;">
            <div style="margin-right:7px;">
                <label>Data Inicial:</label>
                <input id="input_DI" autocomplete="off" class="form-control data componenteData" name="DI" placeholder="__/__/____" value="{{( $data_inicial )}}" type="text">
            </div>
            <div style="margin-right:7px;">
                <label>Data Final:</label>
                <input id="input_DF" autocomplete="off" class="form-control data componenteData" name="DF" placeholder="__/__/____" value="{{( $data_final )}}" type="text">
            </div>
            <div>
                <label>&nbsp;</label><br/>
                <button type="submit" class="btn btn-info"><i class="fa fa-refresh"></i></button>
            </div>
        </div>
    </form>
</div>

<div class="main-card">

    <div class="cards-acompanhamentos card-total" data-toggle="modal" data-target="#modal_acompanhamentos">
        <div class="img-acompanhamentos img-acompanhamentos-total">
            <i class="glyphicon glyphicon-triangle-right"></i>
        </div>

        <div class="text-acompanhamentos">
            <div class="title-acompanhamentos">
                Qtd. Total
            </div>
            <div class="valor-acompanhamentos">
                {{ count($totalAcompanhamentos) }}
            </div>
        </div>
    </div>

    <div class="cards-acompanhamentos card-acompanhamentos">
        <div class="img-acompanhamentos img-acompanhamentos-acompanhamentos">
            <i class="glyphicon glyphicon-ok"></i>
        </div>

        <div class="text-acompanhamentos">
            <div class="title-acompanhamentos">
                Acompanhamentos
            </div>
            <div class="valor-acompanhamentos">
                {{ count($acompanhamentos) }}
            </div>
        </div>
    </div>

    <div class="cards-acompanhamentos card-mediacoes">
        <div class="img-acompanhamentos img-acompanhamentos-mediacoes">
            <i class="glyphicon glyphicon-random"></i>
        </div>

        <div class="text-acompanhamentos">
            <div class="title-acompanhamentos">
                Mediação
            </div>
            <div class="valor-acompanhamentos">
                {{ count($mediacoes) }}
            </div>
        </div>
    </div>

    <div class="cards-acompanhamentos card-feedbacks">
        <div class="img-acompanhamentos img-acompanhamentos-feedbacks">
            <i class="glyphicon glyphicon-comment"></i>
        </div>

        <div class="text-acompanhamentos">
            <div class="title-acompanhamentos">
                Feedback
            </div>
            <div class="valor-acompanhamentos">
                {{ count($feedbacks) }}
            </div>
        </div>
    </div>

    <div class="cards-acompanhamentos card-relatorios">
        <div class="img-acompanhamentos img-acompanhamentos-relatorios">
            <i class="glyphicon glyphicon-list-alt"></i>
        </div>

        <div class="text-acompanhamentos">
            <div class="title-acompanhamentos">
                Relatório de Visita
            </div>
            <div class="valor-acompanhamentos">
                {{ count($relatorios) }}
            </div>
        </div>
    </div>

</div>

<div class="main-chart">
    <div class="chart-geral-meio">
        <div class="header-chart">
            Acompanhamentos
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_acompanhamentos"></div>
        </div>
    </div>

    <div class="chart-geral-meio">
        <div class="header-chart">
            Mediações
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_mediacoes"></div>
        </div>
    </div>

    <div class="chart-geral-meio">
        <div class="header-chart">
            Feedbacks
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_feedbacks"></div>
        </div>
    </div>

    <div class="chart-geral-meio">
        <div class="header-chart">
            Relatórios
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_relatorios"></div>
        </div>
    </div>

    <div class="chart-geral">
        <div class="header-chart">
            Total
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_totalacompanhamentos"></div>
        </div>
    </div>
</div>

<!-- modal acompanhamentos -->
<div class="modal fade" id="modal_acompanhamentos" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Acompanhamentos</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

            <table class="display table-striped table-bordered stripe datatable-no-buttons" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nome</th>
                        <th>Tipo</th>
                        <th>Data</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($totalAcompanhamentos as $acompanhamento)

                        <tr>
                            <td> {{ $acompanhamento->id }} </td>

                            <td>
                                @if(isset($acompanhamento->Solicitante->id))
                                <a href="{{ route('cadastro_de_funcionarios.edit', $acompanhamento->Solicitante->id) }}">
                                    {{ $acompanhamento->Solicitante->nome_completo ?? "-----" }}
                                </a>
                                @else
                                    {{ $acompanhamento->Solicitante->nome_completo ?? "-----" }}
                                @endif
                            </td>

                            <td> {{ $acompanhamento->Get_tipo() ?? "-----" }} </td>

                            <td>{{ date("d/m/Y", strtotime($acompanhamento->data)) ?? "--/--/----" }} </td>
                        </tr>
                    @endforeach
                </tbody>

            </table>

        </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')

@include('datatable', ['key' => 0, 'order' => 'desc'])

    <script>
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ route('chart_totalacompanhamentos') }}",
            type: "POST",
            data: {
                data_inicial: $('#input_DI').val(),
                data_final: $('#input_DF').val()
            },

            success: function(data) {
                console.log(data);
                var options_totalacompanhamentos = {
                    series: [{
                        name: 'Total',
                        data: data['charttotalacompanhamentos'],
                        color: '#007bff'
                    }],
                    chart: {
                        type: 'bar',
                        height: 350
                    },
                    plotOptions: {
                        bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        borderRadius: 5,
                        borderRadiusApplication: 'end'
                        }
                    },
                    dataLabels: {
                        enabled: true
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: data['meses']
                    },
                    yaxis: {
                    title: {
                    text: 'Quantidade'
                    }
                    },
                    fill: {
                        opacity: 1
                    },
                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return val;
                            }
                        }
                    }
                };

                var chart_totalacompanhamentos = new ApexCharts(document.querySelector("#chart_totalacompanhamentos"), options_totalacompanhamentos);
                chart_totalacompanhamentos.render();
            }
        });

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ route('chart_acompanhamentos') }}",
            type: "POST",
            data: {
                data_inicial: $('#input_DI').val(),
                data_final: $('#input_DF').val()
            },

            success: function(data) {
                console.log(data);
                var options_acompanhamentos = {
                    series: [{
                        name: 'Acompanhamentos',
                        data: data['chartacompanhamentos'],
                        color: '#ffc107'
                    }],
                    chart: {
                        type: 'bar',
                        height: 350
                    },
                    plotOptions: {
                        bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        borderRadius: 5,
                        borderRadiusApplication: 'end'
                        }
                    },
                    dataLabels: {
                        enabled: true
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: data['meses']
                    },
                    yaxis: {
                    title: {
                    text: 'Quantidade'
                    }
                    },
                    fill: {
                        opacity: 1
                    },
                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return val;
                            }
                        }
                    }
                };

                var chart_acompanhamentos = new ApexCharts(document.querySelector("#chart_acompanhamentos"), options_acompanhamentos);
                chart_acompanhamentos.render();
            }
        });

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ route('chart_mediacoes') }}",
            type: "POST",
            data: {
                data_inicial: $('#input_DI').val(),
                data_final: $('#input_DF').val()
            },

            success: function(data) {
                console.log(data);
                var options_mediacoes = {
                    series: [{
                        name: 'Mediacoes',
                        data: data['chartmediacoes'],
                        color: '#28a745'
                    }],
                    chart: {
                        type: 'bar',
                        height: 350
                    },
                    plotOptions: {
                        bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        borderRadius: 5,
                        borderRadiusApplication: 'end'
                        }
                    },
                    dataLabels: {
                        enabled: true
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: data['meses']
                    },
                    yaxis: {
                    title: {
                    text: 'Quantidade'
                    }
                    },
                    fill: {
                        opacity: 1
                    },
                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return val;
                            }
                        }
                    }
                };

                var chart_mediacoes = new ApexCharts(document.querySelector("#chart_mediacoes"), options_mediacoes);
                chart_mediacoes.render();
            }
        });

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ route('chart_feedbacks') }}",
            type: "POST",
            data: {
                data_inicial: $('#input_DI').val(),
                data_final: $('#input_DF').val()
            },

            success: function(data) {
                console.log(data);
                var options_feedbacks = {
                    series: [{
                        name: 'Feedbacks',
                        data: data['chartfeedbacks'],
                        color: '#dc3545'
                    }],
                    chart: {
                        type: 'bar',
                        height: 350
                    },
                    plotOptions: {
                        bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        borderRadius: 5,
                        borderRadiusApplication: 'end'
                        }
                    },
                    dataLabels: {
                        enabled: true
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: data['meses']
                    },
                    yaxis: {
                    title: {
                    text: 'Quantidade'
                    }
                    },
                    fill: {
                        opacity: 1
                    },
                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return val;
                            }
                        }
                    }
                };

                var chart_feedbacks = new ApexCharts(document.querySelector("#chart_feedbacks"), options_feedbacks);
                chart_feedbacks.render();
            }
        });

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ route('chart_relatorios') }}",
            type: "POST",
            data: {
                data_inicial: $('#input_DI').val(),
                data_final: $('#input_DF').val()
            },

            success: function(data) {
                console.log(data);
                var options_relatorios = {
                    series: [{
                        name: 'Relatórios',
                        data: data['chartrelatorios'],
                        color: '#17a2b8'
                    }],
                    chart: {
                        type: 'bar',
                        height: 350
                    },
                    plotOptions: {
                        bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        borderRadius: 5,
                        borderRadiusApplication: 'end'
                        }
                    },
                    dataLabels: {
                        enabled: true
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: data['meses']
                    },
                    yaxis: {
                    title: {
                    text: 'Quantidade'
                    }
                    },
                    fill: {
                        opacity: 1
                    },
                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return val;
                            }
                        }
                    }
                };

                var chart_relatorios = new ApexCharts(document.querySelector("#chart_relatorios"), options_relatorios);
                chart_relatorios.render();
            }
        });

    </script>

@endsection