@extends('web.layouts.container')
@section('css')
    <style>
        .pagination-wrapper .pagination .page-item.active .page-link{
            background-color: #ff7513 !important;
            color: #fff !important;
        }
    </style>
@endsection
@section('content')


    <div class="page-heading" style="background: url({{asset('assets/web/images/page-heading-1.png')}});">
        <div class="container">
            <div class="text-box text-center">
                <h1 class="sec-title"> {{$pageTitle[0]}} <b> {{$pageTitle[1]}}</b> </h1>
            </div>
        </div>
    </div>
    <section class="projects-pg">
        <div class="container">
            <div class="inner-sec">
                <div class="heading text-center mb-5 wow fadeInUp"  >
                    <h1 class="pg-title">{{$projectDetails->title}}</h1>
                    <p class="heading-p mt-3 col-md-9 m-auto">{!! stripText($projectDetails->description) !!}</p>
                </div>
                <div class="filtering mb-5">
                    <form>
                        <div class="row">
                            <!--<div class="col-lg-2">-->
                            <!--    <div class="form-group mb-0">-->
                            <!--        <select name="project_value" class="form-control custom-select">-->
                            <!--            <option value="">{{__('projects.project_value')}}</option>-->
                            <!--            @if(count($values))-->
                                            <!--@foreach($values as $value)-->
                                            <!--    <option value="{{$value}}">{{ convertNumberToCurrency($value) }}</option>-->
                                            <!--@endforeach-->
                            <!--                <option value="below_10">{{ __('projects.below_10') }}</option>-->
                            <!--                <option value="between_10_100">{{ __('projects.between_10_100') }}</option>-->
                            <!--                <option value="between_100_500">{{ __('projects.between_100_500') }}</option>-->
                            <!--                <option value="above_500">{{ __('projects.above_500') }}</option>-->
                            <!--            @endif-->
                            <!--        </select>-->
                            <!--    </div>-->
                            <!--</div>-->
                            <div class="col-lg-2">
                                <div class="form-group mb-0">
                                    <select name="country_id" class="form-control custom-select">
                                        <option value="">{{__('projects.country_id')}}</option>
                                        @if(count($countries))
                                            @foreach($countries as $country)
                                                <option value="{{$country->id}}">{{$country->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group mb-0">
                                    <select name="start_year" class="form-control custom-select">
                                        <option value="">{{__('projects.year')}}</option>
                                        @if(count($years))
                                            @foreach($years as $year)
                                                <option value="{{$year}}">{{$year}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <!--<div class="col-lg-2">-->
                            <!--    <div class="form-group mb-0">-->
                            <!--        <select name="project_status" class="form-control custom-select">-->
                            <!--            <option value="">{{__('projects.project_status')}}</option>-->
                            <!--                <option value="ongoing">{{__('projects.ongoing')}}</option>-->
                            <!--                <option value="completed">{{__('projects.completed')}}</option>-->
                            <!--        </select>-->
                            <!--    </div>-->
                            <!--</div>-->
                            <div class="col-lg-2">
                                <div class="form-group mb-0">
                                    <select name="category_id" class="form-control custom-select">
                                        <option value="">{{__('projects.category_id')}}</option>
                                        @if(count($types))
                                            @foreach($types as $type)
                                                <option value="{{$type->id}}">{{$type->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group mb-0">
                                    <select name="project_type" class="form-control custom-select">
                                        <option value="">{{__('projects.project_type')}}</option>
                                        <option value="ppp_projects">{{__('projects.ppp_projects')}}</option>
                                        <option value="o_m_projects">{{__('projects.o_m_projects')}}</option>
                                        <option value="com_con_projects">{{__('projects.com_con_projects')}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="search_container">
                    @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="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-info"></i></span>-->
                                                <!--    <div class="text-content">-->
                                                <!--        <p class="label"> {{__('projects.project_status')}} </p>-->
                                                <!--        <p class="data"> {{__('projects.'.$project->project_status)}} </p>-->
                                                <!--    </div>-->
                                                <!--</div>-->
                                                
                                                <!------------ new ----------->
                                                <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>
                                                @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="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>-->
                                            <!--            <p class="data">{{date('F, Y', strtotime('01-'.$project->start_month.'-'.$project->start_year))}}</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 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 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="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-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-->
                                                <!------------ new ----------->
                                                <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 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

                </div>

            </div>
        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        let searchProjectsRoute = "{{route('project.index')}}";
    </script>

    <script>
        $(document).on('change', 'select',async function (e) {
            e.preventDefault();

            // let project_value = $('select[name="project_value"]').val(),
            let country_id = $('select[name="country_id"]').val(),
                // started_date = $('select[name="started_date"]').val(),
                start_year = $('select[name="start_year"]').val(),
                // start_month = $('select[name="start_month"]').val(),
                category_id = $('select[name="category_id"]').val(),
                // project_status = $('select[name="project_status"] option:selected').val();
                project_type = $('select[name="project_type"] option:selected').val();

            let data = {country_id,project_type, start_year, category_id},

                url = searchProjectsRoute,
                method = 'get';

            const response=await ajax({
                url,
                data,
                dataType: 'html',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                toasterError(response.errors);
            }

            if (response){
                $('.search_container').html(response)
            }

        });

        $(document).on('click', '.pagination-wrapper .pagination .page-link', async function (e) {
            e.preventDefault();
            // let project_value = $('select[name="project_value"] option:selected').val(),
            let country_id = $('select[name="country_id"] option:selected').val(),
                // started_date = $('select[name="started_date"] option:selected').val(),
                start_year = $('select[name="start_year"] option:selected').val(),
                // start_month = $('select[name="start_month"] option:selected').val(),
                category_id = $('select[name="category_id"] option:selected').val(),
                // project_status = $('select[name="project_status"] option:selected').val();
                project_type = $('select[name="project_type"] option:selected').val();
                
            let data = {country_id:country_id,category_id:category_id};
            let url = $(this).attr('href')+'&project_type='+project_type+'&country_id='+country_id+'&start_year='+start_year+'&category_id='+category_id,
                method = 'get';

            const response=await ajax({
                url,
                data,
                dataType: 'html',
                method,
                contentType: false,
                processData: false,
            });

            if (response) {
                $('.search_container').html(response)
            }
        })


    </script>


@endsection