@extends('layouts.front_master')
@section('content')
@php
$categoriesList=get_all_category();
@endphp
<!-- banner area start -->
<div class="banner-sec">
    <div class="container">
        <div class="banner-slider">

            <div>
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="banner-txt">
                            <h1>Online Degrees<br>
                                Without The High Fees</h1>
                            <p>Study for a degree or MBA from UK universities for less than £6,000</p>
                            <button class="theme-yellow-btn margin-right-10">View Courses</button>
                            <!--<button class="theme-blue-btn">Try For Free</button>-->
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="banner-right-img">
                            <img src="{{asset('front_assets/imgs/banner/banner-right-img.png')}}">
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="banner-txt">
                            <h1>Online Degrees<br>
                                Without The High Fees</h1>
                            <p>Study for a degree or MBA from UK universities for less than £6,000</p>
                            <button class="theme-yellow-btn margin-right-10">View Courses</button>
                            <!--<button class="theme-blue-btn">Try For Free</button>-->
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="banner-right-img">
                            <img src="{{asset('front_assets/imgs/banner/banner-right-img.png')}}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- banner area end -->

<!-- courses sec start -->
<div class="courses-sec section-padding-80" style="background-color: #F5F5F5;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-4">
                <div class="courses-sec-left-sec">
                    <h2>Fast tracking learners to a University qualification</h2>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="courses-sec-right-sec">
                    <div class="courses-sec-slider">
                        @foreach ($category as $category_data)
                        <div>
                            <div class="courses-box">
                                <div class="courses-box-img">
                                    <img src="{{asset('category/'.$category_data->image)}}">
                                </div>
                                <div class="courses-box-txt">
                                    <p>{{$category_data->name}}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- courses sec end -->

<!-- Latest Blog Post start -->
<div class="blog-section  popular-courses section-padding-50">
    <div class="container">
        <div class="row">
            <div class="section-heading">
                <h2>Most Popular Courses</h2>
            </div>
            <div class=" p-3 mt-10">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">

                        <button class="nav-link active" id="most-popular-tab" data-bs-toggle="tab" data-bs-target="#most-popular" type="button" role="tab" aria-controls="most-popular-tab" aria-selected="true">Most Popular</button>

                        @foreach ($categoriesList as $categoriesList_data)
                        <button class="nav-link" id="course-tab_{{$categoriesList_data->id}}" data-bs-toggle="tab" data-bs-target="#course{{$categoriesList_data->id}}" type="button" role="tab" aria-controls="course-tab_{{$categoriesList_data->id}}" aria-selected="false">@if ($categoriesList_data->sub_name)
                            {{$categoriesList_data->sub_name}}
                            @else
                            {{$categoriesList_data->name}}
                            @endif </button>
                        @endforeach

                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    @php
                    $coursesListAll=get_category_wise_course(0);
                    @endphp
                    <div class="tab-pane fade active show" id="most-popular" role="tabpanel" aria-labelledby="most-popular-tab">
                        <div class="row">
                            @foreach ($coursesListAll as $coursesList_data)
                            @php
                            $packageDetail=get_course_package($coursesList_data->id,true);
                            @endphp
                            <div class="col-lg-4">
                                <div class="popular-courses-box">
                                    <div class="popular-courses-img">
                                        <img src="{{asset('courses/'.$coursesList_data->image)}}">
                                    </div>
                                    <div class="popular-courses-content">
                                        <div class="popular-courses-content-padding">
                                            <p class="popular-courses-name">{{$coursesList_data->name}}</p>
                                            <div class="d-flex align-items-center popular-courses-lesson-rating justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <p class="course-price">Starting from <span> £{{$packageDetail->price}}</span>
                                                    </p>
                                                </div>
                                                <!--<div class="d-flex align-items-center">-->
                                                <!--    <p class="course-discount">35%<br>off</p>-->
                                                <!--</div>-->
                                            </div>
                                        </div>
                                        <div class="popular-courses-btn">
                                            <a href="course/{{$coursesList_data->url}}" class="theme-blue-btn" tabindex="0">Learn More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @foreach ($categoriesList as $categoriesList_data)
                    @php
                    $coursesList=get_category_wise_course($categoriesList_data->id);
                    @endphp
                    <div class="tab-pane fade" id="course{{$categoriesList_data->id}}" role="tabpanel" aria-labelledby="course-tab_{{$categoriesList_data->id}}">
                        <div class="row">
                            @foreach ($coursesList as $coursesList_data)
                            @php
                            $packageDetail=get_course_package($coursesList_data->id,true);
                            @endphp
                            <div class="col-lg-4">
                                <div class="popular-courses-box">
                                    <div class="popular-courses-img">
                                        <img src="{{asset('courses/'.$coursesList_data->image)}}">
                                    </div>
                                    <div class="popular-courses-content">
                                        <div class="popular-courses-content-padding">
                                            <p class="popular-courses-name">{{$coursesList_data->name}}</p>
                                            <div class="d-flex align-items-center popular-courses-lesson-rating justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <p class="course-price">Starting from <span> £{{$packageDetail->price}}</span>
                                                    </p>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <p class="course-discount">35%<br>off</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="popular-courses-btn">
                                            <a href="course/{{$coursesList_data->url}}" class="theme-blue-btn" tabindex="0">Learn More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
</div>
<!-- Latest Blog Post end -->

<!-- about-botton start -->
<div class="cta-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-4">
                <div class="cta-section-img">
                    <img src="{{asset('front_assets/imgs/courses/cta-left-img.png')}}">
                </div>
            </div>
            <div class="col-lg-8">
                <div class="cta-section-txt">
                    <h3>Affordable study programmes with exclusive online modules fast tracking learners to a
                        university qualification</h3>
                    <p>Whether you are looking to enhance your skills, improve your team or pursue a
                        professional education, the Online Business College’s learning pathways can provide you
                        with all you need.</p>
                    <p>The Online Business College delivers online university pathway programmers with full
                        undergraduate and postgraduate diploma awards to learners from all corners of the world.
                        Learners can fast track their way through to a UK university qualification on campus or
                        by distance learning.</p>
                    <button class="theme-yellow-btn">View Courses</button>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- about-botton end -->

<!-- Activities start -->
<div class="activities section-padding-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="activity-left-img">
                    <img src="{{asset('front_assets/imgs/courses/activity.png')}}">
                </div>
            </div>
            <div class="col-lg-5">
                <div class="activity-middle-txt">
                    <h4>A social learning experience like no other</h4>
                    <p>Online... Anytime... On any device...</p>
                    <p>The 100% online undergraduate and postgraduate diploma courses at Online Business College
                        provide students an affordable pathway to earning an undergraduate or postgraduate
                        degree from a choice of respected UK universities.</p>
                    <p>Whether you pursue a qualification in hotel and hospitality, computing, or business
                        management, the courses offered through Online Business College will allow you the option
                        to continue your education and pursue a top up to an undergraduate degree or MBA through
                        one of our partner universities.</p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="activity-box">
                    <h4>Our Activities</h4>
                    <ul>
                        <li>University pathway programmed</li>
                        <li>Professional body membership included</li>
                        <li>Free professional development resources</li>
                        <li>24/7 connection, anytime, anywhere, any device</li>
                        <li>Tutor and mentor support structure</li>
                        <li>Flexible payment options</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Activities end -->

<!-- Our hub start -->
<div class="our-hub-sec">
    <div class="container">
        <div class="section-heading">
            <h2>Support beyond your learning</h2>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <ul class="our-hub-list ourhub-first-sec">
                    <li><img src="{{asset('front_assets/imgs/ourhub/careerhub.png')}}">
                        <p>Career Hub</p>
                    </li>
                    <li><img src="{{asset('front_assets/imgs/ourhub/studyhub.png')}}">
                        <p>Study Hub</p>
                    </li>
                    <li><img src="{{asset('front_assets/imgs/ourhub/discounthub.png')}}">
                        <p>Discount Hub</p>
                    </li>
                    <li><img src="{{asset('front_assets/imgs/ourhub/buddyhub.png')}}">
                        <p>Buddy Hub</p>
                    </li>
                </ul>
            </div>
            <div class="col-lg-4 ourhub-mid-div">
                <div class="our-hub-middle-sec">
                    <h3>Our Hubs</h3>
                </div>
                <a href="#" class="know-more-link">Know More</a>
            </div>
            <div class="col-lg-4 ourhub-last-sec">
                <ul class="our-hub-list">
                    <li><img src="{{asset('front_assets/imgs/ourhub/fitnesshub.png')}}">
                        <p>Fitness Hub</p>
                    </li>
                    <li><img src="{{asset('front_assets/imgs/ourhub/personaldevlopmenthub.png')}}">
                        <p>Personal Development Hub</p>
                    </li>
                    <li><img src="{{asset('front_assets/imgs/ourhub/wellnesshub.png')}}">
                        <p>Wellness Hub</p>
                    </li>
                    <li><img src="{{asset('front_assets/imgs/ourhub/resoursehub.png')}}">
                        <p>Resource Hub</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- Our hub end -->



<!-- partners sec start-->
<div class="partner-sec sec section-margin-80">
    <div class="container ">
        <h5 class="partner-sec-heading mb-50">Professional body membership included</h5>
        <div class="parners-icon-box-sec">
            <div class="parners-icon-box">
                <img src="{{asset('front_assets/imgs/partnarship/icon-one.png')}}">
            </div>
            <div class="parners-icon-box">
                <img src="{{asset('front_assets/imgs/partnarship/icon-one.png')}}">
            </div>
            <div class="parners-icon-box">
                <img src="{{asset('front_assets/imgs/partnarship/icon-one.png')}}">
            </div>
            <div class="parners-icon-box">
                <img src="{{asset('front_assets/imgs/partnarship/icon-one.png')}}">
            </div>
            <div class="parners-icon-box">
                <img src="{{asset('front_assets/imgs/partnarship/icon-one.png')}}">
            </div>
        </div>
    </div>
</div>
<!-- partners sec end-->


<!-- video-sec start-->
<section class="video-box_two section-margin-80">
    <div class="container">
        <div class="pbminfotech-widget-container">
            <div class="pbminfotech-icon-wrapper">
                <a target="_blank" class="pbminfotech-icon pbmin-lightbox-video" href="">
                    <i class="fa fa-play"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- video-sec start-->



<!-- faq section start -->
<div class="faq-section">
    <div class="container">
        <div class="row">
            <div class="section-heading">
                <h2>How You Will Learn</h2>
            </div>
            <div class="accordion faq-box mt-50" id="accordionExample" style="background-image: url({{asset('front_assets/imgs/bg-img/faq-bg.png')}});">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Learner journey
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <ul>
                                <li>Choose a course</li>
                                <li>Study the course modules</li>
                                <li>Complete online multiple choice tests and written assignments</li>
                                <li>Receive your certificate and university credits</li>
                                <li>Top up your qualification and earn an undergraduate degree or MBA from your
                                    chosen university</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Assessment
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <strong>Assessment at Online Business College is a very straight forward
                                process:</strong>
                            <ul>
                                <li>After you have completed an online module, you will have an online
                                    assessment to complete. This assessment contains 30 multiple-choice
                                    questions. You will have one hour to complete these questions, which are
                                    answered in sets of five, so you will have plenty of time to review and edit
                                    your answers. After an hour, the test will automatically time out.</li>
                                <li>After you have completed the test, your results will be displayed
                                    immediately. If you have passed, you will receive a certificate of
                                    completion. If you don’t pass, you will receive a notification of a “refer’’
                                    where you will be told how to retake a module assessment. You can complete
                                    these modules at your own pace, as there is no deadline to complete the
                                    course.</li>
                                <li>When the online modules have been successfully completed, you will then be
                                    able to take the final written assignments provided by Online Business
                                    College that test your knowledge and understanding of the modules. After
                                    successful completion of these eight assignments, you will receive your
                                    diploma from the OFQUAL awarding organisation.</li>
                                <li>You will then be eligible to apply for progression onto a top up course
                                    through a recognised UK university on campus or by distance learning.</li>

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Support
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <p>At Online Business College, we are with you every step of the way – you are never
                                alone. We understand that some prospective students have the misconception that
                                distance learning means you will be on your own. Fortunately, at OBC, that is
                                not the case!</p>

                            <p> When you enrol onto your chosen course, you will be assigned a personal tutor.
                                The tutor will be there to support you with any questions and further
                                explanations on your course via email, phone or Zoom.</p>

                            <p>With Online Business College, you get OFQUAL approved courses, online learning
                                flexibility, and unlimited tutor support for maximum study potential.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- faq section end -->

<!-- measage now start-->
<div class="massage-now section-margin-80" style="background-image: url({{asset('front_assets/imgs/bg-img/req-course-bg.png')}});">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <div class="send-massage-from-txt">
                    <h3>Request a Course Prospectus</h3>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="message-now-form">
                    <div class="message-now-form-heading">
                        <h4>Send A Message Now</h4>
                    </div>
                    <form id="payment-form" data-parsley-validate action="{{ url('save-course-prospectus') }}" method="POST" class="message-form">
                        @csrf
                        <div class="mb-3">
                            <input type="text" class="form-control" name="name" placeholder="Your Name">
                        </div>
                        <div class="mb-3">
                            <input type="email" class="form-control" name="email" placeholder="Your Email">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" name="subject" placeholder="Subject">
                        </div>
                        <div class="mb-3">
                            <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="6" placeholder="Message"></textarea>
                        </div>
                        <button class="theme-yellow-btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- message now end -->


<!-- Latest Blog Post start -->
<!-- <div class="blog-section">
    <div class="container">
        <div class="row">
            <div class="section-heading">
                <h2>Latest Blog Post</h2>
            </div>
            <div class=" p-3 mt-50">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <button class="nav-link active" id="latest-artical-tab" data-bs-toggle="tab" data-bs-target="#nav-latest-artical" type="button" role="tab" aria-controls="latest-artical-tab" aria-selected="true">Latest articles</button>
                        <button class="nav-link" id="English-igcse-tab" data-bs-toggle="tab" data-bs-target="#English-igcse" type="button" role="tab" aria-controls="English-igcse" aria-selected="false">NEW English IGCSE</button>
                    </div>
                </nav>
                <div class="tab-content mt-50" id="nav-tabContent">
                    <div class="tab-pane fade active show" id="nav-latest-artical" role="tabpanel" aria-labelledby="latest-artical-tab">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="blog-box">
                                    <div class="blog-img">
                                        <a href="#"> <img src="{{asset('front_assets/imgs/blog/img-one.png')}}"></a>
                                    </div>
                                    <div class="blog-content">
                                        <h4><a href="#"> The Challenges of Remote Work While Pursuing Affordable
                                                Online Degrees </a></h4>
                                        <p>Embarking on a new career path or seeking personal growth in the new
                                            year can be a thrilling yet...</p>
                                        <button class="theme-yellow-btn">View Article</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="blog-box">
                                    <div class="blog-img">
                                        <a href="#"> <img src="{{asset('front_assets/imgs/blog/img-one.png')}}"></a>
                                    </div>
                                    <div class="blog-content">
                                        <h4><a href="#"> The Challenges of Remote Work While Pursuing Affordable
                                                Online Degrees </a></h4>
                                        <p>Embarking on a new career path or seeking personal growth in the new
                                            year can be a thrilling yet...</p>
                                        <button class="theme-yellow-btn">View Article</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="blog-box">
                                    <div class="blog-img">
                                        <a href="#"> <img src="{{asset('front_assets/imgs/blog/img-one.png')}}"></a>
                                    </div>
                                    <div class="blog-content">
                                        <h4><a href="#"> The Challenges of Remote Work While Pursuing Affordable
                                                Online Degrees </a></h4>
                                        <p>Embarking on a new career path or seeking personal growth in the new
                                            year can be a thrilling yet...</p>
                                        <button class="theme-yellow-btn">View Article</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="English-igcse" role="tabpanel" aria-labelledby="English-igcse-tab">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="blog-box">
                                    <div class="blog-img">
                                        <a href="#"> <img src="{{asset('front_assets/imgs/blog/img-one.png')}}"></a>
                                    </div>
                                    <div class="blog-content">
                                        <h4><a href="#"> the Challenges of Remote Work While Pursuing Affordable
                                                Online Degrees </a></h4>
                                        <p>Embarking on a new career path or seeking personal growth in the new
                                            year can be a thrilling yet...</p>
                                        <button class="theme-yellow-btn">View Article</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="blog-box">
                                    <div class="blog-img">
                                        <a href="#"> <img src="{{asset('front_assets/imgs/blog/img-one.png')}}"></a>
                                    </div>
                                    <div class="blog-content">
                                        <h4><a href="#"> the Challenges of Remote Work While Pursuing Affordable
                                                Online Degrees </a></h4>
                                        <p>Embarking on a new career path or seeking personal growth in the new
                                            year can be a thrilling yet...</p>
                                        <button class="theme-yellow-btn">View Article</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->
<!-- Latest Blog Post end -->
@endsection