@extends('front.master')

@section('title', 'Service')

@section('content')

    <section class="campus-visit-area-2" style="background-color: #e7f1f1;">
        <div class="container">
            @foreach ($services as $service)
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="about-content text-center">
                            <h2 class="about-title" style="color:black">{{ $service->name ?? ""}} </h2>
                            <span class="line"></span>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="campus-image-2">
                            <div class="image-1">
                                <img src="{{$service->image}}" width="585" height="308" alt="campus">
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="event-area" id="services">
        <div class="container">
            <div class="event-title-tab-menu">
                <div class="event-tab-menu" style="display:flex">
                        <ul class="nav nav-tabs-services services_data" id="services_data" role="tablist" style="margin:auto">

                                @foreach ($categoryes as $key => $categorye)
                                    <li>
                                        <a class="{{ (request()->categorye && request()->categorye == $categorye->name) || (!$key && !request()->categorye) ? 'active servicesid' : 'servicesid' }}"
                                            data-id="{{ $categorye->id }}"
                                            aria-controls="{{ $categorye->name }}"
                                            role="tab"
                                            data-bs-toggle="tab"
                                            href="#{{ $categorye->name }}">
                                            {{ $categorye->name }}
                                        </a>
                                    </li>
                                @endforeach

                        </ul>
                </div>
            </div>
                <div class="tab-content event-tab-items wow fadeInUpBig" id="data" data-wow-duration="1s" data-wow-delay="0.2s">

                    {{-- <div class="tab-pane fade show active" role="tabpanel" id="Investors">
                        <div class="row">
                                <div class="col-lg-3 col-sm-6 mt-30 services">
                                    <div class="single-event investors">
                                        <a href="ServiceDetail/Setup-Your-Educational-Organization.html" style="width:100%">
                                            <div class="trainingHeight" style="height:80px;display:flex">
                                                <h4 class="event-title servicesTitle" style="margin:auto">Setup Your Educational Organization</h4>
                                            </div>
                                                <div style="text-align:right">
                                                    <p class="more" style="margin-bottom:0">Learn More <i class="far fa-chevron-right"></i></p>
                                                </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6 mt-30 services">
                                    <div class="single-event investors">
                                        <a href="ServiceDetail/Reform%2c-Restructure%2c-and-Support-Your-Educational-Organization.html" style="width:100%">
                                            <div class="trainingHeight" style="height:80px;display:flex">
                                                <h4 class="event-title servicesTitle" style="margin:auto">Reform, Restructure, and Support Your Educational Organization</h4>
                                            </div>
                                                <div style="text-align:right">
                                                    <p class="more" style="margin-bottom:0">Learn More <i class="far fa-chevron-right"></i></p>
                                                </div>
                                        </a>
                                    </div>
                                </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" role="tabpanel" id="Educators">
                        <div class="row">
                                <div class="col-lg-3 col-sm-6 mt-30 services">
                                    <div class="single-event investors">
                                        <a href="ServiceDetail/Teachers%e2%80%99-Support.html" style="width:100%">
                                            <div class="trainingHeight" style="height:80px;display:flex">
                                                <h4 class="event-title servicesTitle" style="margin:auto">Teachers’ Support</h4>
                                            </div>
                                                <div style="text-align:right">
                                                    <p class="more" style="margin-bottom:0">Learn More <i class="far fa-chevron-right"></i></p>
                                                </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6 mt-30 services">
                                    <div class="single-event investors">
                                        <a href="ServiceDetail/Web-3-Courses-for-Young-Learners-and-Adults.html" style="width:100%">
                                            <div class="trainingHeight" style="height:80px;display:flex">
                                                <h4 class="event-title servicesTitle" style="margin:auto">Web 3 Courses for Young Learners and Adults</h4>
                                            </div>
                                                <div style="text-align:right">
                                                    <p class="more" style="margin-bottom:0">Learn More <i class="far fa-chevron-right"></i></p>
                                                </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6 mt-30 services">
                                    <div class="single-event investors">
                                        <a href="Training.html" style="width:100%">
                                            <div class="trainingHeight" style="height:80px;display:flex">
                                                <h4 class="event-title servicesTitle" style="margin:auto">Continuous Professional Development</h4>
                                            </div>
                                                <div style="text-align:right">
                                                    <p class="more" style="margin-bottom:0">Learn More <i class="far fa-chevron-right"></i></p>
                                                </div>
                                        </a>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" role="tabpanel" id="Parents">
                        <div class="row">
                                <div class="col-lg-3 col-sm-6 mt-30 services">
                                    <div class="single-event investors">
                                        <a href="ServiceDetail/Web-3-Courses-for-Young-Learners-and-Adults.html" style="width:100%">
                                            <div class="trainingHeight" style="height:80px;display:flex">
                                                <h4 class="event-title servicesTitle" style="margin:auto">Web 3 Courses for Young Learners and Adults</h4>
                                            </div>
                                                <div style="text-align:right">
                                                    <p class="more" style="margin-bottom:0">Learn More <i class="far fa-chevron-right"></i></p>
                                                </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6 mt-30 services">
                                    <div class="single-event investors">
                                        <a href="ServiceDetail/Education-Consultancy-for-Families.html" style="width:100%">
                                            <div class="trainingHeight" style="height:80px;display:flex">
                                                <h4 class="event-title servicesTitle" style="margin:auto">Education Consultancy for Families</h4>
                                            </div>
                                                <div style="text-align:right">
                                                    <p class="more" style="margin-bottom:0">Learn More <i class="far fa-chevron-right"></i></p>
                                                </div>
                                        </a>
                                    </div>
                                </div>
                        </div>
                    </div> --}}
                </div>
        </div>
    </section>

    <section class="slider-area slider-03 slider-active" style="background-color: #e7f1f1;direction:ltr">
        @foreach ($testimonials as $testimonial)
                <div class="single-slider d-flex align-items-center">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-8" style="margin:auto;direction:ltr">
                                <div class="testimonial-wrapper-2">
                                    <div class="section-title-2 text-center">
                                        <h2 class="title" style="color:black">{{ __('messages.testimonials') }}
                                        </h2>
                                        <span class="line"></span>
                                    </div>
                                    <div class="testimonials-content">
                                        <div class="single-testimonial-content">
                                                <div class="content-text">
                                                    <i class="fas fa-quote-left"></i>
                                                    <div style="display:flex;min-height:277px">
                                                        <p style="margin:auto">{!! $testimonial->description ?? "" !!}</p>
                                                    </div>
                                                </div>
                                                <div class="content-meta" style="text-align:end">
                                                    <p class="name" style="margin-bottom:0">{{ $testimonial->name ?? ""}}</p>
                                                    <p class="designation">  {{ $testimonial->designation ?? "" }}</p>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
    </section>

    <section class="campus-visit-area-3">
        <div class="container">
            <div class="campus-visit-wrapper">
                <div class="campus-content-col" style="display:flex">
                    <div class="campus-content" style="margin:auto">
                        <div class="text-center lineTitle">
                            <h2 class="campus-title" style="color:black">{{ __('messages.over_30_year') }}
                            </h2>
                            <span class="line"></span>
                        </div>
                        <p style="text-align:center">{{__('messages.here_to_guide')}}<span style="font-family:Arial">! </p>

                    </div>
                </div>
                <div class="campus-image-col">
                    <div class="campus-image" style="direction:ltr">
                    <video autoplay loop muted>
                                <source src="{{asset('front/Content/Assets/GenerationZImages/Find%20the%20right%20school%20for%20your%20children%21(1).mp4')}}" type="video/mp4" />
                    </video>
                    </div>
                </div>


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

@endsection
<!-- Latest Font Awesome CDN -->
@push('custom-scripts')
<script>
   $(document).ready(function() {
        $(document).on('click', '.servicesid', function(e) {
            var _this = $(this);
            var id = _this.attr('data-id');
            get_data(id);
        });
        var initialElement = $('#services_data').find('.servicesid.active').first();
        var id = initialElement.data('id') || $('#services_data').find('.servicesid').first().data('id');

        get_data(id);

        function get_data(id) {
            $.ajax({
                url: "{{ url('categoryes-services') }}",
                type: 'GET',
                data: { id: id },
                success: function(response) {
                    console.log(response);
                    if (response != 'null' && response.html) {
                        $('#data').html(response.html);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error: " + error);
                    alert("There was an error fetching data. Please try again later.");
                }
            });
        }
    });



</script>

@endpush