@extends('layouts.dashboard')

@section('section-main')
    <button id="btn-print-charts" class="btn btn-secondary d-block mx-auto mb-1">Imprimir Graficos</button>

    <div class="card-deck card-reportes no-print">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Tiempo para el evento</h5>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center p-0">
                @if (now()->format('Y-m-d H:i:s') <= $event_dates[0]->date)
                    <ul class="countdown">
                        <li><span id="days"></span>dias</li>
                        <li><span id="hours"></span>horas</li>
                        <li><span id="minutes"></span>minutes</li>
                        <li><span id="seconds"></span>Seconds</li>
                    </ul>
                @else
                    <div class="alert alert-dark" role="alert">
                        Evento finalizado
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="card-deck card-reportes mt-3">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Ventas diarias</h5>
            </div>
            <div class="card-body">
                <div id="chart_daily_sales"></div>
            </div>
            {{-- <div class="card-footer d-flex justify-content-center">
                <button class="btn btn-light btn-print" data-id="svg-daily-sales" data-input="daily_sales">Imprimir</button>
            </div> --}}
        </div>
    </div>

    <div class="card-deck card-reportes mt-3">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Boletas Vendidas</h5>
            </div>
            <div class="card-body">
                <div id="chart_tickets_summary"></div>
            </div>
        </div>
    </div>

    <div class="card-deck card-reportes mt-3">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Boletas generadas por tipo de venta</h5>
            </div>
            <div class="card-body">
                @if ($tickets_by_channel->isEmpty())
                    <div class="alert alert-light mb-0" role="alert">No se han generado boletas.</div>
                @else
                    <div id="chart_tickets_by_channel"></div>
                @endif
            </div>
        </div>
    </div>
    <div style="page-break-after: always;"></div>

    <div class="card-deck card-reportes mt-3">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Reservas no concretadas</h5>
            </div>
            <div class="card-body">
                <div id="chart_reservations_not_completed"></div>
            </div>
        </div>
    </div>

    <div class="card-deck card-reportes mt-3">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Edades de compradores</h5>
            </div>
            <div class="card-body">
                <div id="chart_age"></div>
            </div>
        </div>
    </div>

    {{-- <form id="frm-chart" action="{{ url('/mipdf') }}" method="POST" enctype="multipart/form-data" target="_blank">
        @csrf
        @method('POST')

        <input type="hidden" name="daily_sales" id="chart-daily-sales">
        <input type="hidden" name="tickets_summary" id="chart-tickets-summary">
        <input type="hidden" name="reservations_not_completed" id="chart-reservations-not-completed">
        <input type="hidden" name="age" id="chart-age">
    </form> --}}
@endsection

@section('styles')
    <link href="{{ asset('css/c3.min.css') }}" rel="stylesheet">
    <style>
        #chart_tickets_by_channel .c3-chart-texts text { fill: #52514e !important; font-size: 12px; }
    </style>
@endsection

@section('scripts')
<script src="{{ asset('js/vendor/d3.v5.min.js') }}" charset="utf-8"></script>
<script src="{{ asset('js/vendor/c3.min.js') }}"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="{{ asset('js/admin/home.js') }}"></script>
<script>
    //  Ventas diarias
    var daily_sales_data = @json($daily_sales['data']);
    var daily_sales_date = @json($daily_sales['date']);
    var chart_daily_sales = c3.generate({
        bindto: '#chart_daily_sales',
        data: {
            columns: [
                daily_sales_data
            ],
            colors: {
                Boletas: '#F69525',
            },
            type: 'bar'
        },
        axis: {
            // y: { show: false},
            x: {
                type: 'category',
                categories: daily_sales_date
            }
        },
        legend: {
            show: false
        },
        bar: {
            width: 25
        }
    });
    
    //  Resumen por edades
    var age = @json($age);
    var chart_age = c3.generate({
        bindto: '#chart_age',
        data: {
            columns: [
                ['18-25', age['18']],
                ['26-35', age['26']],
                ['> 35', age['36']],
            ],
            colors: {
                '18-25': '#F5860A',
                '26-35': '#667D8C',
                '> 35': '#CED6DB',
            },
            type : 'donut'
        }
    });
    
    //  Boletas vendidas
    var tickets_summary = @json($tickets_summary);
    var chart2 = c3.generate({
        bindto: '#chart_tickets_summary',
        data: {
            x: 'x',
            columns: tickets_summary,
            type: 'bar',
            groups: [
                ['Vendidos', 'Restantes']
            ],
            colors: {
                Vendidos: '#667D8C',
                Restantes: '#AABFCF'
            }
        },
        axis: {
            rotated: true,
            x: {
                type: 'category'
            },
            y: {
                max: {{ $total_sales_tickets }}
            }
        },
        grid: {
            y: {
                lines: [{value:0}]
            }
        },
        legend: {
            show: false
        },
        bar: {
            width: 25
        },
        size: {
            height: 150
        }
    });
    
    //  Boletas generadas por tipo de venta (una barra por canal, el color indica el tipo)
    var tickets_by_channel = @json($tickets_by_channel);
    if (tickets_by_channel.length) {
        var channel_series = {
            general:  { name: 'Venta general',   color: '#2a78d6' },
            access:   { name: 'Acceso especial', color: '#eb6834' },
            courtesy: { name: 'Cortesías',       color: '#1baf7a' }
        };
        var channel_total = tickets_by_channel.reduce(function (sum, row) { return sum + row.qty; }, 0);
        var channel_columns = [];
        var channel_colors = {};
        Object.keys(channel_series).forEach(function (key) {
            if (!tickets_by_channel.some(function (row) { return row.channel === key; })) return;
            var name = channel_series[key].name;
            channel_colors[name] = channel_series[key].color;
            channel_columns.push([name].concat(tickets_by_channel.map(function (row) {
                return row.channel === key ? row.qty : null;
            })));
        });

        c3.generate({
            bindto: '#chart_tickets_by_channel',
            data: {
                columns: channel_columns,
                type: 'bar',
                groups: [Object.keys(channel_colors)],
                colors: channel_colors,
                order: null,
                labels: {
                    format: function (v) { return v === null ? '' : v; }
                }
            },
            axis: {
                rotated: true,
                x: {
                    type: 'category',
                    categories: tickets_by_channel.map(function (row) { return row.label; })
                },
                y: {
                    padding: { top: 40 },
                    tick: {
                        format: function (x) { return x % 1 === 0 ? x : ''; }
                    }
                }
            },
            tooltip: {
                format: {
                    value: function (v) {
                        return v + ' (' + Math.round(v * 100 / channel_total) + '%)';
                    }
                }
            },
            grid: {
                y: {
                    lines: [{value:0}]
                }
            },
            legend: {
                show: true
            },
            bar: {
                width: 25
            },
            size: {
                height: 70 + tickets_by_channel.length * 40
            }
        });
    }

    //  Reservaciones no completadas
    var reservations_not_completed = @json($reservations_not_completed);
    var chart2 = c3.generate({
        bindto: '#chart_reservations_not_completed',
        data: {
            x: 'x',
            columns: reservations_not_completed,
            type: 'bar',
            groups: [
                ['No Completadas', 'Completadas']
            ],
            colors: {
                'No Completadas': '#AABFCF',
                Completadas: '#667D8C'
            }
        },
        axis: {
            rotated: true,
            x: {
                type: 'category'
            },
            y: {
                max: {{ $reservations }},
                tick: {
                    format: function(x) { return x % 1 === 0 ? x : ''; }
                }
            }
        },
        grid: {
            y: {
                lines: [{value:0}]
            }
        },
        legend: {
            show: false
        },
        bar: {
            width: 25
        },
        size: {
            height: 150
        }
    });
</script>


@if (now()->format('Y-m-d H:i:s') <= $event_dates[0]->date)
    <script>
        //  countDown
        const second = 1000,
            minute = second * 60,
            hour = minute * 60,
            day = hour * 24;
            
        let countDown = new Date('{{ $fecha }}').getTime(),
            x = setInterval(function() {
                let now = new Date().getTime(),
                    distance = countDown - now,
                    days = Math.floor(distance / (day)),
                    hours = Math.floor((distance % (day)) / (hour)),
                    minutes = Math.floor((distance % (hour)) / (minute)),
                    seconds = Math.floor((distance % (minute)) / second);

                if (String(days).length == 1) days = '0' + days;
                if (String(hours).length == 1) hours = '0' + hours;
                if (String(minutes).length == 1) minutes = '0' + minutes;
                if (String(seconds).length == 1) seconds = '0' + seconds;

                document.getElementById('days').innerText = days + ':',
                document.getElementById('hours').innerText = hours + ':',
                document.getElementById('minutes').innerText = minutes + ':',
                document.getElementById('seconds').innerText = seconds;
            
                //  do something later when date is reached
                //  if (distance < 0) {
                //      clearInterval(x);
                //      'IT'S MY BIRTHDAY!;
                //  }

            }, second);
    </script>
@endif

@endsection