@php
  $bookingRoutePrefix = request()->routeIs('crm.booking.*') ? 'crm.booking.' : 'booking.';
  $stripePublishableKey = config('services.stripe.key');
  $defaultPaymentAmount = number_format($booking->balance_due > 0 ? $booking->balance_due : $booking->total_amount, 2, '.', '');
@endphp

<div class="modal fade" id="addPaymentModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content border-0" style="border-radius:14px; box-shadow:0 22px 55px rgba(15, 23, 42, 0.22);">
      <div class="modal-header border-bottom">
        <h5 class="modal-title"><i class="ti tabler-credit-card me-2"></i>Add Payment</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul class="nav nav-pills gap-2 mb-4" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="btn btn-outline-secondary active" id="credit-card-tab" data-bs-toggle="tab" data-bs-target="#credit-card-pane" type="button" role="tab" aria-controls="credit-card-pane" aria-selected="true">
              <i class="ti tabler-credit-card me-1"></i> Credit Card
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="btn btn-outline-secondary" id="pos-tab" data-bs-toggle="tab" data-bs-target="#pos-pane" type="button" role="tab" aria-controls="pos-pane" aria-selected="false">
              <i class="ti tabler-cash me-1"></i> POS
            </button>
          </li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane fade show active" id="credit-card-pane" role="tabpanel" aria-labelledby="credit-card-tab">
            <form method="POST" action="{{ route($bookingRoutePrefix . 'transactions.store', $booking->booking_number) }}" id="stripePaymentForm">
              @csrf
              <input type="hidden" name="payment_method" value="credit_card">
              <input type="hidden" name="redirect_to" value="{{ url()->current() }}">
              <input type="hidden" name="stripe_payment_intent_id" id="stripePaymentIntentId">
              <input type="hidden" name="stripe_payment_method_id" id="stripePaymentMethodId">
              <input type="hidden" name="stripe_reference" id="stripeReference">
              <input type="hidden" name="stripe_last4" id="stripeLast4">
              <input type="hidden" name="stripe_brand" id="stripeBrand">

              <div class="alert alert-info py-2 px-3 mb-3" style="font-size:12px;">
                Payments are processed securely by Stripe. This app stores only the Stripe reference, card brand, and last 4 digits.
              </div>

              @if(blank($stripePublishableKey))
                <div class="alert alert-warning py-2 px-3 mb-3" style="font-size:12px;">
                  Stripe is not configured yet. Add `STRIPE_KEY` and `STRIPE_SECRET` in your environment before processing card payments.
                </div>
              @endif

              <div class="mb-3">
                <label class="form-label fw-semibold">Amount</label>
                <input type="number" class="form-control" name="amount" id="stripePaymentAmount" step="0.01" min="0.01" value="{{ $defaultPaymentAmount }}" required>
              </div>

              <div class="mb-3">
                <label class="form-label fw-semibold">Name on Card</label>
                <input type="text" class="form-control" name="cardholder_name" id="stripeCardholderName" value="{{ $booking->customer_name }}">
              </div>

              <div class="mb-3">
                <label class="form-label fw-semibold">Card Number</label>
                <div id="stripe-card-number" class="form-control stripe-card-field"></div>
                <div id="stripe-card-errors" class="text-danger small mt-2"></div>
              </div>

              <div class="row">
                <div class="col-md-6 mb-3">
                  <label class="form-label fw-semibold">Expiry Date</label>
                  <div id="stripe-card-expiry" class="form-control stripe-card-field"></div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label fw-semibold">CVC</label>
                  <div id="stripe-card-cvc" class="form-control stripe-card-field"></div>
                </div>
              </div>

              <div class="mb-3">
                <label class="form-label fw-semibold">Billing Address</label>
                <input type="text" class="form-control" id="stripeBillingAddress" placeholder="Address">
              </div>

              <div class="mb-3">
                <label class="form-label fw-semibold">Postal / Zip</label>
                <input type="text" class="form-control" id="stripePostalCode" placeholder="Postal / Zip">
              </div>

              <div class="mb-3">
                <label class="form-label fw-semibold">Notes</label>
                <textarea class="form-control" name="notes" rows="3" placeholder="Notes..."></textarea>
              </div>

              <div class="d-flex flex-column gap-2 mb-4">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="1" id="cc_send_notification" name="send_notification" checked>
                  <label class="form-check-label" for="cc_send_notification">Send email notifications</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="1" id="cc_show_note" name="show_note_on_invoice">
                  <label class="form-check-label" for="cc_show_note">Show note on customer invoice</label>
                </div>
              </div>

              <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" id="stripeProcessButton" {{ blank($stripePublishableKey) ? 'disabled' : '' }}>Process</button>
              </div>
            </form>
          </div>

          <div class="tab-pane fade" id="pos-pane" role="tabpanel" aria-labelledby="pos-tab">
            <form method="POST" action="{{ route($bookingRoutePrefix . 'transactions.store', $booking->booking_number) }}">
              @csrf
              <input type="hidden" name="payment_method" value="pos">
              <input type="hidden" name="redirect_to" value="{{ url()->current() }}">

              <div class="mb-3">
                <label class="form-label fw-semibold">Amount</label>
                <input type="number" class="form-control" name="amount" step="0.01" min="0.01" value="{{ $defaultPaymentAmount }}" required>
              </div>

              <div class="mb-3">
                <label class="form-label fw-semibold">Payment Type</label>
                <select class="form-select" name="pos_type" required>
                  @foreach(\App\Models\BookingTransaction::POS_TYPE_OPTIONS as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                  @endforeach
                </select>
              </div>

              <div class="mb-3">
                <label class="form-label fw-semibold">Payment Date</label>
                <input type="date" class="form-control" name="pos_date" value="{{ now()->format('Y-m-d') }}" required>
              </div>

              <div class="mb-3">
                <label class="form-label fw-semibold">Notes</label>
                <textarea class="form-control" name="notes" rows="3" placeholder="Notes..."></textarea>
              </div>

              <div class="d-flex flex-column gap-2 mb-4">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="1" id="pos_send_notification" name="send_notification" checked>
                  <label class="form-check-label" for="pos_send_notification">Send email notifications</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="1" id="pos_show_note" name="show_note_on_invoice">
                  <label class="form-check-label" for="pos_show_note">Show note on customer invoice</label>
                </div>
              </div>

              <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Process</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@if(filled($stripePublishableKey))
  <script src="https://js.stripe.com/v3/"></script>
  <style>
    .stripe-card-field {
      min-height: 46px;
      padding-top: 12px;
      padding-bottom: 12px;
      background: #fff;
      display: block;
      width: 100%;
    }

    .stripe-card-field .__PrivateStripeElement,
    .stripe-card-field iframe {
      width: 100% !important;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var stripeForm = document.getElementById('stripePaymentForm');
      var processButton = document.getElementById('stripeProcessButton');
      var errorBox = document.getElementById('stripe-card-errors');
      var cardNumberContainer = document.getElementById('stripe-card-number');
      var cardExpiryContainer = document.getElementById('stripe-card-expiry');
      var cardCvcContainer = document.getElementById('stripe-card-cvc');

      if (!stripeForm || !processButton || !cardNumberContainer || !cardExpiryContainer || !cardCvcContainer || typeof Stripe === 'undefined') {
        return;
      }

      var stripe = Stripe(@json($stripePublishableKey));
      var elements = stripe.elements();
      var elementStyle = {
        style: {
          base: {
            fontSize: '16px',
            color: '#1f2937',
            '::placeholder': { color: '#9ca3af' }
          }
        }
      };
      var cardNumber = elements.create('cardNumber', elementStyle);
      var cardExpiry = elements.create('cardExpiry', elementStyle);
      var cardCvc = elements.create('cardCvc', elementStyle);
      var stripeElementsMounted = false;

      function mountStripeElements() {
        if (stripeElementsMounted) {
          return;
        }

        cardNumber.mount('#stripe-card-number');
        cardExpiry.mount('#stripe-card-expiry');
        cardCvc.mount('#stripe-card-cvc');
        stripeElementsMounted = true;
      }

      [cardNumber, cardExpiry, cardCvc].forEach(function (stripeElement) {
        stripeElement.on('change', function (event) {
          errorBox.textContent = event.error ? event.error.message : '';
        });
      });

      var addPaymentModal = document.getElementById('addPaymentModal');
      if (addPaymentModal) {
        addPaymentModal.addEventListener('shown.bs.modal', function () {
          mountStripeElements();
          setTimeout(function () {
            cardNumber.focus();
          }, 150);
        });
      }

      if (!addPaymentModal || addPaymentModal.classList.contains('show')) {
        mountStripeElements();
        setTimeout(function () {
          cardNumber.focus();
        }, 150);
      }

      stripeForm.addEventListener('submit', async function (event) {
        event.preventDefault();
        errorBox.textContent = '';
        processButton.disabled = true;
        processButton.textContent = 'Processing...';

        try {
          var amountField = document.getElementById('stripePaymentAmount');
          var nameField = document.getElementById('stripeCardholderName');
          var addressField = document.getElementById('stripeBillingAddress');
          var postalField = document.getElementById('stripePostalCode');

          var intentResponse = await fetch(@json(route($bookingRoutePrefix . 'transactions.stripe-intent', $booking->booking_number)), {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json',
              'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
              amount: amountField.value
            })
          });

          var intentPayload = await intentResponse.json();
          if (!intentResponse.ok) {
            throw new Error(intentPayload.message || 'Unable to initialize Stripe payment.');
          }

          document.getElementById('stripePaymentIntentId').value = intentPayload.payment_intent_id || '';
          document.getElementById('stripeReference').value = intentPayload.payment_intent_id || '';

          var result = await stripe.confirmCardPayment(intentPayload.client_secret, {
            payment_method: {
              card: cardNumber,
              billing_details: {
                name: nameField.value || '',
                email: @json($booking->customer_email),
                address: {
                  line1: addressField.value || '',
                  postal_code: postalField.value || ''
                }
              }
            }
          });

          if (result.error) {
            throw new Error(result.error.message || 'Stripe payment failed.');
          }

          if (!result.paymentIntent || result.paymentIntent.status !== 'succeeded') {
            throw new Error('Stripe payment was not completed.');
          }

          var paymentMethod = result.paymentIntent.payment_method || {};
          var cardDetails = paymentMethod.card || {};

          document.getElementById('stripePaymentIntentId').value = result.paymentIntent.id || '';
          document.getElementById('stripeReference').value = result.paymentIntent.id || '';
          document.getElementById('stripePaymentMethodId').value = typeof result.paymentIntent.payment_method === 'string' ? result.paymentIntent.payment_method : (paymentMethod.id || '');
          document.getElementById('stripeLast4').value = cardDetails.last4 || '';
          document.getElementById('stripeBrand').value = cardDetails.brand || '';

          stripeForm.submit();
        } catch (error) {
          errorBox.textContent = error.message || 'Payment failed.';
          processButton.disabled = false;
          processButton.textContent = 'Process';
        }
      });
    });
  </script>
@endif