@extends('layouts.master')

@section('title', 'metricas')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
                    <h1 class="m-0 text-dark">Finanzas <small> Metricas</small> <small>{{ date('d/m/Y',strtotime($fecha_inicio)) }}</small> <small>a</small> <small>{{ date('d/m/Y',strtotime($fecha_fin)) }}</small></h1>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <button type="button" class="btn btn-secondary btn-block" data-toggle="modal" data-target="#ayudaModal">Ayuda</button>
                </div>
            </div>
        </div>
    </div>

    <section class="content aling-center">
        <div class="container-fluid">
            <div class="row">
                <div class="col-8">
                    <div class="card aling-center">
                        <div class="card">
                            <div class="card-header ui-sortable-handle bg-dark text-light">
                                <h3 class="card-title">
                                    <i class="fa-regular fa-chart-bar mr-1"></i>
                                    Metricas de Eventos</h3>
                            </div>
                        </div>
                        <div class="card-body">
                            @if($eventos != null)
                                <div class="card-body">
                                    <div id="container"></div>
                                </div>
                            @else
                                <div><br><p class="text-center">No Existen Registros</p><br></div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="card">
                        <div class="card" style="cursor: move;">
                            <div class="card-header ui-sortable-handle bg-dark text-light">
                                <h3 class="card-title">
                                    <i class="fa-regular fa-clock mr-1"></i>
                                    Cambiar Fecha
                                </h3>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                    {{ Form::open(['route' => ['finanzas.metricas', null], 'method'=>'POST']) }}

                                    <br>
                                    {{ Form::label('', "Fecha de Inicio", ['style'=>'font-weight: bold;']) }} *
                                    {{ Form::date('fecha_inicio',date('Y-m-d', strtotime($fecha_inicio)), ['required' => 'required', 'class'=>'form-control']) }}
                                    <br>
                                    {{ Form::label('', "Fecha de Fin", ['style'=>'font-weight: bold;']) }} *
                                    {{ Form::date('fecha_fin',date('Y-m-d',strtotime($fecha_fin)), ['required' => 'required', 'class'=>'form-control']) }}
                                    <hr>
                                    {{ Form::submit('Actualizar', array('class'=> 'btn btn-success btn-lg btn-block'))}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="card">
                <div class="card-header ui-sortable-handle bg-dark text-light">
                    <h3 class="card-title">
                        <i class="fa-regular fa-calendar mr-1"></i>
                        Eventos Facturacion Total
                    </h3>
                </div>
                <div class="card-body">
                    @if(count($eventos))
                        <table class="table table-hover table-striped nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th class="text-center">Total Entradas Vendidas</th>
                                    <th class="text-center">Total Productos Vendidos</th>
                                    <th class="text-center">Total Entradas Facturadas</th>
                                    <th class="text-center">Total Productos Facturados</th>
                                    <th class="text-right">Facturacion Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($eventos as $key => $evento)
                                    <tr>
                                        <td>{{ $evento->nombre }}</td>
                                        <td class="text-center">{{ $evento->cantidadEntradas }}</td>
                                        <td class="text-center">{{ $evento->cantidadComandas }}</td>
                                        <td class="text-center">$ {{number_format ($evento->entradasPrecioTotal, 0, ',', '.') }}</td>
                                        <td class="text-center">$ {{number_format ($evento->comandasPrecioTotal, 0, ',', '.') }}</td>
                                        <td class="text-right">$ {{ number_format( $evento->cantidadFacturado, 0, ',', '.') }}</td>
                                    </tr>
                                @endforeach
                                <tr>
                                    <th>Total</th>

                                    <th class="text-center">{{ $evento->cantidadEntradasTotal }}</th>
                                    <th class="text-center">{{ $evento->cantidadComandasTotal }}</th>
                                    <th class="text-center">$ {{number_format ($evento->entradasSumaPrecioTotal, 0, ',', '.') }}</th>
                                    <th class="text-center">$ {{number_format ($evento->comandasSumaPrecioTotal, 0, ',', '.') }}</th>
                                    <th class="text-right">$ {{number_format ($evento->totalFacturacion, 0, ',', '.') }}</th>
                                </tr>
                            </tbody>

                        </table>
                    @else
                        <div><br><p class="text-center">No Existen Registros</p><br></div>
                    @endif
                </div>
            </div>
        </div>



        <div class="modal fade" id="ayudaModal" 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="ayudaModalLabel">Ayuda</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fa-solid fa-times"></i></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <h5><b>Donde es?</b></h5>
                        <p>
                            El mismo dia del evento te llegara por Whatsapp la direccion del evento y tambien podras visualizarla en este link.
                        </p>
                        <h5><b>Que es mi saldo?</b></h5>
                        <p>
                            Tu entrada tambien funciona como una biletera virtual.
                        </p>
                        <hr>
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <button type="button" class="btn btn-outline-secondary btn-block" data-dismiss="modal">Cerrar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script>

    if({{count($eventos)}}){
            Highcharts.chart('eventos', {
                chart: {
                        type: 'bar'
                    },
                    title: {
                        align: 'left',
                        text: ''
                    },
                    subtitle: {
                        align: 'left',
                        text: ''
                    },
                    accessibility: {
                        announceNewData: {
                            enabled: true
                        }
                    },
                    xAxis: {
                        categories: [
                            @foreach ($eventos as $key => $evento)
                            ['{{ $evento->nombre }}'],
                            @endforeach
                        ],
                        title: {
                            text: null
                        },
                        gridLineWidth: 1,
                        lineWidth: 0
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Invitados',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        },
                        gridLineWidth: 0
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: '50%',
                            dataLabels: {
                                enabled: true
                            },
                            groupPadding: 0.1
                        }
                    },

                    tooltip: {
                        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> Total de invitados<br/>'
                    },
                    series: [
                            {
                                name: 'Porcentaje',
                                colorByPoint: true,
                                data: [
                                    @foreach ($eventos as $key => $evento)
                                    ['{{ $evento->nombre }}', {{  count($evento->invitadosRecepcionados) }}],
                                    @endforeach
                                ]
                            }
                        ],
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                credits: {
                    enabled: false
                },
            });
    }

</script>
<script>
    if({{count($eventos)}}){
        Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: [
                    @foreach ($eventos as $key => $evento)
                    ['{{ $evento->nombre }}'],
                    @endforeach
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} Total</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Total Facturacion',
                data: [
                    @foreach ($eventos as $key => $evento)
                    ['{{ $evento->nombre }}', {{ ($evento->cantidadFacturado / 1000) }}],
                    @endforeach
                ]

            }, {
                name: 'Total Productos',
                data: [
                    @foreach ($eventos as $key => $evento)
                    ['{{ $evento->nombre }}', {{ ($evento->cantidadComandas) }}],
                    @endforeach
                ]

            }, {
                name: 'Total Invitados',
                data: [
                    @foreach ($eventos as $key => $evento)
                    ['{{ $evento->nombre }}', {{  count($evento->invitadosRecepcionados) }}],
                    @endforeach
                ]

            }]
        });
    }
</script>
<script>

        if({{count($eventos)}}){

            Highcharts.chart('facturacion', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Facturacion de Eventos "EL SEXTO"'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: [
                        @foreach ($eventos as $key => $evento)
                        ['{{ $evento->nombre }}'],
                        @endforeach
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Rainfall (mm)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    bar: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [
                        {
                            name: 'Eventos',
                            colorByPoint: true,
                            data: [
                                @foreach ($eventos as $key => $evento)
                                ['{{ $evento->nombre }}', {{ $evento->porcentaje }}],
                                @endforeach
                            ],
                        }
                    ],
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                credits: {
                    enabled: false
                },
            });




        }

</script>

    <script>
    $(document).ready(function() {
        $('#videos').DataTable( {
            "columnDefs": [
                { "orderable": false, "targets": [1,2,3,4,5] }
            ],
            "order": [[ 0, 'asc' ]],
            "scrollX": true,
            "language": {
                "lengthMenu": "Mostrar _MENU_ por pagina",
                "zeroRecords": "No existen Registros",
                "info": "", // Mostrando Pagina _PAGE_ de _PAGES_
                "infoEmpty": "",// No existen Registros
                "infoFiltered": "", // (filtrado de _MAX_ registros)
                "search": "Buscar:",
                "paginate": {
                    "first":      "Primera",
                    "last":       "Ultima",
                    "next":       "Siguiente",
                    "previous":   "Anterior"
                },
            },
            "pageLength": 250,
            //"dom": 'f<<t>p>'
            "dom": '<"top"f>rt<"bottom"p><"clear">'
        } );
    } );
    </script>

@endsection

@section('javascript')
@endsection