@extends('layouts.dashboard')
@section('content')
<link href="{{asset('css/find-project.css').getVersion()}}" rel="stylesheet" type="text/css" />
<section class="find-project">
    @if(Auth::check())
        {{-- <div class=" filter-main-section">
            <div class="container">
                <div class="filter-option">
                    <form class="filter-searchbar input-group" id="searchProjects">
                        <div class="filter-search-form">
                        <input class="form-control filter-searchbar-input position-relative searchStr" name="q" type="text" placeholder="What skill are you looking for?" aria-label="Search" >
                        <span class="search-clear">Clear</span>
                        </div>
                        <button class="btn filter-searchbar-btn" type="submit"><img src="{{asset('images/search.png')}}" alt="search-icon" class="filter-search-img"></button>
                    </form>
                        <button class="btn filter-btn filter-box" type="submit" data-bs-toggle="modal" data-bs-target="#myFilter1" id="filter" data-bs-backdrop="static" data-bs-keyboard="false" ><svg class="filter-img me-2" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"></path></svg>Filters</button>
                   
                    <div class="sort-box">
                        <span class="sort-title"> Sort</span>
                        <button class=" dropdown sort-dropdown btn dropdown-toggle sort-drop-btn" type="button" id="dropdownMenuButton1" >
                            Most relevant
                        </button>
                        <ul class="dropdown-menu sorting end-0" aria-labelledby="dropdownMenuButton1">
                            <li><a class="dropdown-item" href="javascript:void(0)" data-value="relevance">Most relevant</a></li>
                            <li><a class="dropdown-item"  href="javascript:void(0)" data-value="newest">Newest</a></li>
                            <li><a class="dropdown-item"  href="javascript:void(0)" data-value="ltoh">Price:Low to High</a></li>
                            <li><a class="dropdown-item"  href="javascript:void(0)" data-value="htol">Price:High to Low</a></li>
                        </ul>
                    </div>
                </div>
                <div class="filter-selected" id="filterTabs">
                   
                </div>
            </div>
        </div> --}}
        @php $class = 'dashboard-find-content'; 
        // $loginClass = ''; 
        $loginClass = 'showLoginPopup';
        @endphp
       
        <div class=" find-main-section">
            <div class="find-banner position-relative">
                <h1 class="find-head">Find Your Dream <span class="highlight">Freelancer</span> Jobs Here!</h1>
                <p class="heading-para">Looking for the <b>best freelancing jobs in India</b>? With Workolics, open doors to
                    numerous opportunities &
                    <b>find freelance jobs</b> made for you.
                </p>
                <form class="d-inline-flex find-searchbar position-relative" id="searchProjects">
                    <input class="searchSkill round-1" name="skill" type="text" placeholder="What skills are you looking for?" aria-label="Search">
                    <button type="submit" class="btn searchbar-btn " type="submit">Search</button>
                </form>
            </div>
            <div class="container find-content ">

                <div class="project-list ">
                    <div class="filter-btn">
                        <button class="filter-click" data-bs-target="#filterCollapse" aria-controls="filterCollapse">Filters</button>
                    </div>
                    <div class="filter-list" id="filterCollapse">
                        <div class="filters">
                            <div class="mobile-nav">
                                <p class="text-head">Filter</p>
                                <img src="images/mobile-cross.png" class="close-filter" alt="description">
                            </div>
                            <div class="category">
                                <div class="selectBox">
                                    <select name="category" id="category_filter" class="category_filter">
                                        <option value="Category">Category</option>
                                    </select>
                                    <div class="overSelect"></div>
                                </div>
                                <ul class="list-wrapper checkbox_set checkboxes">
                                                                    </ul>
                            </div>
                            <div class="category">
                                <div class="selectBox">
                                    <select name="Salary/Budget" id="budget_filter" class="budget_filter">
                                        <option value="Salary/Budget">Bids</option>
                                    </select>
                                    <div class="overSelect"></div>
                                </div>
                                <ul class="list-wrapper checkbox_set checkboxes">
                                                                    </ul>
                            </div>
                            <div class="category">
                                <div class="selectBox">
                                    <select name="bids" id="skill_filter" class="skill_filter">
                                        <option value="bids">Experience</option>
                                    </select>
                                    <div class="overSelect"></div>
                                </div>
                                <ul class="list-wrapper checkbox_set checkboxes">
                                    <li>
                                        <div class="checkmark_btn">
                                            <input class="assets" name="experiences" type="checkbox" id="entry-level" value="1">
                                            <span class="checkmark"></span>
                                            <label for="entry-level">Entry Level</label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="checkmark_btn">
                                            <input class="assets" name="experiences" type="checkbox" id="intermediate" value="2">
                                            <span class="checkmark"></span>
                                            <label for="intermediate">Intermediate</label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="checkmark_btn">
                                            <input class="assets" name="experiences" type="checkbox" id="expert" value="3">
                                            <span class="checkmark"></span>
                                            <label for="expert">Expert</label>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                            <div class="category">
                                <div class="selectBox">
                                    <select name="Salary/Budget" id="budget_filter" class="budget_filter">
                                        <option value="Salary/Budget">Budget</option>
                                    </select>
                                    <div class="overSelect"></div>
                                </div>
                                <ul class="list-wrapper checkbox_set checkboxes">
                                                                    </ul>
                            </div>
                          
                        </div>
                        <div class="category sort">
                            <div class="selectBox">
                                <select name="sort" id="budget_filter_sorts" class="budget_filter_sorts">
                                    <option value="sort">Sort By</option>
                                </select>
                                <div class="overSelect"></div>
                            </div>
                            <ul class="list-wrapper checkbox_set checkboxes">
                                <li>
                                    <div class="checkmark_btn">
                                        <label for="Newest" class="fund-label" data-sort-direction="newest">Newest</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="checkmark_btn">
                                        <label for="Most relevant" class="fund-label" data-sort-direction="relevance">Most Relevant</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="checkmark_btn">
                                        <label for="Price:Low to High" class="fund-label" data-sort-direction="lth">Price:Low to High</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="checkmark_btn">
                                        <label for="Price:High to Low" class="fund-label" data-sort-direction="htl">Price:High to Low</label>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="selection">
                        <ul class="selected-option">
                            <li class="selected" style="display: none;">
                                Category
                                <ul class="selected-list" id="categories">
                                </ul>
                            </li>
                            <li class="selected" style="display: none;">
                                Bids
                                <ul class="selected-list" id="bids">
                                </ul>
                            </li>
                            <li class="selected" style="display: none;">
                                Salary/Budget
                                <ul class="selected-list" id="budgets">
                                </ul>
                            </li>
                            <li class="selected" style="display: none;">
                                Experience
                                <ul class="selected-list" id="experiences">
                                </ul>
                            </li>
                        </ul>
                        <button type="button"  style="display: none;" id="clearAllFilters" >Clear All</button>
                    </div>
                    <ul class="searchlist p-0 w-100">
                                            </ul>
                    <div class="explore-more">
                        <button class="btn explore-btn loadMore" type="submit">Load More</button>
                    </div>
                </div>
            </div>
        </div>
    @else
        @php $class = ''; $loginClass= 'showLoginPopup'; @endphp
        <div class=" find-main-section">
            <div class="find-banner position-relative">
                <h2 class="find-head">Top Projects Lists</h2>
                <form class="d-inline-flex find-searchbar position-relative" id="searchProjects">
                    <input class="form-control searchbar-input searchStr" name="q" type="text" placeholder="Search for project" aria-label="Search" >
                     <span class="search-clear">Clear</span>
                    <button type="submit" class="btn searchbar-btn " type="submit"><img src="{{asset('images/search.png')}}" alt="search" class="find-search-img"></button>
                </form>
            </div>
        </div>
       
    @endif

</section>
<script>
    searchStr = sort = '';
    page = 1;
    filters = {};
    $(".sorting li").click(function() {
        $(".loader").show();
        sort = $('a', this).data('value');
        $("#dropdownMenuButton1").text($(this).text());
        // console.log($(this).text())
        page = 1;
        getFilteredProjects();
    });

    $(document).ready(function() {
        $('div .selection').hide();
        if (localStorage.getItem('filterVal')) {
            // $("input[value='1'].category ")[0]
            $('input[value="' + localStorage.getItem('filterVal') + '"].category').click();
            applyFilter();
            // localStorage.removeItem('filterVal')
        }
        if (localStorage.getItem('serchFilter')) {
            searchStr = localStorage.getItem('serchFilter');
            $("input[name='q']").val(searchStr);
            applyFilter();
            localStorage.removeItem('serchFilter')
        }
        if (getCookie('searchFilter') != '') {
            searchStr = atob(getCookie('searchFilter'));
            $("input[name='q']").val(searchStr);
            applyFilter();
            setCookie('searchFilter', '', -1);
        }
    });

    $(".loadMore").click(function() {
        page++
        $(".loadMore").text("Loading..");
        if (skill == '') {
            skill = '';
        }
        if (sortDirection == '') {
            sortDirection = 'newest';
        }
        getFilteredProjects();
    });

    $("#searchProjects").submit(function(e) {
        e.preventDefault();
        skill = $(".searchSkill").val();
        if (ValidateFrom($(this))) {
            getFilteredProjects();
        }
    });

    // filters
    function resetFilter() {
        $(".filter-listing input[type='checkbox']").prop('checked', false);
        // $("#closefilter").click();
        filters = {};
        // applyFilter();
    }

    $('ul.checkbox_set').find('li').change(function() {
    //    if($(this).is(':checked')) {
        console.log("Calling Function");
        applyFilter();
    //    }
    });

    function applyFilter(t) {
        console.log("Called Function");
        filters = {};
        filterHtml = '';
        il = 0;
        // filters = {};
        // let filteredValue = 0;
        let filterTypeValue = '';
        $('div .selection').show();
        $('li.selected-topic').remove();
        $("input[type='checkbox']").each(function(i, e) {
            if ($(e).prop("checked")) {
                console.log("Prent :", e.name);
                $(`#${e.name}`).parent().show();
                filterTypeValue = `<li class="selected-topic" id="${e.name}_${i}">${e.value}<a onclick="removeFilter('${$(this).attr('id')}',this)">✖</a></li>`
                $(`#${e.name}`).append(filterTypeValue);
                if (filters[e.name]) {
                    filters[e.name].push(e.value);
                } else {
                    filters[e.name] = [e.value];
                }
                filteringDone = true;
                if (sortDirection == '') {
                    sortDirection = 'newest';
                }
                // filteredValue++;
            }
        });
        $('#clearAllFilters').show();
        if ($('ul #categories').find('li').length == 0) $('ul #categories').parent().hide();
        if($('ul #bids').find('li').length == 0) $('ul #bids').parent().hide();
        if($('ul #experiences').find('li').length == 0) $('ul #experiences').parent().hide();
        if($('ul #budgets').find('li').length == 0) $('ul #budgets').parent().hide();
        if($('div.selection ul li.selected:visible').length == 0) $('div.selection').hide();
        // $(".filter-listing input[type='checkbox']").each(function(i, e) {
        //     if ($(e).prop("checked")) {
        //         il++;
        //         filterHtml += `<div class="filter-result-badge rounded-pill mt-3">
        //             ${$(e).next().text()} <a onclick="removeFilter('${$(e).attr('id')}',this)">✖</a>
        //         </div>`;
        //         if (filters[e.name]) {
        //             filters[e.name].push(e.value);
        //         } else {
        //             filters[e.name] = [e.value];
        //         }
        //     }
        // });
        // if (filterHtml != '' && il > 1) filterHtml += '<a class="filter-clear mt-4 text-decoration-underline mx-3" onclick="clearAll()">Clear All</a>';
        // $("#filterTabs").html(filterHtml);
        getFilteredProjects();
        // if (!t) $("#closefilter").click();
    }

    function removeFilter(filterId, obj) {
        console.log("Free First", filterId);
        console.log("Free Second", obj);
        $(obj).parent().remove();
        $('#' + filterId).click();
        // if ($('ul #categories').find('li').length == 0) $('ul #categories').parent().hide();
        // if($('ul #bids').find('li').length == 0) $('ul #bids').parent().hide();
        // if($('ul #experiences').find('li').length == 0) $('ul #experiences').parent().hide();
        // if($('ul #budgets').find('li').length == 0) $('ul #budgets').parent().hide();
        // if($('div.selection ul li.selected:visible').length == 0) $('div.selection').hide();
        // // getFilteredProjects();
        // applyFilter();
    }

    // For Sorting Filters
    $('label.fund-label').click(function() {
        sortDirection = $(this).data('sort-direction');
        getFilteredProjects();
    })

    function clearAll() {
        $(".filter-listing input[type='checkbox']:checked").click();
        applyFilter();
    }
    $('.search-clear').click(_ => {
        if ($('.searchStr').val().length != 0) {
            searchStr = '';
            $('.searchStr').val('');
            getFilteredProjects();
        }

    });

    var clearDataButton = 0;
    $('#clearAllFilters').click(function () {
        $(".category input[type='checkbox']:checked").click();
        $('.selected').hide();
        // $('.no-result-box').remove();
        getFilteredProjects();
            $('div .selection').hide();
        
    });
    
    // $('li.selected-topic').click(function() {
    //    let removedFilter = $(this).html();
    //    $(this).hide();


    // })

    let skill = '';
    let sortDirection = '';

    function getFilteredProjects() {
        // filters = {};
        // let filteredValue = 0;
        // let filterTypeValue = '';
        // console.log("This is checkbox", $(event.target).is(':checkbox'));
        // if ($(event.target).is(':checkbox')) {
        // $('div .selection').show();
        // $('li.selected-topic').remove();
        
        // $("input[type='checkbox']").each(function(i, e) {
        //     if ($(e).prop("checked")) {
        //         // console.log("Prent :", e.name);
        //         $(`#${e.name}`).parent().show();
        //         filterTypeValue = `<li class="selected-topic" id="${e.name}_${i}">${e.value}<a onclick="removeFilter('${$(this).attr('id')}',this)">✖</a></li>`
        //         $(`#${e.name}`).append(filterTypeValue);
        //         if (filters[e.name]) {
        //             filters[e.name].push(e.value);
        //         } else {
        //             filters[e.name] = [e.value];
        //         }
        //         filteringDone = true;
        //         sortDirection = 'newest';
        //         filteredValue++;
        //     }
        // });
    // }
      $.ajax({
            url: "{{ route('projectFilter') }}",
            type: "post",
            data: {
                sort,
                page,
                skill,
                // searchLocation,
                sortDirection,
                filters,
                "_token": $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json',
            success: function(res) {
                // console.log(res);
                // if(filteredValue > 0) {
                //     $('#clearAllFilters').show();
                //     clearDataButton++;
                // }
                html = '';
                if (res.length) {
                    $('.no-result-box').remove();
                    res.map(function(e) {
                        html += `
                        <li class="list-box float-start w-100">
                        <div class="list-text float-start">
                            <div class="bid-data">
                                <div class="bid-head">
                                    <p class="posted-time"> Posted ${postedProjectTime(e.created)}</p>
                                    <label class="list-text-head " onclick="showLoginPopup()">
                                    ${e.topic}
                                    </label>
                                </div>
                                <div class="bid-price-data">
                                    <p class="bid-price">
                                    ${e.price}
                                    </p>
                                    <span class="price-title">Fixed Price</span>
                                </div>
                            </div>


                            <p class="list-text-p">
                            ${e.description.replace(/(<([^>]+)>)/gi, "")}
                            </p>
                            <div class="bid-detail-section">
                                <div class="bid-para">
                                    <ul class="ps-0">
                                        <li class="list-text-bid">
                                            <span class="bid-title">Bid</span>
                                            <span class="bid-value">
                                            ${e.bids}
                                            </span>
                                        </li>
                                        <li class="list-text-bid ">
                                            <span class="bid-title bid-warning">Bid Before</span>
                                            <span class="bid-value">
                                            ${dateFormat(e.bid_expiry_date)}
                                            </span>
                                        </li>
                                        <li class="list-text-bid ">
                                            <span class="bid-title bid-danger">Deadline</span>
                                            <span class="bid-value">
                                            ${dateFormat(e.deadline_date)}
                                            </span>
                                        </li>
                                    </ul>
                                </div>  
                                <div class="list-btn float-end">
                           
                                    <a href="url('/project-detail/'${btoa(e.id)}" class="btn bid-btn">Details</a>`;
                        
                        // else {
                        //     html += `<button class="btn bid-btn " onclick="showLoginPopup()" type="submit">Bid Now</button>`;
                        // }url('/project-detail/'.base64_encode($project->id)) ?>
                        html += `
                                </div>
                                </div>  
                                </div>  
                            </li>`;
                    });
                } else {
                    html += `<li class="no-result-box float-start w-100">
                    <img src="images/noresult.png" alt="no result found">
                                <div class="no-result-text">
                                    No Projects Found!
                                </div>
                            </li>`;
                }

                page == 1 ? $(".searchlist").html(html) : $(".searchlist").append(html);
                $(".loader").hide();
                res.length < 5 ? $(".loadMore").hide() : $(".loadMore").show().text("Explore More Projects");
            }
        })
    }
    $(document).click(function(e) {
        // if ($(e.target).hasClass("dropdown") && !$(e.target).parent().find('.dropdown-menu').hasClass('show')) {
        //     $(e.target).parent().find('.dropdown-menu').addClass('show');
        // } else {
        //     $('.dropdown-menu').removeClass('show');
        // }
        if($(e.target).hasClass("sort-dropdown") && !$(e.target).parent().find('.sorting').hasClass('show')){
            $(e.target).parent().find('.sorting').addClass('show');
        }else{
            $('.sorting').removeClass('show');
        }
    });
    $(".filter-listing input[type='checkbox']").click(function() {
        $('.applyButton').removeClass('disabled');
        if ($(".filter-listing input[type='checkbox']:checked").length == 0) {
            $('.applyButton').addClass('disabled');
        }
    });
    $(".filter-btn, .report-btn").click(function() {
        $(".filter-checkbox, .bid-now-content").animate({
            right: "0"
        });
    });
    $("#closefilter, #closemodal").click(function() {
        $(".filter-checkbox, .bid-now-content").animate({
            right: "-100%"
        });

    });
   
    const dropdownBtns = document.querySelectorAll('.selectBox');
    const dropdownMenus = document.querySelectorAll('.list-wrapper');
    dropdownBtns.forEach((btn, index) => {
        btn.addEventListener('click', function() {
            btn.classList.toggle('active');
            dropdownMenus[index].classList.toggle('active');
            if (dropdownMenus[index].classList.contains('active')) {
                dropdownMenus[index].style.maxHeight = dropdownMenus[index].scrollHeight + 'px';
            } else {
                dropdownMenus[index].style.maxHeight = '0';
            }
        });
    });
    document.addEventListener('click', function(event) {
        dropdownMenus.forEach((menu, index) => {
            if (!menu.contains(event.target) && !dropdownBtns[index].contains(event.target)) {
                dropdownBtns[index].classList.remove('active');
                menu.classList.remove('active');
                menu.style.maxHeight = '0';
            }
        });
    });
    $(".filter-click").click(function() {
        $(".filters").animate({
            right: "-0%"
        });
        $('body').css('overflow', 'hidden');
        $('.overlaypp').addClass('overlay');
    });
    //  if (!$(e.target).hasClass('filters') && !$(e.target).parents('div').hasClass('filters') && !$(e.target).hasClass('sort_by')) 
    $(document).on('click', ".filters", function(e) {
        if ($(e.target).hasClass('close-filter')) {
            $(this).animate({
                right: "-100%"
            });
            $('body').css('overflow', 'inherit');
            $('.overlaypp').removeClass('overlay');
        }
    });

        function postedProjectTime(dateStr) {
            var date = new Date(dateStr);
            var now = new Date();
            var diffMs = now - date;
            var diffHours = diffMs / (1000 * 60 * 60);

            if (diffHours < 12) {
                var diffMins = Math.round(diffMs / (1000 * 60));
                if (diffMins < 60) {
                return diffMins + ' minutes ago';
                } else {
                var diffHrs = Math.floor(diffMins / 60);
                var diffMinsRem = diffMins % 60;
                return diffHrs + ' hour ' + diffMinsRem + ' mints ago';
                }
            } else {
                var day = date.getDate();
                var suffix = getDaySuffix(day);
                var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                var month = monthNames[date.getMonth()];
                var year = date.getFullYear();
                return day + suffix + ' ' + month + ' ' + year;
            }
        }

        function getDaySuffix(day) {
                switch (day) {
                    case 1:
                    case 21:
                    case 31:
                    return 'st';
                    case 2:
                    case 22:
                    return 'nd';
                    case 3:
                    case 23:
                    return 'rd';
                    default:
                    return 'th';
                }
                }

</script>


@endsection