@extends('backend.layout.app')

@section('content')
    <div class="page-content container-fluid py-4">

        {{-- Course Header --}}
        <div class="card mb-4 shadow-sm">
            <div class="row g-0">
                <div class="col-md-4">
                    <img src="{{ asset($course->thumbnail_url) }}" class="img-fluid rounded-start h-100 object-fit-cover"
                        alt="{{ $course->title }}">
                </div>
                <div class="col-md-8">
                    <div class="card-body d-flex flex-column ">
                        <div class="mb-3">
                            <h3 class="card-title mb-2">{{ $course->title }}
                                @if ($course->is_popular)
                                    <span class="badge bg-warning text-dark ms-2">Popular</span>
                                @endif
                            </h3>
                            <div class="d-flex flex-wrap gap-3 mb-2">
                                <span class="text-muted">Category: <strong
                                        class="text-dark">{{ $course->category->name }}</strong></span>
                                <span class="text-muted">Type: <strong
                                        class="text-dark">{{ $course->course_type }}</strong></span>
                                <span class="text-muted">Status:
                                    <span
                                        class="badge {{ $course->status == 'published' ? 'bg-success' : 'bg-secondary' }}">
                                        {{ ucfirst($course->status) }}
                                    </span>
                                </span>
                                <span class="text-muted"> Access Type:
                                    <span class="badge {{ $course->is_free ? 'bg-warning' : 'bg-primary' }}">
                                       {{ $course->is_free ? 'Free' : 'Paid' }}
                                    </span>
                                </span>
                            </div>
                            <div class="d-flex flex-wrap gap-3">
                                <span class="text-muted">Classes: <strong
                                        class="text-dark">{{ $course->total_class }}</strong></span>
                                <span class="text-muted">Enrollments: <strong
                                        class="text-dark">{{ $course->total_enroll }}</strong></span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <h6 class="mb-2">Pricing</h6>
                            <div class="d-flex align-items-center gap-2">
                                <del class="text-muted">৳{{ $course->original_price }}</del>
                                <span class="h5 text-success fw-bold mb-0">৳{{ $course->discounted_price }}</span>
                                <span class="badge bg-info text-dark">{{ $course->discount_percentage }}% OFF</span>
                            </div>
                        </div>

                        <p class="card-text text-muted flex-grow-1">{{ $course->short_description }}</p>

                        <div class="mt-auto pt-3">
                            <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal"
                                data-bs-target="#introVideoModal">
                                <i class="bi bi-play-circle me-1"></i> Watch Intro
                            </button>
                            <a href="{{ $course->facebook_group }}" target="_blank" class="btn btn-info text-white">
                                <i class="bi bi-facebook me-1"></i> Join FB Group
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-light py-3">
                <h5 class="mb-0 fw-semibold">Course Details</h5>
            </div>
            <div class="card-body ">
                {!! $course->description !!}
            </div>
        </div>

        {{-- Features --}}
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-light py-3">
                <h5 class="mb-0 fw-semibold">Course Features</h5>
            </div>
            <div class="card-body p-0">
                <div class="row g-0">
                    @foreach ($course->features as $feature)
                        <div class="col-md-6 border-bottom">
                            <div class="p-3 d-flex align-items-center">
                                <i class="bi bi-check-circle-fill text-success me-3 fs-5"></i>
                                <span class="text-dark">{{ $feature->feature_text }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Instructors --}}
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-light py-3">
                <h5 class="mb-0 fw-semibold">Instructor(s)</h5>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    @foreach ($course->instructors as $instructor)
                        <div class="col-md-6 col-lg-3">
                            <div class="text-center p-3 bg-light rounded">
                                <img src="{{ asset($instructor->user->image ?? 'assets/images/default-user.png') }}"
                                    class="rounded-circle mb-3 object-fit-cover" style="width:100px; height:100px;">
                                <h6 class="mb-1 fw-semibold">{{ $instructor->user->name }}</h6>
                                <small class="text-muted d-block">{{ $instructor->experience_years }} years
                                    experience</small>
                                <small class="text-muted">{{ $instructor->organization }}</small>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Modules & Classes --}}
        <div class="card mb-4 shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center bg-light py-3">
                <h5 class="mb-0 fw-semibold text-dark">Modules & Classes</h5>
                <a href="{{ route('admin.module.create', ['course_id' => $course->id]) }}"
                    class="btn btn-primary btn-sm px-3 py-2 d-flex align-items-center">
                    <i class="bi bi-plus-lg me-1"></i> Add Module
                </a>
            </div>
            <div class="card-body p-0  mt-3">
                <div class="accordion" id="modulesAccordion">
                    @foreach ($course->module as $module)
                        <div class="accordion-item  mb-3 p-3 bg-white rounded border" id="partenModule_{{ $module->id }}">
                            <h2 class="accordion-header" id="moduleHeading{{ $module->id }}">
                                <div class="d-flex justify-content-between align-items-center ">
                                    <button
                                        class="accordion-button collapsed bg-transparent border-0 p-0 shadow-none w-100 d-flex justify-content-between"
                                        type="button" data-bs-toggle="collapse"
                                        data-bs-target="#moduleCollapse{{ $module->id }}" aria-expanded="false"
                                        aria-controls="moduleCollapse{{ $module->id }}">
                                        <div class="d-flex align-items-center">
                                            <div>
                                                <span class="fw-semibold text-dark d-block">{{ $module->title }}</span>
                                                <small class="text-muted">{{ count($module->moduleContent) }} items</small>
                                            </div>
                                        </div>
                                    </button>
                                    <a href="{{ route('admin.module.edit', $module->id) }}"
                                        class="btn btn-outline-info btn-sm d-flex align-items-center ms-2">
                                        <i class="bi bi-pencil me-1"></i> Edit
                                    </a>
                                      <a href="javascript:void(0)" class="btn btn-danger btn-sm deleteButton ms-2"
                                data-parentid="partenModule_{{ $module->id }}"
                                data-url={{ route('admin.module.delete', $module->id) }}>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-trash3-fill" viewBox="0 0 16 16">
                                    <path
                                        d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5">
                                    </path>
                                </svg>
                            </a>
                                </div>
                                  
                            </h2>
                            <div id="moduleCollapse{{ $module->id }}" class="accordion-collapse collapse"
                                aria-labelledby="moduleHeading{{ $module->id }}" data-bs-parent="#modulesAccordion">
                                <div class="accordion-body pt-3 pb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="mb-0 fw-semibold">Module Content</h6>
                                        <a href="{{ route('admin.module.content.create', ['course_id' => $course->id, 'module_id' => $module->id]) }}"
                                            class="btn btn-success btn-sm px-3 py-2 d-flex align-items-center">
                                            <i class="bi bi-plus-lg me-1"></i> Add Content
                                        </a>
                                    </div>

                                    @if (!empty($module->moduleContent) && count($module->moduleContent) > 0)
                                        <div class="row g-3">
                                            @foreach ($module->moduleContent as $content)
                                                <div class="col-12" id="pModuleContent_{{ $content->id }}">
                                                    <div class="card border shadow-sm ">
                                                        <div class="card-body p-0">
                                                            <div class="d-flex justify-content-between align-items-start">
                                                                <div class="flex-grow-1">
                                                                    <div class="d-flex align-items-center mb-2">
                                                                        <h6 class="mb-0 fw-semibold me-3">
                                                                            {{ $content->title }}</h6>
                                                                        @if ($content->content_type == 'video')
                                                                            <span class="badge btn-danger">Video</span>
                                                                        @elseif($content->content_type == 'pdf')
                                                                            <span class="badge btn-purple ">PDF</span>
                                                                        @elseif($content->content_type == 'assignment')
                                                                            <span
                                                                                class="badge btn-emerald">Assignment</span>
                                                                        @elseif($content->content_type == 'quiz')
                                                                            <span class="badge btn-orange">Quiz</span>
                                                                        @endif
                                                                    </div>
                                                                    @if ($content->description)
                                                                        <p class="text-muted small mb-2">
                                                                            {{ $content->description }}</p>
                                                                    @endif
                                                                </div>
                                                                <div class="d-flex align-items-center ms-3">
                                                                    @if ($content->content_type == 'video')
                                                                        <button type="button"
                                                                            class="btn btn-outline-primary btn-sm me-2 d-flex align-items-center video-play-btn"
                                                                            data-video-id="{{ $content->content_url }}">
                                                                            <i class="bi bi-play-circle me-1"></i> Watch
                                                                        </button>
                                                                    @elseif($content->content_type == 'pdf' || $content->content_type == 'assignment')
                                                                        <a href="{{ $content->content_url }}"
                                                                            target="_blank"
                                                                            class="btn btn-outline-success btn-sm me-2 d-flex align-items-center">
                                                                            <i class="bi bi-download me-1"></i> Download
                                                                        </a>
                                                                    @endif
                                                                    <a href="{{ route('admin.module.content.edit', $content->id) }}"
                                                                        class="btn btn-outline-info btn-sm d-flex align-items-center">
                                                                        <i class="bi bi-pencil me-1"></i> Edit
                                                                    </a>
                                                                     <a href="javascript:void(0)" class="btn btn-danger btn-sm deleteButton ms-2"
                                data-parentid="pModuleContent_{{ $content->id }}"
                                data-url={{ route('admin.module.content.delete', $content->id) }}>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-trash3-fill" viewBox="0 0 16 16">
                                    <path
                                        d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5">
                                    </path>
                                </svg>
                            </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="text-center py-5 text-muted bg-light rounded">
                                            <i class="bi bi-inbox display-4 d-block mb-2 opacity-50"></i>
                                            <p class="mb-0">No content available yet for this module.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>


        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-light d-flex justify-content-between align-items-center py-3">
                <h5 class="mb-0 fw-semibold">Archived Courses</h5>
                <a href="{{ route('admin.course.archive', $course->id) }}"
                    class="btn btn-primary  d-flex align-items-center">
                    <i class="bi bi-plus-lg me-1"></i> Add / Remove Courses
                </a>
            </div>
            <div class="card-body">
                <div class="row g-4">
    @foreach ($archivedCourses as $archivedCourse)
        @php $c = $archivedCourse->course; @endphp
        <div class="col-md-6 col-lg-3">
            <a href="{{ route('admin.course.show', $c->id) }}" class="text-decoration-none">
                <div class="card shadow-sm border-0 overflow-hidden hover-shadow transition">
                    <div class="position-relative">
                        <img src="{{ asset($c->thumbnail_url ?? 'assets/images/default-course.png') }}"
                             alt="{{ $c->title }}"
                             class="card-img-top object-fit-cover"
                             style="height:180px; width:100%;">
                    </div>
                    <div class="card-body ">
                        <h6 class="card-title fw-semibold mb-0 text-dark  title-clamp" title="{{ $c->title }}">
                            {{ $c->title }}
                        </h6>
                    </div>
                </div>
            </a>
        </div>
    @endforeach
</div>

<style>
    .title-clamp {
        line-height: 25px
}
.hover-shadow {
    transition: transform 0.3s, box-shadow 0.3s;
}
.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.object-fit-cover {
    object-fit: cover;
}
</style>

            </div>
        </div>





        {{-- Video Modal --}}
        <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModalLabel">Video Content</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="ratio ratio-16x9">
                            <iframe id="videoPlayer" src="" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Intro Video Modal --}}
        <div class="modal fade" id="introVideoModal" tabindex="-1" aria-labelledby="introVideoModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="introVideoModalLabel">Course Introduction</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/{{ $course->video_intro_url }}" frameborder="0"
                                allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Video modal functionality
            const videoModal = new bootstrap.Modal(document.getElementById('videoModal'));
            const videoPlayer = document.getElementById('videoPlayer');

            document.querySelectorAll('.video-play-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const videoId = this.getAttribute('data-video-id');
                    videoPlayer.src = `https://www.youtube.com/embed/${videoId}`;
                    videoModal.show();
                });
            });

            // Reset video when modal is closed
            document.getElementById('videoModal').addEventListener('hidden.bs.modal', function() {
                videoPlayer.src = '';
            });
        });
    </script>
@endsection