@extends('layouts.base')
{{-- @section('heading')
    {{ __('User Profile') }}
@endsection --}}
@section('info')
    {{ __('User Activity') }} - in {{ $date_difference->humanQueryInterval() }}
@endsection
@section('focus_action')


    <form action="{{ route('reports.userActivity') }}" method="GET">
        <div class="mb-2 w3-right">
            <span class="">
                {{-- <div><label for="start_date" class="">From</label></div> --}}
                <input id="start_date" name="start_date" type="date" value="{{ $dates['start_date'] ?? date('Y-m-d') }}" class="input mt-2 mr-3 rounded-lg"/>
            </span>
            <span class="">
                {{-- <div><label for="end_date" class="">To</label></div> --}}
                <input id="end_date" name="end_date" type="date" value="{{ $dates['end_date'] ?? date('Y-m-d') }}" class="input mt-2 rounded-lg"/>
            </span>
            <span>
                <button class="w3-margin-bottom w3-margin-top"><input class="input flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" type="submit" value="FILTER" /></button>
            </span>

        </div>

    </form>
    <div class="">
        <form action="{{ route('export.user-projects') }}" method="GET">
            <div class="mb-2 w3-right">
                <span class="">
                    {{-- <div><label for="start_date" class="">From</label></div> --}}
                    <input id="start_date" name="start_date" type="date" value="{{ $dates['start_date'] ?? date('Y-m-d') }}" class="input mt-2 mr-3 rounded-lg" hidden_/>
                </span>
                <span class="">
                    {{-- <div><label for="end_date" class="">To</label></div> --}}
                    <input id="end_date" name="end_date" type="date" value="{{ $dates['end_date'] ?? date('Y-m-d') }}" class="input mt-2 rounded-lg" hidden_/>
                </span>
                <span>
                    <button class="w3-margin-bottom w3-margin-top"><input class="input flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" type="submit" value="EXPORT" /></button>
                </span>

            </div>

        </form>
    </div>
@endsection
@section('body_table')
    <div>

        <div class="p-2">
            @include('reports.components.reports_table')
            {{-- @foreach ($users as $user)
            <div>
                {{ $user->name }} - {{ $user->workedHours($dates) }}
            </div>
            @endforeach --}}
        </div>
    </div>
@endsection
    <script>
        function forceAction() {
            var elements = document.getElementsByClassName('forceable');
            for (var i = 0; i < elements.length; i++) {
                   elements[i].click(); //sets and unsets the check box back to defadivt value, so as to force the compile function from the elements
                    elements[i].click();
            }
        }
        window.onload = function() {
            forceAction();
            // console.log('forceAction')
        };
        function compileInput(class_name, value_holder) {
            var inputValues = [];
            var inputs = document.getElementsByClassName(class_name);
            for (var i = 0; i < inputs.length; i++) {

                const input = {
                    id: inputs[i].id,
                    value: inputs[i].checked
                }
                inputValues.push(input);
            }
            document.getElementById(value_holder).value = JSON.stringify(inputValues);
            // console.log(inputValues);
            console.log(document.getElementById(value_holder).value);
        }
    </script>