@extends('User.Layout.App')

@push('css')
    <link href="{{ asset('assets/css/custom/user/your_services.css') }}" rel="stylesheet">
@endpush

@section('breadcrumb')
    <ul class="breadcrumb">
        <li><a href="#">User</a></li>
        <li>Your Services</li>
    </ul>
@endsection

@section('heading')
    <h3 class="heading">Your Services</h3>
@endsection

@section('content')
    @if(count($serviceData))
    <div class="row">
        @foreach($serviceData as $s)
            <div class="col-md-3 service-col mt-4" id="service_col_{{$s->uid}}">
                <div class="card">
                    <div class="card-header text-center">
                            <h5>{{$s->service_name}} </h5>
                            <small class="text-muted">{{$s->entity_type_name}}</small>
                    </div>
                    <div class="card-body">

                        @if($s->service_status=="DOCUMENT")
                            <div class="text-center">
                                <a href="{{ url('user/service/'.$s->uid) }}" 
                                    class="service-document-button"
                                    style="text-decoration: none"
                                    >
                                    UPLOAD DOCUMENT
                                </a>
                                <p class="service-document-button-text-muted">
                                    Uploaded :  {{$s->uploaded_documents}}/{{$s->total_documents}}
                                </p>
                            </div>
                        @endif

                        @if($s->service_status == "PAYMENT")
                            @if(!$s->payment_type)
                                <div class="text-center">
                                    <h5>Waiting For Payment Details</h5>
                                </div>
                            @else
                                @if($s->pending_payment)
                                    <div class="text-center">
                                        <form action="{{ url('user/make-payment/'.$s->uid.'/'.$s->pending_payment->uid) }}" method="post">
                                            @csrf
                                            <label>
                                                @if($s->pending_payment->payment_type=="ADVANCE_PAYMENT")
                                                    Please Pay Advance Amount
                                                @elseif($s->pending_payment->payment_type=="BALANCE_PAYMENT")
                                                    Please Pay Balance Amount
                                                @elseif($s->pending_payment->payment_type=="ONE_TIME_PAYMENT")
                                                    Please Pay 
                                                @endif
                                            </label>    
                                            <input type="text" 
                                                    class="form-control form-control-sm"
                                                    name="paid_amount"
                                                    value="{{ $s->pending_payment->receivable_amount }}"
                                                    readonly>
                                        
                                            <button type="submit" class="service-document-button mt-2">
                                                Make Payment
                                            </button>
                                        </form>
                                    </div>
                                @endif
                            @endif
                        @endif

                        @if($s->service_status == "EXECUTION")
                            <div class="text-center">
                                @if(!$s->assign_to_user_id)
                                        <p>Our team is reviewing your request. We will assign the best expert for the job shortly.</p>
                                @else
                                    @if(!$s->execution_status)
                                        <p>Your request has been assigned to our expert, and we’ll be starting work soon. Thank you for your patience!</p>
                                    @else
                                    
                                        @if($s->execution_status == "IN_PROGRESS")
                                            <p>Your project is currently in progress. We’re diligently working to deliver great results !</p>
                                        @elseif($s->execution_status == "HOLD")
                                            <p>Your project has been kept on hold due to document related issue. We will contact you soon !</p>
                                        @elseif($s->execution_status == "COMPLETED")
                                            <p>Your project has been successfully completed. Thank you for choosing us !</p>
                                        @else
                                            <p>Your project will start soon !</p>
                                        @endif    
                                    @endif
                                @endif
                            </div>
                        @endif

                        @if($s->service_status == "DOCUMENT")
                            <button type="button"
                                    class="service-delete-button"
                                    onclick="remove_service_from_account('{{$s->uid}}','service_col_{{$s->uid}}')"
                                >
                                Delete
                            </button>
                        @endif    

                    </div> <!--CARD BODY-->
                </div><!--CARD-->
            </div>
        @endforeach    
    </div>
    @else
    <div class="all-services-message text-center pt-5">
        <p>
        You can now add services from
            <a href="{{url('all-service')}}"
                >
                Add Services
            </a>
        </p>
    </div>
    @endif   
@endsection

@push('footer_scripts_after_init')
<script>
    
    function displayFileName(fileInputId, fileNameDisplayId) {
        var fileInput = document.getElementById(fileInputId);
        var fileNameDisplay = document.getElementById(fileNameDisplayId);

        if (fileInput.files.length > 0) {
            fileNameDisplay.textContent = fileInput.files[0].name;
        } else {
            fileNameDisplay.textContent = 'No file chosen';
        }
    }   

    function remove_service_from_account(uid, remove_item_id) {
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "POST",
            url: "{{ url('user/service') }}/" + uid,
            data: {
                '_method': 'DELETE'
            },
            success: function(data) {
                alert(data['message']);
                if (data['status'] == 1) {
                    $('#' + remove_item_id).remove();
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error:', textStatus, errorThrown);
            }
        });
    }
</script>
@endpush