@extends('admin.layouts.app')

@section('title', 'General Report')

@section('content')

    <div class="row">
        <div class="col-md-12">
            <div class="main-card mb-3 card">
                <div class="card-body"><h5 class="card-title">BOOKINGS ANALYTICS GRAPH</h5>
                    <select class="sel" name="year">
                        <option value="2020">Year 2020</option>
                        <option value="2019">Year 2019</option>
                        <option value="2018">Year 2018</option>
                    </select>
                </div>
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">

                        {!! $chart->container() !!}

                    </div>
                </div>

            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>

    {!! $chart->script() !!}

    <script type="text/javascript">
        var original_api_url = {{ $chart->id }}_api_url;
        $(".sel").change(function(){
            var year = $(this).val();
            {{ $chart->id }}_refresh(original_api_url + "?year="+year);
        });
    </script>

@endsection