@extends('layouts/contentNavbarLayout')

@section('title', 'Product - Product List')

@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="{{ route('dashboard') }}" class="text-muted text-decoration-none">Dashboard</a> /
        </span>
        Subscriptions
    </h4>

    <section class="section-py first-section-pt">
        <div class="container d-flex align-items-center justify-content-center" style="min-height: 100vh;">
            <div class="col-lg-6 mb-md-0 mb-6 px-0">
                <div class="card border-primary border shadow-none">
                    <div class="card-body position-relative pt-4">
                        <div class="position-absolute end-0 me-6 top-0 mt-6">
                            <span class="badge bg-label-primary rounded-pill">Popular</span>
                        </div>
                        <div class="my-5 pt-6 text-center">
                            <img src="{{ $product['image'] ? asset('storage/products/' . $product['image']) : asset('assets/img/avatars/3.png') }}"
                                alt="Standard Image" height="100">
                        </div>
                        <h4 class="card-title text-center text-capitalize mb-1">{{ $product['name'] ?? '' }}</h4>
                        <p class="text-center mb-5">
                            {{ $product['description'] ?? 'We won’t send you spam. Unsubscribe at any time.' }}</p>
                        <div class="text-center">
                            @isset($product['price'])
                                <div class="d-flex justify-content-center">
                                    <sup class="h6 pricing-currency mt-2 mb-0 me-1 text-body">$</sup>
                                    <h1 class="price-toggle price-monthly text-primary mb-0">
                                        {{ $product['price'] }}
                                    </h1>
                                    <sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
                                </div>
                            @endisset
                            <small class="price-yearly price-yearly-toggle text-muted d-none">USD 480/year</small>
                        </div>

                        <ul class="list-group ps-6 my-5 pt-4">
                            <li class="mb-2">Unlimited responses</li>
                            <li class="mb-2">Unlimited forms and surveys</li>
                            <li class="mb-2">Instagram profile page</li>
                            <li class="mb-2">Google Docs integration</li>
                            <li class="mb-0">Custom “Thank you” page</li>
                        </ul>

                        @if ($isSubscribed)
                            <div class="d-grid mt-5">
                                <button type="submit" class="btn btn-primary waves-effect waves-light" disabled>
                                    <span class="me-2">Subscribe</span>
                                    <i class="ri-arrow-right-line ri-16px scaleX-n1-rtl"></i>
                                </button>

                            </div>
                            <p class="text-muted">Your subscription is active until
                                {{ \Carbon\Carbon::parse($payment->end_date)->format('F d, Y') }}.</p>
                        @else
                            <form action="{{ route('customer.stripe') }}" method="post" id="subscribeForm">
                                @csrf
                                <input type="hidden" name="product_id" value="{{ $product->id ?? '' }}">
                                <input type="hidden" name="product_name" value="{{ $product->name ?? '' }}">
                                <input type="hidden" name="detail" value="{{ $product->detail ?? '' }}">
                                <input type="hidden" name="price" value="{{ $product->price ?? '' }}">

                                <div class="d-grid mt-5">
                                    <button type="submit" class="btn btn-primary waves-effect waves-light"
                                        id="subscribeBtn">
                                        <span class="me-2">Subscribe</span>
                                        <i class="ri-arrow-right-line ri-16px scaleX-n1-rtl"></i>
                                    </button>
                                </div>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        // This will run when the page is loaded
        window.onload = function() {
            // Check if there are any query parameters in the URL
            if (window.location.search) {
                // Create a new URL object from the current location
                var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;

                // Redirect to the same route without query parameters
                window.history.replaceState({}, document.title, newUrl);
            }
        };

        document.getElementById('subscribeForm').addEventListener('submit', function() {
            var button = document.getElementById('subscribeBtn');
            button.disabled = true; // Disable the button
            button.innerHTML =
                '<span class="me-2">Processing...</span><i class="ri-loader-3-line ri-spin ri-16px"></i>'; // Change button text
            // Change button color to primary
            button.classList.add('btn-primary');
            button.classList.remove('btn');
        });
    </script>

@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{{-- <script>
  $(document).ready(function () {
      $('#checkout-button').on('click', function () {
          // Prepare the data to be sent
          const data = {
              product_id: "{{ $product['id'] }}", // Assuming 'id' exists in the $product array
              name: "{{ $product['name'] }}",
              price: "{{ $product['price'] }}"
          };

          // AJAX POST request
          $.ajax({
              url: "{{ route('customer.stripe') }}", // Replace with your route name or URL
              method: "POST",
              data: data,
              headers: {
                  'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include CSRF token for Laravel
              },
              success: function (response) {
                  alert('Subscription successful!');
                  console.log(response); // Handle success response
              },
              error: function (xhr, status, error) {
                  alert('Something went wrong. Please try again.');
                  console.log(xhr.responseText); // Handle error response
              }
          });
      });
  });
</script> --}}