@push('styles')
    @vite(['resources/css/orders.css'])
    <link href="https://js.stripe.com/v3/elements.css" rel="stylesheet">
@endpush

@include('orders.partials.loading-overlay')

<script>
    window.__orderData = @json($orderData ?? null);
    window.__isEdit = @json($isEdit ?? false);
    window.__invoiceNumber = @json($invoiceNumber ?? '');
    window.__orderId = @json($orderId ?? '');
    window.__formAction = @json($formAction ?? '');
    window.__formMethod = @json($formMethod ?? 'POST');
    window.__submitButtonText = @json($submitButtonText ?? 'Save Order');
    window.__pageTitle = @json($pageTitle ?? 'Create Order');
    window.__hideCustomerSearch = @json($hideCustomerSearch ?? false);
    window.__stripeKey = "{{ env('STRIPE_KEY') }}";

    // Debug information to help troubleshoot
    console.log('Stripe Configuration:', {
        keyAvailable: !!window.__stripeKey,
        keyType: typeof window.__stripeKey,
        keyPrefix: window.__stripeKey ? window.__stripeKey.substring(0, 3) : null
    });
</script>

<!-- Load scripts before Alpine initialization -->
@push('scripts')
    <script src="https://js.stripe.com/v3/"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @vite(['resources/js/orders/index.js'])
@endpush

<div class="container my-5"
     x-data="window.orderForm(window.__isEdit, window.__orderData)"
     x-init="init">
    <h1 class="text-center mb-5">@yield('title', $pageTitle ?? 'Create Order')</h1>

    @if(($invoiceNumber ?? false) || ($order->invoice->number ?? false))
        <h2 class="text-center mb-5">Invoice NO: {{ $invoiceNumber ?? $order->invoice->number ?? '' }}</h2>
    @endif

    @include('orders.partials.step-navigation')

    <!-- Step Content -->
    <form @submit.prevent="submitForm" action="{{ $formAction }}" method="POST" aria-labelledby="form-title">
        @if($formMethod !== 'POST')
            @method($formMethod)
        @endif
        @csrf
        <div id="form-title" class="visually-hidden">Order Form</div>

        @if(session('error'))
            <div x-data="{ show: true }" x-show="show" class="alert alert-danger mb-4" role="alert">
                {{ session('error') }}
            </div>
        @endif

        @include('orders.partials.customer-details-step', ['hideCustomerSearch' => $hideCustomerSearch ?? false])
        @include('orders.partials.product-description-step')
        @include('orders.partials.delivery-details-step')
        @include('orders.partials.card-message-step')
        @include('orders.partials.order-review-step')
        @include('orders.partials.payment-step')
        @include('orders.partials.final-confirmation-step')

        <!-- Navigation Buttons -->
        <div class="d-flex justify-content-between mt-4" x-show="currentStep !== 7">
            <button type="button"
                    @click="prevStep"
                    class="btn btn-secondary"
                    x-show="currentStep > 1">
                <i class="fas fa-arrow-left me-2"></i>Back
            </button>

            <template x-if="currentStep < 5">
                <button type="button"
                        @click="nextStep"
                        class="btn btn-primary">
                    Next<i class="fas fa-arrow-right ms-2"></i>
                </button>
            </template>

            <template x-if="currentStep === 5">
                <button type="button"
                        @click="nextStep"
                        class="btn btn-primary">
                    <span x-text="formData.order_type === 'phone' ? 'Proceed to Payment' : 'Confirm Order'"></span>
                    <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </template>

            <template x-if="currentStep === 6 && formData.order_type === 'phone'">
                <button type="button"
                        @click="handlePayment"
                        class="btn btn-primary"
                        :disabled="processing || paymentComplete">
                    <template x-if="processing">
                        <span><i class="fas fa-spinner fa-spin me-2"></i>Processing...</span>
                    </template>
                    <template x-if="!processing && !paymentComplete">
                        <span><i class="fas fa-credit-card me-2"></i>Make Payment</span>
                    </template>
                    <template x-if="!processing && paymentComplete">
                        <span><i class="fas fa-check me-2"></i>Payment Complete</span>
                    </template>
                </button>
            </template>
        </div>
    </form>
</div>

@include('components.product-modal', ['categories' => $categories])

{{-- Load scripts properly --}}
@push('scripts')
    <!-- Load Stripe first -->
    <script src="https://js.stripe.com/v3/"></script>

    <!-- Load SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Then load our application scripts -->
    @vite([
        'resources/js/orders/step-handler.js',
        'resources/js/orders/form.js'
    ])

    <!-- Initialize the form module -->
    <script>
        window.createOrderForm = (await import("{{ Vite::asset('resources/js/orders/form.js') }}")).default;
    </script>
@endpush

@include('orders.partials.address-autocomplete-script')