@section('metaTitle', 'Checkout - Punjabi Mandi')
@section('body_id', 'checkout-page-body')
@section('body_class', 'lang-en country-ca currency-cad layout-full-width page-checkout')

@section('theme_css')
  <link rel="stylesheet" href="{{ asset('newui/assets/css/theme-0f35d543.css') }}" type="text/css" media="all">
@endsection

@section('theme_bottom_js')
  <script type="text/javascript" src="{{ asset('newui/assets/js/bottom-282dcc42.js') }}"></script>
@endsection

@section('breadcrumb')
  <ol data-depth="3" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="{{ route('home') }}"> <span itemprop="name">Home</span> </a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="{{ route('cart') }}"> <span itemprop="name">Shopping Cart</span> </a>
      <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="{{ route('checkout') }}"> <span itemprop="name">Checkout</span> </a>
      <meta itemprop="position" content="3">
    </li>
  </ol>
@endsection

@push('styles')
<style>
  .pm-change-slot-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  .pm-change-slot-badge:hover {
    background: #d1fae5;
    color: #064e3b;
    text-decoration: none;
  }
  .pm-delivery-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .pm-option-card.pm-disabled-option {
    opacity: 0.65;
    cursor: default;
    background: #f8fafc;
  }
  .pm-option-card.pm-disabled-option:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
  }
  .pm-form-control.is-invalid {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
  }
</style>
@endpush

<x-app-layout>
  @php
    $isPickup = ($cart->type === 'pickup');
    $formattedDeliveryDate = $cart->date ? \Carbon\Carbon::parse($cart->date)->format('jS M Y') : 'Tomorrow';
    $formattedDeliveryTime = $cart->time ? strtoupper($cart->time) : '09:00 AM - 10:00 AM';
    $subtotal = (float)$cart->total_amount;
    $deliveryCharge = (float)($cart->price ?? 0);
    $taxTotal = (float)($cart->tax_total ?? 0);
    $tax = (float)($cart->tax ?? 0);
    $discount = (float)($cart->discount_amount ?? 0);
    $grandTotal = (float)($cart->grand_total + $deliveryCharge);
  @endphp

  <!-- MAIN CHECKOUT SECTION -->
  <section class="pm-checkout-section">
    <div class="container">

      <!-- Checkout Page Header Box -->
      <div class="pm-checkout-header-box">
        <h1 class="pm-checkout-title">
          <i class="material-icons" style="font-size: 32px; color: var(--primary-color);">&#xE876;</i>
          Checkout
        </h1>
        <div class="pm-checkout-header-actions">
          <a href="{{ route('cart') }}" class="pm-btn-continue">
            <i class="material-icons" style="font-size: 18px;">&#xE5C4;</i> Return to Cart
          </a>
        </div>
      </div>

      <!-- Active Checkout Content Layout -->
      <form action="{{ route('payment.initiate') }}" method="POST" id="checkoutForm">
        @csrf
        <input type="hidden" id="delivery_type" name="delivery_type" value="{{ $cart->type }}">
        <input type="hidden" id="delivery_city" name="delivery_city" value="{{ $delivery_city }}">
        <input type="hidden" id="delivery_price" name="delivery_price" value="{{ $cart->price }}">

        <div class="row" style="display: flex; align-items: flex-start; flex-wrap: wrap;">

          <!-- Left Column: Checkout Step Forms -->
          <div class="col-lg-8 col-md-12">

            <!-- Step 1: Personal Information -->
            <div class="pm-checkout-step-card">
              <div class="pm-step-header">
                <span class="pm-step-num">1</span>
                <span>Personal Information</span>
              </div>

              <div class="pm-form-row">
                <div class="pm-form-col-6">
                  <label class="pm-form-label">First Name <span class="required">*</span></label>
                  <input type="text" class="pm-form-control @error('first_name') is-invalid @enderror" id="first_name" name="first_name" placeholder="First Name" value="{{ old('first_name', $customer->first_name) }}">
                  <span class="pm-field-error" id="error-first_name" style="font-size: 12px; color: #ef4444; margin-top: 4px; display: {{ $errors->has('first_name') ? 'block' : 'none' }};">{{ $errors->first('first_name') }}</span>
                </div>
                <div class="pm-form-col-6">
                  <label class="pm-form-label">Last Name <span class="required">*</span></label>
                  <input type="text" class="pm-form-control @error('last_name') is-invalid @enderror" id="last_name" name="last_name" placeholder="Last Name" value="{{ old('last_name', $customer->last_name) }}">
                  <span class="pm-field-error" id="error-last_name" style="font-size: 12px; color: #ef4444; margin-top: 4px; display: {{ $errors->has('last_name') ? 'block' : 'none' }};">{{ $errors->first('last_name') }}</span>
                </div>
              </div>

              <div class="pm-form-row" style="margin-bottom: 0;">
                <div class="pm-form-col-6">
                  <label class="pm-form-label">Email Address <span class="required">*</span></label>
                  <input type="email" class="pm-form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="name@example.com" value="{{ old('email', $customer->email) }}">
                  <span class="pm-field-error" id="error-email" style="font-size: 12px; color: #ef4444; margin-top: 4px; display: {{ $errors->has('email') ? 'block' : 'none' }};">{{ $errors->first('email') }}</span>
                </div>
                <div class="pm-form-col-6">
                  <label class="pm-form-label">Phone Number <span class="required">*</span></label>
                  <input type="tel" inputmode="numeric" maxlength="15" oninput="this.value = this.value.replace(/\D/g, '')" class="pm-form-control @error('phone') is-invalid @enderror" id="phone" name="phone" placeholder="Enter phone number" value="{{ old('phone', $customer->phone) }}">
                  <span class="pm-field-error" id="error-phone" style="font-size: 12px; color: #ef4444; margin-top: 4px; display: {{ $errors->has('phone') ? 'block' : 'none' }};">{{ $errors->first('phone') }}</span>
                </div>
              </div>
            </div>

            <!-- Step 2: Shipping / Delivery Address -->
            <div class="pm-checkout-step-card">
              <div class="pm-step-header">
                <span class="pm-step-num">2</span>
                <span>Billing & Shipping Address</span>
              </div>

              <div class="pm-form-row">
                <div class="pm-form-col-12">
                  <label class="pm-form-label">Street Address <span class="required">*</span></label>
                  <input type="text" class="pm-form-control @error('address') is-invalid @enderror" id="floatingInputAddress" name="address" placeholder="1234 Platinum Dr, Unit 100" value="{{ old('address', $customerAddress?->address) }}" autocomplete="off">
                  <span class="pm-field-error" id="error-address" style="font-size: 12px; color: #ef4444; margin-top: 4px; display: {{ $errors->has('address') ? 'block' : 'none' }};">{{ $errors->first('address') }}</span>
                </div>
              </div>

              <div class="pm-form-row">
                <div class="pm-form-col-6">
                  <label class="pm-form-label">City <span class="required">*</span></label>
                  <input type="text" class="pm-form-control @error('city') is-invalid @enderror" id="locality" name="city" placeholder="City" value="{{ old('city', $customerAddress?->city) }}">
                  <span class="pm-field-error" id="error-city" style="font-size: 12px; color: #ef4444; margin-top: 4px; display: {{ $errors->has('city') ? 'block' : 'none' }};">{{ $errors->first('city') }}</span>
                </div>
                <div class="pm-form-col-6">
                  <label class="pm-form-label">Province / State <span class="required">*</span></label>
                  <input type="text" class="pm-form-control @error('state') is-invalid @enderror" id="administrative_area_level_1" name="state" placeholder="Ontario" value="{{ old('state', $customerAddress?->state ?? 'ON') }}">
                  <span class="pm-field-error" id="error-state" style="font-size: 12px; color: #ef4444; margin-top: 4px; display: {{ $errors->has('state') ? 'block' : 'none' }};">{{ $errors->first('state') }}</span>
                </div>
              </div>

              <div class="pm-form-row" style="margin-bottom: 0;">
                <div class="pm-form-col-6">
                  <label class="pm-form-label">Postal Code / Zip <span class="required">*</span></label>
                  <input type="text" class="pm-form-control @error('pincode') is-invalid @enderror" id="postal_code" name="pincode" placeholder="L5M 2R9" value="{{ old('pincode', $customerAddress?->pincode) }}">
                  <span class="pm-field-error" id="error-pincode" style="font-size: 12px; color: #ef4444; margin-top: 4px; display: {{ $errors->has('pincode') ? 'block' : 'none' }};">{{ $errors->first('pincode') }}</span>
                </div>
                <div class="pm-form-col-6">
                  <label class="pm-form-label">Country <span class="required">*</span></label>
                  <select class="pm-form-control" id="country" name="country">
                    <option value="Canada" selected>Canada</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Step 3: Delivery Method (Automatically Decided from Book-a-Time) -->
            <div class="pm-checkout-step-card">
              <div class="pm-step-header" style="justify-content: space-between;">
                <div style="display: flex; align-items: center; gap: 12px;">
                  <span class="pm-step-num">3</span>
                  <span>Delivery Method</span>
                </div>
                <a href="{{ route('book-time') }}" class="pm-change-slot-badge" title="Change date, time or delivery method">
                  <i class="material-icons" style="font-size: 16px;">edit_calendar</i> Change Slot / Method
                </a>
              </div>

              <div class="pm-option-grid">
                @if(!$isPickup)
                  {{-- Selected: Standard Grocery Delivery --}}
                  <label class="pm-option-card selected" id="opt-shipping-std">
                    <div class="pm-option-left">
                      <input type="radio" name="shipping_method" value="std" class="pm-option-radio" checked>
                      <div>
                        <div class="pm-option-title">Standard Grocery Delivery</div>
                        <div class="pm-option-sub">
                          Delivered on {{ $formattedDeliveryDate }} between {{ $formattedDeliveryTime }}
                        </div>
                        @if($delivery_city)
                          <div class="pm-delivery-meta">
                            <span style="font-size: 12px; color: #475569; background: #f1f5f9; padding: 2px 8px; border-radius: 4px;">
                              Destination City: <strong>{{ $delivery_city }}</strong>
                            </span>
                          </div>
                        @endif
                      </div>
                    </div>
                    <div class="pm-option-price">${{ number_format($deliveryCharge, 2) }}</div>
                  </label>

                  {{-- Inactive option: Pickup available via book-a-time --}}
                  <div class="pm-option-card pm-disabled-option">
                    <div class="pm-option-left">
                      <input type="radio" disabled class="pm-option-radio">
                      <div>
                        <div class="pm-option-title" style="color: #64748b;">In-Store Pickup</div>
                        <div class="pm-option-sub">Pickup from {{ $store_location }}</div>
                      </div>
                    </div>
                    <div class="pm-option-price" style="color: #94a3b8;">FREE</div>
                  </div>
                @else
                  {{-- Inactive option: Delivery available via book-a-time --}}
                  <div class="pm-option-card pm-disabled-option">
                    <div class="pm-option-left">
                      <input type="radio" disabled class="pm-option-radio">
                      <div>
                        <div class="pm-option-title" style="color: #64748b;">Standard Grocery Delivery</div>
                        <div class="pm-option-sub">Select a delivery city and slot in book-a-time</div>
                      </div>
                    </div>
                    <div class="pm-option-price" style="color: #94a3b8;">CALCULATED</div>
                  </div>

                  {{-- Selected: In-Store Pickup --}}
                  <label class="pm-option-card selected" id="opt-shipping-pickup">
                    <div class="pm-option-left">
                      <input type="radio" name="shipping_method" value="pickup" class="pm-option-radio" checked>
                      <div>
                        <div class="pm-option-title">In-Store Pickup</div>
                        <div class="pm-option-sub">Pickup from {{ $store_location }}</div>
                        @if($cart->date && $cart->time)
                          <div class="pm-delivery-meta">
                            <span style="font-size: 12px; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 2px 8px; border-radius: 4px; font-weight: 600;">
                              <i class="material-icons" style="font-size: 13px; vertical-align: middle;">schedule</i> Booked for: {{ $formattedDeliveryDate }} between {{ $formattedDeliveryTime }}
                            </span>
                          </div>
                        @endif
                      </div>
                    </div>
                    <div class="pm-option-price" style="color: #047857;">FREE</div>
                  </label>
                @endif
              </div>
            </div>

            <!-- Step 4: Order Notes -->
            <div class="pm-checkout-step-card">
              <div class="pm-step-header">
                <span class="pm-step-num">4</span>
                <span>Order Notes</span>
              </div>

              <div class="pm-form-group" style="margin-top: 16px; margin-bottom: 0;">
                <label class="pm-form-label">Order Notes / Delivery Instructions (Optional)</label>
                <textarea class="pm-form-control" name="note" placeholder="Special notes for delivery driver or store staff..." style="height: 100px;">{{ old('note') }}</textarea>
              </div>
            </div>

          </div>

          <!-- Right Column: Sticky Order Summary Preview -->
          <div class="col-lg-4 col-md-12 pm-checkout-summary-col">
            <div class="pm-summary-card">
              <h2 class="pm-summary-title">
                Order Summary
                <i class="material-icons" style="color: var(--primary-color); font-size: 24px;">&#xE8C0;</i>
              </h2>

              <!-- Items List Preview -->
              <div class="pm-checkout-items-wrapper">
                @foreach ($cart->items as $item)
                  @php
                    $productImg = count($item->product?->images ?? []) ? asset($item->product->images[0]->image_url) : asset('frontend/assets/images/logo.png');
                    $productUrl = $item->product ? route('productByCategory', $item->product->url_key) : '#';
                    $itemUnit = $item->product?->weight ? ($item->product->weight . ' ' . $item->product->weight_type) : ($item->product?->unit ?? '');
                  @endphp
                  <div class="pm-checkout-item">
                    <div class="pm-checkout-thumb">
                      <img src="{{ $productImg }}" alt="{{ $item->product?->name ?? 'Product' }}" loading="lazy">
                      <span class="pm-checkout-qty-badge">{{ $item->quantity }}</span>
                    </div>
                    <div class="pm-checkout-item-info">
                      <a href="{{ $productUrl }}" class="pm-checkout-item-name" target="_blank" style="text-decoration: none;" title="{{ $item->product?->name ?? $item->name }}">
                        {{ $item->product?->name ?? $item->name }}
                      </a>
                      @if($itemUnit)
                        <div class="pm-checkout-item-unit">{{ $itemUnit }}</div>
                      @endif
                    </div>
                    <div class="pm-checkout-item-price">${{ number_format($item->total_amount, 2) }}</div>
                  </div>
                @endforeach
              </div>

              <!-- Price Breakdown Lines -->
              <div class="pm-summary-row">
                <span class="pm-summary-label">Items Subtotal</span>
                <span class="pm-summary-value">${{ number_format($subtotal, 2) }}</span>
              </div>

              @if($taxTotal > 0)
                <div class="pm-summary-row">
                  <span class="pm-summary-label">Taxable Product SubTotal</span>
                  <span class="pm-summary-value">${{ number_format($taxTotal, 2) }}</span>
                </div>
              @endif

              @if($discount > 0)
                <div class="pm-summary-row">
                  <span class="pm-summary-label">Coupon Discount @if($cart->coupon_code) ({{ $cart->coupon_code }}) @endif</span>
                  <span class="pm-summary-value" style="color: #047857; font-weight: 700;">- ${{ number_format($discount, 2) }}</span>
                </div>
              @endif

              <div class="pm-summary-row">
                <span class="pm-summary-label">Estimated Tax ({{ $taxTotal > 0 ? '13%' : '0%' }})</span>
                <span class="pm-summary-value">${{ number_format($tax, 2) }}</span>
              </div>

              <div class="pm-summary-row">
                <span class="pm-summary-label">Delivery Fee</span>
                <span class="pm-summary-value" id="co-shipping-fee" style="{{ $deliveryCharge == 0 ? 'color: #047857; font-weight: 700;' : '' }}">
                  {{ $deliveryCharge > 0 ? ('$' . number_format($deliveryCharge, 2)) : 'FREE' }}
                </span>
              </div>

              <div class="pm-summary-divider"></div>

              <div class="pm-summary-total-row">
                <span class="pm-summary-total-label">Total Amount</span>
                <span class="pm-summary-total-value" id="co-grand-total">${{ number_format($grandTotal, 2) }}</span>
              </div>

              <!-- Place Order Box -->
              <div class="pm-place-order-box">
                <label class="pm-terms-checkbox">
                  <input type="checkbox" id="terms-agree" checked>
                  <span>I have read and agree to the Punjabi Mandi <a href="{{ route('page.view', 'terms-conditions') }}" target="_blank" style="color: var(--primary-color); text-decoration: underline;">Terms & Conditions</a>.</span>
                </label>
                <span class="pm-field-error" id="error-terms" style="font-size: 12px; color: #ef4444; margin-top: 4px; display: none;"></span>

                <button type="submit" class="pm-btn-place-order" id="placeOrderBtn">
                  <i class="material-icons" style="font-size: 22px;">&#xE86C;</i> Place Order Now
                </button>
              </div>

              <div class="pm-trust-section">
                <div class="pm-trust-title">Guaranteed Safe & Secure Checkout</div>
                <img src="{{ asset('newui/assets/img/payment_icons.png') }}" alt="Payment Methods" class="pm-payment-img">

                <div class="pm-trust-badges">
                  <div class="pm-trust-item">
                    <i class="material-icons">&#xE889;</i>
                    <span>Fresh Harvest</span>
                  </div>
                  <div class="pm-trust-item">
                    <i class="material-icons">&#xE53F;</i>
                    <span>256-Bit SSL</span>
                  </div>
                  <div class="pm-trust-item">
                    <i class="material-icons">&#xE001;</i>
                    <span>Fast Delivery</span>
                  </div>
                </div>
              </div>

            </div>
          </div>

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

  @push('scripts')
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZuRJggt3Hg37Vrl5EeL9j9FREsD7SBo8&libraries=places"></script>
  <script>
    $(document).ready(function() {
      loadAddressAutocomplete();

      @if($errors->any())
        showToast('error', "{{ $errors->first() }}");
      @endif

      $('.pm-form-control').on('input change', function() {
        $(this).removeClass('is-invalid');
        $(this).siblings('.pm-field-error').text('').hide();
      });

      $('#terms-agree').on('change', function() {
        if ($(this).is(':checked')) {
          $('#error-terms').text('').hide();
        }
      });

      $('#checkoutForm').on('submit', function(e) {
        e.preventDefault();

        // Clear all previous errors
        clearAllErrors();

        // 1. First Name validation
        const firstName = $.trim($('#first_name').val());
        if (!firstName) {
          const msg = 'The first name field is required.';
          setFieldError($('#first_name'), $('#error-first_name'), msg);
          showToast('error', msg);
          scrollToField($('#first_name'));
          return false;
        }

        // 2. Last Name validation
        const lastName = $.trim($('#last_name').val());
        if (!lastName) {
          const msg = 'The last name field is required.';
          setFieldError($('#last_name'), $('#error-last_name'), msg);
          showToast('error', msg);
          scrollToField($('#last_name'));
          return false;
        }

        // 3. Email validation
        const email = $.trim($('#email').val());
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!email) {
          const msg = 'The email field is required.';
          setFieldError($('#email'), $('#error-email'), msg);
          showToast('error', msg);
          scrollToField($('#email'));
          return false;
        } else if (!emailRegex.test(email)) {
          const msg = 'Please enter a valid email address.';
          setFieldError($('#email'), $('#error-email'), msg);
          showToast('error', msg);
          scrollToField($('#email'));
          return false;
        }

        // 4. Phone Number validation
        const phone = $.trim($('#phone').val());
        if (!phone) {
          const msg = 'The phone field is required.';
          setFieldError($('#phone'), $('#error-phone'), msg);
          showToast('error', msg);
          scrollToField($('#phone'));
          return false;
        } else if (phone.length < 10) {
          const msg = 'Please enter a valid phone number (at least 10 digits).';
          setFieldError($('#phone'), $('#error-phone'), msg);
          showToast('error', msg);
          scrollToField($('#phone'));
          return false;
        }

        // 5. Street Address validation
        const address = $.trim($('#floatingInputAddress').val());
        if (!address) {
          const msg = 'The street address field is required.';
          setFieldError($('#floatingInputAddress'), $('#error-address'), msg);
          showToast('error', msg);
          scrollToField($('#floatingInputAddress'));
          return false;
        }

        // 6. City validation
        const city = $.trim($('#locality').val());
        if (!city) {
          const msg = 'The city field is required.';
          setFieldError($('#locality'), $('#error-city'), msg);
          showToast('error', msg);
          scrollToField($('#locality'));
          return false;
        }

        // 7. State / Province validation
        const state = $.trim($('#administrative_area_level_1').val());
        if (!state) {
          const msg = 'The province / state field is required.';
          setFieldError($('#administrative_area_level_1'), $('#error-state'), msg);
          showToast('error', msg);
          scrollToField($('#administrative_area_level_1'));
          return false;
        }

        // 8. Postal Code validation
        const pincode = $.trim($('#postal_code').val());
        if (!pincode) {
          const msg = 'The postal code / zip field is required.';
          setFieldError($('#postal_code'), $('#error-pincode'), msg);
          showToast('error', msg);
          scrollToField($('#postal_code'));
          return false;
        }

        // 9. Terms and Conditions agreement
        if (!$('#terms-agree').is(':checked')) {
          const msg = 'Please agree to the Terms & Conditions.';
          $('#error-terms').text(msg).show();
          showToast('error', msg);
          scrollToField($('#terms-agree'));
          return false;
        }

        // Client validation passed -> Submit via AJAX
        const $form = $(this);
        const $btn = $('#placeOrderBtn');
        const originalBtnHtml = $btn.html();

        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin" style="font-size: 20px;"></i> Processing Order...');

        $.ajax({
          url: $form.attr('action'),
          method: 'POST',
          data: $form.serialize(),
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          },
          dataType: 'json',
          success: function(response) {
            if (response.status === 'success') {
              showToast('success', response.message || 'Details verified! Proceeding to payment...');
              if (response.redirect) {
                window.location.href = response.redirect;
              }
            } else {
              $btn.prop('disabled', false).html(originalBtnHtml);
              const msg = response.message || 'Something went wrong. Please try again.';
              showToast('error', msg);
            }
          },
          error: function(xhr) {
            $btn.prop('disabled', false).html(originalBtnHtml);

            let errorMsg = 'An error occurred while processing checkout. Please try again.';
            let firstField = null;

            if (xhr.status === 422 && xhr.responseJSON) {
              if (xhr.responseJSON.errors) {
                const errors = xhr.responseJSON.errors;
                let firstKey = null;

                $.each(errors, function(field, messages) {
                  const msg = messages[0];
                  if (!firstKey) {
                    firstKey = field;
                    errorMsg = msg;
                  }
                  const errSpanId = (field === 'pincode' ? 'error-pincode' : ('error-' + field));
                  const $fieldInput = $('[name="' + field + '"]');
                  setFieldError($fieldInput, $('#' + errSpanId), msg);
                });

                if (firstKey) {
                  firstField = $('[name="' + firstKey + '"]');
                }
              } else if (xhr.responseJSON.message) {
                errorMsg = xhr.responseJSON.message;
              }
            } else if (xhr.responseJSON && xhr.responseJSON.message) {
              errorMsg = xhr.responseJSON.message;
            }

            showToast('error', errorMsg);

            if (firstField && firstField.length) {
              scrollToField(firstField);
            }
          }
        });
      });
    });

    function showToast(type, message) {
      if (typeof toastr !== 'undefined') {
        if (type === 'error' || type === 'danger') {
          toastr.error(message);
        } else if (type === 'warning') {
          toastr.warning(message);
        } else if (type === 'info') {
          toastr.info(message);
        } else {
          toastr.success(message);
        }
      } else if (typeof window.showToast === 'function') {
        window.showToast(type, message);
      } else {
        alert(message);
      }
    }

    function clearAllErrors() {
      $('.pm-field-error').text('').hide();
      $('.pm-form-control').removeClass('is-invalid');
    }

    function setFieldError($field, $errorEl, message) {
      if ($field && $field.length) {
        $field.addClass('is-invalid');
      }
      if ($errorEl && $errorEl.length) {
        $errorEl.text(message).show();
      }
    }

    function scrollToField($el) {
      if ($el && $el.length) {
        $('html, body').animate({
          scrollTop: $el.offset().top - 120
        }, 300);
        $el.focus();
      }
    }

    function loadAddressAutocomplete() {
      const componentForm = {
        administrative_area_level_1: "long_name",
        postal_code: "short_name",
        locality: "long_name"
      };

      const inputElem = document.getElementById('floatingInputAddress');
      if (!inputElem || !window.google || !google.maps || !google.maps.places) return;

      const autocomplete = new google.maps.places.Autocomplete(inputElem, {
        strictBounds: false,
        types: ['establishment', 'geocode'],
        componentRestrictions: {
          country: "CA"
        },
        fields: ['address_components', 'formatted_address']
      });

      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        const place = autocomplete.getPlace();
        if (!place || !place.address_components) return;

        for (const component of place.address_components) {
          const addressType = component.types[0];
          if (componentForm[addressType]) {
            const val = component[componentForm[addressType]];
            $('#' + addressType).val(val).removeClass('is-invalid');
            const errId = (addressType === 'postal_code' ? 'error-pincode' : (addressType === 'locality' ? 'error-city' : 'error-state'));
            $('#' + errId).text('').hide();
          }
          if (addressType === 'postal_code') {
            let number = component[componentForm[addressType]].replace(/\s+/g, '');
            if (number.length === 6) {
              number = number.replace(/^(.{3})(.{3})$/, "$1 $2");
            } else if (number.length > 6) {
              number = number.substring(0, 6).replace(/^(.{3})(.{3})$/, "$1 $2");
            }
            $('#postal_code').val(number.substring(0, 7)).removeClass('is-invalid');
            $('#error-pincode').text('').hide();
          }
        }
        $('#floatingInputAddress').removeClass('is-invalid');
        $('#error-address').text('').hide();
      });
    }
  </script>
  @endpush
</x-app-layout>