@extends('front.layouts.master-auth')
@section('content')
    <!-- Start Page Content -->
    <section class="page-content">
        <div class="container">
            <div class="search-page-cont">
                <div class="search-results-cont">
                    <h2 class="offers-page-name">
                        @lang('Favourites')
                    </h2>
                    @if(count($projects) > 0)

                        <div class="result-items">
                            @foreach($projects as $project)
                                <div class="project-item top">
                                    @if($project->is_featured)
                                        <div class="project-hint">
                                            <span class="hint">@lang('front.featured_project')</span>
                                        </div>
                                    @endif
                                    <div class="project-info">
                                        <div class="project-head">
                                            <a href="{{route('project.details', [$project->id, createProjectSlug($project->title)])}}" type="button" class="project-name">
                                                {{$project->title}}
                                            </a>
                                            <span class="project-job">
                                        {{$project->category?->name}}
                                        </span>
                                            <button class="addToFav @if(checkIfFav($project->id)) active @endif " type="button" onclick="location.href='{{route('project.user.addFav',$project->uuid)}}'">
                                                <svg height="24" version="1.1" width="24">
                                                    <g transform="translate(0 -1028.4)">
                                                        <path
                                                            d="m7 1031.4c-1.5355 0-3.0784 0.5-4.25 1.7-2.3431 2.4-2.2788 6.1 0 8.5l9.25 9.8 9.25-9.8c2.279-2.4 2.343-6.1 0-8.5-2.343-2.3-6.157-2.3-8.5 0l-0.75 0.8-0.75-0.8c-1.172-1.2-2.7145-1.7-4.25-1.7z" />
                                                    </g>
                                                </svg>
                                            </button>
                                        </div>
                                        <div class="project-summary">
                                            {!! format_text($project->description) !!}
                                        </div>
                                        <div class="project-foot">
                                            <div class="foot-item">
                                                <div class="item-icon">
                                                    <svg id="paper" xmlns="http://www.w3.org/2000/svg" width="11"
                                                         height="12" viewBox="0 0 15.433 16.836">
                                                        <path id="Path_29" data-name="Path 29"
                                                              d="M16.171,18.03H7.754A1.756,1.756,0,0,1,6,16.276V5.754A1.756,1.756,0,0,1,7.754,4h8.418a1.756,1.756,0,0,1,1.754,1.754V16.276A1.756,1.756,0,0,1,16.171,18.03ZM7.754,4.7A1.054,1.054,0,0,0,6.7,5.754V16.276a1.054,1.054,0,0,0,1.052,1.052h8.418a1.054,1.054,0,0,0,1.052-1.052V5.754A1.054,1.054,0,0,0,16.171,4.7Z"
                                                              transform="translate(-2.493 -1.194)" fill="rgba(26,26,46,0.5)" />
                                                        <path id="Path_30" data-name="Path 30"
                                                              d="M3.455,14.731h-.7A1.756,1.756,0,0,1,1,12.977V1.754A1.756,1.756,0,0,1,2.754,0h8.418a1.756,1.756,0,0,1,1.754,1.754.351.351,0,1,1-.7,0A1.054,1.054,0,0,0,11.171.7H2.754A1.054,1.054,0,0,0,1.7,1.754V12.977A1.054,1.054,0,0,0,2.754,14.03h.7a.351.351,0,1,1,0,.7Z"
                                                              transform="translate(-1)" fill="rgba(26,26,46,0.5)" />
                                                        <path id="Path_31" data-name="Path 31"
                                                              d="M15.963,16.7H10.351a.351.351,0,1,1,0-.7h5.612a.351.351,0,0,1,0,.7Z"
                                                              transform="translate(-3.687 -4.776)" fill="rgba(26,26,46,0.5)" />
                                                        <path id="Path_32" data-name="Path 32"
                                                              d="M15.963,20.7H10.351a.351.351,0,0,1,0-.7h5.612a.351.351,0,0,1,0,.7Z"
                                                              transform="translate(-3.687 -5.97)" fill="rgba(26,26,46,0.5)" />
                                                        <path id="Path_33" data-name="Path 33"
                                                              d="M15.963,12.7H10.351a.351.351,0,1,1,0-.7h5.612a.351.351,0,0,1,0,.7Z"
                                                              transform="translate(-3.687 -3.582)" fill="rgba(26,26,46,0.5)" />
                                                        <path id="Path_34" data-name="Path 34"
                                                              d="M15.963,8.7H10.351a.351.351,0,1,1,0-.7h5.612a.351.351,0,0,1,0,.7Z"
                                                              transform="translate(-3.687 -2.388)" fill="rgba(26,26,46,0.5)" />
                                                    </svg>

                                                </div>
                                                <div class="item-text">
                                                    {{localized_friendly_time($project->created_at)}}
                                                </div>
                                            </div>
                                            <div class="foot-item">
                                                <div class="item-icon">
                                                    <span class="status"></span>
                                                </div>
                                                <div class="item-text">
                                                    {{$project->getCurrentStatus()}}
                                                </div>
                                            </div>
                                            <div class="foot-item">
                                                <div class="item-icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                                         viewBox="0 0 18.46 18.46">
                                                        <path id="Icon_awesome-medal" data-name="Icon awesome-medal"
                                                              d="M8.067,4.714,5.575.56A1.154,1.154,0,0,0,4.585,0H.578A.577.577,0,0,0,.105.908L4.117,6.639A7.462,7.462,0,0,1,8.067,4.714ZM17.882,0H13.874a1.154,1.154,0,0,0-.989.56L10.393,4.714a7.464,7.464,0,0,1,3.95,1.925L18.355.908A.577.577,0,0,0,17.882,0ZM9.23,5.769a6.346,6.346,0,1,0,6.346,6.346A6.346,6.346,0,0,0,9.23,5.769Zm3.336,5.67L11.2,12.771l.323,1.883a.414.414,0,0,1-.6.436L9.23,14.2l-1.691.889a.414.414,0,0,1-.6-.436l.323-1.883L5.895,11.439a.414.414,0,0,1,.229-.706l1.89-.275.845-1.713a.415.415,0,0,1,.743,0l.845,1.713,1.89.275a.414.414,0,0,1,.229.706Z"
                                                              transform="translate(0)" fill="rgba(26,26,46,0.5)" />
                                                    </svg>

                                                </div>
                                                <div class="item-text">
                                                    ٧ عروض
                                                </div>
                                            </div>
                                            <div class="foot-item">
                                                <div class="item-icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="10"
                                                         viewBox="0 0 23.368 14.021">
                                                        <path id="Icon_awesome-money-bill-alt"
                                                              data-name="Icon awesome-money-bill-alt"
                                                              d="M12.852,12.679h-.584V9.466a.292.292,0,0,0-.292-.292h-.5a.875.875,0,0,0-.486.147l-.56.373a.292.292,0,0,0-.081.4l.324.486a.292.292,0,0,0,.4.081l.017-.011v2.024h-.584a.292.292,0,0,0-.292.292v.584a.292.292,0,0,0,.292.292h2.337a.292.292,0,0,0,.292-.292v-.584A.292.292,0,0,0,12.852,12.679ZM22.2,4.5H1.168A1.169,1.169,0,0,0,0,5.668V17.352a1.169,1.169,0,0,0,1.168,1.168H22.2a1.169,1.169,0,0,0,1.168-1.168V5.668A1.169,1.169,0,0,0,22.2,4.5ZM1.753,16.768V14.431a2.337,2.337,0,0,1,2.337,2.337Zm0-8.179V6.253H4.089A2.337,2.337,0,0,1,1.753,8.589Zm9.931,7.01A3.831,3.831,0,0,1,8.179,11.51a3.831,3.831,0,0,1,3.505-4.089,3.831,3.831,0,0,1,3.505,4.089A3.831,3.831,0,0,1,11.684,15.6Zm9.931,1.168H19.278a2.337,2.337,0,0,1,2.337-2.337Zm0-8.179a2.337,2.337,0,0,1-2.337-2.337h2.337Z"
                                                              transform="translate(0 -4.5)" fill="#8c8c96" />
                                                    </svg>

                                                </div>
                                                <div class="item-text">
                                                    @lang('front.starts_from') {{$project->price ?? $project->price_from}}
                                                </div>
                                            </div>
                                            <div class="foot-item">
                                                <div class="item-icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="13"
                                                         viewBox="0 0 13.184 18.482">
                                                        <g id="Group_4286" data-name="Group 4286" transform="translate(0 0)">
                                                            <path id="Path_16126" data-name="Path 16126"
                                                                  d="M-404.087-152.987a6.671,6.671,0,0,1,6.417,5.207,7.256,7.256,0,0,1-.595,4.779,18.65,18.65,0,0,1-2.119,3.335c-.929,1.238-1.9,2.447-2.715,3.766-.233.377-.445.767-.663,1.154-.074.132-.156.244-.326.241a.351.351,0,0,1-.309-.237,32.736,32.736,0,0,0-2.868-4.332,29.3,29.3,0,0,1-2.348-3.492,8.35,8.35,0,0,1-1.023-3.048,6.415,6.415,0,0,1,.994-4.295,6.489,6.489,0,0,1,4.5-2.97C-404.794-152.941-404.438-152.952-404.087-152.987Zm3.461,6.628a3.466,3.466,0,0,0-3.449-3.468,3.473,3.473,0,0,0-3.466,3.452,3.472,3.472,0,0,0,3.451,3.467A3.465,3.465,0,0,0-400.626-146.359Z"
                                                                  transform="translate(410.68 152.987)" fill="#8d8d97" />
                                                        </g>
                                                    </svg>

                                                </div>
                                                <div class="item-text">
                                                    {{$project->user?->country?->name}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @endforeach
                        </div>
                        <div class="pagination-cont">
                            {{ $projects->withQueryString()->links('front.pagination') }}
                        </div>

                    @endif
                </div>
                <div class="search-filters-cont">
                    <span class="filters-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                             width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
                            <g transform="translate(128 128) scale(0.72 0.72)">
                                <g transform="translate(-175.05 -175.05000000000004) scale(3.89 3.89)">
                                    <path
                                        d="M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z"
                                        transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                </g>
                            </g>
                        </svg>
                    </span>
                    <form method="get">
                    <div class="search-filters">
                        <h4 class="filter-title">
                            @lang('Search')
                        </h4>
                        <div class="filter-cont">
                            <div class="form-group">
                                <label>@lang('Keywords')</label>
                                <input type="text" name="keyword" value="{{request()->get('keyword')}}" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>@lang('Project Owner')</label>
                                @if(count($owners) > 0)
                                <select class="form-control" name="owner_id" id="owner_id">
                                    <option value="">@lang('Select')</option>
                                    @foreach($owners as $owner)
                                        <option value="{{$owner->id}}" @if(request()->get('owner_id') == $owner->id) selected @endif>{{$owner->name}}</option>
                                    @endforeach
                                </select>
                                @endif
                            </div>
                        </div>
                        <h4 class="filter-title">
                            @lang('Category')
                        </h4>
                        <div class="filter-cont">
                            @php
                                $checked = false;
                                $selected_cat = [];
                                if (request()->get('category_id')) {
                                    $category_ids = request()->get('category_id');
                                    if(strpos($category_ids,',') !== false) {
                                        $selected_cat=explode(',', $category_ids);
                                    }else {
                                        $selected_cat=[$category_ids];
                                    }
                                }
                            @endphp
                            @foreach($categories as $category)
                                <div class="checkbox">
                                <label>
                                    @php
                                        if(count($selected_cat) > 0) {
                                            if(in_array($category->id, $selected_cat)) {
                                                $checked = true;
                                            }
                                        }
                                    @endphp
                                    <input type="checkbox" name="category_id[]" value="{{$category->id}}" @if($checked) checked @endif>
                                    <span class="mark">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                             viewBox="0 0 31.345 28.516">
                                            <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                                  transform="rotate(11 -21.661 43.426)" />
                                        </svg>
                                    </span>
                                    {{$category->name}}
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    </form>
                    <div class="filter-overlay"></div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Page Content -->

@endsection
@section('js-body')
    <script>
        $(document).ready(function () {
            //if checkbox category_id[] is checked
            $("input[name='category_id[]']").on("click", function (e) {

                var checkedValues = [];
                $('input[name="category_id[]"]:checked').each(function() {
                    checkedValues.push($(this).val());
                });

                // Join values to form a query string
                var queryString = checkedValues.join(',');

                if (checkedValues.length > 0) {
                    // add to header category_id and url location
                    window.location.href = window.location.origin + window.location.pathname + "?category_id=" + queryString;
                }else {
                    window.location.href = window.location.origin + window.location.pathname;
                }
            });
            $("#owner_id").on('change',function (){
                let selected = $(this).val();
                alert(selected);
                window.location.href = window.location.origin + window.location.pathname + "?owner_id=" + selected;

            })

        });
    </script>
@endsection