@extends('backend.layouts.app')
<style>
    .col-form-label {
        font-family: "Open Sans", sans-serif;
        font-size: .75rem !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }
</style>
@section('content')
<h1 class="page-header mb-0">
    <div class="row">
        <div class="col-md-6 col-12">
            @lang('messages.stats.stats')
        </div>
        <div class="col-md-6 col-12">
            <div class="row">
                <div class="col-md-6 col-12">
                    <div class="form-group">
                        @if(auth()->user()->hasRole('Publisher'))
                            <label for="id_site" class="col-form-label">@lang('messages.codes.website_url')</label>
                            <select id="id_site" name="id_site" class="form-control" aria-label="Default select example">
                                <option value="">Select site</option>
                                @foreach($websites as $website)
                                <option value="{{ $website->id }}">{{ $website->website_url }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                </div>
                <div class="col-md-6 col-12">
                    <div class="form-group">
                        <label for="bs-rangepicker-range" class="col-form-label">Ranges :</label>
                        <div class="input-group" id="default-daterange">
                            <input type="text" name="bs-rangepicker-range" id="bs-rangepicker-range" class="form-control" name="date_range">
                            <span class="input-group-append">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</h1>
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">@lang('messages.stats.unique')</h4>
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableStatsList"><i class="fa fa-redo"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <div class="panel-body">
        <table class="datatables-users table" id="dataTableStatsList">
            <thead>
                <tr>
                    <th>@lang('messages.stats.sr_no')</th>
                    <th>@lang('messages.stats.username')</th>
                    <th>@lang('messages.stats.windows')</th>
                    <th>@lang('messages.stats.mac')</th>
                    <th>@lang('messages.stats.android')</th>
                    <th>Linux</th>
                    <th>@lang('messages.stats.bot')</th>
                    <th>@lang('messages.stats.other')</th>
                    <th>@lang('messages.stats.total')</th>
                    <th data-sort="{{ date('d-m-Y') }}">@lang('messages.stats.date')</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body content goes here -->
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('footer_scripts')
    <script>
        var urlData = "{{ url('stats/unique') }}";
        var date = $("#bs-rangepicker-range").val();
        urlData = urlData+'?date_range='+date;
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var table = $("#dataTableStatsList").DataTable({
                processing: true,
                serverSide: true,
                order: [[0, 'desc']],
                ajax: {
                    "url": urlData, // Assuming the route for unique index
                    "type": "GET",
                    "data": function(d) {
                        d.type = 'unique';
                    }
                },
                columns: [
                    { data: "DT_RowIndex", name: "id" },
                    { data: "username"},
                    { data: "windows_total"},
                    { data: "mac_total"},
                    { data: "android_total"},
                    { data: "linux_total"},
                    { data: "bot_total"},
                    { data: "other_total"},
                    { data: "total_count"},
                    { data: "created_at_nice", name: 'created_at', type: 'date'},
                ],
                columnDefs : [
                    {"targets":[{{$target}}], visible: false},
                    {"targets":9, "type":"date-eu"},
                ],
            });

            $("#bs-rangepicker-range, #id_site").on("change", function() {
                var date = $("#bs-rangepicker-range").val();
                var id_site = '';
                if($("#id_site").val())
                    id_site = $("#id_site").val();

                table.ajax.url( urlData+'?date_range='+date+'&id_site='+id_site).load();
            });
        });
    </script>
@endsection