@section('title', $CourseDetail['meta_title'])
@section('description', $CourseDetail['meta_description'])
@section('keywords', $CourseDetail['meta_keywords'])
@section('tags', $CourseDetail['meta_tags'])
@extends('front.new.layouts.app')

@push('schema')
    {!! \App\Helpers\SchemaHelper::render(
        \App\Helpers\SchemaHelper::course($CourseDetail->name, $CourseDetail->meta_description, url()->current()),
    ) !!}
@endpush

@section('content')

    <div class="course-detail-page">
        <div class="banner-section bg-light">
            <div class="row py-5">
                <div class="col-lg-12 col-12 fac-head text-center">
                    <h1 class="color-change text-success fw-bold mb-2">{{($CourseDetail->name)}}</h1>
                    <p class="text-success fw-bold h4" style="font-family: 'Poppins', sans-serif; opacity: 0.8;">{{($CourseDetail->short_name)}}</p>
                </div>
            </div>
        </div>


        <section class="course-details-wrap pt-3">
            <div class="container">
                <div class="row gx-5">
                    <div class="col-lg-12">
                        <div class="table-responsive mt-5">
                            <table class="table my-3 table-bordered course-fact" id="table-course">
                                <thead>
                                    <tr class="bg-dark-green">
                                        <th colspan="5" class="text-nowrap text-center course-fact-new pt-3 pb-2">
                                            <h2 class="text-white">COURSE FACT</h2>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="table-data">
                                        <td class="text-center text-white fs-5 fw-bold bg-yellow" style="width: 200px;">
                                            STUDY LEVEL
                                        </td>
                                        <td class="text-center text-white fs-5 fw-bold bg-yellow">
                                            PROGRAM DURATION
                                        </td>
                                        <td class="text-center text-white fs-5 fw-bold bg-yellow">
                                            CREDITS HOURS
                                        </td>
                                        <td rowspan="5" class="text-center align-middle bt-apply apply-back"
                                            style="width: 200px;">
                                            <a href="https://admission.giu.edu.pk/">
                                                <button class="apply-now-new">Apply Now <i class="fa fa-angle-right ms-1"
                                                        aria-hidden="true"></i>
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr class="table-data table-detail text-center">
                                        <td>
                                            <p class="fs-5 pt-2">{{ $CourseDetail->courseCate->name }}</p>
                                        </td>
                                        <td>
                                            <p class="fs-5 pt-2">{{ $CourseDetail->duration }}</p>
                                        </td>
                                        <td>
                                            <p class="fs-5 pt-2">{{ $CourseDetail->credit_hourse }}</p>
                                        </td>
                                    </tr>
                                    <tr class="table-data table-detail text-center">
                                        <td>
                                            <p class="fs-5 pt-2">Eligibility Criteria</p>
                                        </td>
                                        <td colspan="2">
                                            <p class="fs-5 pt-2">{{ $CourseDetail->eligibility }}</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-lg-3 mt-3">
                        <div class="course-details-widget sidebar-box">

                            <div class="quick-link-pages pt-4 pb-2 px-3 mb-4">
                                <div class="heading text-center">
                                    <p class="bg-yellow py-2 w-100 text-white h2">QUICK LINKS</p>
                                </div>
                                <div class="pages mt-4">
                                    <div class="d-flex mb-2">
                                        <div class="tab-icon">
                                            <i class="icon-next-link pe-2 icomooms"></i>
                                        </div>
                                        <div class="tab-texts">
                                            <a href="{{ route('news-and-events') }}">
                                                <p>News and Events</p>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="d-flex my-2">
                                        <div class="tab-icon">
                                            <i class="icon-next-link pe-2 icomooms"></i>
                                        </div>
                                        <div class="tab-texts">
                                            <a href="{{ route('co-curricular-activities') }}">
                                                <p>Co-Curricular Activities</p>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="d-flex my-2">
                                        <div class="tab-icon">
                                            <i class="icon-next-link pe-2 icomooms"></i>
                                        </div>
                                        <div class="tab-texts">
                                            <a href="{{ route('scholarship-policy') }}">
                                                <p>Scholarship Policy</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-9 mt-3">
                        {{--                        <h1 class="color-change mt-3">{{$CourseDetail->name}}</h1> --}}
                        <hr class="mt-0">
{{--                        @if(!empty($CourseDetail->objective))--}}
{{--                            <h2 class="color-orange">Objectives</h2>--}}
{{--                            {!!$CourseDetail->objective!!}--}}
{{--                        @endif--}}
                        @if(!empty($CourseDetail->program_overview))
                            <h2 class="color-orange">Program Overview</h2>
                            <div class="rich-text-content"> {!! $CourseDetail->program_overview !!}</div>
                        @endif
                        @if(!empty($CourseDetail->why_choose))
                            <h2 class="color-orange">Why Choose <span>{{$CourseDetail->name}}?</span></h2>
                            <div class="rich-text-content"> {!! $CourseDetail->why_choose !!}</div>
                        @endif
                        @if(!empty($CourseDetail->role_scope))
                            <h2 class="mt-3 color-orange">Career Scope & Opportunities</h2>
                            <div class="rich-text-content"> {!! $CourseDetail->role_scope !!}</div>
                        @endif
                        <div class="single-course-detail my-4">
                            <div class="accordion roadmap" id="accordionRoadMap">
                                <div class="accordion-item">
                                    <div class="heading-border mb-0 pb-0">
                                        <h2 class="p-0 mb-0">
                                            <button aria-expanded="true" id="accor-change-two"
                                                    class="accordion-button heading-border px-3"
                                                    data-bs-target="#collapseTwo" data-bs-toggle="collapse"
                                                    type="button"><img
                                                    src="{{URL('/')}}/front/icons/plus-icon.png" alt=""
                                                    style="width:40px" class="me-3"><span class="h2 text-white fw-bold mb-0">Program Roadmap</span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div class="accordion-collapse collapse show" data-bs-parent="#accordionRoadMap"
                                         id="collapseTwo">
                                        <div class="accordion-body p-0">
                                            <div class="para-body table-scheme table-responsive">
                                                @php
                                                    $fixedSchema = str_replace(['<h2', '</h2>'], ['<h3', '</h3>'], $CourseDetail->schma_study);
                                                @endphp
                                                <div class="rich-text-content"> {!! $fixedSchema !!}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- Faq--}}
                        <div class="single-course-detail my-4">
                            <div class="accordion roadmap" id="accordionCourseSections">
                                <!-- MAIN ACCORDION ITEM: FAQs -->
                                <div class="accordion-item">
                                    <div class="heading-border mb-0 pb-0">
                                        <h2 class="p-0 mb-0">
                                            <button class="accordion-button heading-border px-3"
                                                    type="button" id="accor-change"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#collapseFaq"
                                                    aria-expanded="false"
                                                    aria-controls="collapseFaq">
                                                <img src="{{ URL('/') }}/front/icons/plus-icon.png"
                                                     alt="+"
                                                     style="width:40px"
                                                     class="me-3">
                                                <span class="h2 text-white fw-bold mb-0">Frequently Asked Questions (FAQs)</span>
                                            </button>
                                        </h2>
                                    </div>

                                    <div id="collapseFaq"
                                         class="accordion-collapse collapse"
                                         data-bs-parent="#accordionCourseSections">
                                        <div class="accordion-body p-0">
                                            <div class="para-body table-scheme table-responsive">
                                                <!-- INNER FAQ LOOP -->
                                                @if(!empty($CourseDetail->faq))
                                                    @foreach(json_decode($CourseDetail->faq, true) as $index => $faq)
                                                        <div class="scholarship-awa-faq-item border-bottom py-2">
                                                            <div
                                                                class="scholarship-awa-faq-question d-flex justify-content-between align-items-center fs-5 fw-bold">
                                                            <span
                                                                class="faq-question-text">{{ $faq['question'] }}</span>
                                                                <button
                                                                    class="btn scholarship-awa-faq-toggle bg-light border-0 me-3"
                                                                    type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#faq{{ $index }}"
                                                                    aria-expanded="false"
                                                                    aria-controls="faq{{ $index }}">+
                                                                </button>
                                                            </div>
                                                            <div id="faq{{ $index }}"
                                                                 class="collapse scholarship-awa-faq-answer mt-2 fs-6"
                                                                 data-bs-parent="#collapseFaq">
                                                                {{ $faq['answer'] }}
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <p class="p-3 small">No FAQs available for this course.</p>
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- End Faq--}}
                    </div>
                </div>
            </div>
        </section>
    </div>

@endsection