@extends('admin.layouts.app')

@section('title', 'Manage Course Units')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Manage Course Units - {{ $course->title }}</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ url('admin/courses') }}">Courses</a></li>
                            <li class="breadcrumb-item"><a href="{{ url('admin/courses/'.$course->id.'/edit') }}">{{ $course->title }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.course-content.index', $course->id) }}">Content Management</a></li>
                            <li class="breadcrumb-item active">Manage Units</li>
                        </ol>
                    </nav>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5>Course Units Structure</h5>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary" 
                                            onclick="showAjaxModal('{{ route('admin.course-units.create', $course->id) }}', 'Add New Course Unit')">
                                        <i class="mdi mdi-plus"></i> Add Unit
                                    </button>
                                    <a href="{{ route('admin.course-units.sort.view', $course->id) }}" class="btn btn-outline-secondary">
                                        <i class="mdi mdi-sort"></i> Sort Units
                                    </a>
                                    <a href="{{ route('admin.course-content.index', $course->id) }}" class="btn btn-outline-info">
                                        <i class="mdi mdi-arrow-left"></i> Back to Content
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            @if($units->count() > 0)
                                <div class="units-tree">
                                    @foreach($units as $unit)
                                        @include('admin.course_content.partials.unit-tree', ['unit' => $unit, 'level' => 0])
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center py-5">
                                    <i class="mdi mdi-folder-open text-muted" style="font-size: 48px;"></i>
                                    <h5 class="text-muted mt-3">No course units found</h5>
                                    <p class="text-muted">Start by creating your first course unit.</p>
                                    <button type="button" class="btn btn-primary" 
                                            onclick="showAjaxModal('{{ route('admin.course-units.create', $course->id) }}', 'Create First Course Unit')">
                                        <i class="mdi mdi-plus"></i> Create First Unit
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.units-tree {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fff;
}

.unit-item {
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s;
}

.unit-item:hover {
    background-color: #f8f9fa;
}

.unit-item:last-child {
    border-bottom: none;
}

.level-0 { padding-left: 15px; }
.level-1 { padding-left: 35px; }
.level-2 { padding-left: 55px; }
.level-3 { padding-left: 75px; }
.level-4 { padding-left: 95px; }
</style>
@endsection