@extends('layouts.sidenav')

@section('title', 'คู่มือการใช้งาน')
<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;
    }
    .online {
        background-color: #28a745; /* Green for online */
    }
    .offline {
        background-color: #6c757d; /* Gray for offline */
    }
</style>

<div class="content" id="mainContent">
    <div class="container table-container">
        <div class="d-flex justify-content-between mb-3">
            <h4>คู่มือการใช้งาน</h4>

            <div class="d-flex gap-2">
                <button class="btn"><img src="{{ asset('icon/icon-trash.png') }}" width="25" height="25"> Delete</button>
                <a class="btn btn-primary text-light" href="{{ url('/manual_add') }}">+ Add new</a>
            </div>
        </div>
        <span class="text-muted ms-2">ข้อมูลคู่มือการใช้งาน</span>
        <table class="table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="checkAll" /></th>
                    <th>Course Name</th>
                    <th>Create By</th>
                    <th>Create Date</th>
                    <th>Update Date</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($manual as $item)
                    <tr>
                        <td><input type="checkbox" class="checkItem" /></td>
                        <td>{{ $item['course_name'] }}</td>
                        <td>{{ $item['create_by'] }}</td>
                        <td>{{ $item['create_date'] }}</td>
                        <td>{{ $item['update_date'] }}</td>
                        <td>
                            <span class="status-indicator {{ $item['status'] === 'Active' ? 'online' : 'offline' }}"></span>
                            {{ $item['status'] }}
                        </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('/manual_edit') }}">Edit</a></li>
                                    <li><a class="dropdown-item" href="{{ url('/manual_approve') }}">Approve</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="d-flex justify-content-between">
            <div>
                <span>1 - {{ count($manual) }} of {{ count($manual) * 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