@extends('layouts.master')
@section('content')
@foreach ($page_content as $key=>$item)
@if( $layouts->attachment )
@if($lang == 'english')
<div class="heading-section" style="background-image: url(./assets/images/page/{{ $layouts->attachment }});">
    @else
    <div class="heading-section" style="background-image: url(../assets/images/page/{{ $layouts->attachment }});">
    @endif
    @else
    <div class="heading-section">
        @endif
        <div data-aos="fade-right">
            @if($lang == 'english')
            <h1 class="text">{{$key}}</h1>
            @else
            <h1 class="text-right pr-3 text-white" style="font-family: Nafees Nastaleeq">{{$key}}</h1>
            @endif
        </div>
    </div>

    @include('layouts.breadcrumbs')

    <div id="features" class="features mb-5">
        <div class="container-fluid">
            <div class="row">
                @if($lang == 'english')
                <div class="col-md-2 mt-4 order-md-1">
                    @else
                    <div class="col-md-2 mt-4 order-md-2">
                        @endif
                        <ul class="nav nav-tabs row d-inline ">
                            @foreach ($item as $content)
                            <li class="nav-item col-md-12 col-md-12 tab-{{$loop->index}}" data-aos="fade-right"
                                data-aos-delay="100">
                                {{-- <a class="nav-link  {{$loop->index == 0 ? 'active show':''}}"
                                id="{{ $content->id }}" >
                                --}}
                                <a class="nav-link {{$loop->index == 0 ? 'active show':''}}" data-bs-toggle="tab"
                                    href="#tab-{{$loop->index}}" id="{{$loop->index}}">
                                    <h4 class="d-none d-inline text-center">
                                        @if($lang == 'english')
                                        {{ $content->english_title }}
                                        @else
                                        <span style="font-family: Nafees">
                                            {{ $content->urdu_title }}
                                        </span>
                                        @endif
                                    </h4>
                                </a>
                            </li>

                            @endforeach
                        </ul>
                    </div>
                    @if($lang == 'english')
                    <div class="col-md-10 order-md-2">
                        @else
                        <div class="col-md-10 order-md-1">
                            @endif
                            @foreach ($item as $content)
                            <div class="tab-content">
                                {{-- <div class="tab-content" data-aos="fade-up"> --}}
                                <div class="tab-pane {{$loop->index == 0 ? 'active show':''}}"
                                    id="tab-{{$loop->index}}">
                                    <div class="row">
                                        @if($lang == 'english')
                                        <div class="col-md-8 my-4 mt-lg-0 order-md-1">
                                            @else
                                            <div class="col-md-8 my-4 mt-lg-0 order-md-2">
                                                @endif
                                                <div class="font-size-content">
                                                    @if($lang == 'english')
                                                    <h2 id="heading">
                                                        {{ $content->english_title }}
                                                    </h2>
                                                    @else
                                                    <h2 id="heading" class="text-right" style="font-family: Nafees">
                                                        {{ $content->urdu_title }}
                                                    </h2>
                                                    @endif
                                                </div>
                                                <div id="div-content">
                                                    @if($lang == 'english')
                                                    {!! $content->english_content !!}
                                                    @else
                                                    {!! $content->urdu_content !!}
                                                    @endif

                                                </div>
                                            </div>
                                            @if($lang == 'english')
                                            <div class="col-md-4 text-center my-4 order-md-2" id="content-image">
                                                <img src="{{asset('assets/images/page/'.$content->attachment)}}"
                                                    alt="{{ $content->english_title }}" data-aos="fade-up "
                                                    class="img-fluid">
                                                @else
                                                <div class="col-md-4 text-center my-4 order-md-1" id="content-image">
                                                    <img src="{{asset('assets/images/page/'.$content->attachment)}}"
                                                        alt="{{ $content->urdu_title }}" data-aos="fade-up "
                                                        class="img-fluid">
                                                    @endif
                                                </div>
                                            </div>



                                        </div>

                                    </div>
                                    @endforeach
                                </div>


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

                @endsection
                @section('js')
                <script>
                    $(document).ready(function () {
                        //  var tab = $("ul.nav-tabs li a.active").attr("id");

                        //     content(tab);

                        $(".nav-tabs li a").on("click", function (e) {
                            $('a').removeClass('active');
                            $('a').removeClass('show');
                            $('div').removeClass('active');
                            $('div').removeClass('show');
                            // $(this).addClass('active');
                            //debugger
                            target = e.currentTarget.id
                            // console.log(e.currentTarget.id)

                            // var ref_this = $("ul.nav-tabs li a.active");
                            // var ref_this = $("ul.nav-tabs li a").find(".active");
                            // var target = ref_this.attr("id");
                            if (target != null) {
                                $('#tab-' + target).addClass('active');
                                $('#tab-' + target).addClass('show');
                                $('#' + target).addClass('active');
                                $('#' + target).addClass('show');
                                // content(target);
                            } else
                                alert('There is no active element');

                        });
                        //    function content(tab_id)
                        //    {
                        //     $.ajaxSetup({
                        //                     headers: {
                        //                         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        //                     }
                        //                 });
                        //         $.ajax({  
                        //                 method: "POST",
                        //                 url: "{{route('service_data')}}",
                        //                 data: {
                        //                     'id': tab_id
                        //                 },
                        //             }).done(function (res) {
                        //                 $('#div-content').empty();
                        //                 $('#heading').empty();
                        //                 $('#content-image').empty();
                        //                 $('#heading').append(res.content.title);
                        //                 $('#div-content').append(res.content.content);
                        //                 $('#content-image').append('<img src="assets/images/page/'+res.content.attachment+'" alt="'+res.content.title+'" data-aos="fade-up " class="img-fluid">');
                        //             });
                        //    }
                    })

                </script>
                @endsection