@extends('layouts.appLayout')

@section('title', $course->title)
@section('nav_title', 'Course Information')

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

        @if (auth()->check())
            {{-- Breadcrumbs --}}
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent px-0">
                    <li class="breadcrumb-item"><a href="{{ route('myProfilePage') }}">Profile</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('myCoursesPage') }}">My Courses</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Course info</li>
                </ol>
            </nav>
        @else
            {{-- Breadcrumbs --}}
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent px-0">
                    <li class="breadcrumb-item"><a href="{{ route('bestCourses') }}">Discover</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Course info</li>
                </ol>
            </nav>
        @endif


        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
            </div>
            @if (auth()->check())
                <a href="{{ route('myCoursesPage') }}" class="btn btn3">
                    <i class="fas fa-arrow-left me-2"></i>Back
                </a>
            @else
                <a href="{{ route('bestCourses') }}" class="btn btn3">
                    <i class="fas fa-arrow-left me-2"></i>Back
                </a>
            @endif

        </div>

        {{-- Unified Card --}}
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden position-relative">
            {{-- Fondo blanco solo en pantallas pequeñas --}}
            <div
                class="position-absolute top-0 end-0 p-3 z-3 d-flex d-sm-none align-items-center bg-white bg-opacity-75 rounded-start-pill">
                <small class="text-muted me-1 favorite-count">{{ $favoriteCount }}</small>
                <button class="favorite-btn border-0 bg-transparent p-0" type="button" data-course-id="{{ $course->id }}"
                    data-url="{{ route('toggle.favorite') }}">
                    <svg class="corazon {{ $course->users->contains('id', Auth::id()) && $course->users->firstWhere('id', Auth::id())->pivot->favorite ? 'active' : '' }}"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
                    </svg>
                </button>
            </div>

            {{-- Sin fondo en pantallas medianas o grandes --}}
            <div class="position-absolute top-0 end-0 p-3 z-3 d-none d-sm-flex align-items-center rounded-start-pill">
                <small class="text-muted me-1 favorite-count">{{ $favoriteCount }}</small>
                <button class="favorite-btn border-0 bg-transparent p-0" type="button"
                    data-course-id="{{ $course->id }}" data-url="{{ route('toggle.favorite') }}">
                    <svg class="corazon {{ $course->users->contains('id', Auth::id()) && $course->users->firstWhere('id', Auth::id())->pivot->favorite ? 'active' : '' }}"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
                    </svg>
                </button>
            </div>


            <div class="row g-0">
                {{-- Cover --}}
                <div class="col-lg-6">
                    <img src="{{ asset('img/coverIMG/cover' . $course->id . '.jpg') }}" alt="Course Cover"
                        class="img-fluid w-100 h-100" style="object-fit: cover; max-height: 500px;">
                </div>

                <div class="col-lg-6 d-flex">
                    <div class="p-4 w-100 d-flex flex-column justify-content-between h-100">
                        {{-- Aquí todo el contenido actual, pero separando info y botón --}}
                        <div>
                            <h1 class="text-black mb-0 fw-bold padding-title mt-2">{{ $course->title }}</h1>
                            <p class="textCardInfo">{{ $course->description }}</p>
                            <p class="textCardInfo">
                                <span class="textBlue">Category:</span>
                                {{ $course->subcategory && $course->subcategory->category ? $course->subcategory->category->name : 'N/A' }}
                                {{ $course->subcategory ? $course->subcategory->name : 'N/A' }}
                            </p>
                            <p class="textCardInfo"><span class="textBlue">Publish Date:</span>
                                {{ $course->published_date ? $course->published_date->format('Y-m-d') : 'Not available' }}
                            </p>
                            <p class="textCardInfo"><span class="textBlue">Owner:</span>
                                {{ $course->owner ? $course->owner->name : 'No owner' }}</p>

                            @if (in_array($courseStatus, ['Completed', 'Redoing']))
                                <div class="mb-3 text-center">
                                    <span
                                        class="badge
                                @if ($examScore >= 70) bg-success @elseif($examScore >= 50) bg-warning @else bg-danger @endif
                                fs-5">
                                        Your exam score: {{ $examScore ?? '—' }}%
                                    </span>
                                </div>
                            @endif
                        </div>

                        {{-- Botón abajo dentro del card --}}
                        <div>
                            @if ($courseStatus == 'no_record')
                                <form
                                    action="{{ route('cart.store', ['course' => $course->id, 'price' => $course->price]) }}"
                                    method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn1 w-100 m-0">Add to Cart</button>
                                </form>
                            @elseif($courseStatus == 'Cart')
                                <form action="{{ route('cart.destroy', ['course' => $course->id]) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn2 w-100 m-0">Remove from Cart</button>
                                </form>
                            @else
                                <form action="{{ route('course.access', ['id' => $course->id]) }}" method="POST">
                                    @csrf
                                    @php
                                        $btnClass = match ($courseStatus) {
                                            'Owned' => 'btn2',
                                            'In Progress', 'Redoing' => 'btn3',
                                            'Completed' => 'btn1',
                                            default => 'btn2',
                                        };
                                        $btnText = match ($courseStatus) {
                                            'Owned' => 'Start Course',
                                            'In Progress' => 'Resume Course',
                                            'Completed' => 'Redo Course',
                                            'Redoing' => 'Resume Course',
                                            default => 'Continue',
                                        };
                                    @endphp

                                    <button type="submit"
                                        class="btn {{ $btnClass }} w-100 m-0">{{ $btnText }}</button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Foro/Chat Card -->
    <!-- Foro/Chat Section -->
    <section class="forum-section mt-5">
        <!-- HEADER -->
        <div class="forum-header text-center">
            <button class="center-btn" aria-label="Center chat" title="Center chat"><i
                    class="bi bi-arrows-expand"></i></button>
            <h5 class="mb-0 d-inline-flex align-items-center justify-content-center">
                <i class="bi bi-chat-dots me-2"></i>
                {{ $forum->title }}
            </h5>
            <div class="right-space"></div>
        </div>


        <!-- BODY (MENSAJES) -->
        <div class="forum-messages px-4 py-3" id="forum-messages">

        </div>

        {{-- Send to bottom --}}
        <button class="scroll-to-bottom" id="scrollToBottomBtn" title="Bajar al final">
            <i class="bi bi-arrow-down"></i>
        </button>


        <!-- FOOTER -->
        <div class="course-forum-footer">
            <div class="course-forum-input-wrapper">
                <button class="course-forum-btn course-forum-mic-btn" title="Grabar voz">
                    <i class="bi bi-mic-fill"></i>
                </button>

                <input type="text" class="course-forum-input" placeholder="Escribe tu mensaje..." id="chatInput"/>

                <button class="course-forum-btn course-forum-send-btn" title="Enviar mensaje" id="sendButton">
                    <i class="bi bi-send-fill"></i>
                </button>
            </div>
        </div>

    </section>


@endsection

@push('scripts')
    {{-- Pasar variables a blade --}}
    <script src="https://js.pusher.com/8.3.0/pusher.min.js"></script>

    <script>
        window.forumId = @json([
            'forumId' => $forum->id,
        ]);

        window.currentUserId = @json([
            'currentUserId' => $userId,
        ]);

        // Pasar la config de Pusher como objeto global para el JS externo
        window.PUSHER_CONFIG = {
            key: '{{ env('PUSHER_APP_KEY') }}',
            cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
            forceTLS: true
        };
    </script>
    {{-- Agregar script de pusher cdn --}}
    <script src="{{ asset('js/favorite_button.js') }}"></script>
    <script src="{{ asset('js/forumChat.js') }}"></script>
@endpush
