@extends('frontend.maintemplate.maintemplate')

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

@section('content')

<style>
    
.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 */
}

</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="{{ $courseCategory->slug}}" class="breadcrumb-link">{{$courseCategory->name}}</a>
            
           
        </div>
      </div>
    </div>
        <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">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="./assets/images/others/clock-up-arrow.png" alt="">
                                    </div>
                                    <h6>Total Flying Hours: 116 Hrs</h6> --}}
                                </div>
                                <div class="content-para">
                                    <p><span>Overview:</span> {!! str_replace(['<p>', '</p>'], '', $courseCategory->description) !!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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="accordion" id="accordionExample">

                                            @foreach ($courseSubCategories as $index => $subCategory)
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="heading{{ $index }}">
                                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" 
                                                        data-bs-target="#collapse{{ $index }}" 
                                                        aria-expanded="{{ $index == 0 ? 'true' : 'false' }}" 
                                                        aria-controls="collapse{{ $index }}">
                                                        {{ $subCategory->name }}
                                                    </button>
                                                </h2>
                                                <div id="collapse{{ $index }}" class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}"
                                                    data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        <div class="overview-inner">
                                                            <div class="total-hours-wrapper">
                                                                {{-- Display additional details here if needed --}}
                                                            </div>
                                                            <div class="content-para">
                                                                <p><span>Overview:</span> 
                                                                    {!! str_replace(['<p>', '</p>'], '', $subCategory->description) !!}
                                                                </p>
                                                            </div>
                                                            <div class="link-wrapper">
                                                                <a href="{{ url('/course-category-details/' . $courseCategory->slug . '/' . $subCategory->slug) }}">Read More</a>



                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                          

                                        </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="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 + Skincare<br />
                                                                    Ingredient + Hygiene (Theory Only)
                                                                </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="basic1">
                                                                                        Basic
                                                                                    </label>
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox"
                                                                                        value="basic" id="basic1">
                                                                                </div>
                                                                            </div>
                                                                            <div class="right-wrapper">
                                                                                <div class="form-check">
                                                                                    <label class="form-check-label"
                                                                                        for="advanced1">
                                                                                        Advanced
                                                                                    </label>
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox"
                                                                                        value="advanced"
                                                                                        id="advanced1">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </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="#">Facialist Course <img
                                                                                        src="./assets/images/others/trichology-icon.png"
                                                                                        alt=""></a>
                                                                            </div>
                                                                            <div class="right-wrapper">
                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox" value=""
                                                                                        id="">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </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="basic1">
                                                                                        Basic
                                                                                    </label>
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox"
                                                                                        value="basic" id="basic1">
                                                                                </div>
                                                                            </div>
                                                                            <div class="right-wrapper">
                                                                                <div class="form-check">
                                                                                    <label class="form-check-label"
                                                                                        for="advanced1">
                                                                                        Advanced
                                                                                    </label>
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox"
                                                                                        value="advanced"
                                                                                        id="advanced1">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </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>64 Hrs</td>
                                                                <td>₹ 44,999.00</td>
                                                            </tr>
                                                            <tr>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                                <td></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>
<!-- Courses  section  -->

@endsection