<title>My Works - Best Leearningk</title>
@extends('user.layouts.master')
@section('css')
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
    <link rel="stylesheet" href="https://www.powerworkerearn.com/resources/css/argon.css?v=1.1.0" type="text/css">
    <link rel="stylesheet" href="https://www.powerworkerearn.com/resources/css/myapp.css" type="text/css">
    
    <style>
    
        .shadow-sm {
            display: none !important;
        }

        .table th {
            background-color: rgba(250, 250, 250, 1); 
            color: #000066; 
            font-size: 12px;
        }

        .table-no-vertical-border th,
        .table-no-vertical-border td {
            border-left: none;  
            border-right: none;
            border-color: rgba(0, 0, 0, 0.1);
        }
        
        .table tbody tr:hover {
            cursor: pointer;
            opacity: 0.5;
        }

        .content {
            display: none;
        }
    
        .toggle-content {
            cursor: pointer;
            position: relative;
        }
    
        .toggle-content.active::after {
            content: '';
            display: block;
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 1px;
            background: dodgerblue; /* Your desired underline color */
        }
    </style>
@endsection
@section('user-content')

<div class="card mt-2 mb-4">
    <div class="card-header">
        <div class="card-title text-center" style="font-weight: 500; color:#2ECC71; font-size: 20px;">My Applied Tasks</div>
        <div class="card-title text-center"></div>
    </div>
    <div class="card-body">
        <div class="notice-box mb-2">
            <marquee bgcolor="transparent" style="color:green;padding: 5px;border-radius: 5px;border: 1px solid blue;margin-top: 5px" behavior="scroll">
                @foreach ($headlines as $key=>$headline)
                    <a href="{{ $headline->link }}" class="text-green" style="font-size:15px;">
                        <i class="fe fe-link me-2 green-text" aria-hidden="true"></i>{{ $headline->title }}
                    </a>
                    @if (!$loop->last)
                        <span class="mx-2">|</span>
                    @endif
                @endforeach
            </marquee>
        </div>
        @if ($datas->isEmpty())
                    <div class="text-center py-3">
                        <p>You Have No Applied Task</p>
                    </div>
        @else 
        <div class="table-responsive active">
            <table class="table table-bordered text-nowrap table-no-vertical-border align-items-center table-flush" id="example1">
                <thead class="thead-light">
                    <tr>
                        <!--<th scope="col border-bottom-0" width="5%">JOB ID</th>-->
                        <th scope="col border-bottom-0">TASK NAME</th>
                        <!--<th scope="col border-bottom-0">VIEW TASK</th>-->
                        <th scope="col border-bottom-0" width="8%" data-sort="">STATUS</th>
                        <th scope="col border-bottom-0" width="8%">EARNED</th>
                        <th scope="col border-bottom-0" width="8%">Action</th>
                        <th scope="col border-bottom-0" width="8%">DATE & TIME</th>
                        
                    </tr>
                </thead>
                <tbody>
                    @foreach ($datas as $key => $data)
                        <tr>
                            <!--<td>{{ $data->id }}</td>-->
                            <td>
                                <a href="javascript:;" onclick="sShoootMosdalOpen({{ $data->id }})" style="color: black">
                                    {{ job_title($data->job_id) }}
                                </a>
                            </td>
                            <td style="text-align: center;">
                                @if ($data->status == 1)
                                    <span class="badge badge-dot mr-4">
                                        <i class="bg-gradient-green"></i>
                                        <span class="text-black">Satisfied</span>
                                    </span>
                                @elseif ($data->status == 2)
                                    <span class="badge badge-dot mr-4">
                                        <i class="bg-gradient-red"></i>
                                        <span class="text-black">Unsatisfied</span>
                                    </span>
                                @elseif ($data->status == 3)
                                    <span class="badge bg-danger">Reported</span>
                                @else
                                    <span class="badge badge-dot mr-4">
                                        <i style="background-color: #F1C40F;"></i>
                                        <span class="text-black">Pending</span>
                                    </span>
                                @endif
                            </td>
                            
                            
                            @if ($data->status == 1)
                            <td>${{number_format(job_earning($data->job_id), 4)}}</td>
                            @else
                            <td style="text-align: center;">$0</td>
                            @endif
                            <td style="text-align: center;">
                                @if ($data->status == 2)
                                    <button type="button" class="btn btn-danger btn-sm" onclick="jobReport('{{ $data->id }}')">Report</button>
                                @else
                                    <span>🚫</span>
                                @endif
                            </td>
                            <td>
                                {{ \Carbon\Carbon::parse($data->created_at)->format('j M Y g:i A')}}
                            </td>
                        </tr>

                        <div class="modal fade" id="s_shoot_job_{{ $data->id }}" tabindex="-1" role="dialog" aria-labelledby="divisionEditModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <!-- Modal Content -->
                                    <div class="modal-header" style="color: green;">
                                        <h5 class="modal-title" id="exampleModalLabel">{{ job_title($data->job_id) }}</h5>
                                        <button type="button" class="close" data-dismiss="modal" onclick="sShoootMosdalClose({{ $data->id }})">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="modal-body mt-2">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-auto">
                                                        <!-- Avatar -->
                                                        <a href="#" class="avatar avatar-xl rounded-circle">
                                                            @if(optional(find_job($data->job_id))->user_id && optional(find_user(find_job($data->job_id)->user_id))->image)
                                                                <img alt="" class="rounded-circle" src="{{ URL::to(find_user(find_job($data->job_id)->user_id)->image) }}" id="userImageSeller" width="100px" height="78px">
                                                            @else
                                                                <img class="rounded-circle" src="https://powerworkerearn.com/frontend/img/user.png" id="userImageSeller" width="100px" height="78px">
                                                            @endif
                                                        </a>
                                                    </div>
                                                    <div class="col ml--2">
                                                        <h4 class="mb-0">
                                                            <span href="#!" id="modal-sell-name-default">{{ job_owner($data->job_id) }}</span>
                                                            <br>
                                                            <span style="color:green" id="modal-sell-jobinfo">Task-ID: {{ $data->id }}</span>
                                                            <p id="modal-dis-msg-default" class="font-weight-500" style="padding: 5px;margin-top: 10px;color: red;">{{ $data->reason }}</p>
                                                            <!--<p class="text-danger">{{ $data->reason }}</p>!-->
                                                        </h4>
                                                    </div>
                                                    <div class="col-auto">
                                                        <h2 id="modal-earned-default">${{number_format(job_earning($data->job_id), 4)}}</h2>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-header">
                                        <h5 class="modal-title text-muted toggle-content c-pointer active" data-target="proofSentContent">Prove Sent</h5>
                                        <h5 class="modal-title text-muted toggle-content c-pointer" data-target="requiredProofContent">Required Prove</h5>
                                    </div>
                                    <div class="modal-body">
                                        <!-- Proof Content -->
                                        <div id="proofSentContent" class="content" style="margin-top: 12px; display:block;">
                                            {{ $data->work_proof }}
                                        </div>
                                        <div id="requiredProofContent" class="content" style="margin-top: 12px">
                                            @if(find_job($data->job_id)){{find_job($data->job_id)->required_proof}}@endif
                                        </div>
                                    </div>
                                   <button type="button" class="btn btn-link ml-auto" data-dismiss="modal" onclick="sShoootMosdalClose({{ $data->id }})">Close</button>
                                </div>
                            </div>
                        </div>
                        
                        <form action="{{ route('user.job-report', $data->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="job_id" value="{{ $data->job_id }}">
                            <div class="modal fade" id="jobReport_{{ $data->id }}" tabindex="-1" role="dialog" aria-labelledby="jobReportTitle" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLongTitle">Report This Job</h5>
                                            <button type="button" class="close" data-bs-dismiss="modal" onclick="jobReportHide()">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Do you have any issue/problem with this job?<br> Write down below about your problem/reason</p>
                                            <div class="form-group">
                                                <label class="form-control-label" for="exampleFormControlTextarea1">Describe your issue/reason</label>
                                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="report_describe" placeholder="Write your reason here..."></textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" onclick="jobReportHide('{{ $data->id }}')">Cancel</button>
                                            <button type="submit" class="btn btn-primary">Submit Report</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    @endforeach
                </tbody>
            </table>
           {{-- $datas->links() --}}
        </div>
        @endif
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

@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 sShoootMosdalOpen(id){
            $('#s_shoot_job_'+id).modal('show');
        }

        function sShoootMosdalClose(id){
            $('#s_shoot_job_'+id).modal('hide');
        }
        
        function jobReport(id) {
            $('#jobReport_'+id).modal('show');
        }
        
        function jobReportHide(id) {
            $('#jobReport_'+id).modal('hide');
        }

   $(document).ready(function () {
    $('.toggle-content').on('click', function () {
        var target = $(this).data('target');
        var modal = $(this).closest('.modal');

        modal.find('.content').hide();
        modal.find('.toggle-content').removeClass('active');
        modal.find('#' + target).show();
        $(this).addClass('active');
    });
});

    </script>
@endsection