@extends('layout')

@section('content')
    <div class="row">
        <div class="col-sm-12">
            <canvas id="myChart" width="400" height="300"></canvas>
        </div>
    </div>


@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script>
        var ctx = document.getElementById("myChart").getContext('2d');
        <?php
            $singleSeat = \App\SingleSeat::where('seat_id',$seatId)->orderBy('updated_at')->get();
            $ssu = $singleSeat->first();
        ?>

        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'Verkaufte Karten',
                    data:[
                        <?php
                            $count = 0;
                            $prevPrintedDate = '';
                            foreach($singleSeat as $ssu){
                                if($ssu->booked == '1')
                                    $count ++;

                                $date = date('Y-m-d', strtotime($ssu->updated_at));
                                if($date != $prevPrintedDate){
                                    if($prevPrintedDate != "" && $count > 0)
                                        echo "{ x: new Date(\"".$prevPrintedDate."\"), y: ".$count." },";
                                    $prevPrintedDate = $date;
                                }

                            }
                            echo "{ x: new Date(\"".$date."\"), y: ".$count." },";
                        ?>
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'month'
                        }
                    }]
                }
            }
        });
    </script>
@endsection