@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="trichology-courses">
    <div class="icon-title-wrapper">

        <div class="container-fluid">
            <div class="title-inner">
          <div class="breadcrumb">
            <a href="#" 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 ?? 'N/A' }}</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="foundation-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 Flying Hours: 64 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>
    <div class="foundation-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">
                                Theory Only Course <img src="{{ asset('frontend/assets/images/others/foundation-course-icon.png') }}" alt="">
                            </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">
                                Complimentary Course <img src="./assets/images/others/foundation-course-icon.png" alt="">
                            </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="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>For Doctor Courses- Advanced; For Therapist Courses- Basic</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>
                                                                <th scope="col">Level</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="table-group-divider">
                                                            <tr>
                                                                <td>Skin Anatomy</td>
                                                                <td>Theory Only</td>
                                                                <td>Basic/Advanced</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Skincare Ingredient</td>
                                                                <td>Theory Only</td>
                                                                <td>Basic/Advanced</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </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>
            <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">
                                        <!-- <div class="data-tooltip">
                                            <p>For Doctor Courses- Advanced; For Therapist Courses- Basic</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>
                                                                <th scope="col">Level</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="table-group-divider">
                                                            <tr>
                                                                <td>Skin Anatomy</td>
                                                                <td>Theory Only</td>
                                                                <td>Basic/Advanced</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Skincare Ingredient</td>
                                                                <td>Theory Only</td>
                                                                <td>Basic/Advanced</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </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>
        </div>
    </div>
</div>
<!-- Courses  section  -->


@endsection