@extends('admin.layout.app')
@section('title', 'Courses')
@section('content')
    <div class="content container-fluid">

        <div class="page-header">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Courses</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="">Course</a></li>
                            <li class="breadcrumb-item active">All Courses</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('courses.index') }}" method="GET" class="mb-3 student-group-form">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="form-group">
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control"
                            placeholder="Search by Name ...">
                    </div>
                </div>

                <div class="col-lg-2">
                    <div class="d-flex">
                        <div class="search-student-btn">
                            <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        @if (request('search'))
                            <div class="search-student-btn ms-2">
                                <a href="{{ route('courses.index') }}" class="btn btn-primary">View All</a>
                            </div>
                        @endif
                    </div>
                </div>

            </div>
        </form>
        <div class="row">
            <div class="col-sm-12">
                <div class="card card-table comman-shadow">
                    <div class="card-body">

                        <div class="page-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h3 class="page-title">Courses</h3>
                                </div>
                                <div class="col-auto text-end float-end ms-auto download-grp">

                                    <a href="{{ route('courses.create') }}" class="btn btn-primary"><i
                                            class="fas fa-plus"></i> Add New Course</a>
                                </div>
                            </div>
                        </div>

                        <div class="container my-4">
                            <div class="row g-3">
                                @forelse ($courses as $course)
                                    <div class="col-md-4">
                                        <div class="shadow-sm card h-100">
                                            @if ($course->image)
                                                <img src="{{ asset('storage/' . $course->image->path) }}"
                                                    class="card-img-top" alt="{{ $course->name }}"
                                                    style="height: 180px; object-fit: cover;">
                                            @else
                                                <img src="https://via.placeholder.com/350x180?text=No+Image"
                                                    class="card-img-top" alt="No image">
                                            @endif

                                            <div class="card-body d-flex flex-column">
                                                <h5 class="card-title">{{ $course->name }}</h5>
                                                <p class="card-text text-muted flex-grow-1">
                                                    {{ Str::limit($course->description, 120) }}</p>

                                                <div class="mb-2">
                                                    @if ($course->publish_status)
                                                        <span class="badge badge-soft-success">Published</span>
                                                    @else
                                                        <span class="badge badge-soft-warning">Not Published</span>
                                                    @endif
                                                </div>

                                                <p class="mb-0 text-secondary small">
                                                    <strong>Author:</strong> {{ $course->author }}
                                                </p>


                                                <div class="d-flex">
                                                    <a href="{{ route('courses.units.index', $course->id) }}"
                                                        class="mt-3 btn btn-primary align-self-start">Manage</a>
                                                    <a href="{{ route('courses.edit', $course->id) }}"
                                                        class="mt-3 ms-1 btn btn-warning align-self-start">Edit Course</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="alert alert-warning">
                                        No courses found! <a href="{{ route('courses.index') }}">View All</a>
                                    </div>
                                @endforelse
                            </div>
                        </div>

                        <div class="mt-3">
                            {{ $courses->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection