@extends('layouts.app')

@section('css')
    <link rel="stylesheet" href="{!! asset('files_custom') !!}/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <style>
        .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed tbody tr td.day.active:before{
            background: linear-gradient(to right, #313232, #313232) !important;
        }
        .bg-gradient-success, .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed tbody tr td.day.today:before{
            background: linear-gradient(to right, #00c88b, #00c88b) !important;
        }
        .col-custom{
            width: 20%;
        }
        @media only screen and (max-width: 1440px) {
            .col-custom{
                width: 20%;
            }
        }
        @media only screen and (max-width: 720px) {
            .col-custom{
                width: 50%;
            }
        }
        @media only screen and (max-width: 480px) {
            .col-custom{
                width: 100%;
            }
        }
        .standby{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .datepicker table tr td span.active{
            background-image: linear-gradient(to bottom,#00c88b,#00c88b) !important;
            color:#fff;
        }
        .datepicker table tr td span.focused{
            background: linear-gradient(to right, #00c88b, #00c88b);
            color:#fff;
        }
        .datepicker table tr td span:hover {
            background: #c2e7e4 !important;
        }
        .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed thead{
            background: linear-gradient(to right, #00c88b, #00c88b) !important;
        }
        .datepicker-custom .datepicker.datepicker-inline .datepicker-months .table-condensed thead{
            background: linear-gradient(to right, #00c88b, #00c88b) !important;
        }
        .datepicker-custom .datepicker.datepicker-inline .datepicker-years .table-condensed thead{
            background: linear-gradient(to right, #00c88b, #00c88b) !important;
        }
        .datepicker-custom .datepicker.datepicker-inline .datepicker-decades .table-condensed thead{
            background: linear-gradient(to right, #00c88b, #00c88b) !important;
        }
        .datepicker-custom .datepicker.datepicker-inline .datepicker-centuries .table-condensed thead{
            background: linear-gradient(to right, #00c88b, #00c88b) !important;
        }
        .btnAccionesCalendar{
            font-size: 20px;
            color: #00c88b;
            border: none;
        }
        .btnAccionesCalendar:hover{
            font-size: 20px;
            color: #454a4d;
        }
        #btnCliente:hover{
            text-decoration: none;
            color: #fff;
        }
        #accordion-ingresos.accordion.accordion-bordered .card .card-header a:before{
            color: #00c88b !important;
        }
        .bootstrap-touchspin-up {
            background-color: #00c88b !important;
            border-color: #00c88b !important;
        }

        .bootstrap-touchspin-down {
            background-color: #67666a !important;
            border-color: #67666a !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice,
        .select2-selection__choice__remove {
            background-color: #00c88b !important;
            border: 1px solid #00c88b !important;
            font-family: 'Poppins';
            font-weight: 400;
            font-size: 13px;
            color: #fff !important;
            margin-bottom: 5px;
        }

        .form-check .form-check-label input[type="checkbox"]:checked + .input-helper:before{
            background: #00c88b !important;
            border-width: 0 !important;
            border: solid #00c88b !important;
            border-color: #00c88b !important;
        }
        .form-check-primary.form-check label input[type="checkbox"] + .input-helper:before, .form-check-primary.form-check label input[type="radio"] + .input-helper:before{
            border-color: #00c88b !important;
        }
        .daterangepicker .ranges li.active{
            background: #00c88b !important;
        }
        .daterangepicker td.in-range{
            background: #00c88c38 !important;
        }
        .daterangepicker td.active, .daterangepicker td.active:hover{
            background: #00c88b !important;
        }
        .btnArrow{
            font-size: 25px;
            background: #f9f9f9;
            margin: 0px 10px;
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
        }
        #daterange{
            background: #f9f9f9;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }

        .center-content{
            margin: 0 auto;
        }

        #citas-mes, #encuestas-mes
        {
            font-family: "Fixture ebold", sans-serif;
            font-size: 1.125rem;
            color: #343a40;
        }
    </style>
@endsection

@section('content')

    <section class="content-header">
        <h1 class="pull-left">Encuesta</h1>
    </section>

    <div class="content">

        @include('flash::message')

        <div class="clearfix"></div>

        <div class="card">
            <div class="card-body p-0">
                <div class="col-9 ranges text-right" id="filtroFechas">
                    <div class="btn-group w-50" style="margin-top: 50px; margin-bottom: 50px">
                        <button class="btnArrow" style="border:none" data-tipo="anterior"> &lt; </button>
                            <input class="w-50 text-center" type="text" id="daterange" name="daterange" value="{{ $fecha_inicial }} / {{ $fecha_final }}">
                        <button class="btnArrow" style="border:none" data-tipo="siguiente"> &gt; </button>
                    </div>
                </div>
                <div id="contenedor-table">
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-col col-4">
                            <div class="card-body">
                            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                                <i class="mdi mdi-calendar text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                                <div class="wrapper text-center text-sm-left">
                                <p class="card-text mb-0">Citas</p>
                                <div class="fluid-container">
                                    <h3 id="cantidad_citas" class="mb-0 font-weight-medium">{{ $citas }}</h3>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="card-col col-4">
                            <div class="card-body">
                            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                                <i class="mdi mdi-text text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                                <div class="wrapper text-center text-sm-left">
                                <p class="card-text mb-0">Encuestas</p>
                                <div class="fluid-container">
                                    <h3 id="cantidad_encuestas" class="mb-0 font-weight-medium">{{ $encuestas }}</h3>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="card-col col-4">
                            <div class="card-body">
                            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                                <h1 class="mr-0 mr-sm-4" style="color: #00c88a">%</h1>
                                <div class="wrapper text-center text-sm-left">
                                <p class="card-text mb-0">Porcentaje</p>
                                <div class="fluid-container">
                                    <h3 id="cantidad_encuestas" class="mb-0 font-weight-medium">{{ number_format((($encuestas / $citas) * 100), 2, '.', '') }}%</h3>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-body">
                            <h4 class="card-title text-uppercase center-content" style="text-align: center;">P1 ¿Cómo nos conociste?</h4>
                            <canvas id="myChartP1"></canvas>
                        </div>
                    </div>
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-body">
                            <h4 class="card-title text-uppercase center-content" style="text-align: center;">P2 ¿Cómo se dirigieron nuestras barberas con usted?</h4>
                            <canvas id="myChartP2"></canvas>
                        </div>
                    </div>
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-body">
                            <h4 class="card-title text-uppercase center-content" >P3 ¿El trato del personal con usted ha sido considerado y amable?</h4>
                            <canvas id="myChartP3"></canvas>
                            <div id="tratoExtraValues">
                                <h5>Comentarios:</h5>
                                <tr>
                                    @foreach($trato_extra_values as $value)
                                        <td>{{ $value }}</td>
                                    <br>
                                    @endforeach
                                </tr>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-body">
                            <h4 class="card-title text-uppercase center-content" >P4 ¿Puede marcar qué acciones realizaron nuestras barberas?</h4>
                            <canvas id="myChartP4"></canvas>
                        </div>
                    </div>
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-body">
                            <h4 class="card-title text-uppercase center-content">P5 ¿Nuestras instalaciones se encontraban en buen estado y limpias?</h4>
                            <canvas id="myChartP5"></canvas>
                            <div id="instalacionesExtraValues">
                                <h5>Comentarios:</h5>
                                <tr>
                                    @foreach($instalaciones_extra_values as $value)
                                        <td>{{ $value }}</td>
                                    <br>
                                    @endforeach
                                </tr>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-body">
                            <h4 class="card-title text-uppercase center-content">P6 El ambiente es cómodo. (música, decoración, limpieza) </h4>
                            <canvas id="myChartP6"></canvas>
                            <div id="ambienteExtraValues">
                                <h5>Comentarios:</h5>
                                <tr>
                                    @foreach($ambiente_extra_values as $value)
                                        <td>{{ $value }}</td>
                                    <br>
                                    @endforeach
                                </tr>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-body">
                            <h4 class="card-title text-uppercase center-content">P7 El tiempo de espera fue de... </h4>
                            <canvas id="myChartP7"></canvas>
                        </div>
                    </div>
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-body">
                            <h4 class="card-title text-uppercase center-content">P8 El precio del servicio va acorde al valor que me aporta.</h4>
                            <canvas id="myChartP8"></canvas>
                            <div id="precioExtraValues">
                                <h5>Comentarios:</h5>
                                <tr>
                                    @foreach($precio_extra_values as $value)
                                        <td>{{ $value }}</td>
                                    <br>
                                    @endforeach
                                </tr>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 grid-margin stretch-card center-content">
                        <div class="card-body">
                            <h4 class="card-title text-uppercase center-content">P9 ¿Le gustaría que mejoremos algo?</h4>
                            <canvas id="myChartP9"></canvas>
                            <div id="mejoraExtraValues">
                                <h5>Comentarios:</h5>
                                <tr>
                                    @foreach($mejora_extra_values as $value)
                                        <td>{{ $value }}</td>
                                    <br>
                                    @endforeach
                                </tr>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer clearfix float-right">
                    <div class="float-right">

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

    let ctxP1 = document.getElementById('myChartP1');

    let data = {
    labels: @JSON($top_redes_label),
    datasets: [{
        axis: 'y',
        label: 'P1 ¿Cómo nos conociste?',
        data: @JSON($top_redes_array),
        fill: false,
        backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
        'rgb(54, 162, 235)',
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
    };

    myChart1 = new Chart(ctxP1, {
        type: 'bar',
        data,
        options: {
            indexAxis: 'y',
        }
    });

    console.log(@JSON($top_redes_label), @JSON($top_redes_array));

    let ctxP2 = document.getElementById('myChartP2');

    let data2 = {
    labels: @JSON($top_dirigieron_label),
    datasets: [{
        axis: 'y',
        label: 'P2 ¿Cómo se dirigieron nuestras barberas con usted?',
        data: @JSON($top_dirigieron_array),
        fill: false,
        backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
        'rgb(54, 162, 235)',
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
    };

    myChart2 = new Chart(ctxP2, {
        type: 'bar',
        data: data2,
        options: {
            indexAxis: 'y',
        },
    });

    let ctxP3 = document.getElementById('myChartP3');

    let data3 = {
    labels: @JSON($top_trato_label),
    datasets: [{
        axis: 'y',
        label: 'P3 ¿El trato del personal con usted ha sido considerado y amable?',
        data: @JSON($top_trato_array),
        fill: false,
        backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
        'rgb(54, 162, 235)',
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
    };

    myChart3 = new Chart(ctxP3, {
        type: 'bar',
        data: data3,
        options: {
            indexAxis: 'y',
        }
    });

    let ctxP4 = document.getElementById('myChartP4');

    let data4 = {
    labels: @JSON($top_acciones_label),
    datasets: [{
        axis: 'y',
        label: 'P4 ¿Puede marcar qué acciones realizaron nuestras barberas?',
        data: @JSON($top_acciones_array),
        fill: false,
        backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
        'rgb(54, 162, 235)',
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
    };

    myChart4 = new Chart(ctxP4, {
        type: 'bar',
        data: data4,
        options: {
            indexAxis: 'y',
        }
    });

    let ctxP5 = document.getElementById('myChartP5');

    let data5 = {
    labels: @JSON($top_instalaciones_label),
    datasets: [{
        axis: 'y',
        label: 'P5 ¿Nuestras instalaciones se encontraban en buen estado y limpias?',
        data: @JSON($top_instalaciones_array),
        fill: false,
        backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
        'rgb(54, 162, 235)',
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
    };

    myChart5 = new Chart(ctxP5, {
        type: 'bar',
        data: data5,
        options: {
            indexAxis: 'y',
        }
    });

    let ctxP6 = document.getElementById('myChartP6');

    let data6 = {
    labels: @JSON($top_ambiente_label),
    datasets: [{
        axis: 'y',
        label: 'P6 El ambiente es cómodo. (música, decoración, limpieza) ',
        data: @JSON($top_ambiente_array),
        fill: false,
        backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
        'rgb(54, 162, 235)',
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
    };

    myChart6 = new Chart(ctxP6, {
        type: 'bar',
        data: data6,
        options: {
            indexAxis: 'y',
        }
    });

    let ctxP7 = document.getElementById('myChartP7');

    let data7 = {
    labels: @JSON($top_tiempo_label),
    datasets: [{
        axis: 'y',
        label: 'P7 El tiempo de espera fue de... ',
        data: @JSON($top_tiempo_array),
        fill: false,
        backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
        'rgb(54, 162, 235)',
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
    };

    myChart7 = new Chart(ctxP7, {
        type: 'bar',
        data: data7,
        options: {
            indexAxis: 'y',
        },
    });

    let ctxP8 = document.getElementById('myChartP8');

    let data8 = {
    labels: @JSON($top_precio_label),
    datasets: [{
        axis: 'y',
        label: 'P8 El precio del servicio va acorde al valor que me aporta.',
        data: @JSON($top_precio_array),
        fill: false,
        backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
        'rgb(54, 162, 235)',
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
    };

    myChart8 = new Chart(ctxP8, {
        type: 'bar',
        data: data8,
        options: {
            indexAxis: 'y',
        }
    });

    let ctxP9 = document.getElementById('myChartP9');

    let data9 = {
    labels: @JSON($top_mejora_label),
    datasets: [{
        axis: 'y',
        label: 'P9 ¿Le gustaría que mejoremos algo?',
        data: @JSON($top_mejora_array),
        fill: false,
        backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
        ],
        borderColor: [
        'rgb(54, 162, 235)',
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
        ],
        borderWidth: 1
    }]
    };

    myChart9 = new Chart(ctxP9, {
        type: 'bar',
        data: data9,
        options: {
            indexAxis: 'y',
        }
    });

		$('#daterange').daterangepicker({
			"cancelButtonClasses": "btn btn-secondary",
			"applyButtonClasses" : "btn btn-primary_local",
			ranges: {
				'Hoy': [moment(), moment()],
				'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
				'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
				'Este mes': [moment().startOf('month'), moment().endOf('month')],
				'Último mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
			},
			"alwaysShowCalendars": true,
			// "startDate": inicio,
			// "endDate": fin,
			"opens": "center",
			"locale": {
				"format": "DD-MMM-YYYY",
				"separator": " / ",
				"applyLabel": "Aplicar",
				"cancelLabel": "Cancelar",
				"fromLabel": "Desde",
				"toLabel": "Hasta",
				"customRangeLabel": "Personalizado",
				"weekLabel": "W",
				"daysOfWeek": [
					"Do",
					"Lu",
					"Ma",
					"Mie",
					"Jue",
					"Vie",
					"Sa"
				],
				"monthNames": [
					"Enero",
					"Febrero",
					"Marzo",
					"Abril",
					"Mayo",
					"Junio",
					"Julio",
					"Agosto",
					"Septiembre",
					"Octubre",
					"Noviembre",
					"Diciembre"
				],
				"firstDay": 1
			},
		});

        $('#daterange').on('apply.daterangepicker', function(ev, picker) {
            // $.LoadingOverlay("show");
            // actualizarDatos();
            // $.LoadingOverlay("hide");
            actualizarDatos();
        });

        function actualizarDatos(){
            let result = $("#daterange").val().split('/');

            let fecha_inicio = $.trim(result[0]);
            let fecha_final = $.trim(result[1]);


            fetch( url_dinamica + "/get_encuestas_rango/"+fecha_inicio+"/"+fecha_final,)
            .then(response => response.text())
            .then(data => {
                $('#contenedor-table').html(data);
            });
        }

        $(".btnArrow").click(function(){

            var result = $("#daterange").val().split('/');

            var fecha_inicio = $.trim(result[0]);
            var fecha_final = $.trim(result[1]);

            var tipo = $(this).data('tipo');

            $.ajax({
                type        : 'GET',
                url         : url_dinamica+"/get_encuestas/"+tipo+"/"+fecha_inicio+"/"+fecha_final,
                dataType    : 'json',
                encode          : true
            })
            .done(function(data){
                $('#daterange').data('daterangepicker').setStartDate(data.data.inicio_mes);
                $('#daterange').data('daterangepicker').setEndDate(data.data.fin_mes);

                actualizarDatos();
                $.LoadingOverlay("hide");
            })
            .fail(function(error) {
                console.log('error',error);
            });
        });

</script>
@endsection