@extends('layouts.sidenav')

@section('title', $type_name)

<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; }
    .offline { background-color: #6c757d; }
</style>

<div class="content" id="mainContent">
    <div class="container table-container">
        <div class="d-flex justify-content-between mb-3">
            <h4>{{ $type_name }}</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('/content_add') }}">+ Add new</a>
            </div>
        </div>
        <span class="text-muted ms-2">ข้อมูล {{ $type_name }}</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 ($contents as $content)
                    <tr>
                        <td><input type="checkbox" class="checkItem" /></td>
                        <td>{{ $content['title'] }}</td>
                        <td>{{ $content['create_by'] }}</td>
                        <td>{{ $content['create_time'] }}</td>
                        <td>{{ $content['update_time'] }}</td>
                        <td>
                            <span class="status-indicator {{ $content['approved'] === 'Y' ? 'online' : 'offline' }}"></span>
                            {{ $content['approved'] === 'Y' ? 'Active' : 'Inactive' }}
                        </td>
                        <td class="table-actions">
                            <div class="btn-group">
                                <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
                                    <b>:</b>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="{{ url('/content_edit?id=' . $content['id']) }}">Edit</a></li>
                                    <li><a class="dropdown-item" href="{{ url('/content_approve?id=' . $content['id']) }}">Approve</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection