@extends('layouts.sidenav')

@section('title', 'Users Roles')
<link rel="icon" href="{{ asset('Bg/logoCRG.png') }}" type="image/png">
@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<style>
    .table-container {
      padding: 20px;
    }
    .table th, .table td {
      vertical-align: middle;
    }
    .table-actions {
      display: flex;
      gap: 10px;
    }
    body {
        margin: 0;
        padding: 0;
    }
    .status-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }
    .role {
        background-color: #dfa70d; /* Green for online */
    }
</style>

<div class="content" id="mainContent">
    <div class="container table-container">
        <div class="d-flex justify-content-between mb-3">
            <h4>Users Roles</h4>

            <div class="d-flex gap-2">
                <button class="btn"><img src="{{ asset('icon/icon-trash.png') }}" width="25" height="25">  Delete</button>
                <button class="btn"><img src="{{ asset('icon/icon-filter.png') }}" width="25" height="20">  Filter</button>
                <button class="btn"><img src="{{ asset('icon/icon-export.png') }}" width="25" height="20">  Export</button>
                <a class="btn btn-primary text-light" href="{{ url('/user_role_add') }}">+ Add User Role</a>
            </div>
        </div>
        <span class="text-muted ms-2">รายการกลุ่มผู้ใช้งาน</span>
        <table class="table text-center">
            <thead>
                <tr>
                    <th><input type="checkbox" id="checkAll" /></th>
                    <th>Roles Code</th>
                    <th>Roles Name</th>
                    <th>Roles</th>
                    <th>Create Date</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($user_role as $item)
                    <tr>
                        <td><input type="checkbox" class="checkItem" /></td>
                        <td>{{ $item['roleid'] }}</td>
                        <td>{{ $item['rolename'] }}</td>      
                        <td>
                            @foreach ( $item['role'] as $role)
                            <span class="status-indicator role"></span>
                            {{$role}}
                            @endforeach
                        </td>
                        <td>{{ $item['create_date'] }}</td>
                        <td class="table-actions">
                            <div class="btn-group">
                                <button class="btn btn-sm" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
                                    <b>:</b>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                    <li><a class="dropdown-item" href="{{ url('/trick_edit') }}">Edit</a></li>
                                    <li><a class="dropdown-item" href="{{ url('/trick_approve') }}">Approve</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="d-flex justify-content-between">
            <div>
                <span>1 - {{ count($user_role) }} of {{ count($user_role) * 5 }} items</span>
            </div>
            <div>
                <button class="btn btn-secondary btn-sm">Previous</button>
                <button class="btn btn-secondary btn-sm">Next</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Get the checkbox elements
    const checkAll = document.getElementById('checkAll');
    const checkItems = document.querySelectorAll('.checkItem');

    // When the "select all" checkbox is clicked
    checkAll.addEventListener('change', function() {
        // Loop through all checkboxes and set them to the state of "select all"
        checkItems.forEach(item => {
            item.checked = checkAll.checked;
        });
    });

    // When any of the individual checkboxes are clicked, uncheck "select all" if not all are checked
    checkItems.forEach(item => {
        item.addEventListener('change', function() {
            checkAll.checked = [...checkItems].every(item => item.checked);
        });
    });
</script>

@endsection