@props([
    'id' => 'wizard_' . Str::random(8),
    'steps' => [], // ['Datos', 'Contacto', 'Finalizar']
])

<div id="{{ $id }}" class="wizard-container shadow-sm border rounded bg-white">
    {{-- Stepper Header --}}
    <div class="wizard-header p-3 border-bottom bg-light">
        <ul class="nav nav-pills nav-fill">
            @foreach($steps as $index => $label)
                <li class="nav-item">
                    <a class="nav-link wizard-step-link {{ $index === 0 ? 'active' : 'disabled' }}" 
                       data-step="{{ $index + 1 }}" href="javascript:void(0)">
                        <span class="badge badge-pill badge-secondary mr-2">{{ $index + 1 }}</span>
                        {{ $label }}
                    </a>
                </li>
            @endforeach
        </ul>
    </div>

    {{-- Step Contents (Passed via Slots) --}}
    <div class="wizard-content p-4">
        {{ $slot }}
    </div>

    {{-- Footer Controls --}}
    <div class="wizard-footer p-3 border-top bg-light d-flex justify-content-between">
        <button type="button" class="btn btn-secondary wizard-prev-btn" style="display: none;">
            <i class="fas fa-chevron-left mr-1"></i> Anterior
        </button>
        <div class="ml-auto">
            <button type="button" class="btn btn-primary wizard-next-btn">
                Siguiente <i class="fas fa-chevron-right ml-1"></i>
            </button>
            <button type="submit" class="btn btn-success wizard-submit-btn" style="display: none;">
                <i class="fas fa-check-circle mr-1"></i> Finalizar
            </button>
        </div>
    </div>
</div>

<style>
    .wizard-step-content { display: none; }
    .wizard-step-content.active { display: block; }
    .wizard-step-link.active { background-color: #007bff !important; color: white !important; }
    .wizard-step-link.active .badge { background-color: white !important; color: #007bff !important; }
    .wizard-step-link.completed { color: #28a745 !important; }
    .wizard-step-link.completed .badge { background-color: #28a745 !important; color: white !important; }
</style>

@push('js')
<script>
$(function() {
    let $wizard = $('#{{ $id }}');
    let $steps = $wizard.find('.wizard-step-content');
    let $links = $wizard.find('.wizard-step-link');
    let currentStep = 1;
    let totalSteps = $steps.length;

    // Inicializar primer paso
    $steps.first().addClass('active');

    function updateWizard(step) {
        $steps.removeClass('active');
        $steps.filter('[data-step="' + step + '"]').addClass('active');

        $links.removeClass('active');
        $links.each(function(i) {
            let s = i + 1;
            if (s === step) $(this).addClass('active');
            if (s < step) $(this).addClass('completed');
            else $(this).removeClass('completed');
        });

        // Toggle buttons
        $wizard.find('.wizard-prev-btn').toggle(step > 1);
        $wizard.find('.wizard-next-btn').toggle(step < totalSteps);
        $wizard.find('.wizard-submit-btn').toggle(step === totalSteps);
    }

    $wizard.find('.wizard-next-btn').on('click', function() {
        if (currentStep < totalSteps) {
            currentStep++;
            updateWizard(currentStep);
        }
    });

    $wizard.find('.wizard-prev-btn').on('click', function() {
        if (currentStep > 1) {
            currentStep--;
            updateWizard(currentStep);
        }
    });
});
</script>
@endpush