@if(count($projects))
    @foreach($projects as $project)
        @if($loop->odd)
            <div class="item">
                <div class="row">
                    <div class="col-lg-6 pr-0 pl-0 ">
                        <div class="swiper-container project-swiper">
                            <div class="swiper-wrapper">
                                @if(count($project->images))
                                    @foreach($project->images as $image)
                                        <div class="swiper-slide">
                                            <img src="{{asset($image)}}" alt="" class="main-img"/>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="col-lg-6 ">
                        <div class="text-box">
                            <h2 class="title ">{{$project->name}}</h2>
                            <!-- <h6 class="categ mb-2">Category name</h6> -->
                            <div class="data-item">
                                <span class="icon"><i class="far fa-calendar-check"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.completed_date')}}</p>
                                    <p class="data">
                                        {{$project->completed_date ? date('M Y', strtotime($project->completed_date)) : __('projects.on_going')}}
                                    </p>
                                </div>
                            </div>
                            <div class="data-item">
                                <span class="icon"><i class="fas fa-user"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.client')}}</p>
                                    <p class="data">{{$project->client}}</p>
                                </div>
                            </div>
                            <div class="data-item">
                                <span class="icon"><i class="far fa-calendar-alt"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.started_date')}}</p>
                                    <p class="data">{{date('F, Y', strtotime($project->started_date))}}</p>

                                </div>
                            </div>
                            <div class="data-item">
                                <span class="icon"><i class="far fa-gem"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.project_value')}}</p>
                                    <p class="data">{{__('projects.sar')}} {{$project->project_value}} </p>

                                </div>
                            </div>
                            <div class="data-item last-child">
                                <span class="icon"><i class="fas fa-eye"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.work_scope')}}</p>
                                    <ul class="custom-list">
                                        @if(count(json_decode($project->work_scopes, true)))
                                            @foreach(json_decode($project->work_scopes, true) as $workScope)
                                                <li class="li">{{$workScope}}</li>
                                            @endforeach
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if($loop->even)
            <div class="item">
                <div class="row">
                    <div class="col-lg-6 mob_order_2">
                        <div class="text-box">
                            <h2 class="title ">{{$project->name}}</h2>
                            <div class="data-item">
                                <span class="icon"><i class="far fa-calendar-check"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.completed_date')}}</p>
                                    <p class="data">
                                        {{$project->completed_date ? date('M Y', strtotime($project->completed_date)) : __('projects.on_going')}}
                                    </p>
                                </div>
                            </div>
                            <div class="data-item">
                                <span class="icon"><i class="fas fa-user"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.client')}}</p>
                                    <p class="data">{{$project->client}}</p>
                                </div>
                            </div>
                            <div class="data-item">
                                <span class="icon"><i class="far fa-calendar-alt"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.started_date')}}</p>
                                    <p class="data">{{date('F Y', strtotime($project->started_date))}}</p>
                                </div>
                            </div>
                            <div class="data-item">
                                <span class="icon"><i class="far fa-gem"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.project_value')}}</p>
                                    <p class="data">{{__('projects.sar')}} {{$project->project_value}} </p>
                                </div>
                            </div>
                            <div class="data-item last-child">
                                <span class="icon"><i class="fas fa-eye"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.work_scope')}}</p>
                                    <ul class="custom-list">
                                        @if(count(json_decode($project->work_scopes, true)))
                                            @foreach(json_decode($project->work_scopes, true) as $workScope)
                                                <li class="li">{{$workScope}}</li>
                                            @endforeach
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 pr-0 pl-0 ">
                        <div class="swiper-container project-swiper">
                            <div class="swiper-wrapper">
                                @if(count($project->images))
                                    @foreach($project->images as $image)
                                        <div class="swiper-slide">
                                            <img src="{{asset($image)}}" alt="" class="main-img"/>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endforeach()
    <div class="pagination-wrapper mt-5">
        {{$projects->links()}}
        {{--                                <nav aria-label="Page navigation example">--}}
        {{--                                    <ul class="pagination">--}}
        {{--                                        <li class="page-item">--}}
        {{--                                            <a class="page-link" href="#" aria-label="Previous">--}}
        {{--                                                <span aria-hidden="true">&laquo;</span>--}}
        {{--                                            </a>--}}
        {{--                                        </li>--}}
        {{--                                        <li class="page-item"><a class="page-link active" href="#">1</a></li>--}}
        {{--                                        <li class="page-item"><a class="page-link" href="#">2</a></li>--}}
        {{--                                        <li class="page-item"><a class="page-link" href="#">3</a></li>--}}
        {{--                                        <li class="page-item">--}}
        {{--                                            <a class="page-link" href="#" aria-label="Next">--}}
        {{--                                                <span aria-hidden="true">&raquo;</span>--}}
        {{--                                            </a>--}}
        {{--                                        </li>--}}
        {{--                                    </ul>--}}
        {{--                                </nav>--}}
    </div>
@else
    <div class="alert alert-secondary text-danger text-center">{{__('projects.no_data')}}</div>
@endif


<script>

    var swiper = new Swiper('.project-swiper', {
        loop: true,
        speed: 900,
        slidesPerView: 1,
        spaceBetween: 0,
        effect: 'fade',
        // autoplay: {
        //     delay: 2500,
        // },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
    });

</script>