@extends('layouts.app')

@section('content')
    <div class="content">
        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">

            @component('components.breadcrumb', [
                'links' => [
                    ['name' => 'Manage Subjects', 'url' => ''],
                    ['name' => 'Subjects', 'url' => route('sections.index')],
                    ['name' => 'Subject Details', 'url' => ''],
    
                ],
            ])
            @endcomponent

            
            <a href="{{ route('sections.index') }}" class="btn btn-secondary">Back</a>
        </div>

        @include('layouts.partials.toast')

        <div class="card">
            <div class="card-body p-4">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-tag text-primary me-2"></i>
                                <strong>Name:</strong> <span class="ms-2">{{ $section->name }}</span>
                            </li>
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-info-circle text-primary me-2"></i>
                                <strong>Description:</strong> <span
                                    class="ms-2">{{ $section->description ?? null }}</span>
                            </li>
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-image text-primary me-2"></i>
                                <strong>Icon:</strong>
                                <span class="ms-2">
                                    @if ($section->icon_path)
                                        <img src="{{ asset($section->icon_path) }}" alt="{{ $section->name }} Icon"
                                            class="img-thumbnail" style="max-width: 100px;">
                                    @else
                                        <img src="{{ asset('images/logo.png') }}" alt="{{ $section->name }} Icon"
                                            class="img-thumbnail" style="max-width: 100px;">
                                    @endif
                                </span>
                            </li>
                            <li class="list-group-item d-flex align-items-center">
                                <i class="fas fa-check-circle text-primary me-2"></i>
                                <strong>Status:</strong> <span class="ms-2">
                                    <span class="badge text-white"
                                        style="background-color: {{ $section->is_active ? '#608ac4' : '#e74c3c' }};">
                                        {{ $section->is_active ? 'Active' : 'Deactivated' }}
                                    </span>
                                </span>
                            </li>
                            <li class="list-group-item d-flex align-items-start">
                                <i class="fas fa-cubes text-primary me-2"></i>
                                <strong>Units in Subject:</strong>
                                <div class="ms-2">
                                    @if ($section->skills->isNotEmpty())
                                        <ul class="list-unstyled">
                                            @foreach ($section->skills as $skill)
                                                <li class="d-flex align-items-center mb-1">
                                                    <span class="badge bg-primary text-white me-2"
                                                        style="background-color: #007bff;">
                                                        {{ strtoupper(substr($skill->name, 0, 2)) }}
                                                    </span>
                                                    {{ $skill->name }}
                                                    <span class="ms-2 text-muted" style="font-size: 0.8rem;">
                                                        (Status: {{ $skill->is_active ? 'Yes' : 'No' }})
                                                    </span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @else
                                        <span class="text-muted">No units in this subject.</span>
                                    @endif
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    @endsection