@extends('layouts.app')
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Users Timetrack</div>

                <div class="card-body">
                    <br>
                    <div class="alert alert-success" role="alert" id="success-alert-message" style="display: none;">
                    </div>
                    <div id="users_container">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th class="table_cell_content">Email</th>
                                    <th class="table_cell_content">Current Timer</th>
                                    <th style="text-align: center;">Stop</th>
                                    <th style="text-align: center;">Blocked</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    @if($user_timers_running[$user->id] == 1)
                                        <tr id="user_row_{{ $user->id }}" style="background-color: #a6ffc5">
                                    @elseif($user_timers_running[$user->id] == 0 && $user_timers[$user->id] != '00:00:00')
                                        <tr id="user_row_{{ $user->id }}" style="background-color: #ffcfcf">
                                    @else
                                        <tr id="user_row_{{ $user->id }}">
                                    @endif
                                            <td id="user_name_{{ $user->id }}">
                                                {{ $user->first_name }} {{ $user->last_name }} 
                                                <input type="hidden" id="running_timer_{{ $user->id }}" name="running_timer_{{ $user->id }}" value="{{ $user_timers_running[$user->id] }}" class="running_timers">
                                            </td>
                                            <td class="table_cell_content">{{ $user->email }}</td>
                                            <td class="table_cell_content" id="caller_timer_{{ $user->id }}">{{ $user_timers[$user->id] }}</td>
                                            <td align="center"><a href="#"><i class="far fa-stop-circle" style="font-size: 20px" onclick="stopMultipleCallerTimer(event, {{ $user->id }})"></i></a></td>
                                            <td class="table_cell_content text-center">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="blocked_{{ $user->id }}" name="blocked_{{ $user->id }}" 
                                                    @include('inputs.checkbox_radio', ['input_value' => 1, 'value' => $user->blocked]) onclick="blockUnblockUser('{{ $user->id }}')">
                                                    <label class="custom-control-label" for="blocked_{{ $user->id }}"></label>
                                                </div>
                                            </td>
                                        </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts_extra')
    <script type="text/javascript">
        $(document).ready(function()
        {
            startMultipleCallerTimer();
        });
    </script>
@endsection