@extends('user.layouts.master')
@section('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;
        }
    </style>
@endsection
@section('user-content')

    <!-- Row -->
    <div class="row mt-4">
        <div class="col-xl-3 col-lg-3 col-md-12">
            <div class="card no-box-shadow box-widget widget-user client-need-bg-color">
                <div class="widget-user-image mx-auto mt-5">
                    <a href="{{route('user.user-profile', $job->user_id)}}">
                        @if(file_exists(user_image($job->user_id)))
                            <img alt="{{ user_name($job->user_id) }}" class="rounded-circle" src="{{ URL::to(user_image($job->user_id)) }}" width="70px" height="70px">
                        @else
                            <img class="rounded-circle" src="{{ asset('frontend/img/user.png') }}" alt="User Image" width="70px" height="70px">
                        @endif
                    </a>
                </div>
                <div class="card-body text-center">
                    <div class="pro-user">
                        <h4><a class="pro-user-username mb-1 font-weight-bold text-white" href="{{route('user.user-profile', $job->user_id)}}">{{ user_name($job->user_id) }}</a></h4>
                        @if(user_activity($job->user_id) == 1)
                            <h6 class="pro-user-username mb-1 font-weight-bold text-success">Online</h6>
                        @else
                            <h6 class="pro-user-username mb-1 font-weight-bold text-danger">Offline</h6>
                        @endif
                        <div class="wideget-user-rating">
                            <a href="javascript:void(0);"><i class="fa fa-star text-warning"></i></a>
                            <a href="javascript:void(0);"><i class="fa fa-star text-warning"></i></a>
                            <a href="javascript:void(0);"><i class="fa fa-star text-warning"></i></a>
                            <a href="javascript:void(0);"><i class="fa fa-star text-warning"></i></a>
                            <a href="javascript:void(0);"><i class="fa fa-star-o text-warning me-1"></i></a> <span class="text-light">0 (0 Reviews)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-9 col-lg-9 col-md-12">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="progress progress-md">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-green" style="width: {{ this_job_complet_rate($job->id) }}%">{{ this_job_complet_rate($job->id) }}%</div>
                            </div>
                            <h6 class="text-center mt-2">{{ complete_work_this_job($job->id) }} of {{ $job->worker_need }}</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h2>
                                <strong>You Can Earn: </strong> {{ $job->each_worker_earn }}$ <a href="{{ route('user.job-hide',$job->id) }}" class="btn btn-sm btn-danger pull-right">Hide</a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
            <form action="{{ route('user.job-work-post') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="main-content-body main-content-body-profile card">
                    <div class="card-header">
                        <h3 class="card-title">{{ $job->title }}</h3>
                    </div>
                    <div class="main-profile-body">
                        <div class="card-body">
                            <div class="main-profile-bio mb-5">
                                <img src="{{ URL::to($job->thumbnail_image) }}" width="100%" height="350px" alt="">
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-12">
                                    <i class="ti-bookmark-alt text-success"></i> Id: {{ $job->code }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-12">
                                    <i class="ti-location-pin text-success"></i> {{ country($job->location_zone_country) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-12">
                                    <i class="ti-write text-success"></i> {{ sub_category($job->sub_category) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">What is expected from workers?</h3>
                    </div>
                    <div class="card-body">
                        {{ specific_task($job->id) }}
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">REQUIRED PROOF THAT TASK WAS FINISHED?</h3>
                    </div>
                    <div class="card-body">
                        {{ $job->required_proof }}
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">SUBMIT REQUIRED WORK PROOF</h3>
                    </div>
                    <div class="card-body">
                        <input type="hidden" name="job_id" value="{{ $job->id }}">
                        <textarea class="form-control" maxlength="200" plceholder"Maximum 200 characters" name="work_proof" id="" cols="30" rows="4" required></textarea>
                    </div>
                </div>

                @for ($i = 1; $i <= $job->required_screenshots; $i++)
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">UPLOAD SCREENSHOT PROOF {{ $i }}</h3>
                        </div>
                        <div class="card-body">
                            <input type="file" id="screen_shot_select_image_{{ $i }}" class="form-control" name="screenshot_proof[]" required accept="image/*" onchange="readURL('{{ $i }}');">
                            <div class="gallery-img">
                                <img class="mt-2" id="screen_shot_show_image_{{ $i }}" id="photo" src="#" style="display:none;" />
                            </div>
                        </div>
                    </div>
                @endfor

                <button type="submit" class="btn btn-lg btn-success mb-4">Submit</button>
            </form>
        </div>
    </div>
@endsection
@section('js')
    <script>
        function setAccount(account_id) {
            $('#deposit_account').val(account_id);

            $.ajax({
                url: "{{ route('user.deposit-account-info') }}",
                type: "POST",
                data: {
                    _token: '{{ 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);
            }
        }

    </script>
@endsection