@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 -->
            <div class="step-card">
                <h3 class="text-lg font-semibold mb-4">Company Information</h3>
                <label class="field-label" for="company-name"> Name <span class="required-star">*</span></label>
                <input id="company-name" type="text" name="company[name]" placeholder="Company Name" value="{{ old('company.name', $company['name'] ?? '') }}" class="input mb-3 w-full" required>

                <label class="field-label" for="company-email"> Email <span class="required-star">*</span></label>
                <input id="company-email" type="email" name="company[email]" placeholder="Company Email" value="{{ old('company.email', $company['email'] ?? '') }}" class="input mb-3 w-full" required>

                <label class="field-label" for="company-phone">Phone <span class="required-star">*</span></label>
                <input id="company-phone" type="tel" name="company[phone]" inputmode="numeric" pattern="\d{7,15}" maxlength="15" placeholder="Phone (digits only)" value="{{ old('company.phone', $company['phone'] ?? '') }}" class="input mb-3 w-full" required>

                <label class="field-label" for="company-address">Address <span class="required-star">*</span></label>
                <input id="company-address" type="text" name="company[address]" placeholder="Address" value="{{ old('company.address', $company['address'] ?? '') }}" class="input mb-3 w-full" required>

                <label class="field-label" for="company-mc">MC Number <span class="required-star">*</span></label>
                <input id="company-mc" type="text" name="company[mc_number]" placeholder="MC Number" value="{{ old('company.mc_number', $company['mc_number'] ?? '') }}" class="input mb-3 w-full" required>

                <label class="field-label" for="company-dot">DOT Number <span class="required-star">*</span></label>
                <input id="company-dot" type="text" name="company[dot_number]" placeholder="DOT Number" value="{{ old('company.dot_number', $company['dot_number'] ?? '') }}" class="input mb-2 w-full" required>
            </div>
        @elseif ($step === 3)
            <!-- Fleet Step -->
            <div class="step-card">
                <h3 class="text-lg font-semibold mb-4">Fleet (Trucks)</h3>
                <div id="fleet-list">
                    <label class="field-label" for="truck-number">Truck Number <span class="required-star">*</span></label>
                    <input id="truck-number" type="text" name="fleet[0][number]" placeholder="Truck Number (e.g. TRK-001)" value="{{ old('fleet.0.number', $fleet[0]['number'] ?? '') }}" class="input mb-3 w-full" required>

                    <label class="field-label" for="truck-name">Truck Name / Description <span class="required-star">*</span></label>
                    <input id="truck-name" type="text" name="fleet[0][name]" placeholder="Truck Name / Description" value="{{ old('fleet.0.name', $fleet[0]['name'] ?? '') }}" class="input mb-3 w-full" required>

                    <label class="field-label" for="truck-equipment">Equipment Number</label>
                    <input id="truck-equipment" type="text" name="fleet[0][equipment_number]" placeholder="Equipment Number (optional)" value="{{ old('fleet.0.equipment_number', $fleet[0]['equipment_number'] ?? '') }}" class="input mb-2 w-full">
                </div>
            </div>
        @elseif ($step === 4)
            <!-- Drivers Step -->
            <div class="step-card">
                <h3 class="text-lg font-semibold mb-4">Drivers</h3>
                <div id="drivers-list">
                    <label class="field-label" for="driver-name">Driver Name <span class="required-star">*</span></label>
                    <input id="driver-name" type="text" name="drivers[0][name]" placeholder="Driver Name" value="{{ old('drivers.0.name', $drivers[0]['name'] ?? '') }}" class="input mb-3 w-full" required>

                    <label class="field-label" for="driver-email">Driver Email <span class="required-star">*</span></label>
                    <input id="driver-email" type="email" name="drivers[0][email]" placeholder="Driver Email" value="{{ old('drivers.0.email', $drivers[0]['email'] ?? '') }}" class="input mb-2 w-full" required>
                </div>
            </div>
        @elseif ($step === 5)
            <!-- Loads Step -->
            <div class="step-card">
                <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>
            </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">Enter your card details securely with Stripe. Free trial requires a saved card for automatic billing after trial ends.</p>
                        </div>
                        <button type="button" onclick="closePaymentModal()" class="text-slate-500 hover:text-slate-900">✕</button>
                    </div>
                    <div class="mb-4 flex items-center justify-between rounded-lg border border-indigo-100 bg-indigo-50/70 px-3 py-2 text-xs text-slate-700">
                        <div class="flex items-center gap-2">
                            <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-[#635BFF] text-white font-bold">S</span>
                            <span>Stripe-secured card entry</span>
                        </div>
                        <span class="font-semibold text-[#635BFF]">Powered by Stripe</span>
                    </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>
                            <input type="hidden" name="payment[save_option]" value="save_auto_renew">
                            <label class="flex items-center gap-3">
                                <input id="save-option-auto" 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>
                            <p id="trial-save-required-note" class="text-xs text-amber-700">Saved card is required. You can remove it later from billing settings.</p>
                        </fieldset>
                        <p id="payment-save-note" class="text-sm text-slate-500">Your card information is encrypted and securely handled by Stripe. 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="submitOnboardStep('prev')" class="btn bg-gray-300 text-gray-700 px-4 py-2 rounded">Back</button>
            @endif
            @if ($step < 5)
                <button type="button" onclick="submitOnboardStep('next')" 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>
.step-card {
    background: #ffffff;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 10px 28px rgba(15, 61, 122, 0.08);
}
.field-label { display: block; margin-bottom: 0.35rem; font-size: 0.95rem; font-weight: 600; color: #1f2937; }
.required-star { color: #dc2626; margin-left: 0.15rem; }
.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 submitOnboardStep(action) {
        const form = document.getElementById('onboard-form');
        if (!form) {
            return;
        }

        setOnboardAction(action);

        if (action === 'next' && !form.reportValidity()) {
            return;
        }

        form.submit();
    }

    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');
        const saveAutoRadio = document.getElementById('save-option-auto');
        
        if (!note) return;

        if (saveAutoRadio) {
            saveAutoRadio.checked = true;
        }

        note.textContent = 'Your card information is encrypted and securely handled by Stripe. Your card will be saved and used automatically for future renewals.';
        if (cardholderInput) cardholderInput.required = true;
        if (cardholderRequired) cardholderRequired.style.display = 'inline';
        if (cardErrors) cardErrors.textContent = '';
        
        currentSaveOption = 'save_auto_renew';
        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 = 'save_auto_renew';
        
        // Clear any previous errors
        showCardError('');
        
        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: 'off_session',
                });

                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

        const companyPhone = document.querySelector('input[name="company[phone]"]');
        if (companyPhone) {
            companyPhone.addEventListener('input', function () {
                this.value = this.value.replace(/\D/g, '');
            });
        }
        
        // 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