@extends('ved.layout.layout')
@section('content')
    <div class="breadcrumbarea aos-init aos-animate" data-aos="fade-up">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="breadcrumb__content__wraper">
                        <div class="breadcrumb__title">
                            <h2 class="heading">{{ $data->title }}</h2>
                        </div>
                        <div class="breadcrumb__inner">
                            <ul>
                                <li><a href="index.php">Home</a></li>
                                <li><a href="">Abroad Study</a></li>
                                <li> Test Preparation Class</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="shape__icon__2">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__1"
                src="{{ asset('ved/assets/img/herobanner/herobanner__1.png') }}" alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__2"
                src="{{ asset('ved/assets/img/herobanner/herobanner__2.png') }}" alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__3"
                src="{{ asset('ved/assets/img/herobanner/herobanner__3.png') }}" alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__4"
                src="{{ asset('ved/assets/img/herobanner/herobanner__5.png') }}" alt="photo">
        </div>
    </div>


    <div class="blogarea__2 sp_top_100">
        <div class="container">
            <div class="row">
                <div class="row">
                    <div class="col-xl-8 col-lg-8 col-md-12 col-12">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 aos-init aos-animate" data-aos="fade-up">
                            <div class="about__right__wraper__2">
                                <div class="educationarea__img" data-tilt="">
                                    <img loading="lazy" class="aboutarea__2__img__1" src="{{ asset($data->image) }}"
                                        alt="education"
                                        style="max-width: 90%; height: auto; margin-top: 30px; margin-left: -30px; margin-bottom:50px;">
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 aos-init aos-animate" data-aos="fade-up">

                            <div class="aboutarea__content__wraper">
                                <div class="aboutarea__headding">
                                    <h2>{{ $data->intro }}</h2>
                                </div>
                                <div class="aboutarea__para aboutarea__para__2">
                                    <p>{!! $data->details !!}</p>
                                </div>
                            </div>

                        </div>

                        <div class="blogarea__2 sp_top_100">
                            <div class="container">
                                <div class="row">

                                    <div class="col-xl-12 col-lg-12">
                                        <div class="blog__details__content__wraper">

                                            <div class="course__details__tab__wrapper" data-aos="fade-up">
                                                <div class="row">
                                                    <div class="col-xl-12">
                                                        <ul class="nav  course__tap__wrap" id="myTab" role="tablist">
                                                            @if ($data->children)
                                                                @foreach ($data->children as $item)
                                                                    <li class="nav-item" role="presentation">
                                                                        <button
                                                                            class="single__tab__link @if ($loop->first) active @endif"
                                                                            data-bs-toggle="tab"
                                                                            data-bs-target="#{{ $item->alias }}"
                                                                            type="button">{{ $item->title }}</button>
                                                                    </li>
                                                                @endforeach
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="tab-content tab__content__wrapper" id="myTabContent">
                                                    @foreach ($data->children as $item)
                                                        <div class="tab-pane fade @if ($loop->first) active show @endif"
                                                            id="{{ $item->alias }}" role="tabpanel"
                                                            aria-labelledby="projects__two">
                                                            <div class="experence__description">
                                                                <p style="color: black;">
                                                                    {!! $item->details !!}
                                                                </p>

                                                            </div>


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

                                            {{-- <div class="course__list__wraper" data-aos="fade-up">
                                                <div class="blog__details__heading__2">
                                                    <h5>{{ $info->title }}</h5>
                                                </div>
                                                <div class="aboutarea__list__2 blog__details__list__2" data-aos="fade-up">
                                                    <ul>
                                                        @foreach ($info->children as $item)
                                                            <li>
                                                                <i class="icofont-check"></i>
                                                                <p>{{ $item->intro }}</p>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div> --}}


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 sticky-top ">
                        <div class="course__details__sidebar ">

                            <div class="blogsidebar__content__wraper__2 aos-init aos-animate" data-aos="fade-up">

                                <h4 class="sidebar__title">Other Classes</h4>
                                <ul class="course__details__populer__list">
                                    @foreach ($popular as $item)
                                        <li>

                                            <div class="course__details__populer__img">
                                                <img loading="lazy" src="{{ asset($item->thumb) }}"
                                                    alt="{{ $item->title }}">
                                            </div>
                                            <div class="course__details__populer__content">

                                                <h6>
                                                    <a href="{{route('preparation',['alias'=>$item->alias])}}">{{ $item->title }}</a>

                                                </h6>
                                            </div>

                                        </li>
                                    @endforeach
                                </ul>

                            </div>
                            <div class="blogsidebar__content__wraper__2 aos-init aos-animate" data-aos="fade-up">

                                <h4 class="sidebar__title">Get in Touch</h4>
                                <div class="get__touch__input">
                                    <form action="{{ route('send-email') }}" id="register" method="POST">
                                        @csrf
                                        <div class="form-message">
                                        </div>
                                        <input type="text" name="title" placeholder="Enter name*">
                                        <input type="text" name="email" placeholder="Enter your mail*">
                                        <input type="text" name="phone" placeholder="Enter your phone number*">
                                        <input type="text" name="address" placeholder="Enter your address*">
                                        <input type="text" name="comment" placeholder="Massage*">
                                        <button class="default__button" type="submit">SEND MASSAGE</button>
                                    </form>
                                </div>

                            </div>
                        </div>

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


    </div>
    </div>
@endsection