@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.frontend.dashboard') )

@section('content')
    <div class="row mb-4">
    
        <div class="header header-top">
            <a href="{{ url('/dashboard') }}" class="header-menu"><i class="fa fa-arrow-left"></i></a>
            <h2 class="page-title">@if(isset($quotations->service_name)){{$quotations->service_name}}@endif</h2>
        </div><!-- header -->
        <div class="main-content">
            @if($quotations->getServiceProviders)
            <div class="grey-bg">
                <div class="container-fluid">
                    <div class="quotation-list">                
                        <div class="quotation-list-pic">        
                            <img src="@if($quotations->getServiceProviders[0]->user_details->avatar_location){{url('storage/'.$quotations->getServiceProviders[0]->user_details->avatar_location)}}@else{{'img/no-image.jpg'}}@endif" alt="">
                        </div>
                        <div class="quotation-list-details">
                            <h3>@if(isset($quotations->getServiceProviders[0]->user_details->first_name)){{$quotations->getServiceProviders[0]->user_details->first_name.' '.$quotations->getServiceProviders[0]->user_details->last_name}}@endif</h3>
                            <p class="rating-block">{{number_format($quotations->getServiceProviders[0]->user_details->rating,1) }} <i class="fa fa-star"></i></p>
                        </div>
                        @if($quotations->getServiceProviders[0]->amount > 0)
                        <div class="quotation-price">
                            <h3>$ {{$quotations->getServiceProviders[0]->amount}}</h3>
                        </div>
                        @endif
                    </div>
                </div><!-- container-fluid -->
            </div><!-- grey-bg -->
            @endif
            <div class="container-fluid">
                <div class="quotation-block mt-3">
                    <h3>Quotation ID</h3>
                    <p>@if(isset($quotations->id)){{$quotations->id}}@endif</p>
                </div><!-- quotation-block -->
                <div class="quotation-block mt-3">
                    <h3>Submitte Quotation</h3>
                    <p>@if(isset($quotations->quotation_message)){{$quotations->quotation_message}}@endif</p>
                </div><!-- quotation-block -->
                <div class="quotation-block mt-3">
                    <h3>Image</h3>
                    <ul class="image-block">
                        @if(count($quotations->getQuoteImages)>0)
                            @foreach($quotations->getQuoteImages as $res)
                                <li>
                                    <img src="@if($res->image_location){{url('storage/'.$res->image_location)}}@else{{'img/no-image.jpg'}}@endif" alt="">
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div><!-- quotation-block -->
                <div class="quotation-block mt-3 pt-2 grey-border">
                    <h3>Reply</h3>
                    @if($quotations->getServiceProviders[0]->reply != '')
                        <p>{{$quotations->getServiceProviders[0]->reply}}</p>
                    @else
                        <p>No reply posted now...</p>
                    @endif
                </div><!-- quotation-block -->
                @if($quotations->payment_status > 0)
                    @if($quotations->getServiceProviders[0]->is_selected == 1)
                        <div class="quotation-block mt-3 pt-2 grey-border">
                            <h3>Payment Details:</h3>
                                <p>Payment Mode: {{(($quotations->payment_type==0) ? 'Online' : 'PayNow')}}</p>
                                <p>Payment Status: {{(($quotations->payment_status==1) ? 'Paid' : 'Refunded')}}</p>
                                <p>Payment Date: {{$quotations->payment_date}}</p>
                                <p>Transaction ID: {{$quotations->trn_id}}</p>
                        </div>
                    @else
                        <div class="quotation-block mt-3 pt-2 grey-border">
                            <h3>Quotation Closed</h3>
                        </div>
                    @endif
                @endif
                @if($quotations->work_done > 0 && $quotations->getServiceProviders[0]->is_selected == 1)
                <div class="quotation-block mt-3 pt-2 grey-border">
                    <h3>Work Done:</h3>
                        <p>{{$quotations->work_done}} %</p>
                </div>
                @endif
            </div>
        </div><!-- main-content -->
        @if($quotations->getServiceProviders[0]->amount > 0)
            @if($quotations->status == 1)
                <div class="footer">
                    <a href="javascript:void(0)" class="block-btn" data-toggle="modal" data-target="#approve_pay">Approve & Pay</a>   
                </div><!-- footer -->
            @elseif($quotations->status == 3)
                <div class="footer">
                    <a href="javascript:void(0)" class="block-btn" data-toggle="modal" data-target="#job-completed">Job Completed</a>   
                </div><!-- footer -->
            @endif
        @endif
    </div><!-- row -->
    <div class="loader-main">
            <div class="loading-wrapper">
              <div class="loading-bar"></div>
              <div class="loading-bar"></div>
              <div class="loading-bar"></div>
              <div class="loading-bar"></div>
            </div>
    </div>
<!--Approve pay modal-->
<div class="modal fade" id="approve_pay" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalLabel">Choose payment mode</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('frontend.user.quotation.payment')}}" method="post" id="pay-form">
                <div class="modal-body">
                    <p class="custom-radio">
                        <input type="radio" class="" id="offline" name="payment_mode" value="1" checked>
                        <label for="offline">Online</label>
                    </p>
                    <p class="custom-radio">
                        <input type="radio" class="" id="online" name="payment_mode" value="2">
                        <label for="online">PayNow</label>
                    </p>
                    {{csrf_field()}}
                    <input type="hidden" name="quotation_id" value="{{$quotations->id}}">
                    <input type="hidden" name="serviceprovider_id" value="{{$quotations->getServiceProviders[0]->serviceprovider_id}}">
                    <input type="hidden" name="amount" value="{{$quotations->getServiceProviders[0]->amount}}">
                    <input type="hidden" name="online_link" id="offline_link" value="https://www.paynow.co.zw/Payment/Find?search=quotation%40nodejsdapldevelopments.com/servicefinders/public">
                    <div class="text-center">
                        <button type="button" class="btn btn-warning btn-lg pay_now" id="online_btn">Proceed</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--Approve pay modal-->

<!--Approve pay modal-->
<div class="modal fade" id="job-completed" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                    <h4 class="modal-title" id="modalLabel">Percentage of work done</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Percentage of work done</p>
                    <div class="form-group">
                        <input type="text" name="work_done" class="form-control mt-2 mb-2" id="work_done" placeholder="Please enter percent value like 75">
                    </div>
                    <button type="submit" class="btn btn-warning btn-lg work_done">Done</button>
                </div>
        </div>
    </div>
</div>
<!--Approve pay modal-->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
    var user_type = 0;
    $(function(){
        $('input[name="payment_mode"]').click(function(){
            if($('input[name="payment_mode"]:checked').val()==1) {
                $('.pay_now').attr('type','button');
                $('.pay_now').attr('id','online_btn');
            } else {
                $('.pay_now').attr('type','submit');
                $('.pay_now').attr('id','paynow_btn');
            }
        })
        $('.pay_now').click(function(){
            $('.close').click();
        })
        $('#pay-form').submit(function(){
            $('.loader-main').css('display','inline-block');
        })
        $('.work_done').click(function(){
            if($.isNumeric($('input[name="work_done"]').val()) && $('input[name="work_done"]').val() > 0) {
                $('.loader-main').css('display','inline-block');
                $.ajax({
                    url:"{{route('frontend.user.quotation.workdone')}}",
                    data:{
                        work_done: $('input[name="work_done"]').val(),
                        "_token": "{{ csrf_token() }}",
                        quotation_id: "{{$quotations->id}}",
                        serviceprovider_id: "{{$quotations->getServiceProviders[0]->serviceprovider_id}}"
                    },
                    type: "POST",
                    success:function(res) {
                        if(res == 1) {
                            $('.loader-main').css('display','none');
                            window.location.href="{{url('quotation-rating/'.base64_encode($quotations->id).'/'.base64_encode($quotations->getServiceProviders[0]->serviceprovider_id))}}";
                        } else {
                            alert('Something wrong....');
                            $('.loader-main').css('display','none');
                        }   
                    }
                })
            } else {
                alert('Please fill work done in nemeric value');
            }
        })


        $('body').on('click','#online_btn',function(){
            var data = {
                url:'https://www.paynow.co.zw/Payment/Find?search=quotation%40nodejsdapldevelopments.com/servicefinders/public',
            }; 
            window.ReactNativeWebView.postMessage(JSON.stringify(data))
        })
    })   
</script>
@endsection