@extends($_layout . 'main')

{{-- khai báo title --}}
@section('title', 'Dashboard')

{{-- tên modul xuất hiện trong sub header --}}
@section('module.name', 'Dashboard')


@section('content')


    {{--
    <div class="row">
        <div class="col-12">

            <!--begin::Portlet-->
            <div class="m-portlet">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                Admin Dashboard
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">

                    <!--begin::Section-->
                    <div class="m-section m-section--last">
                        Xin chào! Cảm ơn bạn đã sử dụng dịch vụ. <br>
                        <br>
                        Đây là trang quản trị! Hãy truy cập các chức năng ở Sidebar bên tay trái!
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Portlet-->
        </div>
    </div> --}}


    <div class="row">

        <div class="col-lg-12">

            <!--begin::Portlet-->
            <div class="m-portlet m-portlet--tab">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <span class="m-portlet__head-icon m--hide">
                                <i class="la la-gear"></i>
                            </span>
                            <h3 class="m-portlet__head-text">
                                Biểu đồ
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__body">
                    @if ($data)
                        <!-- Select để chọn timeframe -->
                        <label for="timeframe">Chọn Timeframe: </label>
                        <select id="timeframe" onchange="drawChart()">
                            <option value="1m">1 phút</option>
                            <option value="5m">5 phút</option>
                            <option value="15m">15 phút</option>
                            <option value="30m" selected>30 phút</option>
                            <option value="1H">1 giờ</option>
                            <option value="4H">4 giờ</option>
                            <option value="8H">8 giờ</option>
                            <option value="12H">12 giờ</option>
                            <option value="1D">1 ngày</option>
                            <option value="3D">3 ngày</option>
                            <option value="5D">5 ngày</option>
                            <option value="1W">1 tuần</option>
                            <option value="2W">2 tuần</option>
                            <option value="1M">1 tháng</option>
                        </select>

                        <div id="stock-chart"></div>
                    @else
                        <div class="alert alert-warning text-center mt-3 mb-4">
                            Chưa phát sinh giao dịch trong tháng {{ date('m') }}
                        </div>
                    @endif


                </div>
            </div>

        </div>
    </div>

@endsection
@section('css')
    <style>
        .fs-15 {
            font-size: 15px;
        }

        .some-text {
            display: flex;
            justify-content: space-between;
        }

        .pie-charts {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            justify-items: center;
        }

        .pie-charts .chart-item {
            width: 250px;
            margin-bottom: 30px;
            margin-left: 15px;
            margin-right: 15px;
        }

        .pie-charts .chart-item h4 {
            margin-bottom: 18px;
            text-align: center;
            font-size: 22px;
        }
    </style>
@endsection

@section('js')

    @if ($data)
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', {
                'packages': ['corechart']
            });
            google.charts.setOnLoadCallback(drawChart);

            var dataByTimeframe = @json($data);

            function drawChart() {
                var timeframe = document.getElementById("timeframe").value;
                var chartData = dataByTimeframe[timeframe].data;
                var data = google.visualization.arrayToDataTable(chartData, true);

                var options = {
                    title: 'Biểu đồ chứng khoán (' + timeframe + ')',
                    legend: 'none',
                    candlestick: {
                        fallingColor: {
                            strokeWidth: 0,
                            fill: '#a52714'
                        }, // Màu giá giảm
                        risingColor: {
                            strokeWidth: 0,
                            fill: '#0f9d58'
                        } // Màu giá tăng
                    }
                };

                var chart = new google.visualization.CandlestickChart(document.getElementById('stock-chart'));
                chart.draw(data, options);
            }
        </script>
    @endif
@endsection