<title>Job Submit - 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/resources/css/argon.css" type="text/css">
    <link rel="stylesheet" href="https://akotamicrojobs.net/resources/css/myapp.css" type="text/css">
    <link rel="stylesheet" href="https://akotamicrojobs.net/resources/css/bttn.css" type="text/css">
    <style>
        .gallery-img {
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100% - 64px);
            padding-top: 0;
            width: 100%;
            padding: 0 50px;
        }
        .gallery-img img {
            width: 100%;
            height: auto;
            max-height: 250px;
        }
        .progress {
            height: 3px !important;
        }
        .bg-csgreen {
            background:#22ab59;
        }
        ::selection {
            color: #fff;
            background: #ffad29;
        }

        .post_thumb_class {
            width: 90%;
            margin-bottom: 12px;
            border-radius: 4px;
            max-height: 400px;
        }
        .bg-csyellow {
            background:#17a2b8;
        }
        .online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-left: -150px;
}

    </style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('user-content'); ?>

    <?php if(session('apply_success')): ?>
        <div class="alert alert-success" style="font-weight:bold;">
            <i class="fas fa-check"></i>
            <span id="applySuccessMessage" class="ms-3">Prove Submit Success</span>
            <button type="button" class="close" onclick="closeThesMessage()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    <?php endif; ?>
    
    <?php if(session('apply_error')): ?>
        <div class="alert alert-danger" style="font-weight:bold;">
            <i class="far fa-frown"></i>
            <span id="applyErrorMessage" class="ms-2">This Job Is Over!</span>
            <button type="button" class="close" onclick="closeThesMessage()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    <?php endif; ?>
    
     <div class="row card-wrapper">
        <div class="col-lg-8">
            <div class="row card-wrapper">
                <div class="col-sm-7">
                    <!-- Job Done Stats -->
                    <div class="card card-stats">
                        <div class="card-body" style="padding: 10px 10px 10px 20px !important">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">DONE</h5>
                                    <span class="h2 font-weight-bold mb-0"><?php echo e(complete_work_this_job($job->id)); ?> of <?php echo e($job->worker_need); ?></span>
                                    <div class="progress progress-xs mb-0" style="width: 70%;margin-top: 5px">
                                        <div class="progress-bar <?php if(this_job_complet_rate($job->id) <= 50): ?> bg-csyellow <?php else: ?> bg-csgreen <?php endif; ?>" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo e(this_job_complet_rate($job->id)); ?>%;"></div>
                                    </div>
                                    <p class="mt-3 mb-0 text-sm"></p>
                                </div>
                                <div class="col-auto" style="line-height: 73px;">
                                    <div class="icon icon-shape text-white rounded-circle shadow" style="background: <?php echo e(this_job_complet_rate($job->id) <= 50 ? '#17a2b8' : '#fec30f'); ?>">
                                        <i class="fas fa-check"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-5">
                    <!-- Earning $$ -->
                    <div class="card card-pricing border-0 text-center mb-4">
                        <div class="card-body">
                            <div>
                                <h5><span class="text-blue font-weight-bold" style="font-size: 22px;">YOU CAN EARN &nbsp;<span style="color:#1D8348;">$<?php echo e(number_format($job->each_worker_earn, 3)); ?></span></span></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <form action="<?php echo e(route('user.job-work-post')); ?>" method="POST" enctype="multipart/form-data">
				<?php echo csrf_field(); ?>                
                <!-- Job Details -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="h3 mb-0" style="color: black;">
                            <?php echo e($job->title); ?>

                            <div class="text-right">
                                <a class="btn btn-sm btn-outline-danger" href="<?php echo e(route('user.job-hide', $job->id)); ?>" onclick="return confirm('Are you sure you want to hide this job?')">Hide</a>
                            </div>
                        </h5>
                    </div>
                   <div class="card-body">
                      <div style="text-align:center">
						<?php if(!empty($job->thumbnail_image)): ?>
                         <img class="post_thumb_class" src="<?php echo e(URL::to($job->thumbnail_image)); ?>" width="100%" height= "350px">
						<?php endif; ?>
                      </div>
                      <div class="row">
                             <div class="col-sm-6">
                                <b>
                                   <h5>
                                      <span style="padding: 5px" class="card-text text-muted text-green">
                                      <i class="fa fa-briefcase" aria-hidden="true"></i> <?php echo e($job->code); ?></span>
                                   </h5>
                                </b>
                             </div>
                             <div class="col-sm-6">
                                <b>
                                   <h5>
                                      <span style="padding: 5px" class="card-text text-muted">
                                      <i class="fas fa-globe"></i> <?php echo e(continent($job->continent_id)); ?></span>
                                   </h5>
                                </b>
                             </div>
                             <div class="col-sm-6">
                                <b>
                                   <h5>
                                      <span style="padding: 5px" class="card-text text-muted"> <i class="fas fa-cogs"></i> <?php echo e(category($job->category_id)); ?> - <?php echo e(sub_category($job->sub_category)); ?></span>
                                   </h5>
                                </b>
                             </div>
                             <div class="col-sm-6">
                                <b>
                                   <h5>
                                      <span style="padding: 5px" class="card-text text-muted"> <i class="fas fa-clock"></i> Time <?php echo e($job->estimited_day); ?> Day</span>
                                   </h5>
                                </b>
                             </div>
                             <div class="col-sm-6">
                                <b>
                                   <h5>
                                      <span style="padding: 5px" class="card-text text-muted">Last Updated- <?php echo e(\Carbon\Carbon::parse($job->created_at)->format('d/m/Y g:i A')); ?></span>
                                   </h5>
                                </b>
                             </div>
                       </div>
                
                        <br>
                        <b> </b>
                        <h5>
                        <b>
                          <marquee style="color:red ;padding: 5px;border-radius: 5px;border:1px solid white" behavior="scroll" >Hello Sir, Please read carefully. Only accept this task if you understand the requirements 100% !
                          </marquee> </b>
                        </h5>
                         <p class="card-text text-uppercase text-muted font-weight-800"></p>
                              <h5><b><i class="fas fa-tasks"></i> What is expected from workers?</b></h5>
                           <div style="background:#f5f7fa;padding: 10px;border-radius:4px;" class="drk-bg-second">
                                 <p class="card-text font-weight-500"><?php echo specific_task($job->id); ?></p>
                           </div>
                   </div>
                </div>
				
                    <div class="card">
                        <div class="card-header">
                            <h5 class="h5 mb-0 text-uppercase text-muted font-weight-900">Required proof that task was finished?</h5></b>
                        </div>
                        <div class="card-body">
                            <?php echo e($job->required_proof); ?>

                        </div>
                    </div>
                
                    <?php if(site_info()->need_user_verification == 1 && Auth::user()->premium_status == 0): ?>
                        <div class="">
                            <a href="<?php echo e(route('user.account-upgrade-page')); ?>">
                                <div class="card bg-gradient-red">
                                    <div class="card-body">
                                        <h3 class="card-title text-white">Account Not Verified!</h3>
                                        <p class="text-white mb-0">Please verify your account for work.</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    <?php else: ?>
                        <?php if($mineJob): ?>
                            <div class="">
                                <div class="card bg-gradient-blue">
                                    <div class="card-body">
                                        <h3 class="card-title text-white">Dear <?php echo e(Auth::user()->name); ?> Sir,</h3>
                                        <p class="text-white mb-0">This is your Job.</p>
                                    </div>
                                </div>
                            </div>
                        <?php elseif($workReview): ?>
                           <?php $__currentLoopData = $datas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="">
                                    <div class="card <?php if($data->status == 1): ?> bg-gradient-green <?php elseif($data->status == 2): ?> bg-gradient-red <?php else: ?> bg-gradient-green <?php endif; ?>">
                                        <div class="card-body">
                                            <h3 class="card-title text-white"><?php if($data->status == 1): ?> Satisfied, <?php elseif($data->status == 2): ?> Unsatisfied,<br><small><?php echo e($data->reason); ?></small> <?php else: ?> In Review, <?php endif; ?></h3>
                                            <p class="text-white mb-0">You've Applied This Job! Check in My Works!</p>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php elseif($workLimitOver): ?>
                            <div class="">
                                <div class="card bg-gradient-orange">
                                    <div class="card-body">
                                        <h3 class="card-title text-white">Job Over,</h3>
                                        <p class="text-white mb-0">This Job Participant Is Full. Please Try Another Job!</p>
                                    </div>
                                </div>
                            </div>
                        <?php else: ?>
                            <div class="card">
                                <div class="card-header">
                                     <h4 class="h4 mb-0 text-uppercase text-muted font-weight-900">Submit required work Prove  <i class="fas fa-sort-alpha-down"></i></h4>
                                </div>
                                <div class="card-body">
                                    <input type="hidden" name="job_id" value="<?php echo e($job->id); ?>">
                                    <textarea class="form-control" maxlength="" plceholder="" name="work_proof" id="" cols="30" rows="4" required></textarea>
                                </div>
                            </div>
                        
                            <?php for($i = 1; $i <= $job->required_screenshots; $i++): ?>
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="h5 mb-0 text-uppercase text-muted font-weight-900"><span
                                    class="badge badge-dark text-white">#<?php echo e($i); ?></span> Upload Screenshot Prove  <i class="fas fa-file-download"></i></h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="custom-file">
                                            <input type="file" 
                                               class="custom-file-input" 
                                               id="screen_shot_select_image_<?php echo e($i); ?>" 
                                               name="screenshot_proof[]" 
                                               accept="image/x-png,image/jpg,image/jpeg" 
                                               onchange="readURL('<?php echo e($i); ?>');" 
                                               lang="en">
                                        <img id="imagePreview_<?php echo e($i); ?>" style="display:none; max-width:100px; max-height:100px;" />
                                        <small class="text-danger" id="file-error_<?php echo e($i); ?>"></small>


                                            <label class="custom-file-label" for="sshotUpload1"><i class="far fa-images"></i></label>
                                        </div>
                                        <div style="text-align: center;"><img class="rounded border-dark" style="margin-top: 10px;max-height: 200px;" width="150px" id="screen_shot_show_image_<?php echo e($i); ?>"></div>
                                    </div>
            
                                </div>
                            <?php endfor; ?>
                
                            <div class="text-right mb-4">
                                 <button type="submit" style="" class="btn btn-outline-info bttn"><i class="fas fa-check"></i> Submit</button>
                            </div>
                        <?php endif; ?>
                    <?php endif; ?>
                
            </form>
       </div>        
       <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
						<?php if(file_exists(user_image($job->user_id))): ?>
                            <img src="<?php echo e(URL::to(user_image($job->user_id))); ?>" class="rounded-circle img-center img-fluid shadow shadow-lg--hover" style="width:100px;height:100px">
                        <?php else: ?>
						    <img class="rounded-circle img-center img-fluid shadow shadow-lg--hover" style="width:100px;height:100px" src="<?php echo e(asset('frontend/img/user.png')); ?>">
						<?php endif; ?>
                    <div class="pt-4 text-center">
                        <h5 class="h3 title">
                            <a href="<?php echo e(route('user.user-profile', $job->user_id)); ?>"><span class="d-block mb-1">
								<?php echo e(user_name($job->user_id)); ?>

								<?php if(user_activity($job->user_id) == 1): ?>
								   <small class="text-muted"><i><span style="color:#239B56;">Active </span></i></small> </span>
								<?php else: ?>
								   <small class="text-muted"><i><span style="color:#e42f06;">Offline </span></i></small> </span>
								<?php endif; ?>
                            </a>
                          <p class="jobholder-rating"><span style="background: #eaeaea; border-radius: 5px; padding: 2px 5px 2px 5px"><?php echo e(user_work_rating($job->user_id)); ?> Reviews (<?php echo e(user_rating($job->user_id)); ?>) <?php if(user_rating($job->user_id) >= 2.5): ?><i class="fa fa-star checked" style="color:#F37205"></i><?php endif; ?></span></p>

                          <small class="h4 font-weight-light text-muted">Since <?php echo e(\Carbon\Carbon::parse(Auth::user()->created_at)->format('j M y')); ?></small>
                        </h5>
                    </div>
                </div>
            </div>
        </div>
   </div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('js'); ?>

    <script>
        function setAccount(account_id) {
            $('#deposit_account').val(account_id);

            $.ajax({
                url: "<?php echo e(route('user.deposit-account-info')); ?>",
                type: "POST",
                data: {
                    _token: '<?php echo e(csrf_token()); ?>',
                    account_id: account_id,
                },
                success: function(data) {
                    $('#deposit_area').show();
                    $('#deposit_account_text').html('Account No: ' + data['account_no']);
                    $('#deposit_account_guideline').html(data['guideline']);
                },
            });
        }

        function readURL(id){
            var file = $('#screen_shot_select_image_'+id).get(0).files[0];
            console.log(file);
            if(file){
                $('#screen_shot_show_image_'+id).show();
                var reader = new FileReader();

                reader.onload = function(){
                    $('#screen_shot_show_image_'+id).attr("src", reader.result);
                }

                reader.readAsDataURL(file);
            }
        }
        
        function closeApplyMessage() {
            var applyMessage = document.querySelector('.alert-danger');
            applyMessage.style.display = 'none';
        }
        
        function closeThesMessage() {
            var successMessage = document.getElementById('applySuccessMessage');
            var errorMessage = document.getElementById('applyErrorMessage');
    
            if (successMessage) {
                successMessage.parentNode.style.display = 'none';
            }
    
            if (errorMessage) {
                errorMessage.parentNode.style.display = 'none';
            }
        }
    function readURL(index) {
    var fileInput = document.getElementById('screen_shot_select_image_' + index);
    var file = fileInput.files[0];
    var errorElement = document.getElementById('file-error_' + index);
    var previewElement = document.getElementById('imagePreview_' + index);

    // Clear previous error and hide the preview initially
    errorElement.textContent = "";
    previewElement.style.display = "none";

    if (file) {
        // Validate file size (max 1MB)
        if (file.size > 1048576) { // 1MB in bytes
            errorElement.textContent = "File size must be less than or equal to 1MB.";
            fileInput.value = ""; // Clear the input
            return;
        }

        // Show image preview
        var reader = new FileReader();
        reader.onload = function (e) {
            previewElement.src = e.target.result;
            previewElement.style.display = "block";
        };
        reader.readAsDataURL(file);
    }
}

    </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/job-details.blade.php ENDPATH**/ ?>