@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.stats')</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>@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 = "{{ route('stats.index') }}";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var table = $("#dataTableStatsList").DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10, // Fetch 10 records per request
                order: [[6, 'desc']],
                ajax: urlData+'?date_range='+date, // Assuming the route for talent index
                columns: [
                    { data: "DT_RowIndex", orderable: false, searchable: false },
                    // { data: "first_name", orderable: false, searchable: false},
                    { 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":6, "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