@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-md-6 col-lg-3">
                                <div class="form-group mb-0">
                                    <select name="project_value" class="form-control">
                                        <option value="">{{__('projects.project_value')}}</option>
                                        @if(count($values))
                                            @foreach($values as $value)
                                                <option value="{{$value}}">{{$value}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <div class="form-group mb-0">
                                    <select name="country_id" class="form-control">
                                        <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-md-6 col-lg-3">
                                <div class="form-group mb-0">
                                    <select name="started_date" class="form-control">
                                        <option value="">{{__('projects.started_date')}}</option>
                                        @if(count($years))
                                            @foreach($years as $year)
                                                <option value="{{$year}}">{{$year}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <div class="form-group mb-0">
                                    <select name="category_id" class="form-control">
                                        <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>
                    </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="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

                </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(),
                country_id = $('select[name="country_id"]').val(),
                started_date = $('select[name="started_date"]').val(),
                category_id = $('select[name="category_id"]').val();

            let data = {project_value,country_id,started_date,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(),
                country_id = $('select[name="country_id"] option:selected').val(),
                started_date = $('select[name="started_date"] option:selected').val(),
                category_id = $('select[name="category_id"] option:selected').val();

            let data = {project_value:project_value,country_id:country_id,started_date:started_date,category_id:category_id};
            let url = $(this).attr('href')+"&project_value="+project_value+'&country_id='+country_id+'&started_date='+started_date+'&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