<title>Find Job - Best Leearning</title>

<?php $__env->startSection('css'); ?>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
    <link rel="stylesheet" href="https://akotamicrojobs.net/.com/resources/css/argon.css" type="text/css">
    <link rel="stylesheet" href="https://akotamicrojobs.net/resources/css/myapp.css" type="text/css">
   <!-- <link href="<?php echo e(asset('frontend/user/assets/css/custom.css')); ?>" rel="stylesheet" />-->

    <style>
        
        .job_title{
            font-weight: 700;
            font-size: 18px;
        }
        .job-list-body{
            padding: 8px !important;
            border-radius: 5px !important;
            border: 1px solid #eaeaea !important;
            background-color: #d6ebf1 !important;
        }
        .job-area {
          background: #fff;
          margin: 6px;
          border-radius: 5px;
          height: 73px;
          transition: border-left 0.3s ease;
    
        }
        
        .job-area:hover {
         -webkit-box-shadow: 0 8px 20px 0 rgba(30, 144, 255, 0.7);
          border-left: 20px solid dodgerblue;
          margin: 8px;
        }

        .progress {
            height: 3px !important;
        }
        .boost-job-border{
            border-left: solid 5px;
        }
        .job-list-card-body{
            padding: 0.2rem 0.1rem 1.2rem 0.1rem;
        }
        .fs-12{
            font-size: 12px !important;
            color: #000000;
        }
        .fs-14{
            font-size: 14px !important;
        }
        .btn-sort{
            font-weight: 600;
            color: #008000;
            background-color: #d6ebf1;
            border-color: #008000;
        }
        .sm-show{
            display: none;
        }
        @media  screen and (min-width: 767px) {
            .job-area{
                height: 65px;
                align-items: center;
            }
            .justify-content-end {
                -webkit-box-pack: start !important;
                -ms-flex-pack: start !important;
                justify-content: flex-start !important;
            }
            .job-list-card-body{
                padding: 0px 100px;
            }
            .lg-show{
                display: none;
            }
            .sm-show{
                display: block;
            }
        }
        
        .bg-csyellow {
           background:#17a2b8;
        }

        .bg-csgreen {
           background:#22ab59;
        }
        
            .category-item-div {
            background-color: transparent;
            margin: 5px;
            padding: 4px;
            display: inline-block;
            border: 1px solid rgba(0, 0, 0, 0.2); 
            border-radius: 8px;
        }
        .category-item-div.selected-category {
            background-color: dodgerblue;
            color: white;
        }
        .country-item-div.selected-country {
            background-color: dodgerblue;
            color: white;
        }
        .selected {
            background-color: dodgerblue;
            color: white;
        }
        .country-item-div {
            background-color: transparent;
            margin: 5px;
            padding: 4px;
            display: inline-block;
            border: 1px solid rgba(0, 0, 0, 0.2); 
            border-radius: 8px;
        }
        .miine {
            height: 30px;
            line-height: 9px;
        }
        .list-filter {
            position: relative;
            z-index: 1;
        }

        .sort-options {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 10px;
            border-radius: 5px;
        }

        .sort-option {
            display: block;
            margin-bottom: 10px;
            cursor: pointer;
        }

        .sort-option:hover {
            color: blue;
        }
    </style>
           
    <style type="text/css">
        .mobileHide { display: inline; }
        
          @media  only screen
            and (min-device-width : 320px)
            and (max-device-width : 480px){
             .mobileHide { display: none;}
          }
   </style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('user-content'); ?>
<section>
<?php if(Auth::user()->status == 0): ?>
    <div class="alert alert-danger">
        <h2 class="text-white">ACCESS DENIED !</h2>
        <p class="mb-0">Your Account has been Banned.</p>
        <?php if(Auth::user()->reason): ?>
            <p style="font-weight: bold;"><span style="color: yellow;">Reason:-</span> <?php echo e(Auth::user()->reason); ?></p>
        <?php endif; ?>
        <!--<p>If you believe this is an error or need assistance, please contact our Support Team:</p>-->
        <a href="anandafreelancer689@gmail.com" class="btn btn-success" style="color: white">Appeal</a>
        <!--<a href="https://wa.me/message/2675O4UROHQ4N1" class="btn bg-black" style="color: white">Whatsapp Support</a>-->
    </div>
<?php else: ?>

    <div class="row justify-content-center">
        <div class="col-lg-10">

            <div class="card mt-2 job-list-body">
                <div class="responsive-wrapper-block mt-2">
                <!--<div class="card-header text-center justify-content-center d-flex gap-2">-->
                    <button type="button" id="#sort_category_id" class="btn btnsm btn-info responsive-margin button" data-bs-target="#category_modal" data-bs-toggle="modal">Select Category</button>
                    <button type="button" id="#sort_country_id" class="btn btnsm btn-info responsive-margin button" data-bs-target="#country_modal" data-bs-toggle="modal">Select Location</button>
                </div>
                <div class="results-bar d-flex align-items-center justify-content-between flex-wrap">
                    <p class="mb-0 mr-4"><span id="total-result-feed-filter"></span></p>
                    <div class="d-flex flex-wrap">
                        <div class="list-filter">
                            <a class="dropdown-toggle btn btn-link" href="#" role="button" id="dropdownMenuCountery" onclick="toggleSortOptions()">
                                <span class="sort-by-feed-label" style="color:green"><b>Sort</b> <i class="fas fa-angle-down"></i></span>
                            </a>
                            <div class="sort-options">
                                <div class="sort-option" onclick="selectButton('Recent Job'); recentJobs();">Recent Job</div>
                                <div class="sort-option" onclick="selectButton('Highest Pay'); heighPayingJobs();">Highest Paying</div>
                            </div>
                        </div>
                    </div>
                </div>
            
                <!--<div class="">-->
                    <div id="job-content-area">
                        <?php if(boost_jobs()->count() > 0): ?>
                            <?php $__currentLoopData = boost_jobs(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$boost_job): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php
                                    $job = find_job($boost_job->job_id);
                                ?>
                                <?php if($job && $job->worker_need > $job->worker_confirmed && $job->worker_need > complete_work_this_job($job->id) && work_by_me($job->id) == 0 && this_job_for_me($job->id) == 1 && boost_active($job->id) == 1): ?>
                                    <a href="<?php if(Auth::user()->status == 0): ?> javascript:; <?php else: ?> <?php echo e(route('job-details', $job->code)); ?> <?php endif; ?>" <?php if(Auth::user()->status == 0): ?> onclick="return alert('Your Account is blocked! Please Contact with authority!')" <?php endif; ?>>
                                        <div class="border p-1 mb-2 row job-area">
                                            <div class="col-lg-4 col-md-5 col-12 job_title" style="color: <?php if(this_job_complet_rate($job->id) <= 95): ?> black <?php else: ?> #2ECC71 <?php endif; ?>; font-weight: 500; font-size: 16px;"><?php echo e($job->title); ?></div>
                                                <div class="col-lg-6 col-md-5 col-8">
                                                    <div class="row m-0 justify-content-end">
                                                        <div class="col-lg-6 col-md-5 col-6">
                                                            <div class="text-center mx-auto">
                                                                <h6 class="mt-1" style="color: black; font-size: 10px; font-weight: 250;">
                                                                    <?php echo e(complete_work_this_job($job->id)); ?> OF <?php echo e($job->worker_need); ?>

                                                                </h6>
                                                                <div class="progress progress-md p-0">
                                                                    <div class="progress-bar progress-bar-striped progress-bar-animated <?php if(this_job_complet_rate($job->id) <= 50): ?> bg-csyellow <?php else: ?> bg-csgreen <?php endif; ?>" style="width: <?php echo e(this_job_complet_rate($job->id)); ?>%"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <!--<div class="col-lg-2 col-md-2 col-4 text-center text-success"><h5 style="color: #2ECC71; font-size:15px;"><?php echo e($job->each_worker_earn); ?> $</h5></div>-->
                                                <div class="col-lg-2 col-md-2 col-4 text-center text-success">
                                                    <h5 style="color: #2ECC71; font-size: 15px;">
                                                        <?php echo e(number_format($job->each_worker_earn, 3)); ?> $
                                                    </h5>
                                                </div>
                                        </div>
                                    </a>
                                <?php endif; ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php endif; ?>
                        
                        
                        <?php
                            $last_id = '';
                        ?>
                        <?php $__currentLoopData = $jobs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$job): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php if($job->worker_need > $job->worker_confirmed && $job->worker_need > complete_work_this_job($job->id) && work_by_me($job->id) == 0 && work_for_me($job->id) == 1 && $job->pause == 0): ?>
                                <?php
                                    $last_id = $job->id;
                                ?>
                                <a href="<?php if(Auth::user()->status == 0): ?> javascript:; <?php else: ?> <?php echo e(route('job-details', $job->code)); ?> <?php endif; ?>" <?php if(Auth::user()->status == 0): ?> onclick="return alert('Your Account is blocked! Please Contact with authority!')" <?php endif; ?>>
                                    <div class="border p-1 mb-2 row job-area">
                                        <div class="col-lg-4 col-md-5 col-12 job_title" style="color: <?php if(this_job_complet_rate($job->id) <= 95): ?> black <?php else: ?> #2ECC71 <?php endif; ?>; font-weight: 500; font-size: 16px;"><?php echo e($job->title); ?></div>
                                            <div class="col-lg-6 col-md-5 col-8">
                                                <div class="row m-0 justify-content-end">
                                                    <div class="col-lg-6 col-md-5 col-6">
                                                        <div class="text-center mx-auto">
                                                            <h6 class="mt-1" style="color: black; font-size: 10px; font-weight: 250;">
                                                                <?php echo e(complete_work_this_job($job->id)); ?> OF <?php echo e($job->worker_need); ?>

                                                            </h6>
                                                            <div class="progress progress-md p-0">
                                                                <div class="progress-bar <?php if(this_job_complet_rate($job->id) <= 50): ?> bg-csyellow <?php else: ?> bg-csgreen <?php endif; ?>" style="width: <?php echo e(this_job_complet_rate($job->id)); ?>%"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        <!--<div class="col-lg-2 col-md-2 col-4 text-center text-success"><h5 style="color: #2ECC71; font-size:15px;"><?php echo e($job->each_worker_earn); ?> $</h5></div>-->
                                            <div class="col-lg-2 col-md-2 col-4 text-center text-success">
                                                <h5 style="color: #2ECC71; font-size: 15px;">
                                                    <?php echo e(number_format($job->each_worker_earn, 3)); ?> $
                                                </h5>
                                            </div>
                                    </div>
                                </a>
                            <?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    
    
                        <div id="job-feeds-filter" class="mt-3"></div>
                        <div style="text-align: center;">
                            <input type="hidden" id="last_id" value="<?php echo e($last_id); ?>">
                            <button type="button" class="btn btn-sm btn-success" id="load_more_btn" onclick="loadMoreJob()">More Job</button>
                            <h6 id="no_more_jobs_text" style="display: none; color: black; font-weight: bold;">No More Jobs Found!</h6>
                        </div>
                    </div>
           </div>
       </div>
   </div>

        <div class="modal fade" id="country_modal">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content modal-content-demo">
                    <div class="modal-header">
                        <h6 class="modal-title">Select Location</h6>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" value="" id="sort_country_id">
                        <?php $__currentLoopData = $continents; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$continent): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <button type="button" class="btn country-item-div m-2" id="country_<?php echo e($continent->id); ?>" onclick="setCountryForSort(<?php echo e($continent->id); ?>)"><?php echo e($continent->name); ?></button>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary bg-black text-white" data-bs-dismiss="modal" type="button" onclick="refreshPage()">Clear</button>
                        <button class="btn btn-primary" type="button" onclick="applySortByCountry()">Apply</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="category_modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content modal-content-demo">
                    <div class="modal-header">
                        <h6 class="modal-title">Select Category</h6>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body select-category-filter">
                        <input type="hidden" value="" id="sort_category_id">
                        <?php $__currentLoopData = $categorys; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <button type="button" class="btn category-item-div m-2" id="category_<?php echo e($category->id); ?>" onclick="setCategoryForSort(<?php echo e($category->id); ?>)"><?php echo e($category->name); ?></button>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary bg-black text-white" data-bs-dismiss="modal" type="button" onclick="refreshPage()">Clear</button>
                        <button class="btn btn-primary" type="button" onclick="applySortByCategory()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="modal fade" id="sort_modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content modal-content-demo">
                    <div class="modal-header">
                        <h6 class="modal-title">Sort Jobs</h6><button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body">
                        <button type="button" class="btn category-item-div" onclick="selectButton(this, 'recentJobs')">Recent Job</button>
                        <button type="button" class="btn category-item-div" onclick="selectButton(this, 'heighPayingJobs')">Height Paying</button>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary bg-black text-white" data-bs-dismiss="modal" type="button" onclick="refreshPage()">Clear</button>
                    </div>
                </div>
            </div>
        </div>

<?php endif; ?>
</section>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('js'); ?>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="<?php echo e(asset('frontend/user/assets/js/my_custom.js')); ?>"></script>
    <script>
        function toggleSortOptions() {
            var sortOptions = document.querySelector('.sort-options');
            sortOptions.style.display = (sortOptions.style.display === 'block') ? 'none' : 'block';
        }

        function selectButton(option) {
            var sortLabel = document.querySelector('.sort-by-feed-label');
            sortLabel.innerText = option;
            toggleSortOptions();
            // You can add additional logic here based on the selected option
        }
        
        function setCategoryForSort(id) {
            // Remove the 'selected-category' class from all buttons
            $('.category-item-div').removeClass('selected-category');
        
            // Add the 'selected-category' class to the clicked button
            $('#category_' + id).addClass('selected-category');
        
            // Set the selected category ID to the hidden input
            $('#sort_category_id').val(id);
        }

        function applySortByCategory() {
            $('#job-content-area').empty();
            var category_id = $('#sort_category_id').val();
        
            if (category_id == '') {
                alert('Please select category');
            } else {
                $.ajax({
                    url: "<?php echo e(route('user.get-job-category-wise')); ?>",
                    type: "POST",
                    data: {
                        category_id: category_id,
                        _token: '<?php echo e(csrf_token()); ?>',
                    },
                    success: function (data) {
                        $('#job-content-area').html(data);
                        $('#category_modal').modal('hide');
                    },
                });
            }
        }

        function setCountryForSort(id) {
            // Remove the 'selected-country' class from all buttons
            $('.country-item-div').removeClass('selected-country');
        
            // Add the 'selected-country' class to the clicked button
            $('#country_' + id).addClass('selected-country');
        
            // Set the selected country ID to the hidden input
            $('#sort_country_id').val(id);
        }

        function applySortByCountry() {
            $('#job-content-area').empty();
            var country_id = $('#sort_country_id').val();
        
            if (country_id == '') {
                alert('Please select country');
            } else {
                $.ajax({
                    url: "<?php echo e(route('user.get-job-country-wise')); ?>",
                    type: "POST",
                    data: {
                        country_id: country_id,
                        _token: '<?php echo e(csrf_token()); ?>',
                    },
                    success: function (data) {
                        $('#job-content-area').html(data);
                        $('#country_modal').modal('hide');
                    },
                });
            }
        }


        function recentJobs(){
            $.ajax({
                url: "<?php echo e(route('user.get-recent-job')); ?>",
                type:"POST",
                data:{
                    _token: '<?php echo e(csrf_token()); ?>',
                },
                success:function(data) {
                    $('#job-content-area').html(data);
                    $('#sort_modal').modal('hide');
                },
            });
        }
        
        function heighPayingJobs(){
            $.ajax({
                url: "<?php echo e(route('user.get-heigh-cost-job')); ?>",
                type:"POST",
                data:{
                    _token: '<?php echo e(csrf_token()); ?>',
                },
                success:function(data) {
                    $('#job-content-area').html(data);
                    $('#sort_modal').modal('hide');
                },
            });
        }

        function loadoreJob(){
            var last_id = $('#last_id').val();
            $.ajax({
                url: "<?php echo e(route('user.get-load-more-job')); ?>",
                type:"POST",
                data:{
                    last_id: last_id,
                    _token: '<?php echo e(csrf_token()); ?>',
                },
                success:function(data) {
                    if(data['html'] == ''){
                        $('#load_more_btn').hide();
                    }else{
                        $('#job-content-area').append(data['html']);
                        $('#last_id').val(data['last_id']);
                    }
                },
            });
        }
        
        function refreshPage() {
            location.reload();
          }
  
        //let selectedButton = null;

        //function selectButton(button, category) {
        //    if (selectedButton) {
        //        selectedButton.classList.remove('selected');
        //    }
    
        //    button.classList.add('selected');
        //    selectedButton = button;
    
        //    if (category === 'recentJobs') {
        //        recentJobs();
        //    } else if (category === 'heighPayingJobs') {
        //        heighPayingJobs();
        //    }
        //}
        
        function loadMoreJob() {
            document.getElementById('load_more_btn').style.display = 'none';
            document.getElementById('no_more_jobs_text').style.display = 'block';
        }
    </script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('user.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/mhmaicro/public_html/resources/views/user/pages/home.blade.php ENDPATH**/ ?>