@extends('layouts.appLayout')

{{-- Estilos CSS personalizados --}}
@push('styles')
    <link rel="stylesheet" href="{{ asset('css/discover.css') }}">
    <link rel="stylesheet" href="{{ asset('css/mainStyles.css') }}">
    <link rel="stylesheet" href="{{ asset('css/teacherDashboard.css') }}">
@endpush

@section('title', 'Teacher Dashboard')

@section('content')
    <div class="container my-4">

        <!-- Breadcrumbs -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('myProfilePage') }}">Profile</a></li>
                <li class="breadcrumb-item active" aria-current="page">Teacher Workspace</li>
            </ol>
        </nav>

        {{-- Titulo --}}
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center text-white fw-bold">Teacher Dashboard</h1>
                <p class="text-center textOrange">Welcome to your workspace!</p>
            </div>
        </div>

        {{-- Mensaje de success en caso que se haya eliminado el curso --}}

        @if (session('success'))
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-success text-center" role="alert">
                        <i class="fa-solid fa-check-circle me-2"></i>
                        {{ session('success') }}
                    </div>
                </div>
            </div>
        @endif

        {{-- Mensaje de error en caso que no se haya podido eliminar el curso --}}
        @if (session('error'))
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-danger text-center" role="alert">
                        <i class="fa-solid fa-triangle-exclamation me-2"></i>
                        {{ session('error') }}
                    </div>
                </div>
            </div>
        @endif


        @if ($courses->isEmpty())
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-custom-orange text-center text-white d-flex align-items-center justify-content-center shadow"
                        role="alert">
                        <i class="fa-solid fa-circle-info me-2"></i>
                        <h4 class="fw-bold mb-0">You don't currently have any courses created, start creating one!</h4>
                    </div>
                </div>
            </div>
        @endif

        {{-- Renderiza los cursos que el usuario es owner --}}
        <div class="row">
            {{-- Card para crear nuevo curso (siempre visible) --}}
            <div class="col-md-3 g-3">
                <div class="h-100">
                    <button type="button"
                        class="card h-100 d-flex justify-content-center align-items-center text-center border-dashed pointer text-decoration-none text-muted w-100"
                        data-bs-toggle="modal" data-bs-target="#createCourseModal">
                        <div class="d-flex flex-column align-items-center justify-content-center h-100 p-5">
                            <i class="fas fa-plus-circle fa-3x mb-2"></i>
                            <span>Make a draft!</span>
                        </div>
                    </button>
                </div>
            </div>

            @foreach ($courses as $course)
                @php $state = $courseStates[$course->status] ?? $courseStates['draft']; @endphp
                <div class="col-md-3 g-3">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body card-body-course">
                            <div class="position-relative">
                                <img src="{{ asset('img/coverIMG/cover' . $course->id . '.jpg') }}"
                                    class="imgCourse img-fluid rounded-top w-100" alt="{{ $course->title }} Cover">
                                <span class="position-absolute top-0 end-0 m-2 badge {{ $state['badge'] }} text-white">
                                    <i class="{{ $state['icon'] }} me-1"></i>
                                    {{ ucfirst($course->status) }}
                                </span>
                            </div>

                            <div class="p-3">
                                <div class="d-flex justify-content-start mb-2 flex-wrap gap-1">
                                    <small class="badge bg-custom-purple text-white text-truncate"
                                        title="{{ $course->subcategory->name }}">
                                        {{ $course->subcategory->name }}
                                    </small>
                                    <small class="badge bg-custom-orange text-white text-truncate"
                                        title="{{ $course->subcategory->category->name }}">
                                        {{ $course->subcategory->category->name }}
                                    </small>
                                </div>

                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h5 class="card-title mb-0 flex-grow-1 text-truncate pe-2">
                                        {{ $course->title }}
                                    </h5>
                                </div>

                                <p class="card-text text-muted small mb-2 line-clamp-2">
                                    {{ $course->description }}
                                </p>

                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    @if ($course->published_date)
                                        <small class="text-muted">
                                            <i class="far fa-calendar-alt me-1"></i>
                                            Published:
                                            {{ \Carbon\Carbon::parse($course->published_date)->format('M d, Y') }}
                                        </small>
                                    @else
                                        <small class="text-muted">
                                            <i class="far fa-calendar-alt me-1"></i>
                                            Not published
                                        </small>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="card-footer bg-transparent border-top-0 pb-3 pt-0">
                            <div class="d-flex justify-content-between align-items-center">

                                <a href="{{ route($state['link'], ['id' => $course->id]) }}"
                                    class="{{ $state['button_class'] }}" title="{{ $state['button_title'] }}">
                                    <i class="{{ $state['button_icon'] }}"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Paginación personalizada --}}
        <nav aria-label="Course pagination">
            <ul class="pagination justify-content-center mt-4">
                {{-- First page --}}
                <li class="page-item{{ $courses->onFirstPage() ? ' disabled' : '' }}">
                    <a class="page-link" href="{{ $courses->url(1) }}" tabindex="-1" aria-label="First">
                        <span class="textBlue" aria-hidden="true">&laquo;&laquo;</span>
                    </a>
                </li>
                {{-- Previous page --}}
                <li class="page-item{{ $courses->onFirstPage() ? ' disabled' : '' }}">
                    <a class="page-link" href="{{ $courses->previousPageUrl() ?? '#' }}" tabindex="-1"
                        aria-label="Previous">
                        <span class="textBlue" aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {{-- Page info --}}
                <li class="page-item disabled">
                    <span class="page-link bg-light text-dark border-0">
                        Page {{ $courses->currentPage() }} of {{ $courses->lastPage() }}
                    </span>
                </li>
                {{-- Next page --}}
                <li class="page-item{{ $courses->currentPage() == $courses->lastPage() ? ' disabled' : '' }}">
                    <a class="page-link" href="{{ $courses->nextPageUrl() ?? '#' }}" aria-label="Next">
                        <span class="textBlue" aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {{-- Last page --}}
                <li class="page-item{{ $courses->currentPage() == $courses->lastPage() ? ' disabled' : '' }}">
                    <a class="page-link" href="{{ $courses->url($courses->lastPage()) }}" aria-label="Last">
                        <span class="textBlue" aria-hidden="true">&raquo;&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="text-center small text-muted m-3">
            Found {{ $courses->total() }} courses
        </div>
    </div>


    {{-- Modal para crear un curso --}}
    <!-- Modal -->
    <div class="modal fade" id="createCourseModal" tabindex="-1" aria-labelledby="createCourseModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-gradient-purple text-white ">
                    {{-- Icono --}}
                    <h5 class="modal-title fw-bold" id="createCourseModalLabel">
                        <i class="fa-brands fa-firstdraft px-1"></i>
                        Make a course draft!
                    </h5>
                    <button type="button" class="btn-close btn1 border-0" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- Formulario para crear un nuevo curso --}}
                    <form id="createCourseForm" action="{{ route('create.course') }}">
                        <div class="mb-4">
                            <label for="courseTitle" class="form-label d-flex align-items-center">
                                {{-- Icono --}}
                                <i class="fas fa-heading px-1"></i>
                                Course Title
                            </label>
                            <input type="text" class="form-control form-custom auth-input" id="courseTitle"
                                name="title" required>
                            {{-- Error feedback --}}
                            <div class="invalid-feedback">

                            </div>
                        </div>
                        <div class="mb-4">
                            <label for="courseDescription" class="form-label">
                                <i class="fas fa-align-left px-1"></i>
                                Description
                            </label>
                            <textarea class="form-control form-custom auth-input font " id="courseDescription" name="description" rows="3"
                                required></textarea>
                            <div class="invalid-feedback">

                            </div>
                        </div>
                        <div class="mb-4">
                            <label for="courseCategory" class="form-label">
                                <i class="fas fa-tags px-1"></i>
                                Category</label>
                            <select class="form-select form-custom-select form-custom" id="courseCategory"
                                name="category_id" required>
                                <option value="" disabled selected>Select a category</option>
                                @foreach ($categoriesWithSubcategories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">

                            </div>
                        </div>
                        <div class="mb-4 d-none" id="subcategoryContainer">
                            <label for="courseSubcategory" class="form-label">
                                <i class="fas fa-tags px-1"></i>
                                Subcategory</label>
                            <select class="form-select form-custom-select form-custom" id="courseSubcategory"
                                name="subcategory_id" required>
                                {{-- Se renderiza desde JS las subcategorias --}}
                            </select>
                            <div class="invalid-feedback">

                            </div>
                        </div>

                        {{-- Span informativo --}}
                        <div class="mb-3 mt-3 bg-gradient-purple p-2 rounded-1 border-1">
                            {{-- Icono --}}
                            <span class="text-white">
                                {{-- Icono --}}
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Note:</strong> The course will be saved as a draft. You can edit it later and
                                request to publish it.
                            </span>
                        </div>
                        <button type="submit" id="submitCreateCourse" class="btn btn1 w-100 m-0 mt-2">
                            <i class="fas fa-pencil-alt me-2"></i>
                            Make it draft
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- Scripts JS personalizados --}}
@push('scripts')
    <script>
        // Pasar variable PHP a JS
        window.categoriesWithSubcategories = @json($categoriesWithSubcategories);
    </script>
    <script src="{{ asset('js/utils/utils.js') }}" defer></script>
    <script src="{{ asset('js/teacher/dashboard.js') }}" defer></script>
@endpush
