@extends('template')

@section('page-title') Dashboard @endsection
@section('page-sub-title')  @endsection
@section('tag-title') Dashboard @endsection


@section('header-right-content')

@endsection

@section('main-content')

    <div class="row row-sm mb-2 pt-2 "  style="border-top: 1px solid #c5cad7">
        <div class="col-md-3">
            <label for="filter-period">Period</label>
            <input readonly placeholder="dd/mm/yyyy - dd/mm/yyyy" type="text" class="form-control" id="filter-period" value="{{date('d/m/Y', strtotime($month_first_day))}} - {{date('d/m/Y', strtotime($today))}}" name="filter-period">
        </div>


        <!--div class="col-md-3">
            <label for="location_id" class="control-label">Locations</label>
            <select required multiple class="form-control select2" name="location-id" id="location-id">
                <option value=''>*Tous</option>
                
            </select>
        </div-->

        <div class="col-md-2 mt-4">
            <button id="dashboard-refresher" type="button" class="btn btn-primary action-btn waves-effect waves-light">
                <i class="fa fa-filter"></i> Apply filter
            </button>
        </div>
    </div>

    <div id="dashbord-view-container" class="mt-3">
    </div>

      <div class="row row-sm">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header bg-transparent pd-b-0 pd-t-20 bd-b-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mb-0">Recent orders</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <button id="btn-approve-select-orders" style="display: none" type="submit" class="btn btn-danger action-btn waves-effect waves-light mb-3">
                            <i class="fa fa-check-square"></i> Approve selected orders
                        </button>

                        <div class="table-responsive">
                            <table id="list-incomming-order" class="table   table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th style="width: 10%" class="border-bottom-0">No.</th>
                                    <th style="width: 10%" class="border-bottom-0">Seller</th>
                                    <th style="width: 17%" class="border-bottom-0">Customer</th>
                                    <th style="width: 15%" class="border-bottom-0">Description</th>
                                    <th style="width: 11%" class="border-bottom-0">Total</th>
                                    <th style="width: 17%" class="border-bottom-0">Region</th>
                                    <th class="border-bottom-0" style="width: 10%; border-right: none;">Actions</th>
                                </tr>
                                </thead>

                                <tbody>
                                @foreach([] as $x)
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>




@endsection

@section('page-style')
    <link href="{{url('assets/plugins/bootstrap-daterangepicker/daterangepicker.css')}}" rel="stylesheet">
    <style>

        .card-header{
                    padding: 10px 15px;
                    border-top-left-radius: 3px !important;
                    border-top-right-radius: 3px !important;
                    background-color: #f0f6ff;
                    color: #0a0a0a;
                }

        .card-body{
            padding: 10px 15px;
            border-bottom-left-radius: 3px !important;
            border-bottom-right-radius: 3px !important;
        }

        .card{
            box-shadow: -1px 1px 20px 0 #dadee8;
        }

        .card-title{
            text-transform: none;
            font-size: 1rem;
        }

        .form-control-sm{
            border: 1px solid #e1e5ef;
            padding: 0.25rem 0.3rem;
        }

        .sales-card small{
            font-size: 10px !important;
        }

        .sales-card a{
            text-decoration: underline;
            color: white;
        }

        .sales-card a:hover{
            color: #ffffff;
        }

        #top-seller-month-container .table th, .table td, #top-region-month-container .table th, .table td{
            padding: 5px 5px !important;
        }
    </style>
    <link href="{{url('assets/plugins/datatable/css/jquery.dataTables.min.css')}}" rel="stylesheet">
@endsection


@section('page-script')

    <script src="{{url('assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{url('assets/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>
    <script src="{{url('assets/js/apexcharts.js')}}"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script !src="">

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

        $('#filter-period').daterangepicker(
            {alwaysShowCalendars: !0,
                locale: {
                    format: 'DD/MM/YYYY',
                    "separator": " - ",
                    "applyLabel": "Valider",
                    "cancelLabel": "Annuler",
                    "fromLabel": "De",
                    "toLabel": "A",
                    "customRangeLabel": "Custom",
                    "daysOfWeek": [
                        "Dim",
                        "Lun",
                        "Mar",
                        "Mer",
                        "Jeu",
                        "Ven",
                        "Sam"
                    ],
                    "monthNames": [
                        "Janvier",
                        "Février",
                        "Mars",
                        "Avril",
                        "Mai",
                        "Juin",
                        "Juillet",
                        "Août",
                        "Septembre",
                        "Octobre",
                        "Novembre",
                        "Décembre"
                    ],
                    "firstDay": 1
                },
                ranges: {
                    "Hier": [moment().subtract(1, "days"), moment().subtract(1, "days")],
                    "7 derniers jours": [moment().subtract(7, "days"), moment()],
                    "30 derniers jours": [moment().subtract(29, "days"), moment()],
                    "Le mois en cours": [moment().startOf("month"), moment().endOf("month")],
                    "Le mois dernier": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")],
                    "3 derniers mois": [moment().subtract(3, "month"), moment()],
                    "12 derniers mois": [moment().subtract(12, "month"), moment()],
                },
            },
            function (t, a, e) {
            }
        );

        //console.log(url('/refresh-dashboard');

        $('#dashboard-refresher').on('click', function () {
            var $container = $('#dashbord-view-container');
            $container.html('<p>Loading...</p>');
            var req = $.ajax({
                url: '{{url(config('app.admin_prefix').'/refresh-dashboard')}}',
                type: "GET",
                //data: {location_id: $('#location-id').val() , filter_periode: $('#filter-period').val()},
                data: {filter_periode: $('#filter-period').val()},
                dataType: "html"
            });
            req.done(function (response, textStatus, jqXHR) {
                $('#dashbord-view-container').html(response);
            });
            req.fail(function (jqXHR, textStatus) {
                //swal("Erreur!", "Error during operation.", "warning");
            });
        });


        $('#dashboard-refresher').click();
    </script>
@endsection