@extends('template')

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

<?php
    use Illuminate\Support\Facades\Auth;
    $today = date('Y-m-d');
    $month_first_day = date('Y-m-01');

    $user_id = Auth::user()->id;

    $locations = DB::table('locations')
        ->join('location_user', 'locations.id', '=', 'location_user.location_id')
        ->join('users', 'users.id', '=', 'location_user.user_id')
        ->where('users.id', $user_id)
        ->select('locations.*')
        ->get();

    //$locations = DB::table('locations')->whereIn('id',$locations_user)->get();
?>

@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>
                @foreach($locations as $b)
                    <option value="{{$b->id}}">{{$b->name}}</option>
                @endforeach
            </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>

@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) {
            }
        );

        $('#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()},
                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
