@props([
    'id' => 'tour_' . Str::random(8),
    'steps' => [], // Arreglo de pasos: [['element' => '#id', 'popover' => ['title' => '...', 'description' => '...']]]
    'autoStart' => false,
])

@pushonce('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>
    <style>
        .driver-popover-item { font-family: inherit; }
        .driver-popover-title { font-weight: bold; color: #007bff; }
    </style>
@endpushonce

<div id="{{ $id }}" class="d-none"></div>

@pushonce('js')
    <script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
@endpushonce

@push('js')
<script>
$(function() {
    const driver = window.driver.js.driver;
    
    const driverConfig = driver({
        showProgress: true,
        nextBtnText: 'Siguiente',
        prevBtnText: 'Anterior',
        doneBtnText: 'Finalizar',
        steps: {!! json_encode($steps) !!}
    });

    // Función global para iniciar el tour desde cualquier botón
    window.startTour_{{ str_replace('-', '_', $id) }} = function() {
        driverConfig.drive();
    };

    @if($autoStart)
        // Comprobar si ya vio el tour (LocalStorage) para no molestar
        if (!localStorage.getItem('tour_completed_{{ $id }}')) {
            window.startTour_{{ str_replace('-', '_', $id) }}();
            localStorage.setItem('tour_completed_{{ $id }}', 'true');
        }
    @endif
});
</script>
@endpush