@extends('layouts.app-admin')

@section('content')
    <div class="content d-flex flex-column flex-column-fluid pt-0" id="kt_content">
        <div class="d-flex flex-column-fluid">
            <div class="container">
                <div class="card shadow mb-4" style="background-color: #EAEAF4; border: none;">
                    <div class="card-header p-4" style="background-color: #3D3D5C; border-radius: 10px 10px 0 0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="text-white font-weight-bold mt-2 mb-2">
                                {{ __('all.subgroups') }} - {{ $groupName }}
                            </h5>
                        </div>
                    </div>
                    <div class="card-body card-body-table" style="padding: 40px;">
                        <div class="table-responsive">
                            <table class="table" id="dataTableSubgroups" width="100%" cellspacing="0" style="border-collapse: separate; border-spacing: 0 10px;">
                                <thead>
                                    <tr align="center" style="background-color: #4B4B73; color: #FFFFFF;">
                                        <th style="padding: 15px; border: none;">{{ __('all.subgroup') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(isset($subgroups) && $subgroups->count())
                                        @foreach($subgroups as $subgroup)
                                            <tr class="tr-custom" style="background-color: #FFFFFF; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);">
                                                <td class="text-center" style="padding: 20px; border: none;">
                                                    <span class="text-dark font-weight-bold font-size-lg">
                                                        {{ $subgroup->subgroup }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection