@extends('frontend.maintemplate.maintemplate')

@section('content')
    <!-- Banner Section  -->
    <div class="banner-section">
        <div class="banner-image-wrapper">
            <img src="{{ asset('storage/' . $courseCategory->image) }}" alt="">
        </div>
    </div>
    <!-- Banner Section  -->

    <!-- Courses  section  -->
    @if ($isFlageCategory)
    <div class="courses-section">
        <div class="icon-title-wrapper">
          <div class="container-fluid">
            <div class="title-inner">
              <div class="left-icon">
                <div class="icon-wrapper">
                    <img src="{{ asset('storage/' . $courseCategory->icon) }}" alt="">
                </div>
              </div>
              <h5>{{ $courseCategory->name }}</h5>
            </div>
          </div>
        </div>
        <div class="tab-section-wrapper">
          <div class="tab-button-wrapper">
            <div class="container-fluid">
              <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">Packages Courses</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" tabindex="-1">Customise</button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
              <!--  Courses Content  -->
              <div class="courses-content">
                <div class="overview-content">
                  <div class="container-fluid">
                    <div class="overview-inner">
                      <div class="total-hours-wrapper">
                        
                      </div>
                      <div class="content-para">
                        <p><span>Overview:</span> {{ $courseCategory->description }} </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="courses-bottom-content">
                  <div class="container-fluid">
                    <div class="courses-bottom-inner">
                      <div class="course-price-wrapper">
                        @foreach ($courses as $course)
                        
                        <div class="course-price-inner" data-course-id="{{ $course->id }}">
                          <div class="left-section">
                            <div class="icon-wrapper">
                                <img src="{{ asset('frontend/assets/images/others/trichology-white.png') }}"
                                alt="">
                            </div>
                            <p>{{ $course->name }}<br> Course</p>
                          </div>
                          <div class="right-price">
                            <h4>  ₹ {{ number_format($course->fees_MRP, 0, '.', '') }}/-</h4>
                          </div>
                        </div>
                        @endforeach
                      </div>
                      
                      

                    </div>
                  </div>
                  <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="course-topics-table" role="tabpanel"
                        aria-labelledby="pills-home-tab" tabindex="0">
                        <!--  Courses Content  -->
                        
    
                        
                        <!--  Courses Content  -->
                    </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="container-fluid">
                    <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">Subject</th>
                                      <th scope="col">Level</th>
                                      <th scope="col">Type</th>
                                      <th scope="col">Flying Hours</th>
                                      <th scope="col">Price</th>
                                    </tr>
                                  </thead>
                                  <tbody class="table-group-divider">
                                    <tr>
                                      <td>Foundation Course - Anatomy<br> + Skincare Ingredient + Hygiene</td>
                                      <td>Advanced</td>
                                      <td>
                                        <div class="left-right-outer-wrapper">
                                          <div class="left-right-inner-wrapper">
                                            <div class="left-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory1">
                                                  Theory Only
                                                </label>
                                                <input class="form-check-input" type="checkbox" value="Theory Only" id="theory1">
                                              </div>
                                            </div>
                                            <div class="right-wrapper">
    
                                            </div>
                                          </div>
                                        </div>
                                      </td>
                                      <td>64 Hrs</td>
                                      <td>₹ 40,000.00</td>
                                    </tr>
                                    <tr>
                                      <td>
                                        <div class="left-right-outer-wrapper">
                                          <div class="left-right-inner-wrapper">
                                            <div class="left-wrapper">
                                              <a href="#">Trichology <img src="{{ asset('frontend/assets/images/others/trichology-icon.png') }}" alt=""></a>
                                            </div>
                                            
                                          </div>
                                        </div>
                                      </td>
                                      <td>Advanced</td>
                                      <td>
                                        <div class="left-right-outer-wrapper">
                                          <div class="left-right-inner-wrapper">
                                            <div class="left-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory2">
                                                  Theory Only
                                                </label>
                                                <input class="form-check-input" type="checkbox" value="Theory Only" id="theory2">
                                              </div>
                                            </div>
                                            <div class="right-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory3">
                                                  Theory + Practical
                                                </label>
                                                <input class="form-check-input" type="checkbox" value="Theory + Practical" id="theory3">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </td>
                                      <td>12 Hrs</td>
                                      <td>₹ 30,000.00</td>
                                    </tr>
                                    <tr>
                                      <td>
                                        <div class="left-right-outer-wrapper">
                                          <div class="left-right-inner-wrapper">
                                            <div class="left-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory4">
                                                  Laser Hair Reduction (LHR)
                                                </label>
                                                {{-- <input class="form-check-input" type="checkbox" value="Laser Hair Reduction (LHR)" id="theory4"> --}}
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </td>
                                      <td>Advanced</td>
                                      <td>
                                        <div class="left-right-outer-wrapper">
                                          <div class="left-right-inner-wrapper">
                                            <div class="left-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory5">
                                                  Theory Only
                                                </label>
                                                <input class="form-check-input" type="checkbox" value="Theory Only" id="theory5">
                                              </div>
                                            </div>
                                            <div class="right-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory6">
                                                  Theory + Practical
                                                </label>
                                                <input class="form-check-input" type="checkbox" value="Theory + Practical" id="theory6">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </td>
                                      <td>14 Hrs</td>
                                      <td>₹ 20,000.00</td>
                                    </tr>
                                    <tr>
                                      <td>
                                        <div class="left-right-outer-wrapper">
                                          <div class="left-right-inner-wrapper">
                                            <div class="left-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory7">
                                                  Body Contouring
                                                </label>
                                                {{-- <input class="form-check-input" type="checkbox" value="Body Contouring" id="theory7"> --}}
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </td>
                                      <td>Advanced</td>
                                      <td>
                                        <div class="left-right-outer-wrapper">
                                          <div class="left-right-inner-wrapper">
                                            <div class="left-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory8">
                                                  Theory Only
                                                </label>
                                                <input class="form-check-input" type="checkbox" value="Theory Only" id="theory8">
                                              </div>
                                            </div>
                                            <div class="right-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory9">
                                                  Theory + Practical
                                                </label>
                                                <input class="form-check-input" type="checkbox" value="Theory + Practical" id="theory9">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </td>
                                      <td>16 Hrs</td>
                                      <td>₹ 30,000.00</td>
                                    </tr>
                                    <tr>
                                      <td>
                                        <div class="left-right-outer-wrapper">
                                          <div class="left-right-inner-wrapper">
                                            <div class="left-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory10">
                                                  Others
                                                </label>
                                                {{-- <input class="form-check-input" type="checkbox" value="Others" id="theory10"> --}}
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </td>
                                      <td>Advanced</td>
                                      <td>
                                        <div class="left-right-outer-wrapper">
                                          <div class="left-right-inner-wrapper">
                                            <div class="left-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory11">
                                                  Theory Only
                                                </label>
                                                <input class="form-check-input" type="checkbox" value="Theory Only" id="theory11">
                                              </div>
                                            </div>
                                            <div class="right-wrapper">
                                              <div class="form-check">
                                                <label class="form-check-label" for="theory12">
                                                  Theory + Practical
                                                </label>
                                                <input class="form-check-input" type="checkbox" value="Theory + Practical" id="theory12">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </td>
                                      <td>10 Hrs</td>
                                      <td>₹ 15,000.00</td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                            <div class="bottom-details-price">
                              <div class="price-box">
                                <h5>Individual Course Price</h5>
                                <h6>x 1</h6>
                              </div>
                              <div class="price-box">
                                <h5>Course Price</h5>
                                <h6>₹ 20,000.00</h6>
                              </div>
                              <div class="price-box">
                                <h5>Discount</h5>
                                <h6>- ₹ 2,000.00</h6>
                              </div>
                              <div class="price-box">
                                <h5>Bundle Price</h5>
                                <h6>₹ 2,000.00</h6>
                              </div>
                              <div class="price-box">
                                <h5>Price</h5>
                                <h6>₹ 18,000.00</h6>
                              </div>
                            </div>
                            <div class="submit-wrapper">
                              <button class="submit_btn">+ Add to Cart <img src="./assets/images/others/add-cart-img.png" alt=""></button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--  Courses Content  -->
            </div>
          </div>
        </div>
      </div>

      @else



    <div class="trichology-courses">
        <div class="icon-title-wrapper">
            <div class="container-fluid">
                <div class="title-inner">
                    <div class="left-icon">
                        <div class="icon-wrapper">
                            <img src="{{ asset('storage/' . $courseCategory->icon) }}" alt="">
                        </div>
                    </div>
                    <h5>{{ $courseCategory->name }}</h5>
                </div>
            </div>
        </div>

        <div class="overview-content">
            <div class="container-fluid">
                <div class="overview-inner">
                   
                    <div class="content-para">
                        <p><span>Overview: </span>{{ $courseCategory->description }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="tab-section-wrapper">
            <div class="tab-button-wrapper">
                <div class="container-fluid">
                    <div class="tab-button-inner">
                        <ul class="nav nav-pills" id="pills-tab" role="tablist">
                            @foreach ($courses as $course)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link {{ $loop->first ? 'active' : '' }}"
                                        id="pills-{{ $course->id }}-tab" data-bs-toggle="pill"
                                        data-course-id="{{ $course->id }}" type="button" role="tab"
                                        aria-controls="pills-{{ $course->id }}"
                                        aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                        <div class="inner-button-wrapper">
                                            <div class="icon-wrapper">
                                                <div class="icon">
                                                    <img src="{{ asset('frontend/assets/images/others/trichology-white.png') }}"
                                                        alt="">

                                                </div>
                                            </div>
                                            <div class="course-name">
                                                {{ $course->name }} <br> Course
                                            </div>
                                            <div class="price-box">
                                                ₹ {{ number_format($course->fees_MRP, 0, '.', '') }}
                                            </div>
                                        </div>
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                        <div class="right-add-to-cart-wrapper">
                            <button class="submit_btn">+ Add to Cart <img
                                    src="{{ asset('frontend/assets/images/others/add-cart-img.png') }}"
                                    alt=""></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="course-topics-table" role="tabpanel"
                    aria-labelledby="pills-home-tab" tabindex="0">
                    <!--  Courses Content  -->
                    

                    <!--  Courses Content  -->
                </div>

            </div>
        </div>
    </div>
    <!-- Courses  section  -->
    @endif

    <script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabButtons = document.querySelectorAll('[data-course-id]');
    const topicsTable = document.getElementById('course-topics-table');

    // Function to fetch and render course topics
    async function fetchCourseTopics(courseId) {
        try {
            const response = await fetch('{{ route('get.course.topics') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({ course_id: courseId }),
            });

            const topics = await response.json();

            // Determine if the price and level columns should be displayed
            const hasPrice = topics.some(topic => topic.price && topic.price > 0);
            const hasLevel = topics.some(topic => topic.level);
            const hasFlyingHours = topics.some(topic => topic.time && topic.time !== 'N/A');

            // Build HTML table dynamically
            let tableHTML = `
                <div class="courses-content">
                    <div class="courses-bottom-content">
                        <div class="container-fluid">
                            <div class="courses-bottom-inner">
                                <div class="courses-data-wrapper">
                                    <div class="courses-data-inner">
                                        <div class="data-tooltip">
                                            <p>Total Flying Hours: Hrs</p>
                                        </div>
                                        <form action="">
                                            <div class="table-wrapper">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th scope="col">Topics Covered</th>
                                                                <th scope="col">Type</th>
                                                                ${hasLevel ? '<th scope="col">Level</th>' : ''}
                                                                 ${hasFlyingHours ? '<th scope="col">Flying Hours</th>' : ''}
                                                                ${hasPrice ? '<th scope="col">Price</th>' : ''}
                                                            </tr>
                                                        </thead>
                                                        <tbody class="table-group-divider">
            `;

            topics.forEach(topic => {
                const formattedTitle = topic.title.replace(/(?:\r\n|\r|\n)/g, '<br>');
                tableHTML += `
                    <tr>
                        <td>${formattedTitle}</td>
                        <td>${topic.type}</td>
                        ${hasLevel && topic.level ? `<td>${topic.level}</td>` : ''}
                        ${hasFlyingHours && topic.time !== 'N/A' ? `<td>${topic.time} Hrs</td>` : ''}
                        ${hasPrice && topic.price > 0 ? `<td><b>₹ ${topic.price}</b></td>` : ''}
                    </tr>
                `;
            });

            tableHTML += `
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
            `;

            // Conditionally add the bottom-details-price section
            if (hasPrice) {
                tableHTML += `
                    <div class="bottom-details-price">
                        <div class="price-box">
                            <h5>Individual Course Price</h5>
                            <h6>₹ 149,999</h6>
                        </div>
                        <div class="price-box">
                            <h5>Discount</h5>
                            <h6>-₹ 30,000</h6>
                        </div>
                        <div class="price-box">
                            <h5>Total Package Price</h5>
                            <h6>₹ 119,999</h6>
                        </div>
                    </div>
                `;
            }

            tableHTML += `
                                 <form action="{{ route('student.course.store') }}" method="POST">
       @csrf
        <input type="hidden" name="course_id" value="${courseId}">
        <div class="submit-wrapper">
            <button type="submit" class="submit_btn">Add to Cart</button>
        </div>
    </form>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            // Render the table in the topicsTable container
            topicsTable.innerHTML = tableHTML;
        } catch (error) {
            console.error('Error fetching topics:', error);
        }
    }

    // Load the first course topics on page load
    const firstTab = tabButtons[0];
    if (firstTab) {
        fetchCourseTopics(firstTab.getAttribute('data-course-id'));
    }

    // Event listener for tab switching
    tabButtons.forEach(button => {
        button.addEventListener('click', function () {
            const courseId = this.getAttribute('data-course-id');
            fetchCourseTopics(courseId);
        });
    });
});


    </script>
@endsection