@extends('backend.layouts.app')
@section('content')
    <div class="row">
        <div class="col-md-6 col-12">
            <h4 class="py-3 mb-4">@lang('messages.stats.unique')</h4>
        </div>
        <div class="col-md-6 col-12">
            <div class="row">
                @if(auth()->user()->hasRole('Publisher'))
                    <div class="col-md-6 col-12">
                        <!-- <div class="form-floating form-floating-outline">
                            <select id="id_site" name="id_site" class="form-select form-select" aria-label="Default select example">
                                <option value="">Select site</option>
                                @foreach($websites as $website)
                                <option value="{{ $website->id }}">{{ $website->website_url }}</option>
                                @endforeach
                            </select>
                            <label for="id_site">@lang('messages.codes.website_url')</label>
                        </div> -->
                    </div>
                @endif
                <div class="col-md-6 col-12">
                    <div class="form-floating form-floating-outline float-right pull-right" style="width: 100%; float: inline-end;">
                        <input type="text" id="bs-rangepicker-range" class="form-control" name="date_range">
                        <label for="bs-rangepicker-range">Ranges</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-datatable table-responsive datatable-roles">
            <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>@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>
        $(document).ready(function() {
            var date = $("#bs-rangepicker-range").val();
            var urlData = "{{ url('stats/unique') }}";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var table = $("#dataTableStatsList").DataTable({
                processing: true,
                serverSide: true,
                order: [[7, 'desc']],
                ajax: {
                    "url": urlData+'?date_range='+date, // Assuming the route for unique index
                    "type": "GET",
                    "data": function(d) {
                        d.type = 'unique';
                    }
                },
                columns: [
                    { data: "DT_RowIndex", name: "id" },
                    { data: "user.first_name"},
                    { data: "windows_total"},
                    { data: "mac_total"},
                    { data: "android_total"},
                    { data: "other_total"},
                    { data: "total_count"},
                    { data: "created_at_nice", name: 'created_at', type: 'date'},
                ],
                columnDefs : [
                    {"targets":[{{$target}}], visible: false},
                    {"targets":7, "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