@extends('frontend.maintemplate.maintemplate')

@section('title', 'Course Details' . ' :: AgeLess Institute')

@section('content')

    <style>
        .custome {
            padding: 9px 7px;
            text-decoration: none;
            border-radius: 10px;
            background-color: #3a6a59;
            font-size: 20px;
            font-weight: 500;
            border: 2px solid #3a6a59;
            color: white;
            transition: 0.3s ease-in-out;
            display: block;
            text-align: center;
            max-width: 221px;
        }

        a:hover {
            color: white;
        }

        .custome a:hover {
            background-color: transparent;
            color: #3a6a59;
        }

        .custome a {
            padding: 9px 40px;
            text-decoration: none;
            border-radius: 10px;
            background-color: #3a6a59;
            font-size: 20px;
            font-weight: 500;
            border: 2px solid #3a6a59;
            color: white;
            transition: 0.3s ease-in-out;
            display: block;
            text-align: center;
            max-width: 221px;
        }
    </style>

    <div class="course-details-top-section">
        <div class="container-fluid">
            <div class="course-details-top-inner">
                <div class="courses-image-wrapepr">
                    <div class="inner-image-border">
                        <div class="image-wrapper">
                            <img src="{{ asset('storage/' . $course->thumbnail_image) }}" alt="">
                        </div>
                    </div>
                </div>
                <div class="courses-details">
                    <h3>{{ $course->category->name }}</h3>
                    <h6>({{ $course->name }})</h6>
                    <div class="date-hours-details">
                        <h5><span>Total Flying Hours</span> : 116 Hrs</h5>
                    </div>
                    <p>{{ $course->description }}</p>

                </div>
                {{-- <div class="right-download-certificate">
                <a href="#">Download Certificate</a>
            </div> --}}
            </div>
        </div>
    </div>

    <!-- Course Details Section  -->
    <div class="course-details-section">
        <div class="container-fluid">
            <div class="course-details-inner">
                <div class="tab-section-inner">
                    <div class="tab-button-wrapper">
                        <div class="tab-button-inner">
                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-home" type="button" role="tab"
                                        aria-controls="pills-home" aria-selected="true">Course Material</button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-profile" type="button" role="tab"
                                        aria-controls="pills-profile" aria-selected="false">Practical Session</button>
                                </li>


                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-contact" type="button" role="tab"
                                        aria-controls="pills-contact" aria-selected="false">Scheduled Session</button>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab" tabindex="0">
                            <!--  Courses Content  -->
                            <div class="courses-content">
                                <div class="courses-bottom-content">
                                    <div class="courses-bottom-inner">
                                        <div class="courses-data-wrapper">
                                            <div class="courses-data-inner">
                                                <form action="">
                                                    <div class="table-wrapper">
                                                        <div class="table-responsive">
                                                </form>
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Topic</th>
                                                            {{-- <th scope="col">Topic</th> --}}
                                                            <th scope="col">Chapter</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {{-- @foreach ($course->courseTopics as $courseTopic)
                                                                <tr>

                                                                    <td>{{ $courseTopic->topic->title }}</td>

                                                                    <td>
                                                                        @foreach ($courseTopic->topicsChapters as $index => $topicsChapter)
                                                                        <a href="{{ route('student.course-details.index', ['id' => $topicsChapter->chapter->id]) }}"  style="color: black; text-decoration: underline;">
                                                                        <p>{{ $loop->iteration }}. {{ $topicsChapter->chapter->name }}</p>
                                                                    </a>
                                                                    @endforeach

                                                                    </td>
                                                                </tr>
                                                                @endforeach --}}

                                                                @foreach ($course->courseTopics as $courseTopic)
                                                                @php
                                                                    $topicId = $courseTopic->topic->id;
                                                                    $isPurchasedTopic = in_array($topicId, $purchasedTopics);
                                                                @endphp

                                                                <tr>
                                                                    {{-- ✅ Case 1: Show Foundation Topic only if the student has completed it --}}
                                                                    @if ($courseTopic->topic->id == env('FOUNDATION_TOPIC_ID') && $showFoundationTopic)
                                                                        <td>{{ $courseTopic->topic->title }}</td>
                                                                        <td>
                                                                            @foreach ($courseTopic->topicsChapters as $topicsChapter)
                                                                                <a href="{{ route('student.course-details.index', ['id' => $topicsChapter->chapter->id, 'course_id' => $course->id]) }}"
                                                                                    style="color: black; text-decoration: underline;">
                                                                                    <p>{{ $loop->iteration }}. {{ $topicsChapter->chapter->name }}</p>
                                                                                </a>
                                                                            @endforeach
                                                                        </td>

                                                                    {{-- ✅ Case 2: If NOT Foundation Topic, Check if Course is Purchased --}}
                                                                    @elseif ($courseTopic->topic->id != env('FOUNDATION_TOPIC_ID'))

                                                                        {{-- 🔹 If Course is Purchased and "is_customised_course" is 1, Show Only Purchased Topics --}}
                                                                        @if ($checkCoursePurchase && $checkCoursePurchase->is_customised_course == 1)
                                                                            @if ($isPurchasedTopic)
                                                                                <td>{{ $courseTopic->topic->title }}
                                                                                    <form action="{{ route('student.exam.store') }}" method="POST">
                                                                                        @csrf
                                                                                        <input type="hidden" name="student_id" value="{{ Auth::id() }}">
                                                                                        <input type="hidden" name="course_id" value="{{ $course->id }}">
                                                                                        <input type="hidden" name="topic_id" value="{{ $courseTopic->topic->id }}">
                                                                                        <button type="submit" class="btn btn-primary">Create Exam for Topic</button>
                                                                                    </form>
                                                                                </td>
                                                                                <td>
                                                                                    @foreach ($courseTopic->topicsChapters as $topicsChapter)
                                                                                        <a href="{{ route('student.course-details.index', ['id' => $topicsChapter->chapter->id, 'course_id' => $course->id]) }}"
                                                                                            style="color: black; text-decoration: underline;">
                                                                                            <p>{{ $loop->iteration }}. {{ $topicsChapter->chapter->name }}</p>
                                                                                        </a>
                                                                                    @endforeach
                                                                                </td>
                                                                            @endif
                                                                        @else
                                                                            {{-- 🔹 Show All Topics Normally (When Course is NOT Purchased or is_customised_course == 0) --}}
                                                                            <td>
                                                                                {{ $courseTopic->topic->title }}
                                                                                <form action="{{ route('student.exam.store') }}" method="POST" class="topic-progress-form">
                                                                                    @csrf
                                                                                    <input type="hidden" name="student_id" value="{{ Auth::id() }}">
                                                                                    <input type="hidden" name="course_id" value="{{ $course->id }}">
                                                                                    <input type="hidden" name="topic_id" value="{{ $courseTopic->topic->id }}">
                                                                                    <input type="hidden" name="course_purchase_id" value="{{ $checkCoursePurchase->id }}">

                                                                                    <table class="progress-steps">
                                                                                        <tbody>
                                                                                            @php
                                                                                                $topicId = $courseTopic->topic->id;
                                                                                                $statuses = $topicProgress[$topicId] ?? [];

                                                                                                $status1 = $statuses['read_book'] ?? 'pending';
                                                                                                $status2 = $statuses['watch_video'] ?? 'pending';
                                                                                                $status3 = $statuses['mcq'] ?? 'pending';

                                                                                                $btnMap = function($status) {
                                                                                                    return [
                                                                                                        'text' => $status === 'pending' ? 'Start' : ($status === 'inprogress' ? 'Complete' : 'Completed'),
                                                                                                        'class' => $status === 'inprogress' ? 'btn-success' : ($status === 'complete' ? 'btn-secondary' : 'btn-primary'),
                                                                                                    ];
                                                                                                };
                                                                                                $b1 = $btnMap($status1);
                                                                                                $b2 = $btnMap($status2);
                                                                                                $b3 = $btnMap($status3);
                                                                                            @endphp

                                                                                            <!-- Step 1: Read Book -->
                                                                                            <tr>
                                                                                                <td>Step 1</td>
                                                                                                <td>Read Book</td>
                                                                                                <td>
                                                                                                    <button type="button" class="btn {{ $b1['class'] }} step-action"
                                                                                                            data-step="1" data-type="read_book" data-status="{{ $status1 }}"
                                                                                                            @if($status1 === 'complete') disabled @endif>
                                                                                                        {{ $b1['text'] }}
                                                                                                    </button>
                                                                                                </td>
                                                                                                <td class="status status-1">{{ $status1 }}</td>
                                                                                            </tr>

                                                                                            <!-- Step 2: Watch Video -->
                                                                                            <tr>
                                                                                                <td>Step 2</td>
                                                                                                <td>Watch Video</td>
                                                                                                <td>
                                                                                                    <button type="button" class="btn {{ $b2['class'] }} step-action"
                                                                                                            data-step="2" data-type="watch_video" data-status="{{ $status2 }}"
                                                                                                            @if($status1 !== 'complete' || $status2 === 'complete') disabled @endif>
                                                                                                        {{ $b2['text'] }}
                                                                                                    </button>
                                                                                                </td>
                                                                                                <td class="status status-2">{{ $status2 }}</td>
                                                                                            </tr>

                                                                                            <!-- Step 3: MCQ -->
                                                                                            <tr>
                                                                                                <td>Step 3</td>
                                                                                                <td>MCQ</td>
                                                                                                <td>
                                                                                                    {{-- <button type="button" class="btn {{ $b3['class'] }} step-action"
                                                                                                            data-step="3" data-type="mcq" data-status="{{ $status3 }}"
                                                                                                            @if($status2 !== 'complete' || $status3 === 'complete') disabled @endif>
                                                                                                        {{ $b3['text'] }}
                                                                                                    </button> --}}
                                                                                                    {{-- <button type="submit" class="btn {{ $b3['class'] }} final-submit" data-step="3" data-type="mcq" data-status="{{ $status3 }}"
                                                                                                            @if($status2 !== 'complete' || $status3 === 'complete') disabled @endif>
                                                                                                        Create Exam for Topic
                                                                                                    </button> --}}
                                                                                                    <button type="submit"
                                                                                                        class="btn {{ $b3['class'] }} step-action final-submit"
                                                                                                        data-step="3" data-type="mcq" data-status="{{ $status3 }}"
                                                                                                        @if($status2 !== 'complete' || $status3 === 'complete') disabled @endif>
                                                                                                    Create Exam for Topic
                                                                                                </button>
                                                                                                </td>
                                                                                                <td class="status status-3">{{ $status3 }}</td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>

                                                                                    {{-- <button type="submit" class="btn btn-primary final-submit"
                                                                                            @if($status3 !== 'complete') disabled @endif>
                                                                                        Create Exam for Topic
                                                                                    </button> --}}
                                                                                </form>
                                                                            </td>

                                                                            <td>
                                                                                @foreach ($courseTopic->topicsChapters as $topicsChapter)
                                                                                    <a href="{{ route('student.course-details.index', ['id' => $topicsChapter->chapter->id, 'course_id' => $course->id]) }}"
                                                                                        style="color: black; text-decoration: underline;">
                                                                                        <p>{{ $loop->iteration }}. {{ $topicsChapter->chapter->name }}</p>
                                                                                    </a>
                                                                                @endforeach
                                                                            </td>
                                                                        @endif

                                                                    @endif
                                                                </tr>
                                                            @endforeach



                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  Courses Content  -->
                </div>
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
                    tabindex="0">
                    <!--  Courses Content  -->
                    <div class="courses-content">
                        <div class="courses-bottom-content">
                            <div class="courses-bottom-inner">
                                <div class="courses-data-wrapper">
                                    <div class="courses-data-inner">
                                        <form action="">
                                            <div class="table-wrapper">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th scope="col">Title</th>
                                                                <th scope="col">Time</th>
                                                                <th scope="col">Model Required</th>
                                                                <th scope="col">Action</th>
                                                            </tr>
                                                        </thead>

                                                        <tbody>
                                                            @foreach ($practicalSessions as $session)
                                                                @if ($session->practicalsession)
                                                                    <tr>
                                                                        <td>{{ $session->practicalsession->title }}</td>
                                                                        <td>{{ intdiv($session->practicalsession->time, 60) }}:{{ str_pad($session->practicalsession->time % 60, 2, '0', STR_PAD_LEFT) }}
                                                                            HRS</td>


                                                                        <td>
                                                                            {{ $session->practicalsession->model_required ? 'Yes' : 'No' }}
                                                                        </td>
                                                                        <td>
                                                                            <a href="{{ route('student.practicalsession.showSecdule', ['id' => $session->id, 'topic_id' => $session->topic_id]) }}"
                                                                                class="custome">Schedule Practical</a>
                                                                            {{-- <a href="{{ route('student.practicalsession.edit', $session->id) }}" class="custome">Schedule Practical</a> --}}
                                                                        </td>
                                                                    </tr>
                                                                @else
                                                                    <tr>
                                                                        <td>No practical session available for this course.
                                                                        </td>
                                                                    </tr>
                                                                @endif
                                                            @endforeach



                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  Courses Content  -->
                </div>
                <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"
                    tabindex="0">
                    <!--  Courses Content  -->
                    <div class="courses-content">
                        <div class="courses-bottom-content">
                            <div class="courses-bottom-inner">
                                <div class="courses-data-wrapper">
                                    <div class="courses-data-inner">
                                        <form action="">
                                            <div class="table-wrapper">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th scope="col">#</th>
                                                                <th scope="col">Date</th>
                                                                <th scope="col">Time Slot</th>
                                                                <th scope="col">Session ID</th>
                                                                <th scope="col">Location Required</th>
                                                                <th scope="col">Device Required</th>
                                                                <th scope="col">Model Required</th>
                                                                <th scope="col">Status</th>

                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @forelse($bookedSessions as $key => $session)
                                                                <tr>
                                                                    <td>{{ $key + 1 }}</td>
                                                                    <td>{{ \Carbon\Carbon::parse($session->date)->format('Y-m-d') }}
                                                                    </td>
                                                                    <td>{{ $session->time_slot }}</td>
                                                                    <td>{{ $session->session_id }}</td>
                                                                    <td>{{ $session->location_required ? 'Yes' : 'No' }}
                                                                    </td>
                                                                    <td>{{ $session->device_required ? 'Yes' : 'No' }}</td>
                                                                    <td>{{ $session->model_required ? 'Yes' : 'No' }}</td>
                                                                    <td>{{ ucfirst($session->status) }}</td>
                                                                </tr>
                                                            @empty
                                                                <tr>
                                                                    <td colspan="8">No booked sessions found.</td>
                                                                </tr>
                                                            @endforelse

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  Courses Content  -->
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <!-- Course Details Section  -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

{{-- <script>
    $(document).ready(function () {
        $('.step-action').click(function () {
            const $button = $(this);
            const $form = $button.closest('form');
            const step = parseInt($button.data('step'));
            const type = $button.data('type');
            const currentStatus = $button.data('status');
            const coursePurchaseId = $form.find('input[name="course_purchase_id"]').val();
            const topicId = $form.find('input[name="topic_id"]').val();

            let newStatus = 'inprogress';
            let buttonText = 'Complete';
            let buttonClass = 'btn-success';

            if (currentStatus === 'inprogress') {
                newStatus = 'complete';
                buttonText = 'Completed';
                buttonClass = 'btn-secondary';
            }

            // Show loading spinner
            $button.html('<i class="fa fa-spinner fa-spin"></i>');

            $.ajax({
                url: "{{ route('student.progress.update') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    course_purchase_id: coursePurchaseId,
                    topic_id: topicId,
                    type: type,
                    status: newStatus,
                    start_time: newStatus === 'inprogress' ? new Date().toISOString() : null,
                    complete_time: newStatus === 'complete' ? new Date().toISOString() : null
                },
                success: function (response) {
                    if (response.success) {
                        // Update the button
                        $button
                            .data('status', newStatus)
                            .removeClass('btn-primary btn-success btn-secondary')
                            .addClass(buttonClass)
                            .text(buttonText);

                        // Update status text
                        $form.find(`.status-${step}`).text(newStatus);

                        if (newStatus === 'complete') {
                            // Disable this step's button
                            $button.prop('disabled', true);

                            // Enable the next step's button
                            $form.find(`.step-action[data-step="${step + 1}"]`).prop('disabled', false);

                            // Enable final submit if MCQ is completed
                            if (step === 3) {
                                $form.find('.final-submit').prop('disabled', false);
                            }
                        }
                    } else {
                        alert('Something went wrong. Try again.');
                        // Optionally reset the button here
                    }
                },
                error: function () {
                    alert('Error occurred while updating progress.');
                }
            });
        });
    });
</script> --}}

<script>
    $(document).ready(function () {
        $('.step-action').click(function (e) {
            const $button = $(this);
            const $form = $button.closest('form');
            const step = parseInt($button.data('step'));

            // 🚫 Skip logic if step 3 (submit button)
            if (step === 3) return;

            const type = $button.data('type');
            const currentStatus = $button.data('status');
            const coursePurchaseId = $form.find('input[name="course_purchase_id"]').val();
            const topicId = $form.find('input[name="topic_id"]').val();

            let newStatus = 'inprogress';
            let buttonText = 'Complete';
            let buttonClass = 'btn-success';

            if (currentStatus === 'inprogress') {
                newStatus = 'complete';
                buttonText = 'Completed';
                buttonClass = 'btn-secondary';
            }

            $button.html('<i class="fa fa-spinner fa-spin"></i>');

            $.ajax({
                url: "{{ route('student.progress.update') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    course_purchase_id: coursePurchaseId,
                    topic_id: topicId,
                    type: type,
                    status: newStatus,
                    start_time: newStatus === 'inprogress' ? new Date().toISOString() : null,
                    complete_time: newStatus === 'complete' ? new Date().toISOString() : null
                },
                success: function (response) {
                    if (response.success) {
                        $button
                            .data('status', newStatus)
                            .removeClass('btn-primary btn-success btn-secondary')
                            .addClass(buttonClass)
                            .text(buttonText);

                        $form.find(`.status-${step}`).text(newStatus);

                        if (newStatus === 'complete') {
                            $button.prop('disabled', true);
                            $form.find(`.step-action[data-step="${step + 1}"]`).prop('disabled', false);
                        }
                    } else {
                        alert('Something went wrong. Try again.');
                    }
                },
                error: function () {
                    alert('Error occurred while updating progress.');
                }
            });
        });

    })
</script>

@endsection