@php
/**
 * $step: current step (int)
 * $company, $fleet, $drivers, $loads: old input or empty arrays
 */
@endphp

@extends('layouts.themed-app')

@section('content')
<div class="max-w-2xl mx-auto mt-8">
    <div class="flex justify-between mb-8">
        <div class="flex-1 text-center {{ $step === 1 ? 'font-bold text-blue-900' : 'text-gray-400' }}">Company</div>
        <div class="flex-1 text-center {{ $step === 2 ? 'font-bold text-blue-900' : 'text-gray-400' }}">Subscription</div>
        <div class="flex-1 text-center {{ $step === 3 ? 'font-bold text-blue-900' : 'text-gray-400' }}">Fleet</div>
        <div class="flex-1 text-center {{ $step === 4 ? 'font-bold text-blue-900' : 'text-gray-400' }}">Drivers</div>
        <div class="flex-1 text-center {{ $step === 5 ? 'font-bold text-blue-900' : 'text-gray-400' }}">Loads</div>
    </div>
    @if ($errors->any())
        <div class="bg-red-50 border border-red-300 text-red-700 rounded p-3 mb-4">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif
    <form id="onboard-form" method="POST" action="{{ route('onboard.submit') }}">
        @csrf
        <input type="hidden" name="onboard_action" id="onboard-action" value="">
        @if ($step === 1)
            <!-- Company Step -->
            <h3 class="text-lg font-semibold mb-4">Company Information</h3>
            <input type="text" name="company[name]" placeholder="Company Name" value="{{ old('company.name', $company['name'] ?? '') }}" class="input mb-2 w-full" required>
            <input type="email" name="company[email]" placeholder="Company Email" value="{{ old('company.email', $company['email'] ?? '') }}" class="input mb-2 w-full" required>
            <input type="text" name="company[phone]" placeholder="Phone" value="{{ old('company.phone', $company['phone'] ?? '') }}" class="input mb-2 w-full">
            <input type="text" name="company[address]" placeholder="Address" value="{{ old('company.address', $company['address'] ?? '') }}" class="input mb-2 w-full">
            <input type="text" name="company[mc_number]" placeholder="MC Number" value="{{ old('company.mc_number', $company['mc_number'] ?? '') }}" class="input mb-2 w-full">
            <input type="text" name="company[dot_number]" placeholder="DOT Number" value="{{ old('company.dot_number', $company['dot_number'] ?? '') }}" class="input mb-2 w-full">
        @elseif ($step === 3)
            <!-- Fleet Step -->
            <h3 class="text-lg font-semibold mb-4">Fleet (Trucks) <span class="text-sm font-normal text-gray-500">— optional</span></h3>
            <div id="fleet-list">
                <input type="text" name="fleet[0][number]" placeholder="Truck Number (e.g. TRK-001)" class="input mb-2 w-full">
                <input type="text" name="fleet[0][name]" placeholder="Truck Name / Description" class="input mb-2 w-full">
                <input type="text" name="fleet[0][equipment_number]" placeholder="Equipment Number (optional)" class="input mb-2 w-full">
            </div>
        @elseif ($step === 4)
            <!-- Drivers Step -->
            <h3 class="text-lg font-semibold mb-4">Drivers</h3>
            <div id="drivers-list">
                <input type="text" name="drivers[0][name]" placeholder="Driver Name" class="input mb-2 w-full">
                <input type="email" name="drivers[0][email]" placeholder="Driver Email" class="input mb-2 w-full">
            </div>
        @elseif ($step === 5)
            <!-- Loads Step -->
            <h3 class="text-lg font-semibold mb-4">You're almost done!</h3>
            <p class="text-gray-600 mb-4">Your company and fleet are set up. You can add loads from the <strong>Loads</strong> section on your dashboard after setup — loads require full details like truck assignment, broker, pickup/delivery info, and rates.</p>
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-blue-800">
                <ul class="list-disc list-inside space-y-1 text-sm">
                    <li>Track loads with full financial details</li>
                    <li>Assign drivers and trucks per load</li>
                    <li>Monitor gross rate, fuel cost, and net profit</li>
                </ul>
            </div>
            <div class="mt-4 rounded-lg border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
                <strong>Payment details are required to complete setup.</strong> Click Finish to add your card and choose whether to save it for automatic renewal.
            </div>

            <input type="hidden" name="payment[stripe_payment_intent_id]" id="stripe-payment-intent-id">
            <input type="hidden" name="payment[stripe_setup_intent_id]" id="stripe-setup-intent-id">
            <input type="hidden" name="payment[stripe_customer_id]" id="stripe-customer-id">

            <div id="payment-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4 py-6">
                <div class="w-full max-w-xl rounded-2xl bg-white p-6 shadow-xl">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h2 class="text-xl font-semibold text-slate-900">Enter Card Details</h2>
                            <p class="text-sm text-slate-500">Choose how your card is stored and whether automatic renewal should be enabled.</p>
                        </div>
                        <button type="button" onclick="closePaymentModal()" class="text-slate-500 hover:text-slate-900">✕</button>
                    </div>
                    <div class="space-y-4">
                        <div class="grid gap-4 md:grid-cols-2">
                            <label class="block text-sm font-medium text-slate-700">
                                Cardholder Name
                                <span id="cardholder-required" class="text-red-600">*</span>
                                <input type="text" id="cardholder-name" name="payment[cardholder_name]" class="input mt-1 w-full" placeholder="Jane Doe">
                            </label>
                            <div class="block text-sm font-medium text-slate-700">
                                Card Details
                                <div id="card-element" class="mt-1 rounded-xl border border-slate-300 bg-white p-3"></div>
                            </div>
                        </div>
                        <fieldset class="space-y-2 rounded-lg border border-slate-200 bg-slate-50 p-4">
                            <legend class="text-sm font-semibold text-slate-900">Save card preference</legend>
                            <label class="flex items-center gap-3">
                                <input type="radio" name="payment[save_option]" value="save_auto_renew" checked="checked" onchange="updateSaveOption(true)">
                                <span><strong>Save card & auto-renew</strong><br><span class="text-slate-500">Use this card automatically for future renewals.</span></span>
                            </label>
                            <label class="flex items-center gap-3">
                                <input type="radio" name="payment[save_option]" value="no_save" onchange="updateSaveOption(false)">
                                <span><strong>Do not save card</strong><br><span class="text-slate-500">Use this card only for this setup and do not keep it on file.</span></span>
                            </label>
                        </fieldset>
                        <p id="payment-save-note" class="text-sm text-slate-500">Your card will be saved and used automatically for future renewals.</p>
                        <div id="card-errors" class="text-sm text-rose-600"></div>
                        <div class="flex items-center justify-end gap-3 pt-2 border-t border-slate-200">
                            <button type="button" onclick="closePaymentModal()" class="btn bg-gray-200 text-slate-700 px-4 py-2 rounded">Cancel</button>
                            <button id="save-card-button" type="button" onclick="handlePaymentSubmit()" class="btn bg-green-600 text-white px-4 py-2 rounded">
                                <span class="save-card-text">Save Card & Finish</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="flex justify-between mt-6">
            @if ($step > 1)
                <button type="button" onclick="document.getElementById('onboard-action').value='prev'; document.getElementById('onboard-form').submit();" class="btn bg-gray-300 text-gray-700 px-4 py-2 rounded">Back</button>
            @endif
            @if ($step < 5)
                <button type="button" onclick="document.getElementById('onboard-action').value='next'; document.getElementById('onboard-form').submit();" class="btn bg-blue-900 text-white px-4 py-2 rounded">Next</button>
            @else
                <button type="button" onclick="setOnboardActionAndOpenPaymentModal()" class="btn bg-green-600 text-white px-4 py-2 rounded">Finish & Add Card</button>
            @endif
        </div>
    </form>
</div>
<style>
.input { border: 2px solid #E5E7EB; border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 1rem; }
.input:focus { border-color: #003D7A; outline: none; }
.btn { transition: background 0.2s, color 0.2s; }
</style>
@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    let stripe = null;
    let elements = null;
    let cardElement = null;
    let currentClientSecret = null;
    let currentIntentType = 'payment';
    let currentSaveOption = 'save_auto_renew';

    function openPaymentModal() {
        document.getElementById('payment-modal').classList.remove('hidden');
        initStripe();
    }

    function setOnboardAction(action) {
        const actionInput = document.getElementById('onboard-action');
        if (actionInput) {
            actionInput.value = action;
        }
    }

    function setOnboardActionAndOpenPaymentModal() {
        setOnboardAction('finish');
        openPaymentModal();
    }

    function closePaymentModal() {
        document.getElementById('payment-modal').classList.add('hidden');
    }

    function initStripe() {
        if (stripe) {
            return;
        }

        stripe = Stripe('{{ config('services.stripe.public') }}');
        elements = stripe.elements();
        cardElement = elements.create('card', {
            style: {
                base: {
                    color: '#0f172a',
                    fontSize: '16px',
                    fontFamily: 'Inter, system-ui, sans-serif',
                    '::placeholder': {
                        color: '#94a3b8',
                    },
                },
                invalid: {
                    color: '#b91c1c',
                },
            },
        });
        cardElement.mount('#card-element');
    }

    function updateSaveOption(isSave) {
        const note = document.getElementById('payment-save-note');
        const cardholderInput = document.getElementById('cardholder-name');
        const cardholderRequired = document.getElementById('cardholder-required');
        const cardErrors = document.getElementById('card-errors');
        
        if (!note) return;
        
        if (isSave) {
            note.textContent = 'Your card will be saved and used automatically for future renewals.';
            if (cardholderInput) cardholderInput.required = true;
            if (cardholderRequired) cardholderRequired.style.display = 'inline';
        } else {
            note.textContent = 'Your card will not be saved after the current setup.';
            if (cardholderInput) cardholderInput.required = false;
            if (cardholderRequired) cardholderRequired.style.display = 'none';
            if (cardErrors) cardErrors.textContent = '';
        }
        
        currentSaveOption = isSave ? 'save_auto_renew' : 'no_save';
        currentClientSecret = null;
    }

    async function createPaymentIntent(saveOption) {
        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const response = await fetch('{{ route('onboard.payment-intent') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ save_option: saveOption }),
        });

        const data = await response.json();
        if (!response.ok) {
            throw new Error(data.error || 'Unable to create payment intent');
        }

        if (data.customer_id) {
            document.getElementById('stripe-customer-id').value = data.customer_id;
        }

        currentClientSecret = data.client_secret;
        currentIntentType = data.type || 'payment';
        currentSaveOption = saveOption;
        return data;
    }

    function showCardError(message) {
        document.getElementById('card-errors').textContent = message;
    }

    function setSubmitLoading(isLoading) {
        const saveButton = document.getElementById('save-card-button');
        if (!saveButton) return;

        if (isLoading) {
            saveButton.disabled = true;
            saveButton.classList.add('opacity-70', 'cursor-not-allowed');
            saveButton.innerHTML = '<span class="inline-block h-4 w-4 mr-2 animate-spin rounded-full border-2 border-white border-t-transparent"></span><span>Processing…</span>';
        } else {
            saveButton.disabled = false;
            saveButton.classList.remove('opacity-70', 'cursor-not-allowed');
            saveButton.innerHTML = '<span class="save-card-text">Save Card & Finish</span>';
        }
    }

    async function handlePaymentSubmit() {
        const name = document.getElementById('cardholder-name').value.trim();
        const saveOption = document.querySelector('input[name="payment[save_option]"]:checked')?.value || 'no_save';
        
        // Clear any previous errors
        showCardError('');
        
        // If not saving card, skip all validation and submit directly
        if (saveOption === 'no_save') {
            // For "Do not save card", we don't need to collect card details
            // User will enter card details later when trial expires
            document.getElementById('onboard-form').submit();
            return;
        }
        
        // Only validate cardholder name and card if save_auto_renew is selected
        if (!name) {
            showCardError('Please enter the cardholder name.');
            return;
        }

        setSubmitLoading(true);
        try {
            const data = currentClientSecret && saveOption === currentSaveOption
                ? { client_secret: currentClientSecret, type: currentIntentType }
                : await createPaymentIntent(saveOption);

            const clientSecret = data.client_secret;
            let result;

            if (data.type === 'setup') {
                result = await stripe.confirmCardSetup(clientSecret, {
                    payment_method: {
                        card: cardElement,
                        billing_details: {
                            name,
                        },
                    },
                });

                if (result.error) {
                    showCardError(result.error.message || 'Card setup failed.');
                    setSubmitLoading(false);
                    return;
                }

                if (!result.setupIntent || result.setupIntent.status !== 'succeeded') {
                    showCardError('Card setup was not completed.');
                    setSubmitLoading(false);
                    return;
                }

                document.getElementById('stripe-setup-intent-id').value = result.setupIntent.id;
                if (result.setupIntent.customer) {
                    document.getElementById('stripe-customer-id').value = result.setupIntent.customer;
                }
            } else {
                result = await stripe.confirmCardPayment(clientSecret, {
                    payment_method: {
                        card: cardElement,
                        billing_details: {
                            name,
                        },
                    },
                    setup_future_usage: saveOption === 'save_auto_renew' ? 'off_session' : undefined,
                });

                if (result.error) {
                    showCardError(result.error.message || 'Payment failed.');
                    setSubmitLoading(false);
                    return;
                }

                if (!result.paymentIntent || result.paymentIntent.status !== 'succeeded') {
                    showCardError('Payment was not completed.');
                    setSubmitLoading(false);
                    return;
                }

                document.getElementById('stripe-payment-intent-id').value = result.paymentIntent.id;
                if (result.paymentIntent.customer) {
                    document.getElementById('stripe-customer-id').value = result.paymentIntent.customer;
                }
            }

            document.getElementById('onboard-form').submit();
        } catch (error) {
            showCardError(error.message || 'Payment processing error.');
            setSubmitLoading(false);
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        updateSaveOption(true); // Save card is default
        
        // Also clear errors when radio buttons change
        document.querySelectorAll('input[name="payment[save_option]"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const cardErrors = document.getElementById('card-errors');
                if (cardErrors) cardErrors.textContent = '';
            });
        });
    });
</script>
@endpush
@endsection