@extends('buyers_sellers.layout2.master')
@section('title', 'Home')
@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="py-5">
                <div class="">
                    <div class="row">
                        <!-- Main Content -->
                        <main class="col col-xl-12 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
                            @if (Session::has('message'))
                                <div class="alert alert-primary" role="alert">
                                    {{ Session::get('message') }}
                                </div>
                            @endif

                            <div class="alert alert-primary" role="alert" id="point-message" style="display: none">
                                Thank you for using our service. You earned
                                100 loyalty points. You can redeem your
                                points when placing your next Service
                                Request
                            </div>
                            <div class="box mb-3 shadow-sm border bg-white osahan-post">
                                {{-- <form class="job-search p-3 border-bottom" action="{{ route('buyer.service.search') }}"
                            method="get">
                            <div class="input-group">
                                <input type="text" class="form-control" name="name" placeholder="Search service"
                                    aria-label="Search" aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="submit">
                                        <i class="feather-search"></i>
                                    </button>
                                </div>
                            </div>
                        </form> --}}
                                <div class="p-3">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12">
                                            <div class="row">
                                                <div class="col-lg-12 col-md-4">
                                                    <div class="card-body">
                                                        <div class="table-scrollable">
                                                            <table id="buyertable" class="table table-bordered">
                                                                <thead class="thead bg-light text-center">
                                                                    <tr>
                                                                        <th>S.No</th>
                                                                        <th>Service Requested</th>
                                                                        <th>View Details</th>
                                                                        <th>Status</th>
                                                                        <th>Action</th>
                                                                        <th>Service Provider</th>
                                                                        <th>Your Rating</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody class="tbody text-center">
                                                                    @foreach ($assing as $row)
                                                                        @if (isset($row->assing[0]->service[0]) && !empty($row->assing[0]->service[0]))
                                                                            <tr>
                                                                                <td>{{ $row->id }}</td>
                                                                                <td>{{ $row->title }}</td>
                                                                                <td><a href="{{url('/view/job/details/'.$row->id)}}" class="btn  btn-info">view details</a></td>
                                                                                <td>
                                                                                    @if ($row->status == 0)
                                                                                        <span
                                                                                            class="label label-warning">Pending</span>
                                                                                    @endif
                                                                                    @if ($row->status == 1)
                                                                                        <span
                                                                                            class="label label-primary">Approved</span>
                                                                                    @endif

                                                                                    @if ($row->status == 2)
                                                                                        <span
                                                                                            class="label label-danger">Decline</span>
                                                                                    @endif

                                                                                    @if ($row->status == 3)
                                                                                        <span
                                                                                            class="label label-info">Completed</span>
                                                                                        
                                                                                    @endif
                                                                                    @if ($row->status == 4)
                                                                                    <span
                                                                                        class="label label-primary">IN Process</span>
                                                                                    
                                                                                @endif

                                                                                </td>
                                                                                <td>
                                                                                    @if ($row->status == 3)
                                                                                    @if ($row->assing[0]->feedback)
                                                                                        Completed
                                                                                    @else
                                                                                    <button
                                                                                            onclick="feedback({{ $row->assing[0]->id }})"
                                                                                            id="{{ $row->assing[0]->id }}"
                                                                                            class="btn btn-sm btn-success">Send
                                                                                            Your Feedback</button>
                                                                                    @endif
                                                                                    @else
                                                                                    <button
                                                                                        data-id="{{$row->assing[0]->id}}"
                                                                                        class="btn btn-sm btn-theme press-button">press
                                                                                        button if your job is
                                                                                        Complete</button>
                                                                                    @endif

                                                                                </td>
                                                                                <td><a href="{{url('service/provider/profile'.'/'.$row->assing[0]->service[0]->user->id)}}">{{ $row->assing[0]->service[0]->user->full_name }}</a>
                                                                                </td>
                                                                                <td>
                                                                                    @if ($row->status == 3)
                                                                                    {{-- {{  dd($row) }} --}}
                                                                                    {{-- {{ dd($row->rating) }} --}}
                                                                                    @if ($row->rating !==null)
                                                                                    {{-- {{ $row->rating->rating }} --}}
                                                                                        <span class="text-warning">
                                                                                            <span
                                                                                                class="{{ $row->rating->rating >= 1 ? 'fa fa-star' : 'feather-star' }}"></span>
                                                                                            <span
                                                                                                class="{{ $row->rating->rating >= 2 ? 'fa fa-star' : 'feather-star' }}"></span>
                                                                                            <span
                                                                                                class="{{ $row->rating->rating >= 3 ? 'fa fa-star' : 'feather-star' }}"></span>
                                                                                            <span
                                                                                                class="{{ $row->rating->rating >= 4 ? 'fa fa-star' : 'feather-star' }}"></span>
                                                                                            <span
                                                                                                class="{{ $row->rating->rating == 5 ? 'fa fa-star' : 'feather-star' }}"></span>
                                                                                        </span>
                                                                                    @else
                                                                                    <a class="d-inline-block small pt-1"
                                                                                            href="{{ url('/service/review/' . $row->assing[0]->service_id.'/' .$row->id) }}">
                                                                                            Please rate
                                                                                        </a>
                                                                                    @endif
                                                                                    @else
                                                                                     none
                                                                                     @endif



                                                                                        {{-- <span
                                                                                            class="text-dark font-weight-bold ml-2">{{ Illuminate\Support\Str::limit($row->assing[0]->service[0]->userrating->avg('rating'), 4) }}</span> --}}
                                                                                        {{-- <span
                                                                                            class="text-muted">({{ count($row->assing[0]->service[0]->reviews) }}
                                                                                            reviews)</span> --}}
                                                                                    
                                                                                </td>
                                                                            </tr>
                                                                        @endif
 
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </main>
                        <aside class="col col-xl-2 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="feedback" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Send Your Feedback</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{route('client.feedback')}}" method="post">
                    @csrf
                        <input type="hidden" name="id" id="id" value="">
                        <textarea name="feedback" rows="10" class="col-md-12"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>

            </div>
        </div>
    </div>

    <div class="modal fade" id="completejob" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Service Provider Acccount Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-body no-padding height-9">
                            <div class="profile-usertitle">
                                <div class="profile-usertitle-name"><b>Service Title:</b> <a class="pull-right text-capitalize"></a></div>
                            </div>
                            <ul class="list-group list-group-unbordered">
                                <li class="list-group-item">
                                    <b>Name:</b> <div class="pull-right" id="provider-name"></div>
                                </li>
                                <li class="list-group-item">
                                    <b>Phone Number:</b> <div class="pull-right" id="provider-number"></div>
                                </li>
                                <li class="list-group-item">
                                    <b>Bank Name:</b> <div class="pull-right" id="provider-bank"></div>
                                </li>
                                <li class="list-group-item">
                                    <b>Town:</b> <div class="pull-right" id="provider-town"></div>
                                </li>
                                <li class="list-group-item">
                                    <b>Title:</b> <div class="pull-right" id="provider-title"></div>
                                </li>
                                <li class="list-group-item">
                                    <b>Account Number:</b> <div class="pull-right" id="provider-account-number"></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-theme" data-dismiss="modal">Close</button>
                    <a id="comjob" href="" class="btn btn-theme">Completed</a>
                </div>
            </div>
        </div>
    </div>


    <!-- Payment Fainal Modal -->
<div class="modal fade" id="payment" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Thank you for confirming the work has been
            completed</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>How will you finalize payment?</p>
          <div class="radio p-0">
            <label for="optionsRadios1">
                <input type="radio" name="optionsRadios" class="provider-req" id="optionsRadios1" value="option1"
                  data-id=""> <span id="gettext">Direct payment to Service Provider</span>
            </label>
        </div>
        <div class="radio p-0">
            <label for="optionsRadios1">
                <input type="radio" name="optionsRadios" id="optionsRadios2" class="admin-req" value="option1"
                  data-id=""> <span id="gettext">Credit Card or Bank Transfer to HouseRunsForMe </span>
            </label>
        </div>
        </div>
        <div class="modal-footer">
            <button id="provider-btn" value="" style="display:none;width:100px;"  class="btn btn-theme" ><span id="load"></span>Continue</button>
            <button id="admin-btn" value="" style="display:none;width:100px;"  class="btn btn-theme" ><span id="load"></span>Continue</button>

        </div>
      </div>
    </div>
  </div>


{{-- BANK MODAL --}}

  <div id="bank" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
            <h3 id="sr-number"> </h3>
            <p id="admin-detail"></p>
            <br>
            <p id="qouets"></p>

            <p>Please select your payment method:</p>
            <div class="radio p-0">
                <label for="optionsRadios2">
                    <input type="radio" id="admin-bank" name="optionsRadios" value="option1"> Bank Transfer
                </label>
            </div>
            <div class="radio p-0">
                <label for="optionsRadios1">
                    <input type="radio" id="credit-bank"  name="optionsRadios" value="option1"> Credit Card
                </label>
            </div>
        </div>
      </div>
    </div>
  </div>


  <div class="modal fade" id="admin-bank-details" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Please send payment to account below then
                return and upload your proof of payment</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
          </div>
          <div class="modal-body">
              <div class="card">
                  <div class="card-body no-padding height-9">
                      <div class="profile-usertitle">
                          {{-- <div class="profile-usertitle-name"><b>Service Title:</b> <a class="pull-right text-capitalize"></a></div> --}}
                      </div>
                      <ul class="list-group list-group-unbordered">
                          <li class="list-group-item">
                              <b>Name:</b> <div class="pull-right" id="provider-name">{{ $admin->full_name }}</div>
                          </li>
                          <li class="list-group-item">
                              <b>Phone Number:</b> <div class="pull-right" id="provider-number">{{ $admin->phone_number }}</div>
                          </li>
                          <li class="list-group-item">
                              <b>Bank Name:</b> <div class="pull-right" id="provider-bank">@if($admin->account) {{ $admin->account->bank_name }}@else no record found @endif</div>
                          </li>
                          <li class="list-group-item">
                            <b>Town:</b> <div class="pull-right" id="provider-bank">@if($admin->account) {{ $admin->account->town }}@else no record found @endif</div>
                        </li>
                          <li class="list-group-item">
                              <b>Title:</b> <div class="pull-right" id="provider-title">@if($admin->account) {{ $admin->account->title }}@else no record found @endif</div>
                          </li>
                          <li class="list-group-item">
                              <b>Account Number:</b> <div class="pull-right" id="provider-account-number">@if($admin->account) {{ $admin->account->account_number }}@else no record found @endif</div>
                          </li>
                      </ul>
                  </div>
              </div>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-theme" data-dismiss="modal">Close</button>
              <form action="{{ route('paid.bankAfterjob') }}" method="POST">
                @csrf
                <input type="hidden" id="job_id" name="jobid" value="">
                <input type="hidden" id="service_provider_id" name="service_provider_id" value="">
                <button type="submit" class="btn btn-theme">Compelete</button>
              </form>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="stripe-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Secure Credit Card Payment Submission</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="card">
                <div class="card-body no-padding height-9">
                    <div class="profile-usertitle">
                        {{-- <div class="profile-usertitle-name"><b>Service Title:</b> <a class="pull-right text-capitalize"></a></div> --}}
                    </div>
                    <form action="{{ route('clientstripe') }}" method="post" id="payment-form">
                        @csrf
                        <input type="hidden" id="amount" value="">
                        <input type="hidden" id="agn_id" value="">

                    <p id="set-amount"></p>
                    <div id="card-element">
                        <!-- A Stripe Element will be inserted here. -->
                    </div>
                    <!-- Used to display form errors. -->
                    <div id="card-errors" role="alert"></div> 

                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-theme" id="card-button" data-secret="" style="float: left;background: #f0f0f0;">
                Payment
            </button>
        </form>  

            <button type="button" class="btn btn-theme" data-dismiss="modal">Close</button>
            {{-- <a id="comjob" href="" class="btn btn-theme">Completed</a> --}}
        </div>
    </div>
</div>
</div>

<div class="modal fade" id="messagepointsmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Thank You</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            Thank you for using our service. You earned
            {{ $points->points }} loyalty points. You can redeem your
            points when placing your next Service
            Request
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="refreshpage()">Ok</button>
          </div>
      </div>
    </div>
  </div>

@endsection

@section('scripts')
    <script>

        function refreshpage(){
            location.reload();
        }
    
        function feedback(id) {
            $('#id').val(id);
            
            $('#feedback').modal('show');
        }
    $(document).ready(function(){

        $("#admin-bank").on("click",function(){
            $('#bank').modal("hide");
            $('#admin-bank-details').modal('show');

        });

        $('.press-button').click(function(){
            var id = $(this).data('id');
            document.getElementById("optionsRadios1").setAttribute('data-id' ,id);
            document.getElementById("provider-btn").value = id;

            document.getElementById("optionsRadios2").setAttribute('data-id' ,id);
            document.getElementById("admin-btn").value = id;
            $('#payment').modal('show');
        })

        $('.provider-req').on("click",function(){
            document.getElementById('provider-btn').style.display = "block";
            document.getElementById('admin-btn').style.display = "none";
        });

        $('.admin-req').on("click",function(){
            document.getElementById('admin-btn').style.display = "block";
            document.getElementById('provider-btn').style.display = "none";

        });

        $('#provider-btn').click(function(){
            document.getElementById('load').innerHTML = "<i class='fa fa-spinner fa-spin'></i>";
            var id = $(this).val();

            $.ajax({

                url:"{{ url('/get/provider/account/') }}" + '/' + id,
                type:"get",
                success:function(data){
                    document.getElementById('load').innerHTML = "";
                    $('#payment').modal('hide');
                    console.log(data.user);
                    if (data.user.full_name !==null) {
                        $('#provider-name').text(data.user.full_name);
                    }else{
                        $('#provider-name').text("");
                    }
                    if (data.user.phone_number !==null) {
                        $('#provider-number').text(data.user.phone_number);
                    }else{
                        $('#provider-number').text("");
                    }
                    if (data.user.account !==null) {
                        if (data.user.account.bank_name !==null) {
                        $('#provider-bank').text(data.user.account.bank_name);
                        }else{
                            $('#provider-bank').text("");
                        }
                    }else{
                        $('#provider-bank').text("");
                    }
                    if (data.user.account !==null) {
                        if (data.user.account.town !==null) {
                            $('#provider-town').text(data.user.account.town);
                        }else{
                            $('#provider-town').text("");
                        }
                    }else{
                        $('#provider-town').text("");
                    }
                    if (data.user.account !==null) {
                        if (data.user.account.title !==null) {
                        $('#provider-title').text(data.user.account.title);
                        }else{
                            $('#provider-title').text("");
                        }
                    }else{
                        $('#provider-title').text("");

                    }
                    if (data.user.account !==null) {

                        if (data.user.account.account_number !==null) {
                            $('#provider-account-number').text(data.user.account.account_number);
                        }else{
                            $('#provider-account-number').text("");
                        }
                    }else{
                        $('#provider-account-number').text("");

                    }
                    document.getElementById("comjob").href = "{{url('/buyer/job/compelete')}}/"+data.job_id+"/3";
                    document.getElementById('admin-btn').style.display = "none";

                    $('#completejob').modal('show');
                }
            });
        })
        

        $('#admin-btn').on("click",function(){
            document.getElementById('load').innerHTML = "<i class='fa fa-spinner fa-spin'></i>";
            var id = $(this).val();
            $('#agn_id').val(id);
            document.getElementById('provider-btn').style.display = "none";

            $.ajax({

                url:"{{ url('/get/admin/account/') }}" + '/' + id,
                type:"get",
                success:function(data){
                    let getdate = new Date();
                    let month =getdate.getMonth()+1;
                    let date =getdate.getDate();
                    let year =getdate.getFullYear();

                    let todayDate = year+'-'+month+'-'+date;

                    console.log(data.data.user.id);
                    $('#sr-number').text("Payment for SR #"+data.data.job_id);
                    $('#admin-detail').text("You are about to submit Payment to HouseRunsForMe for services delivered under for Service Request No. # "+data.data.job_id+" by "+data.data.user.full_name+" on "+todayDate+" ")
                    $('#qouets').text('Amount due: $'+data.data.qouets.quotes+' ');
                    $('#set-amount').text("Payment Amount : "+data.data.qouets.quotes);
                    $('#amount').val(+data.data.qouets.quotes);
                    $('#job_id').val(data.data.job_id);
                    $('#service_provider_id').val(data.data.user.id);
                    $('#payment').modal('hide');
                    $('#bank').modal("show");
                }
            });


        });

        $('#credit-bank').on("click",function(){
            $('#bank').modal("hide");
            $('#stripe-modal').modal('show');
        });

    });



            // STRIPE START

// Create a Stripe client.
var stripe = Stripe('{{env('STRIPE_KEY')}}');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.on('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    // console.log(result);
    if (result.error) {
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // console.log(1);
      // Send the token to your server.
      stripeTokenHandler(result.token);
    }
  });
});

// Submit the form with the token ID.
function stripeTokenHandler(token) {
  // console.log(token);
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  StripeToken = token.id;
  form.appendChild(hiddenInput);
$('#card-button').text('payment processing.........');
 $('#card-button').prop('disabled', true);
  // Submit the form
  // form.submit();
  $.ajax({
      url: "{{route('clientstripe')}}",
      type: "POST",
      data: {
        '_token': "{{ csrf_token() }}",
        'stripeToken': token.id,
        'amount': $('#amount').val(),
        'agn_id': $('#agn_id').val()
      },
      success: function(data){
        console.log(data);

        data = JSON.parse(data);

        if(data.status == true){   
            $('#stripe-modal').modal('hide');
            $('#card-button').text('PAYMENT');
            $('#messagepointsmodal').modal('show');
        }else{
            $('#card-button').text('PAYMENT');
            alert('something is problem');
        }
      },
     
  });
  
}
    </script>
@endsection