@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>
                            
                            <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-gem"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.project_value')}}</p>
                                    <p class="data">{{ convertNumberToCurrency($project->project_value) }} </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>-->
                                    <!--<p class="data">{{date('F, Y', strtotime('01-'.$project->start_month.'-'.$project->start_year))}}</p>-->
                                    <p class="data">{{$project->started_date}}</p>
                                </div>
                            </div>
                            <div class="data-item">
                                <span class="icon"><i class="fas fa-sort"></i></span>
                                <div class="text-content">
                                    <p class="label"> {{__('projects.project_type')}} </p>
                                    <p class="data"> {{__('projects.'.$project->project_type)}} </p>
                                </div>
                            </div>
                            <div class="data-item">
                                <span class="icon"><i class="fas fa-info"></i></span>
                                <div class="text-content">
                                    <p class="label"> {{__('projects.project_status')}} </p>
                                    <p class="data"> {{__('projects.'.$project->project_status)}} </p>
                                </div>
                            </div>
                            @if($project->project_status == 'completed')
                            <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">
                                        @if($project->completed_date)
                                            <!--{{$project->completed_date ? date('M Y', strtotime($project->completed_date)) : __('projects.on_going')}}-->
                                            {{$project->completed_date ? $project->completed_date : __('projects.on_going')}}
                                        @else
                                            {{__('projects.on_going')}}
                                        @endif
                                    </p>
                                </div>
                            </div>
                            @endif
                            <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="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-gem"></i></span>
                                <div class="text-content">
                                    <p class="label">{{__('projects.project_value')}}</p>
                                    <p class="data">{{ convertNumberToCurrency($project->project_value) }} </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>-->
                                    <!--<p class="data">{{date('F, Y', strtotime('01-'.$project->start_month.'-'.$project->start_year))}}</p>-->
                                    <p class="data">{{$project->started_date}}</p>
                                </div>
                            </div>
                            
                            <div class="data-item">
                                <span class="icon"><i class="fas fa-sort"></i></span>
                                <div class="text-content">
                                    <p class="label"> {{__('projects.project_type')}} </p>
                                    <p class="data"> {{__('projects.'.$project->project_type)}} </p>
                                </div>
                            </div>
                            <div class="data-item">
                                <span class="icon"><i class="fas fa-info"></i></span>
                                <div class="text-content">
                                    <p class="label"> {{__('projects.project_status')}} </p>
                                    <p class="data"> {{__('projects.'.$project->project_status)}} </p>
                                </div>
                            </div>
                            @if($project->project_status == 'completed')
                            <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">
                                        @if($project->completed_date)
                                            <!--{{$project->completed_date ? date('M Y', strtotime($project->completed_date)) : __('projects.on_going')}}-->
                                            {{$project->completed_date ? $project->completed_date : __('projects.on_going')}}
                                        @else
                                            {{__('projects.on_going')}}
                                        @endif
                                    </p>
                                </div>
                            </div>
                            @endif
                            <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>