@extends('frontend.maintemplate.maintemplate')
@section('title', $courseCategory->name . ' :: AgeLess Institute')

@section('content')


<style>
 /* Style for custom checkboxes */
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    background-color: white;
}

/* Green background when checked */
.custom-checkbox:checked {
    background-color: #3c705e;
    border-color: #3c705e;
    box-shadow: 0 0 5px rgba(0, 128, 0, 0.5);
}

/* Style for the label text */
.form-check label {
    cursor: pointer;
    margin-left: 10px;
    font-size: 16px;
}

/* Style the wrapper around checkboxes */
.left-wrapper, .right-wrapper {
    margin-bottom: 10px;
}

.total-price {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
}

.courses-section .tab-section-wrapper .tab-content .tab-pane .courses-content .courses-bottom-content .courses-bottom-inner .courses-data-wrapper .courses-data-inner form .bottom-details-price .price-box h6 {
  text-align: end;
}


.custom_ancer{
        background-color: #b2e9cf;
    text-decoration: none;
    border-radius: 29px;
    font-size: 22px;
    font-weight: bold;
    color: #377055;
    padding: 13px 24px;
    display: block;


  }
  .custom_ancer:hover {
    background-color: #b2e9cf;
    color: #377055;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    border-radius: 29px;
}

.complimentary-course {
    display: inline-block;
    margin-top: 41px;
    border: 2px solid #377055; /* Border color */
    border-radius: 50px; /* Rounded shape */
    padding: 15px 25px; /* Inner padding */
    background-color: #f7f7f7; /* Background color */
    font-size: 27px; /* Font size */
    font-weight: bold;/* Bold text */
    color: #377055; /* Text color */
    text-align: center; /* Center align */
    white-space: nowrap; /* Prevent text wrapping */
}



.breadcrumb {

    font-size: 18px; /* Adjust text size */
    color: #377055; /* Text color */

}

.breadcrumb-link {
    text-decoration: none;
    color: #377055; /* Same as text color */
}

.breadcrumb-link:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
}

.breadcrumb-divider {
  font-weight: 100;
  font-size: 28px;
    margin: 0 5px; /* Add spacing around the › symbol */

}

.breadcrumb-current {
    color: #377055; /* Same text color */
}

.courses-section .tab-section-wrapper .tab-content .tab-pane .courses-content .courses-bottom-content .courses-bottom-inner .courses-data-wrapper .courses-data-inner form .table-wrapper table tbody tr td a {
    background-color: #ffffff;
}

.courses-section .tab-section-wrapper .tab-content .tab-pane .courses-content .courses-bottom-content .courses-bottom-inner .courses-data-wrapper .courses-data-inner form .table-wrapper table tbody tr td a:hover {
    background-color: #E1F0E9;
}


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


  <!-- Courses  section  -->
  <div class="courses-section">
    <div class="icon-title-wrapper">
      <div class="container-fluid">
        <div class="title-inner">
      <div class="breadcrumb">
        <a href="{{ url('course-category-details/' . $courseCategory->slug) }}" class="breadcrumb-link">{{$courseCategory->name}}</a>
        <span class="breadcrumb-divider">›</span>
        <span class="breadcrumb-current">{{$courseSubCategory->name}}</span>
    </div>
  </div>
</div>

      <div class="container-fluid">
        <div class="title-inner">
          <div class="left-icon">
            <div class="icon-wrapper">
                <img src="{{ asset('storage/' . $courseSubCategory->image) }}" alt="">
            </div>
          </div>
          <h5>{{ $courseSubCategory->name }}</h5>   @if(!empty(trim($courseSubCategory->sub_title_meta))) <a href="#" class="custom_ancer" style="display: inline-block; max-width: none;">{{ $courseSubCategory->sub_title_meta }}</a>  @endif
        </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">Customise</button>
              </li>
            </ul>
          </div>
        </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="overview-content">
              <div class="container-fluid">
                <div class="overview-inner">
                  <div class="total-hours-wrapper">
                    <div class="clock-wrapper">
                      <img src="{{ asset('frontend/assets/images/others/clock-up-arrow.png') }}" alt="">
                    </div>
                    <h6>Total Practical Hours: {{$courses->sum('duration')}} Hrs</h6>
                  </div>
                  <div class="content-para">
                    <p><span>Overview:</span> {!! str_replace(['<p>', '</p>'], '', $courseSubCategory->description) !!}</p>

                    @if(!empty(trim($courseSubCategory->sub_title)))
                    <div class="complimentary-course">
                        <span>{{ $courseSubCategory->sub_title }}</span>
                    </div>
                @endif



                  </div>
                </div>
              </div>
            </div>

            @php
            // Check if any course has topics
            $hasTopics = false;
            foreach ($courses as $course) {
                if ($course->courseTopics->isNotEmpty()) {
                    $hasTopics = true;
                    break;
                }
            }
        @endphp

@if ($hasTopics)
            <div class="courses-bottom-content">

              <div class="tab-section-inside-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">
                              @php $sr = 1 @endphp
                              @foreach ($courses as $course)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link {{ $sr==1 ? 'active' : '' }}" id="pills-{{ $course->id }}-tab" data-course-id="{{ $course->id }}" data-bs-toggle="pill"
                                        data-bs-target="#pills-{{ $course->id }}" type="button" role="tab" aria-controls="pills-{{ $course->id }}"
                                        aria-selected="{{ $sr==1 ? '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 }}
                                            </div>
                                            <div class="price-box">
                                              ₹ {{ number_format($course->fees_MRP, 0, '.', ',') }}
                                            </div>
                                        </div>
                                    </button>
                                </li>

                                @php $sr++ @endphp
                                @endforeach
                            </ul>
                            <div class="right-add-to-cart-wrapper">
                                <button class="submit_btn">+ Add to Cart <img src="./assets/images/others/add-cart-img.png"
                                        alt=""></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-content" id="pills-tabContent">
                  @php $sr = 1 @endphp
                  @php $topics_price = []; @endphp
                  @foreach ($courses as $course)

                    <div class="tab-pane fade  {{ $sr==1 ? 'show active' : '' }}" id="pills-{{ $course->id }}" role="tabpanel" aria-labelledby="pills-{{ $course->id }}-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">
                                                <div class="data-tooltip">
                                                    {{-- <p>Total Flying Hours:  24 Hrs</p> --}}
                                                </div>
                                                <form action="{{ route('cart.store') }}" method="POST">
                                                  @csrf
                                                  {{-- <input type="hidden" name="status" value="1"> --}}
                                                      <input type="hidden" name="course_id" value="{{ $course->id ?? 'N/A'}}" />
                                                  <div class="table-wrapper">
                                                    <div class="table-responsive">
                                                      <table class="table table-bordered">
                                                        <thead>
                                                          <tr>
                                                            <th scope="col">Topics Covered</th>
                                                            <th scope="col">Level</th>
                                                            <th scope="col">Type</th>
                                                            @if ($course->course_type === 'theory')

                                                            @else
                                                            <th scope="col">Practical Hours</th>
                                                            @endif
                                                            <th scope="col">Price</th>
                                                          </tr>
                                                        </thead>
                                                        <tbody class="table-group-divider">

                                                          @foreach ($course->courseTopics->sortBy('sequence_number') as $courseTopic)

                                                          <tr>
                                                              <td>
                                                                  @if(!empty($courseTopic->topic->url))
                                                                  <a href="{{ $courseTopic->topic->url }}" target="_blank" style="display: inline-block; max-width: none;">{{ $courseTopic->topic->title }} <img src="{{ asset('frontend/assets/images/others/trichology-icon.png')}}" alt="{{ $courseTopic->topic->title }}"></a>
                                                                  @else
                                                                  {{ $courseTopic->topic->title }}
                                                                  @endif
                                                              </td>
                                                              <td>
                                                                {{ ucwords($courseTopic->level) }}

                                                              </td>
                                                              <td>
                                                                  @php
                                                                  $types = is_array($courseTopic->types) ? $courseTopic->types : json_decode($courseTopic->types, true);
                                                                  $typeStr = $types ? implode(' + ', $types) : 'N/A';

                                                                  @endphp
                                                                  {{ ucwords($typeStr) }}
                                                                </td>

                                                                 @if ($course->course_type === 'theory')

                                                            @elseif ($typeStr === 'theory')
                                                            <td>-</td>
                                                            @else
                                                            <td>{{$courseTopic->topic->practical_hours}} Hrs</td>
                                                            @endif
                                                            <td> @php
                                                              $price = 0;
                                                              if ($types) {
                                                                  foreach ($types as $type) {
                                                                      if ($type === 'theory') {
                                                                          $price += $courseTopic->theory_price;
                                                                      }
                                                                      if ($type === 'practical') {
                                                                          $price += $courseTopic->practical_price;
                                                                      }
                                                                  }
                                                              }
                                                              $topics_price[$courseTopic->topic_id][$type]=$price;
                                                          @endphp
                                                            @if($price > 0)
                                                          ₹ {{ number_format($price) }}
                                                          @else
                                                          <a href="#" style="display: inline-block; max-width: none;">Complimentary</a>
                                                      @endif</td>
                                                          </tr>
                                                          @endforeach

                                                        </tbody>
                                                      </table>
                                                    </div>
                                                  </div>
                                                  <div class="bottom-details-price">
                                                    <div class="price-box">
                                                        <h5>Course Price</h5>
                                                        <h6>₹ {{ number_format($course->fees_MRP, 0, '.', ',') }}</h6>
                                                    </div>
                                                    <div class="price-box">
                                                        <h5>Discounted Price</h5>
                                                        <h6>₹ {{ number_format($course->discounted_price, 0, '.', ',') }}</h6>
                                                    </div>
                                                </div>

                                                  <div class="submit-wrapper">
                                                    <button class="submit_btn">Add to Cart</button>
                                                  </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  Courses Content  -->
                    </div>
                    @php $sr++ @endphp
                    @endforeach


                </div>
            </div>

            </div>

            @else
            <div class="tab-section-wrapper">
          <p style="text-align: center; font-size: 18px; font-weight: bold;">Course not available in this section
          </p>
      </div>
      @endif
          </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="overview-content">
              <div class="container-fluid">
                <div class="overview-inner">
                  <div class="total-hours-wrapper">
                    <div class="clock-wrapper">
                      <img src="{{ asset('frontend/assets/images/others/clock-up-arrow.png') }}" alt="">
                    </div>
                    <h6>Total Practical Hours: {{$courses->sum('duration')}}  Hrs</h6>
                  </div>
                  <div class="content-para">
                    <p><span>Overview:</span> {!! str_replace(['<p>', '</p>'], '', $courseSubCategory->description) !!}</p>

                    @if(!empty(trim($courseSubCategory->sub_title)))
                    <div class="complimentary-course">
                        <span>{{ $courseSubCategory->sub_title }}</span>
                    </div>
                @endif



                  </div>
                </div>
              </div>
            </div>
            @php
            // Check if any course has topics
            $hasTopics = false;
            foreach ($courses as $course) {
                if ($course->courseTopics->isNotEmpty()) {
                    $hasTopics = true;
                    break;
                }
            }
        @endphp

        @if ($hasTopics)

            <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="{{ route('cart.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="status" value="1">
                            <input type="hidden" name="customised_course" value="1">
                            <input type="hidden" name="course_id" value="{{ $course->id ?? 'N/A' }}" />
                            <input type="hidden" name="selected_topics" id="selectedTopics" value="">
                            <input type="hidden" name="total_price" id="totalPrice" value="">

                        <div class="table-wrapper">
                          <div class="table-responsive">

                            <table class="table table-bordered">
                              <thead>
                                <tr>
                                  <th scope="col" style="width: 25%;">Topic Coverd</th>
                                  <th scope="col">Level</th>
                                  <th scope="col">Type</th>
                                  <th scope="col">Practical Hours</th>
                                  <th scope="col">Price</th>
                                </tr>
                              </thead>
                              <tbody class="table-group-divider">
                                @php
                                $displayedTopics = [];
                            @endphp
                                @foreach ($courses as $course)
                                @foreach ($course->courseTopics->sortBy('sequence_number') as $courseTopic)
                                    {{-- @foreach ($course->courseTopics as $courseTopic) --}}
                                    @php
                                    $topicId = $courseTopic->topic->id;
                                @endphp
                                  @if (!in_array($topicId, $displayedTopics))
                                    <tr>
                                        <td>
                                            @if(!empty($courseTopic->topic->url))
                                            <a href="{{ $courseTopic->topic->url }}" target="_blank" style="display: inline-block; max-width: none;">
                                                {{ $courseTopic->topic->title }}
                                                <img src="{{ asset('frontend/assets/images/others/trichology-icon.png')}}" alt="{{ $courseTopic->topic->title }}">
                                            </a>
                                            @else
                                            {{ $courseTopic->topic->title }}
                                            @endif
                                        </td>
                                        <td>{{ ucwords($courseTopic->level) }}</td>
                                        <td>
                                            <div class="left-right-outer-wrapper">
                                                <div class="left-right-inner-wrapper">
                                                    @php
                                                    $types = is_array($courseTopic->types) ? $courseTopic->types : json_decode($courseTopic->types, true);
                                                    $typeStr = $types ? implode(' + ', $types) : 'N/A';
                                                    @endphp

                                                    @foreach ($types as $srk=>$type)
                                                      <div class="{{ ($srk==0) ? 'left-wrapper' : 'right-wrapper' }}">
                                                          <div class="form-check">
                                                              <label class="form-check-label" for="checkbox{{ $courseTopic->topic_id.$srk }}">
                                                                  @if ($type == "theory")
                                                                  {{ ucwords($type) }} Only
                                                                  @else
                                                                  Theory + Practical
                                                                  @endif
                                                              </label>


                                                              <input class="form-check-input" type="checkbox" name="topic[{{ $courseTopic->topic_id }}][]"
                                                                  value="{{ $type }}"
                                                                  data-theory-price="{{ $topics_price[$courseTopic->topic_id]['theory']??0 }}"
                                                                  data-practical-price="{{ $topics_price[$courseTopic->topic_id]['practical']??0 }}"
                                                                  {{-- data-theory-price="{{ $courseTopic->theory_price }}"
                                                                  data-practical-price="{{ $courseTopic->practical_price }}" --}}
                                                                  id="checkbox{{ $courseTopic->topic_id.$srk }}">
                                                          </div>
                                                      </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </td>




                                        <td>

                                          @if ($typeStr == 'theory') - @else{{$courseTopic->topic->practical_hours}} Hrs @endif</td>
                                        <td>
                                            @php
                                            $price = 0;
                                            if ($types) {
                                                foreach ($types as $type) {
                                                    if ($type === 'theory') {
                                                        $price += $courseTopic->theory_price;
                                                    }
                                                    if ($type === 'practical') {
                                                        $price += $courseTopic->practical_price;
                                                    }
                                                }
                                            }
                                            @endphp
                                              @if($price > 0)
                                            ₹ {{ number_format($price) }}
                                             @else
                                                <a href="#" style="display: inline-block; max-width: none;">Complimentary</a>
                                              @endif
                                        </td>
                                    </tr>
                                    @php
                                    $displayedTopics[] = $topicId;
                                @endphp
                            @endif
                                    @endforeach
                                @endforeach
                            </tbody>

                            </table>
                          </div>
                        </div>
                        <div class="bottom-details-price">

                          <div class="price-box">
                            <h5>Course Price</h5>
                            <h6><span id="final-price"></span></h6>
                          </div>
                          <div class="price-box">
                            <h5>Discount</h5>
                            <h6>0</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>
            @else
            <div class="tab-section-wrapper">
          <p style="text-align: center; font-size: 18px; font-weight: bold;">Course not available in this section
          </p>
      </div>
      @endif

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

  <script>
 /**document.addEventListener('DOMContentLoaded', function () {
    // Select all checkboxes with the custom-checkbox class
    const checkboxes = document.querySelectorAll('.form-check-input');
    const selectedTopicsInput = document.getElementById('selectedTopics');
    const totalPriceInput = document.getElementById('totalPrice');

    // Function to calculate the total price
    function updateTotalPrice() {
        let totalPrice = 0;
        let selectedTopics = [];

        // Loop through all the checkboxes
        checkboxes.forEach(function (checkbox) {
            // If checkbox is checked, add the respective price
            if (checkbox.checked) {
              const topicId = checkbox.name.match(/\d+/)[0]; // Extract topic ID from name attribute
                if (!selectedTopics.includes(topicId)) {
                    selectedTopics.push(topicId); // Store topic ID
                }
                const theoryPrice = parseInt(checkbox.getAttribute('data-theory-price')) || 0;
                const practicalPrice = parseInt(checkbox.getAttribute('data-practical-price')) || 0;
                totalPrice += (checkbox.value === 'practical') ? theoryPrice + practicalPrice : theoryPrice;


                // Add the price based on the checkbox value
                if (checkbox.value === 'theory') {
                    totalPrice += theoryPrice;
                } else if (checkbox.value === 'practical') {
                    totalPrice += theoryPrice + practicalPrice;
                }
            }
        });

        selectedTopicsInput.value = selectedTopics.join(',');
        // Update the displayed total price
        const finalPriceElement = document.getElementById('final-price');
        if (finalPriceElement) {
            finalPriceElement.textContent = `₹ ${totalPrice.toLocaleString()}`;
        }
        totalPriceInput.value = totalPrice;
    }

    // Function to handle mutually exclusive checkboxes per topic_id
    function handleExclusiveSelection(event) {
        const currentCheckbox = event.target;
        const topicId = currentCheckbox.name; // Get the name (topic ID) of the current checkbox


        // Uncheck all other checkboxes with the same name (topic ID)
        checkboxes.forEach(function (checkbox) {
            if (checkbox.name === topicId && checkbox !== currentCheckbox) {
                checkbox.checked = false;
            }
        });

        // Update the total price
        updateTotalPrice();
    }

    // Preselect practical checkboxes
    checkboxes.forEach(function (checkbox) {
        if (checkbox.value === 'practical') {
            checkbox.checked = true; // Select practical checkbox
        }
        checkbox.addEventListener('change', handleExclusiveSelection); // Add event listeners
    });

    // Initial total price calculation
    updateTotalPrice();
}); **/

document.addEventListener('DOMContentLoaded', function () {
    const checkboxes = document.querySelectorAll('.form-check-input');
    const selectedTopicsInput = document.getElementById('selectedTopics');
    const totalPriceInput = document.getElementById('totalPrice');
    const finalPriceElement = document.getElementById('final-price');

    // Function to update the total price and individual row prices
    function updatePrices() {
        let totalPrice = 0;
        let selectedTopics = new Set();

        checkboxes.forEach(function (checkbox) {
            const row = checkbox.closest('tr'); // Get the parent row
            const priceCell = row.querySelector('td:last-child'); // Last cell for price

            if (checkbox.checked) {
                const topicId = checkbox.name.match(/\d+/)[0]; // Extract topic ID
                selectedTopics.add(topicId);

                // Get the correct price based on the selected checkbox type
                let price = 0;
                if (checkbox.value === 'theory') {
                    price = parseInt(checkbox.getAttribute('data-theory-price')) || 0;
                } else if (checkbox.value === 'practical') {
                    price = parseInt(checkbox.getAttribute('data-practical-price')) || 0;
                }

                // Update the price in the table row
                if (price > 0) {
                    priceCell.innerHTML = `₹ ${price.toLocaleString()}`;
                } else {
                    priceCell.innerHTML = `<a href="#" style="display: inline-block; max-width: none;">Complimentary</a>`;
                }

                // Add to total price
                totalPrice += price;
            }
        });

        // Update selected topics input
        selectedTopicsInput.value = Array.from(selectedTopics).join(',');

        // Update total price display
        totalPriceInput.value = totalPrice;
        if (finalPriceElement) {
            finalPriceElement.textContent = `₹ ${totalPrice.toLocaleString()}`;
        }
    }

    // Function to handle mutually exclusive checkboxes
    function handleExclusiveSelection(event) {
        const currentCheckbox = event.target;
        const topicId = currentCheckbox.name;

        // Uncheck other checkboxes with the same topicId
        checkboxes.forEach(function (checkbox) {
            if (checkbox.name === topicId && checkbox !== currentCheckbox) {
                checkbox.checked = false;
            }
        });

        updatePrices();
    }

    // Set practical as default selected and update prices
    checkboxes.forEach(function (checkbox) {
        if (checkbox.value === 'practical') {
            checkbox.checked = true; // Select practical checkboxes by default
        }
        checkbox.addEventListener('change', handleExclusiveSelection);
    });

    // Initial price update (defaults to practical selection)
    updatePrices();
});




  </script>

@endsection