@extends('layouts.dashboard')

@section('content')

<div class="breadcrumbs">
    <div class="col-sm-4">
        <div class="page-header float-left">
            <div class="page-title">
                <h1>View - {{ isset($user)? $user->name: '-' }}</h1>
            </div>
        </div>
    </div>
</div>

<div class="content mt-3">
    <div class="animated fadeIn">
        <div class="row">

            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <nav>
                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                              <button class="nav-link active" id="nav-business-profile-tab" data-toggle="tab" data-target="#nav-business-profile" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Profile</button>
                              <button class="nav-link" id="nav-subscription-tab" data-toggle="tab" data-target="#nav-subscription" type="button" role="tab" aria-controls="nav-subscription" aria-selected="false">Subscription List</button>
                              <button class="nav-link" id="nav-report-tab" data-toggle="tab" data-target="#nav-report" type="button" role="tab" aria-controls="nav-report" aria-selected="false">Purchase Reports</button>
                              <button class="nav-link" id="nav-invoice-tab" data-toggle="tab" data-target="#nav-invoice" type="button" role="tab" aria-controls="nav-invoice" aria-selected="false">Invoices</button>
                              <button class="nav-link" id="nav-api-log-tab" data-toggle="tab" data-target="#nav-api-log" type="button" role="tab" aria-controls="nav-api" aria-selected="false">API Logs</button>
                              {{-- <button class="nav-link" id="nav-ai-engine-tab" data-toggle="tab" data-target="#nav-ai-engine" type="button" role="tab" aria-controls="nav-api" aria-selected="false">AI Engine</button>
                              <button class="nav-link" id="nav-document-links-tab" data-toggle="tab" data-target="#nav-document-links" type="button" role="tab" aria-controls="nav-api" aria-selected="false">Documents Lists</button>
                              <button class="nav-link" id="nav-document-links-tab" data-toggle="tab" data-target="#nav-document-links" type="button" role="tab" aria-controls="nav-api" aria-selected="false">Weblink Log</button>
                              <button class="nav-link" id="nav-document-links-tab" data-toggle="tab" data-target="#nav-document-links" type="button" role="tab" aria-controls="nav-api" aria-selected="false">Captcha Log</button>
                              <button class="nav-link" id="nav-document-links-tab" data-toggle="tab" data-target="#nav-document-links" type="button" role="tab" aria-controls="nav-api" aria-selected="false">Login Sdk Log</button> --}}

                            </div>
                          </nav>
                    </div>
                    <div class="card-body">

                          <div class="tab-content" id="nav-tabContent">

                            @include('admin.merchants.partials._business-profile')
                            @include('admin.merchants.partials._subscription')
                            @include('admin.merchants.partials._report')
                            @include('admin.merchants.partials._invoice')
                            @include('admin.merchants.partials._api-log')
                            {{-- @include('admin.merchants.partials._ai-engine')
                            @include('admin.merchants.partials._document-links') --}}

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


        </div>
    </div><!-- .animated -->
</div><!-- .content -->





<!-- Modal -->
<div class="modal fade" id="payModal" tabindex="-1" role="dialog" aria-labelledby="payModalTitle" 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">Pay for {{ isset($user)?$user->name:'' }}</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 id="">
            @csrf

            <div class="form-group">
                <label for="cc-payment" class="control-label mb-1">Name</label>
                    <select name="select" id="subscription_name" class="form-control">
                        @foreach ($all_subscriptions as $all_subscription)
                           <option value="{{ $all_subscription->id }}" data-value={{ $all_subscription->per_request_price }}>{{ $all_subscription->name }}</option>
                        @endforeach
                    </select>
            </div>
            <input id="user_id" value="{{$user->id}}" hidden>

            <div class="form-group">
                <label class="control-label mb-1">Price Per Request(in Rs)</label>
                <input id="price" type="text" class="form-control" disabled>
            </div>

            <div class="form-group">
                <label class="control-label mb-1">Quantity</label>
                <input type="number" min="1" value="1" id="quantity" class="form-control">
            </div>

            <div class="form-group">
                <label class="control-label mb-1">Total Price(in Rs)</label>
                <input type="text" class="form-control" id="total_price" disabled>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary pay_button">Pay</button>
        </div>
      </div>
    </div>
  </div>



<!-- Payload Modal -->
<div class="modal fade" id="payloadModal" tabindex="-1" role="dialog" aria-labelledby="payloadModalTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content" style="width: auto">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">API Request Payload</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 id="modal-info"></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

<!-- Response Modal -->
<div class="modal fade" id="responsedModal" tabindex="-1" role="dialog" aria-labelledby="responseModalTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content" style="width: auto">
        <div class="modal-header">
            <h5 class="modal-title">API Response</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 id="response-info"></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>


@endsection



@push('scripts')
<script>

  $(function () {

   var price = $('#subscription_name :selected').data('value');
    $("#price , #total_price").val(price);
    });


    $(document).on('change','#subscription_name',function(){
        var price = $('#subscription_name :selected').data('value');
        $("#price , #total_price").val(price);
        $("#quantity").val(1);
  });

    $(document).on('change','#quantity',function(){
    var total = 0;
    var val = $(this).val();
    var price_per_req = $("#price").val();
    var total = val * price_per_req;

    $("#total_price").val(total);
  });


  $(".pay_button").on('click',function(){
    var id = $('#subscription_name').val();
    var quantity = $("#quantity").val();
    var user_id = $("#user_id").val();

         Swal.fire({
                title: "Are you Sure?",
                showCancelButton: true,
                confirmButtonText: "Yes",
                }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        type: "POST",
                        url: "{{ route('pay') }}",
                        data: {
                        "_token": "{{ csrf_token() }}",
                        'id':id,
                        'quantity':quantity,
                        'user_id':user_id
                        },
                        success: function (data) {
                            if(data && data.status == "success") {
                                Swal.fire("Payment is successful!", "", "success");
                                location.reload();
                            }
                            else {
                                Swal.fire("Payment is failed!", "", "info");
                             } // End if-else
                        },
                        error: function (data) {
                            console.log('error data = ', data)
                            Swal.fire("Payment is failed!", "", "info");
                        },

                        });

                } else if (result.isDenied) {
                    Swal.fire("Payment is failed", "", "info");
                }
                });
        });



</script>
@endpush