@extends('layout.app')

@section('title', __('Test'))

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@11/dist/css/shepherd.css">
<style>
    /* Ensure modal is above tour overlay */
    .modal {
        z-index: 1060 !important;
    }
    
    /* Ensure tour is above modal */
    .shepherd-modal-overlay-container {
        z-index: 1070 !important;
    }
    
    .shepherd-element {
        z-index: 1080 !important;
    }
</style>
@endpush

@section('data_col', '2-columns')
@section('body_class', '2-columns')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-body pb-5">
            <div class="container">
                <button id="start-tour" class="btn btn-primary">Start Tour</button>
                
                <!-- Elements to highlight -->
                <div id="dashboard" data-tour-step="1" class="p-3 border rounded mb-3">
                    <h3>Dashboard Content</h3>
                    <p>Welcome to your dashboard</p>
                </div>
                <button id="settings" data-tour-step="2" type="button" class="btn btn-info mb-3" data-toggle="modal" data-target="#testModal">
                    Open Settings Modal
                </button>
                <div id="profile" data-tour-step="3" class="p-3 border rounded">
                    <h4>Profile Section</h4>
                    <p>User profile information</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')
<div class="modal animated bounceInUp text-left" id="testModal" tabindex="-1" role="dialog" aria-labelledby="testModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="testModalLabel">Settings Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body px-2 pb-3">
                <div class="row">
                    <div class="col-12">
                        <h4>Modal Content Tour</h4>
                        <p id="modal-content-1" class="mb-3 p-2 bg-light rounded">This is important content inside the modal that you should know about.</p>
                        <button id="modal-button-1" class="btn btn-success mb-3">Action Button</button>
                        <div id="modal-content-2" class="p-3 border rounded">
                            <p>More information here that needs explanation.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/shepherd.js@11/dist/js/shepherd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let isModalOpen = false;
        const modal = document.getElementById('testModal');
        
        const tour = new Shepherd.Tour({
            defaultStepOptions: {
                cancelIcon: {
                    enabled: true
                },
                classes: 'shadow-md bg-purple-dark',
                scrollTo: { behavior: 'smooth', block: 'center' },
                modalOverlayOpeningPadding: 10,
                popperOptions: {
                    modifiers: [{ name: 'offset', options: { offset: [0, 15] } }]
                }
            },
            useModalOverlay: true,
        });

        // Step 1: Dashboard
        tour.addStep({
            id: 'dashboard-step',
            title: 'Dashboard Overview',
            text: 'This is your main dashboard where you can see all important metrics.',
            attachTo: {
                element: '#dashboard',
                on: 'bottom'
            },
            buttons: [
                {
                    text: 'Next',
                    action: tour.next
                }
            ]
        });

        // Step 2: Settings Button (opens modal)
        tour.addStep({
            id: 'settings-button-step',
            title: 'Settings Access',
            text: 'Click this button to open the settings modal where you can configure your preferences.',
            attachTo: {
                element: '#settings',
                on: 'right'
            },
            buttons: [
                {
                    text: 'Back',
                    action: tour.back
                },
                {
                    text: 'Open Modal',
                    action: function() {
                        // Open the modal
                        $('#testModal').modal('show');
                        isModalOpen = true;
                        
                        // Give modal time to animate in
                        setTimeout(() => {
                            tour.next();
                        }, 500);
                    }
                }
            ]
        });

        // Step 3: Inside Modal - First Content
        tour.addStep({
            id: 'modal-content-1-step',
            title: 'Modal Content',
            text: 'This is important information inside the modal that requires your attention.',
            attachTo: {
                element: '#modal-content-1',
                on: 'right'
            },
            when: {
                show: function() {
                    // Ensure modal is open
                    if (!isModalOpen) {
                        $('#testModal').modal('show');
                        isModalOpen = true;
                    }
                }
            },
            buttons: [
                {
                    text: 'Back',
                    action: function() {
                        // Go back but keep modal open
                        tour.back();
                    }
                },
                {
                    text: 'Next',
                    action: tour.next
                }
            ]
        });

        // Step 4: Inside Modal - Button
        tour.addStep({
            id: 'modal-button-step',
            title: 'Action Button',
            text: 'Use this button to perform important actions within the modal.',
            attachTo: {
                element: '#modal-button-1',
                on: 'bottom'
            },
            buttons: [
                {
                    text: 'Back',
                    action: tour.back
                },
                {
                    text: 'Next',
                    action: tour.next
                }
            ]
        });

        // Step 5: Inside Modal - More Content
        tour.addStep({
            id: 'modal-content-2-step',
            title: 'Additional Information',
            text: 'Here you can find more detailed information and settings.',
            attachTo: {
                element: '#modal-content-2',
                on: 'top'
            },
            buttons: [
                {
                    text: 'Back',
                    action: tour.back
                },
                {
                    text: 'Close Modal & Continue',
                    action: function() {
                        // Close modal and go to next step
                        $('#testModal').modal('hide');
                        isModalOpen = false;
                        setTimeout(() => {
                            tour.next();
                        }, 300);
                    }
                }
            ]
        });

        // Step 6: Profile (after modal)
        tour.addStep({
            id: 'profile-step',
            title: 'Profile Section',
            text: 'Manage your profile and account settings from this section.',
            attachTo: {
                element: '#profile',
                on: 'top'
            },
            buttons: [
                {
                    text: 'Back',
                    action: tour.back
                },
                {
                    text: 'Finish',
                    action: tour.complete
                }
            ]
        });

        // Handle modal close during tour
        modal.addEventListener('hidden.bs.modal', function() {
            isModalOpen = false;
        });

        // Start tour button
        document.getElementById('start-tour').addEventListener('click', () => {
            tour.start();
        });

        // Auto-start for first-time users
        if (!localStorage.getItem('tour_completed')) {
            setTimeout(() => tour.start(), 1000);
        }

        // Mark as completed
        tour.on('complete', () => {
            localStorage.setItem('tour_completed', 'true');
        });
        
        tour.on('cancel', () => {
            localStorage.setItem('tour_completed', 'true');
            // Close modal if open
            if (isModalOpen) {
                $('#testModal').modal('hide');
            }
        });
    });
</script>
@endpush