@extends('layouts.main')

@section('style')
  <style>
    /* --- Page Background --- */
    body {
      background-color: #f9fafe;
    }

    /* --- General Card Styling --- */
    .card {
      border: none;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
    }

    /* --- Order Summary Card (Left) --- */
    .list-group-flush .list-group-item {
      background-color: transparent;
      border-bottom: 1px solid #f0f0f0;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    .list-group-flush .list-group-item:last-child {
      border-bottom: none;
    }

    /* Prominent Total Row */
    #order-summary-total {
      background-color: #f8f9fa;
      border-top: 2px solid #0d6efd;
      margin-top: 10px;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
    }

    /* --- Form Card (Right) --- */
    .form-control {
      background-color: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      box-shadow: none;
      transition: all 0.2s ease-in-out;
    }

    .form-control:focus {
      background-color: #ffffff;
      border-color: #0d6efd;
      box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

    label.mandatory::after {
      content: ' *';
      color: #dc3545;
    }

    /* Heading Styles */
    h4,
    h5 {
      font-weight: 600;
      color: #333;
    }

    /* --- NEW --- Coupon/Coin Section Styling */
    .coupon-code-group .form-control {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .coupon-code-group .btn {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      box-shadow: none;
    }

    .coin-usage-box {
      background-color: #fdf8e6;
      border: 1px solid #f8e5ab;
      border-radius: 8px;
      padding: 1rem;
    }

    .coin-usage-box .form-control {
      background-color: #fff;
      font-weight: bold;
      text-align: right;
    }

    .coin-usage-box .input-group-text {
      background-color: #f8f9fa;
    }

    .coin-usage-box .form-check-input:checked {
      background-color: #0d6efd;
      border-color: #0d6efd;
    }

    /* --- NEW --- Payment Radio Styling */
    .payment-option {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 1rem;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .payment-option .form-check-input {
      float: right;
      margin-top: 0.25rem;
    }

    .payment-option:hover {
      background-color: #f9fafe;
      border-color: #0d6efd;
    }

    .form-check-input:checked+.payment-option {
      background-color: #e8f4ff;
      border-color: #0d6efd;
      box-shadow: 0 4px 10px rgba(13, 110, 253, 0.1);
    }

    /* --- NEW --- Main Submit Button */
    .btn-proceed {
      border-radius: 20px;
      padding: 10px 24px;
      font-weight: 600;
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: all 0.2s ease-in-out;
      box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
    }

    .btn-proceed:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(13, 110, 253, 0.3);
    }
  </style>
@endsection


@section('content')
  <div class="container py-4">

    {{-- We must wrap the form around everything --}}
    <form action="{{ route('placeorder') }}" id="form" method="POST">
      @csrf

      {{-- Hidden fields for password and discounts --}}
      <input type="hidden" name="password" id="password_main">
      <input type="hidden" name="coin_discount_amount" value="0">
      <input type="hidden" name="coupon_discount_amount" value="0">
      <input type="hidden" name="coins_used" value="0">
      <input type="hidden" name="final_total" value="0">
      {{-- <input type="hidden" name="address" value="{{ enc($addresses['id']) }}"> --}}

      <div class="row g-4"> {{-- Increased gutter for overall layout --}}

        {{-- Order Summary Column (Left) --}}
        <div class="col-lg-5 col-md-6 order-md-1">
          <h4 class="mb-3">Your Order</h4>
          <div class="card shadow-sm border-0 order-summary-card">

            @php
              // --- THIS IS YOUR ORIGINAL CALCULATION LOGIC ---
              // I've just moved it to the top so $total is available for the JS.
              $subtotal = 0;
              foreach ($receiver_data as $item) {
                  $subtotal += $item->price * $item->quantity;
              }

              $shipping = $shipping ?? 0;
              $taxRate = $taxRate ?? 0;
              $tax = $subtotal * $taxRate;

              // THIS IS THE KEY VARIABLE FOR THE JAVASCRIPT
              $total = $subtotal + $tax + $shipping;
            @endphp

            <div class="col-md-12">
              <ul class="list-group list-group-flush">

                {{-- --- THIS IS YOUR ORIGINAL ITEM LOOP --- --}}
                @forelse ($receiver_data as $item)
                  <li class="list-group-item d-flex justify-content-between align-items-center">
                    <div class="me-3">
                      <p class="mb-0 fw-bold">{{ $item->product->name }}</p>
                    </div>
                    <div class="text-end text-nowrap">
                      <span class="text-muted small">({{ $item->quantity }}x {{ AmountFormat($item->price) }})</span>
                      <strong class="ms-2">{{ AmountFormat($item->price * $item->quantity) }}</strong>
                    </div>
                  </li>
                @empty
                  <li class="list-group-item">
                    <p class="text-muted text-center mb-0">No items to display.</p>
                  </li>
                @endforelse

                {{-- --- THIS IS YOUR ORIGINAL CALCULATION DISPLAY --- --}}
                @if ($subtotal > 0)
                  {{-- Subtotal --}}
                  <li class="list-group-item d-flex justify-content-between align-items-center pt-3">
                    <p class="mb-0">Subtotal</p>
                    <p class="mb-0">{{ AmountFormat($subtotal) }}</p>
                  </li>

                  {{-- Shipping (conditional) --}}
                  @if ($shipping > 0)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      <p class="mb-0">Shipping</p>
                      <p class="mb-0">{{ AmountFormat($shipping) }}</p>
                    </li>
                  @endif

                  {{-- Tax --}}
                  @if ($tax > 0)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      <p class="mb-0">Tax ({{ $taxRate * 100 }}%)</p>
                      <p class="mb-0">{{ AmountFormat($tax) }}</p>
                    </li>
                  @endif

                  {{-- --- NEW --- Injected Discount Rows --}}
                  <li class="list-group-item d-flex justify-content-between text-success">
                    <span>Coins Discount</span><span id="discount_display">-₹0.00</span>
                  </li>
                  <li class="list-group-item d-flex justify-content-between text-success">
                    <span>Coupon Discount <span id="remover_div"></span></span>
                    <span id="coupon_discount_display">-₹0.00</span>
                  </li>

                  {{-- --- MODIFIED --- Grand Total (Now JS-controlled) --}}
                  <li class="list-group-item d-flex justify-content-between align-items-center pt-3"
                    id="order-summary-total">
                    <h5 class="mb-0 fw-bold">Total</h5>
                    {{-- This ID is new, so JS can update it --}}
                    <h5 class="mb-0 fw-bold" id="final_amount_display">{{ AmountFormat($total) }}</h5>
                  </li>
                @endif
              </ul>
            </div>

          </div>
        </div>

        {{-- Address & Billing Column (Right) --}}
        <div class="col-lg-7 col-md-6 order-md-2">

          <div class="card p-4 p-md-5">
            <!-- Address Section -->
            <h5 class="mb-3 border-bottom pb-1">Address</h5>
            @php
              $addressFields = [
                  // 'salutation' => 'Salutation',
                  'country' => 'Country',
                  'postcode' => 'Postal Code',
                  // ... other fields as needed
              ];
            @endphp
            <div class="row g-3" id="address-form-wrapper">
              @foreach ($addressFields as $key => $label)
                <div class="col-md-6">
                  @if ($key === 'salutation')
                    <label class="form-label">{{ $label }}</label>
                    <select class="form-select" name="address[salutation]">
                      <option value="">Select Salutation</option>
                      <option value="Master">Master</option>
                      <option value="Miss">Miss</option>
                      <option value="Mr.">Mr.</option>
                      <option value="Mrs.">Mrs.</option>
                      <option value="Ms.">Ms.</option>
                    </select>
                  @elseif($key === 'postcode' || $key === 'country')
                    <label class="form-label mandatory">{{ $label }}</label>
                    <input type="text" class="form-control" name="address[{{ $key }}]"
                      placeholder="{{ $label }}" required>
                  @else
                    <label class="form-label">{{ $label }}</label>
                    <input type="text" class="form-control" name="address[{{ $key }}]"
                      placeholder="{{ $label }}">
                  @endif
                </div>
              @endforeach
            </div>

            <!-- Billing Section -->
            <div class="d-flex align-items-center justify-content-between mt-4 d-none">
              <h5 class="mb-0 pb-1">Billing Address</h5>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="billToThisCheck" checked>
                <label class="form-check-label fw-semibold" for="billToThisCheck">
                  Same as Address
                </label>
              </div>
            </div>

            <div id="billing-form-container" class="mt-3 d-none">
              @php $billingFields = $addressFields; @endphp
              <div class="row g-3" id="billing-form-wrapper">
                @foreach ($billingFields as $key => $label)
                  <div class="col-md-6">
                    @if ($key === 'salutation')
                      <label class="form-label">{{ $label }}</label>
                      <select class="form-select" name="billing[salutation]">
                        <option value="">Select Salutation</option>
                        <option value="Master">Master</option>
                        <option value="Miss">Miss</option>
                        <option value="Mr.">Mr.</option>
                        <option value="Mrs.">Mrs.</option>
                        <option value="Ms.">Ms.</option>
                      </select>
                    @elseif($key === 'postcode' || $key === 'country')
                      <label class="form-label mandatory">{{ $label }}</label>
                      <input type="text" class="form-control" name="billing[{{ $key }}]"
                        placeholder="{{ $label }}" required>
                    @else
                      <label class="form-label">{{ $label }}</label>
                      <input type="text" class="form-control" name="billing[{{ $key }}]"
                        placeholder="{{ $label }}">
                    @endif
                  </div>
                @endforeach
              </div>
            </div>

            <hr class="my-4">

            {{-- --- NEW: Coupon Code Section --- --}}
            <h5 class="mb-3">Discounts</h5>
            <div class="mb-3">
              <label for="coupon_code" class="form-label">Coupon Code</label>
              <div class="input-group coupon-code-group">
                <input type="text" name="coupon_code" id="coupon_code"
                  class="form-control @error('coupon_code') is-invalid @enderror" placeholder="Enter Coupon Code"
                  maxlength="16" style="text-transform: uppercase; letter-spacing: 2px;">
                <button class="btn btn-primary" id="apply_coupon" type="button">Apply</button>
              </div>
              @error('coupon_code')
                <div class="invalid-feedback d-block">{{ $message }}</div>
              @enderror
            </div>

            {{-- --- NEW: Coin Usage Section --- --}}
            @php
              // This logic is from your reference file
              $initial_coins_to_use = 0;
              if ((float) getSetting('coin_value') > 0 && Auth::check() && Auth::user()->coins > 0) {
                  $coinValue = (float) getSetting('coin_value');
                  $maxCoinsForTotal = floor($total / $coinValue); // Using $total from this page
                  $maxCoinsUserHas = Auth::user()->coins;
                  $initial_coins_to_use = min($maxCoinsForTotal, $maxCoinsUserHas);
              }
            @endphp
            <div class="mb-4 coin-usage-box {{ $initial_coins_to_use == 0 ? 'd-none' : '' }}">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <h5 class="mb-0 text-dark">Use Coins</h5>
                <div class="form-check form-switch">
                  <input class="form-check-input" value="1" name="use_coins" type="checkbox" id="useCoinsSwitch"
                    style="width: 3em; height: 1.5em;">
                </div>
              </div>
              <div class="input-group">
                <input type="text" class="form-control" value="{{ $initial_coins_to_use }}" name="coin_amount"
                  id="coin_amount" readonly>
                <span class="input-group-text">
                  <img width="20px" src="{{ asset('assets/images/rewared_coin.png') }}" alt="Coin"
                    class="spin-y">
                </span>
              </div>
            </div>

            <hr class="my-4">

            {{-- --- NEW: Payment Method Section --- --}}
            <h5 class="mb-3">Select Payment Method</h5>

            <input class="form-check-input d-none" type="radio" name="payment_type" id="onlinePayment"
              value="Online" checked>
            <label class="form-check-label payment-option mb-2" for="onlinePayment">
              <i class="bi bi-credit-card me-1"></i> Online Payment (Razorpay)
            </label>

            <input class="form-check-input d-none" type="radio" name="payment_type" id="walletPayment"
              value="Wallet">
            <label class="form-check-label payment-option mb-4" for="walletPayment">
              <i class="bi bi-wallet2 me-1"></i> Wallet Payment
              <small class="text-success wallet_balance d-none"><br>
                Balance : ₹{{ Auth::check() ? Auth::user()->wallet : '0.00' }}
              </small>
            </label>

            {{-- Payment Button --}}
            <div class="d-flex justify-content-center my-3">
              <button type="submit" class="btn btn-primary w-100 py-2 fs-5 btn-proceed">
                <i class="bi bi-lock-fill me-2"></i> Proceed to Pay
              </button>
            </div>

          </div> {{-- End of card wrapper for form --}}
        </div>

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

  {{-- Password Modal (from checkout-combined) --}}
  <div class="modal fade" id="password_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="password_modalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="password_modalLabel">Password Confirmation</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <label for="password_sub" class="form-label">Enter password</label>
          <input type="password" id="password_sub" class="form-control">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" id="wallet_submit" class="btn btn-success">Pay</button>
        </div>
      </div>
    </div>
  </div>

  {{-- Coupon Alert Modal (from cart) --}}
  <div class="modal fade" id="coupon_code_alert_modal" data-bs-backdrop="static" data-bs-keyboard="false"
    tabindex="-1" aria-labelledby="coupon_code_alert_modalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="coupon_code_alert_modalLabel">Alert!</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="coupon_code_alert_mass"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('script')
  {{-- --- SCRIPT FROM checkout-combined.blade.php --- --}}
  <script>
    var addressFields = [
      'salutation', 'firstname', 'lastname', 'email', 'telephone',
      'line1', 'line2', 'city', 'region', 'country', 'postcode', 'gstn', 'code'
    ];
    addressFields.forEach(function(field) {
      const fieldElement = $(`[name="address[${field}]"]`);
      fieldElement.on("input change keyup", function() {
        if (fieldElement.length) {
          let value = fieldElement.val();
          $(`[name="billing[${field}]"]`).val(value);
        }
      })

    })

    function coppy_to_biling() {
      addressFields.forEach(function(field) {
        // Check if the field exists before trying to get its value
        const fieldElement = $(`[name="address[${field}]"]`);
        if (fieldElement.length) {
          let value = fieldElement.val();
          $(`[name="billing[${field}]"]`).val(value);
        }
      });
    }

    $(document).ready(function() {
      // "Same as" checkbox logic
      coppy_to_biling();
      // const $billingFormContainer = $('#billing-form-container');
      // $('#billToThisCheck').on('change', function() {
      //   if ($(this).is(':checked')) {
      //     $billingFormContainer.addClass('d-none');

      //   } else {
      //     $billingFormContainer.removeClass('d-none');
      //     const billingFields = [
      //       'salutation', 'firstname', 'lastname', 'email', 'telephone',
      //       'line1', 'line2', 'city', 'region', 'country', 'postcode', 'company', 'gstn', 'code'
      //     ];
      //     billingFields.forEach(function(field) {
      //       $(`[name="billing[${field}]"]`).val('');
      //     });
      //   }
      // }).trigger('change'); // Trigger on load
    });
  </script>

  {{-- --- SCRIPT FROM cart.blade.php (Now using your $total) --- --}}
  <script>
    // --- 1. Centralized State Management ---
    const checkout = {
      // --- THIS IS THE KEY CHANGE ---
      // It now uses the $total calculated from *your* page's logic.
      baseTotal: parseFloat(`{{ $total }}`) || 0,

      coinValue: parseFloat(`{{ getSetting('coin_value') }}`) || 0,
      userCoinBalance: parseInt(`{{ Auth::check() ? Auth::user()->coins : 0 }}`, 10) || 0,
      coinsMaxUseSetting: parseFloat(`{{ getSetting('coins_max_use') }}`) || 0,
      coinsMaxUseType: `{{ getSetting('coins_max_use_by') }}`.trim(),
      useCoins: false,
      couponData: null,
      appliedCoinDiscount: 0,
      appliedCouponDiscount: 0,
      coinsToUse: 0,
      finalTotal: 0,
    };

    // --- 2. Main Calculation Function (Unchanged from reference) ---
    function updateTotals() {
      checkout.appliedCouponDiscount = 0;
      checkout.appliedCoinDiscount = 0;
      checkout.coinsToUse = 0;
      checkout.finalTotal = checkout.baseTotal;

      const maxAllowedTotalDiscount = Math.max(0, checkout.baseTotal - 1.00);
      let remainingDiscountAllowance = maxAllowedTotalDiscount;

      // Step 1: Apply Coupon
      if (checkout.couponData) {
        let potentialCouponDiscount = 0;
        if (checkout.couponData.discount_type === 'percentage') {
          potentialCouponDiscount = checkout.baseTotal * (parseFloat(checkout.couponData.discount_amount) / 100);
        } else {
          potentialCouponDiscount = parseFloat(checkout.couponData.discount_amount);
        }
        checkout.appliedCouponDiscount = Math.min(potentialCouponDiscount, remainingDiscountAllowance);
        remainingDiscountAllowance -= checkout.appliedCouponDiscount;
      }

      // Step 2: Apply Coins
      if (checkout.useCoins && checkout.coinValue > 0) {
        const totalAfterCoupon = checkout.baseTotal - checkout.appliedCouponDiscount;
        const maxCoinsForTotal = Math.floor(totalAfterCoupon / checkout.coinValue);
        const maxCoinsUserHas = checkout.userCoinBalance;
        let maxCoinsBySetting = Infinity;
        if (checkout.coinsMaxUseSetting > 0) {
          if (checkout.coinsMaxUseType === '%') {
            const maxDiscountValue = (checkout.baseTotal * checkout.coinsMaxUseSetting) / 100;
            maxCoinsBySetting = Math.floor(maxDiscountValue / checkout.coinValue);
          } else {
            maxCoinsBySetting = parseInt(checkout.coinsMaxUseSetting, 10);
          }
        }
        const potentialCoinsToUse = Math.max(0, Math.min(maxCoinsForTotal, maxCoinsUserHas, maxCoinsBySetting));
        const potentialCoinDiscount = potentialCoinsToUse * checkout.coinValue;
        checkout.appliedCoinDiscount = Math.min(potentialCoinDiscount, remainingDiscountAllowance);
        checkout.coinsToUse = checkout.coinValue > 0 ? Math.floor(checkout.appliedCoinDiscount / checkout.coinValue) : 0;
      }

      // Step 3: Final Total
      checkout.finalTotal = checkout.baseTotal - checkout.appliedCouponDiscount - checkout.appliedCoinDiscount;
      updateDisplay();
    }

    // --- 3. Display Function ---
    function updateDisplay() {
      const formatCurrency = (value) => `₹${value.toFixed(2)}`;
      $("#discount_display").html(`-${formatCurrency(checkout.appliedCoinDiscount)}`);
      $("#coupon_discount_display").html(`-${formatCurrency(checkout.appliedCouponDiscount)}`);
      // This is the key: it updates your "Total" row's value
      $("#final_amount_display").html(formatCurrency(checkout.finalTotal));

      $('#coin_amount').val(checkout.coinsToUse);
      $('input[name="coin_discount_amount"]').val(checkout.appliedCoinDiscount.toFixed(2));
      $('input[name="coupon_discount_amount"]').val(checkout.appliedCouponDiscount.toFixed(2));
      $('input[name="coins_used"]').val(checkout.coinsToUse);
      $('input[name="final_total"]').val(checkout.finalTotal.toFixed(2));
    }

    // --- 4. Event Handlers (From reference) ---
    $(document).ready(function() {
      // Handle Coin Switch
      $('#useCoinsSwitch').on('change', function() {
        checkout.useCoins = $(this).is(':checked');
        updateTotals();
      });

      // Handle Coupon Application
      $('#apply_coupon').on('click', function() {
        const couponCode = $("#coupon_code").val().trim();
        if (!couponCode) {
          showAlert('Please enter a valid coupon code!');
          return;
        }
        $.ajax({
          url: "{{ route('coupon.get') }}",
          type: "POST",
          data: {
            coupon_code: couponCode,
            _token: $("input[name='_token']").val()
          },
          success: (data) => {
            try {
              const response = typeof data === 'string' ? JSON.parse(data) : data;
              if (response.status === "s") {
                checkout.couponData = response.code_data;
                showCouponSuccess(couponCode, response.code_data);
                updateTotals();
              } else {
                showAlert("Invalid Coupon Code!");
                removeCoupon();
              }
            } catch (e) {
              showAlert('An error occurred.');
            }
          },
          error: () => showAlert('Error communicating with the server.')
        });
      });

      // Handle payment type change
      $('input[name="payment_type"]').on('change', function() {
        if ($('#walletPayment').is(':checked')) {
          $('.wallet_balance').removeClass('d-none');
        } else {
          $('.wallet_balance').addClass('d-none');
        }
      });

      // Handle Coupon Removal
      $(document).on('click', '.remove_coupon', function() {
        removeCoupon();
      });

      function removeCoupon() {
        checkout.couponData = null;
        $("#coupon_code").val('');
        $("#remover_div").html("");
        updateTotals();
      }

      function showAlert(message) {
        $("#coupon_code_alert_mass").html(`<p class="text-danger text-center">${message}</p>`);
        $("#coupon_code_alert_modal").modal("show");
      }

      function showCouponSuccess(code, data) {
        $("#remover_div").html(`<button type="button" class="btn p-0 btn-sm text-danger mt-2 remove_coupon d-flex"
                    style="top:-10px;left : 0px;"><i class="fa-solid fa-xmark"></i>&nbsp;Remove&nbsp;Coupon</button>`);
        const successHtml = `
            <div class="text-center">
                <h4 class="text-success mb-3"><i class="bi bi-check-circle-fill me-2"></i>${data.title}</h4>
                <p class="text-muted">${data.description}</p>
                <h5 class="mt-4 text-success fw-bold">
                    <i class="bi bi-ticket-perforated me-2"></i>${code.toUpperCase()} applied!
                </h5>
            </div>`;
        $("#coupon_code_alert_mass").html(successHtml);
        $("#coupon_code_alert_modal").modal("show");
      }

      // Initial calculation
      checkout.useCoins = $('#useCoinsSwitch').is(':checked');
      updateTotals();
    });
  </script>

  {{-- --- NEW --- Merged Form Submission Logic --- --}}
  <script>
    $(document).ready(function() {
      $("#password_main").val("");
      $("#password_sub").val("");
      // Handle the main form submission
      $("#form").on("submit", function(e) {
        e.preventDefault(); // Stop the form from submitting immediately
        coppy_to_biling(); // Your original function call
        const paymentType = $('input[name="payment_type"]:checked').val();

        if (paymentType === 'Wallet') {
          // User chose wallet, show the password modal
          if ($("#password_main").val() == "") {
            $("#password_modal").modal("show");
          } else {
            this.submit();
          }
        } else {
          // User chose Online, set the action and submit
          $(this).attr("action", `{{ route('woohoo.order') }}`);
          this.submit();
        }
      });

      // Handle the password modal's submit button
      $(document).on("click", "#wallet_submit", function() {
        $("#password_main").val($("#password_sub").val());
        const $form = $("#form");
        $form.attr("action", `{{ route('woohoo.order.wallet') }}`);
        $form.submit();
      });
    });
  </script>
@endpush