@extends('layouts.app')
@section('title',Str::title($page->title))
@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">{{ Str::title($page->title) }}</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                            <li class="breadcrumb-item active">{{ Str::title($page->title) }}</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <!-- Info boxes -->
                <div class="row">
                    <div class="col-12 text-right mb-3">
                        <div class="card">
                            <div class="card-body">
                                {!! Form::open(['url' => $page->link.'/locations', 'method' => 'POST','class'=>'form-horizontal','id'=>'filter-form']) !!}
                                <div class="row">
                                   
                                    <div class="col-sm-3">
                                        {!! Form::select('sort',$locations, $request->sort ?? '', ['class' => 'form-control','placeholder'=>'Filter By']) !!}
                                    </div>
                                    
                                    
                                    {!! Form::hidden('filter', '', ['id'=>'filter']) !!}
                                    <input type="hidden" name="download_option" id="download-option" value="0" />
                                    <button class="btn btn-danger" id="filter-button"><i class="fas fa-search"></i>
                                    </button>
                                    <button class="btn btn-primary ml-2" type="button" id="download-button"><i class="fas fa-download"></i>
                                    </button>
                                    <ul class="navbar-nav ml-2">
                                        <li class="nav-item dropdown">
                                            <a class="btn btn-dark" data-toggle="dropdown" href="#"
                                               aria-expanded="true">
                                                <i class="fas fa-cog"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"
                                                 style="left: inherit; right: 0px;">
                                                <span class="dropdown-item dropdown-header">Quick Filter</span>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('all')"
                                                   class="dropdown-item">All</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('today')"
                                                   class="dropdown-item">Today</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('week')"
                                                   class="dropdown-item">This Week (From start this week)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('month')"
                                                   class="dropdown-item">This Month (From start this month)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('year')"
                                                   class="dropdown-item">This Year (From start this year)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('lweek')"
                                                   class="dropdown-item">Week (Last 7 Days)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('lmonth')"
                                                   class="dropdown-item">Month (Last 30 Days)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0);" onclick="changeDates('lyear')"
                                                   class="dropdown-item">Year (Last 365 Days)</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="info-box">
                            <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cubes"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">Total sold Products</span>
                                <span class="info-box-number">{{ $counts->total_products }}</span>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>

                    <div class="col-md-8">
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="far fa-chart-bar"></i>
                                    Product Sold Analysis
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="chart text-center loader" id="productChart">
                                </div>
                            </div>
                            <!-- /.card-body-->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card card-danger card-outline">
                            <div class="card-header">
                                <h3 class="card-title">Product Lists</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body p-0 data-table-container">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="table-responsive p-3">
                                            <table class="table table-hover table-striped table-bordered data-tables"
                                                   data-url="{{ $page->link.'/location_lists' }}" data-form="filter"
                                                   data-length="25">
                                                <thead>
                                                <tr>
                                                    <th data-orderable="false">Title</th>
                                                    <th data-orderable="false">Quantity</th>
                                                    <th data-orderable="false">Location</th>
                                                    <th data-orderable="false">Options</th>
                                                </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.table-responsive -->
                            </div>
                        </div>
                    </div>

                    <!-- /.col -->
                </div>
            </div><!--/. container-fluid -->
        </section>
        <!-- /.content -->
    </div>
@endsection
@push('page-js')
    <script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>
    {{-- <script src="{{ asset('dist/js/pages/products.js') }}"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
    <script>



var options = {responsive: !0, maintainAspectRatio: !1, datasetFill: !1, scales: {yAxes: [{ticks: {beginAtZero: !0}}]}};
$('.loader').html(loader);
$('.loadbar').html(loadbar);
var values = $("#filter-form").serialize();
$(document).ready(function () {
    $.ajax({url: baseUrl + "/products/graph", type: "POST", data: values, dataType: "html",}).done(function (data) {
        var data = JSON.parse(data);
        $("#productChart").html('<canvas id="productGraph" style="min-height:250px;height:250px;max-height:250px;max-width:100%"></canvas>');
        var productChart = document.getElementById("productGraph").getContext("2d");
    /*    new Chart(productChart, {
            type: "bar",
            data: {
                labels: data.date,
                datasets: [{label: "Products ", data: data.result, backgroundColor: "#261AEB", borderWidth: 1}]
            },
            options: options
        });
        */
        
        
        var myBarChart = new Chart(productChart, {
    type: 'pie',
    data: data.result,
    options: options
});



    });
});


        $('#download-option').val(0);
        var route = "{{ URL::to('/products/typehead/suggesion') }}";
        $('#product-type-head').typeahead({
            source: function (query, process) {
                return $.get(route, {
                    query: query
                }, function (data) {
                    return process(data);
                });
            }
        });
        $('#download-button').on('click',function(e){
            e.preventDefault();
            $('#download-option').val(1);
            $('#filter-form').trigger('submit');
            setTimeout(() => {
                $('#download-option').val(0);
            }, 500);
        })
    </script>
@endpush