@extends('layouts.dashboard')

@section('content')

    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>Buy API</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="content mt-3">


        @if (Session::has('success'))
            <div class="col-sm-12">
                <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
                    role="alert">
                    {{ Session::get('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif

        <div class="animated fadeIn">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <strong class="card-title">List</strong>
                            <section style="float:right">
                                <span style="float:left" class="mr-2"><a class="btn btn-orange btn-sm"
                                        href="{{ route('purchasing-report') }}">Purchase Reports</a></span>
                                <span style="float:right"><a class="btn btn-orange btn-sm"
                                        href="{{ route('my-subscriptions') }}">My Subscriptions</a></span>
                                <span style="float:right" class="mr-2"><a class="btn btn-orange btn-sm"
                                    href="{{ route('my-invoices') }}">My Invoices</a></span>
                            </section>
                        </div>
                        <div class="card-body">
                            <table id="subscription_table" class="table table-striped table-bordered table-responsive">
                                <thead>
                                    <tr>
                                        <th>Subscription</th>
                                        <th>Description</th>
                                        <th>Price Per Request </br>(in {{ config('app.currency') }})</th>
                                        <th>Quantity</th>
                                        <th>Price</br>(in {{ config('app.currency') }})</th>
                                        <th>{{ config('app.tax_name') }}</br>(in %)</th>
                                        <th>Total Price</br>(in {{ config('app.currency') }})</th>
                                        <th>Action</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($subscriptions as $subscription)
                                        <tr>
                                            <td>{{ $subscription->name }}</td>
                                            <td>{{ $subscription->description }}</td>
                                            <td class="price_per_req">{{ $subscription->per_request_price }}</td>
                                            <td>
                                                <select class="quantity form-control" id="quantity_{{ $subscription->id }}">
                                                    <option value="0">Select</option>
                                                    @foreach ($quantites as $quantity)
                                                        <option value="{{ $quantity->quantity }}">{{ $quantity->quantity }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            <td class="price">-</td>
                                            <td class="tax">{{ config('app.tax_percentage') }}</td>
                                            <td class="total_price">-</td>
                                            <td>
                                                <button class="btn btn-success pay_button" type="button"
                                                    data-id="{{ $subscription->id }}">Pay</button>
                                                {{-- <button class="btn btn-success pay_button" type="button" data-id="{{ $subscription->id }}">Pay</button> --}}
                                            </td>
                                        </tr>

                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center">No data available</td>
                                        </tr>
                                    @endforelse

                                </tbody>
                            </table>

                            <div class="link">
                                {{ $subscriptions->onEachSide(2)->links() }}
                            </div>

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


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


@endsection



@push('scripts')
    <script>
        $('.quantity').on('change', function() {
            var total = 0;   var price = 0;
            var val = $(this).val();
            var price_per_req = $(this).closest('tr').find('.price_per_req').text();
            var tax = $(this).closest('tr').find('.tax').text();
            var price = val * price_per_req;
            var tax_total = price * (tax/100);
            total = price + tax_total;

            $(this).closest('tr').find('.price').text(price.toFixed(2));
            $(this).closest('tr').find('.total_price').text(total.toFixed(2));
        });

        $("td .pay_button").on('click', function() {
            var id = $(this).data('id');
            var quantity = $("#quantity_" + id).val();
            var total_amt = $(this).closest('tr').find('.total_price').text();

            if(quantity == 0){
                Swal.fire({
                text: "Please select quantity!",
                icon: "error",
                title: "Oops...",
                });
            }else{
                window.sessionStorage.setItem("service_id", id);
                window.sessionStorage.setItem("quantity", quantity);
                window.sessionStorage.setItem("total_amt", total_amt);

                window.location.href = "{{ route('stripe-form') }}";
            }

        });
    </script>
@endpush