@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-lg-3"><select class="form-control change-saham" id="company" style="font-size:1.5em">
                    @foreach ($company as $item)
                        <option value="{{ $item->id }}">{{ $item->name }} ({{ $item->symbol }})</option>
                    @endforeach
                </select></div>
            <div class="col-md-6 col-lg-3" style="font-size:1.5em">
                <div id="reportrange" class='change-saham'
                    style="background-color:white;cursor: pointer; padding: 6px 10px; border: 1px solid #ccc; width: 100%;height:3em">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down"></i>
                </div>
            </div>
            <div class="col-md-12 col-lg-6" id="description" style="display: none;font-size:1.5em">
                <ul class="list-inline">
                    <li class="list-inline-item" id="description-date"></li>
                    <li class="list-inline-item" id="description-h"></li>
                    <li class="list-inline-item" id="description-l"></li>
                    <li class="list-inline-item" id="description-o"></li>
                    <li class="list-inline-item" id="description-c"></li>
                    <li class="list-inline-item" id="description-v"></li>
                </ul>
            </div>
        </div>
        <ul class="nav nav-tabs nav-fill mt-3 fs-3">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#charts">Charts</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#table">Table</a>
            </li>
        </ul>

        <div class="tab-content" id="myTabContent" style="background:white">
            <div class="tab-pane active" id="charts" role="tabpanel" aria-labelledby="tab1" aria-hidden='false'>
                @foreach ($options as $key => $option)
                    <div class="form-check form-check-inline mt-2" style="font-size:1.5em">
                        <input class="form-check-input" type="checkbox" name="{{ $key }}" id="{{ $key }}"
                            value={{ $option['value'] }}>

                        <label class="form-check-label" for="{{ $key }}">
                            {{ $key }}
                        </label>
                    </div>
                @endforeach
                <div id="chart_div" style="width: 100%; min-height:500px"></div>
            </div>
            <div class="tab-pane" id="table" role="tabpanel" aria-labelledby="tab2" aria-hidden='false'
                style="padding: 2em">
                <table class="table table-striped" id="table-saham">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Open</th>
                            <th>Close</th>
                            <th>High</th>
                            <th>Low</th>
                            <th>Volume</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>


    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        var startdate = moment().subtract(3, 'month');
        var enddate = moment();
        var token = '{{ csrf_token() }}';
        var chart;

        var dataShows = [7, 8, 9, 10, 11, 12, 13, 14];
        var dataTables;
        var dataCharts;
        var tables;
        var options = {
            legend: 'none',
            chartArea: {
                left: 50,
                right: 0, // !!! works !!!
                bottom: 50, // !!! works !!!
                top: 20,
                width: "100%",
                height: "100%"
            },
            tooltip: {
                trigger: 'none'
            },
            targetAxisIndex: 0,
            candlestick: {
                fallingColor: {
                    strokeWidth: 0,
                    fill: '#a52714',
                    stroke: 'white'
                }, // red
                risingColor: {
                    strokeWidth: 0,
                    fill: '#0f9d58',
                }, // green,

            },
            colors: ['#e5e7e9', //stick
                '#52be80', // bar
                '#f4d03f', // m5
                '#5dade2', // m10
                '#dc7633', // m20
                '#9a7d0a', // m50
                '#8e44ad', // m100
                '#7b241c', // v3
                '#212f3d', // v4
                '#330066', // v5
            ],
            // explorer: {
            //     maxZoomOut: 4,
            //     keepInBounds: true
            // },
            bar: {
                groupWidth: "90%"
            },
            seriesType: 'candlesticks',
            targetAxisIndex: 0,
            series: {
                1: {
                    type: 'bars',
                    targetAxisIndex: 1,
                    visibleInLegend: false,
                    is3D: true
                },
                2: {
                    type: 'line',
                    targetAxisIndex: 0,
                    visibleInLegend: false
                },
                3: {
                    type: 'line',
                    targetAxisIndex: 0,
                    visibleInLegend: false
                },
                4: {
                    type: 'line',
                    targetAxisIndex: 0,
                    visibleInLegend: false
                },
                5: {
                    type: 'line',
                    targetAxisIndex: 0,
                    visibleInLegend: false
                },
                6: {
                    type: 'line',
                    targetAxisIndex: 0,
                    visibleInLegend: false

                },
                7: {
                    type: 'line',
                    targetAxisIndex: 1,
                    visibleInLegend: false

                },
                8: {
                    type: 'line',
                    targetAxisIndex: 1,
                    visibleInLegend: false

                },
                9: {
                    type: 'line',
                    targetAxisIndex: 1,
                    visibleInLegend: false

                },
            },
            hAxis: {
                format: 'MMM yy',
                slantedText: false,
            },

            vAxes: {
                0: {
                    logScale: true,
                    gridlines: {
                        color: 'transparent'
                    },

                },
                1: {
                    textPosition: 'none',
                    viewWindow: {
                        min: 0,
                        max: {{ $maxVolume * 8 }}
                    },

                },

            },
        };
        google.charts.load('current', {
            'packages': ['corechart']
        })
        google.charts.setOnLoadCallback(drawCharts);



        function onmouseoverHandler(properties) {
            $("#description").show();
            var selectedItem = chart.getSelection();
            const row = properties.row;
            // if (selectedItem.length > 0) {
            //     console.log(JSON.stringify(selectedItem[0]));
            // }
            var date = moment(dataCharts[row].date_local).lang('id').format("MMM Do YY");
            $("#description-h").html("<strong>H:</strong> " + dataCharts[row].high);
            $("#description-l").html("<strong>L:</strong> " + dataCharts[row].low);
            $("#description-o").html("<strong>O:</strong> " + dataCharts[row].open);
            $("#description-c").html("<strong>C:</strong> " + dataCharts[row].close);
            $("#description-v").html("<strong>V:</strong> " + dataCharts[row].volume);
            $("#description-date").html("<strong>Date:</strong> " + date);
        }

        function drawCharts() {
            var container = document.getElementById('chart_div');
            chart = new google.visualization.ComboChart(container);
        }



        function initData() {
            $("#description").hide();
            if(tables !=  null){
                tables.ajax.reload()
            }

            $.ajax({
                data: {
                    'startDate': startdate.format("Y-MM-DD"),
                    'endDate': enddate.format("Y-MM-DD"),
                    'companyId': $("#company").val(),
                    "_token": "{{ csrf_token() }}",
                },
                url: "{{ route('saham') }}",
                type: "POST",
                dataType: "json",
                success: function(res) {
                    if (res.success) {
                        dataTables = new google.visualization.DataTable();
                        dataTables.addColumn('string', 'Date');

                        dataTables.addColumn('number', 'High');
                        dataTables.addColumn('number', 'Open');
                        dataTables.addColumn('number', 'Close');
                        dataTables.addColumn('number', 'Low');
                        dataTables.addColumn('number', 'Volume');
                        dataTables.addColumn({
                            type: 'string',
                            role: 'style'
                        });
                        dataTables.addColumn('number', 'M5');
                        dataTables.addColumn('number', 'M10');
                        dataTables.addColumn('number', 'M20');
                        dataTables.addColumn('number', 'M50');
                        dataTables.addColumn('number', 'M100');
                        dataTables.addColumn('number', 'V3');
                        dataTables.addColumn('number', 'V4');
                        dataTables.addColumn('number', 'V5');
                        dataCharts = res.data;

                        //new Date(element.date_year, element.date_month, element.date_day)
                        for (let index = 0; index < res.data.length; index++) {
                            const element = res.data[index];
                            let color = "#a52714"
                            if (element.open < element.close) {
                                color = '#0f9d58';
                            }
                            dataTables.addRow([element.date_string, element.high == null ? null :
                                Number(element
                                    .high), element.open == null ? null : Number(element.open),
                                element.close == null ? null : Number(element.close), element
                                .low ==
                                null ? null : Number(element.low), element.volume == null ?
                                null :
                                Number(element.volume), color,
                                element.m5 == null ? null : Number(element.m5),
                                element.m10 == null ? null : Number(element.m10), element.m20 ==
                                null ?
                                null : Number(element.m20), element.m50 == null ? null : Number(
                                    element
                                    .m50),
                                element.m100 == null ? null : Number(element.m100), element
                                .v3 == null ?
                                null : Number(element.v3), element.v4 == null ? null : Number(
                                    element
                                    .v4),
                                element.v5 == null ? null : Number(element.v5)
                            ]);
                        }
                        view = new google.visualization.DataView(dataTables);
                        view.hideColumns(dataShows);
                        options.hAxis.ticks = dataTables.getDistinctValues(0);
                        options.vAxes[1].viewWindow.max = res.max * 8;
                        options.crosshair = {
                            trigger: 'both',
                            orientation: 'both',
                            color: "green",
                            opacity: 1
                        };
                        options.focusTarget = 'category'
                        chart.draw(view, options);

                        google.visualization.events.addListener(chart, 'onmouseover',
                            onmouseoverHandler);
                    } else {
                        alert(res.message)
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    const msg = xhr.responseJSON.errors[index][0]
                    alert(msg)
                }
            })
        }


        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            startdate = start;
            enddate = end;
            initData();
        }
        $(document).ready(function() {
            $("#company").select2();
            $("#company").select2({
                dropdownCssClass: "myFont"
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': token,
                    'X-Requested-With': 'XMLHttpRequest',
                }
            });

            tables = $('#table-saham').DataTable({
                "dom": "Bfrtip",
                "autoWidth": false,
                "processing": true,
                "serverSide": true,
                "paging": false,
                "deferRender": true,
                "buttons": [],
                "ajax": {
                    url: "{{ route('datatables') }}",
                    data: function(d) {
                        d.enddate = enddate.format("Y-MM-DD")
                        d.startdate = startdate.format("Y-MM-DD")
                        d.companyId = $("#company").val()

                    }
                },
                "rowCallback": function(row, data) {

                },
                "columns": [{
                        "data": 'date_string',
                        "name": 'date_local',
                        "searchable": true,
                        "orderable": true,
                        "sClass": 'text-left'
                    },
                    {
                        "data": 'open',
                        "name": 'open',
                        "searchable": true,
                        "orderable": true,
                        "sClass": 'text-right'
                    },
                    {
                        "data": 'close',
                        "name": 'close',
                        "searchable": true,
                        "orderable": true,
                        "sClass": 'text-right'
                    },
                    {
                        "data": 'high',
                        "name": 'high',
                        "searchable": true,
                        "orderable": true,
                        "sClass": 'text-right'
                    },
                    {
                        "data": 'low',
                        "name": 'low',
                        "searchable": true,
                        "orderable": true,
                        "sClass": 'text-right'
                    },
                    {
                        "data": 'volume',
                        "name": 'volume',
                        "searchable": true,
                        "orderable": true,
                        "sClass": 'text-right'
                    }
                ]
            });

            $(".change-saham").change(function() {
                initData();
            })

            $(".form-check-input").change(function() {
                var val = $(this).val() * 1;

                view = new google.visualization.DataView(dataTables);
                if ($(this).is(':checked')) {
                    var index = dataShows.indexOf(val);
                    if (index !== -1) {
                        dataShows.splice(index, 1);
                    }

                } else {
                    if (!dataShows.includes(val)) {
                        dataShows.push(val);
                    }
                }
                console.log(dataShows);
                view.hideColumns(dataShows);
                chart.draw(view, options);
            })




            $('#reportrange').daterangepicker({
                startDate: startdate,
                endDate: enddate,
                ranges: {
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'Last 3 Months': [moment().subtract(3, 'month'), moment()],
                    'Last 1 Year': [moment().subtract(1, 'year'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')],
                    'This Year': [moment().month(0).startOf('month'), moment().month(11).endOf(
                        'month')],
                    'Last Year': [moment().subtract(1, 'year').month(0).startOf('month'), moment()
                        .subtract(
                            1,
                            'year').month(11).endOf('month')
                    ]


                }
            }, cb);

            cb(startdate, enddate);


        });
    </script>
@endsection

@section('styles')
    <style>
        .myFont {
            font-size: 1.5em;
        }

        .select2-container {}

        .select2-container--default .select2-selection--single {
            font-size: 1.5em;
            /* line-height: 35px */
            padding: 4px
        }

        .select2-container--default .select2-selection--single {
            height: 3em !important;
        }
    </style>
@endsection