@php $imageCounter = 0; @endphp

@foreach($steps as $step)

    <div class="mt-4 mb-5">
        <h4>{{ $step->stepName }}</h4>
        <p>{{ $step->stepDescription }}</p>

        @php $hasToggle = rand(0,1) !== 0 ? true : false; @endphp
        @if($hasToggle) {{-- If has NOTE --}}
            <div class="alert alert-primary">
                <p class="fst-italic m-0"><strong>Note:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero corporis odit animi laudantium culpa mollitia perferendis nemo. Perferendis molestiae assumenda consequatur. Quo adipisci quisquam fugiat esse, ab temporibus ullam libero!</p>
            </div>
        @endif

        @php $hasToggle = rand(0,1) !== 0 ? true : false; @endphp
        @if($hasToggle) {{-- If has IMAGE --}}
            @php $imageCounter ++; @endphp
            <a href="#" data-bs-toggle="modal" data-bs-target="#imgModal-{{ $imageCounter }}" class="modalTriggerSelector" hidden>
                <img src="{{ asset('img/default.svg') }}" class="img-step-guide"></img>
            </a>
        @endif
        @php $hasToggle = rand(0,1) !== 0 ? true : false; @endphp
        @if($hasToggle) {{-- If has image caption --}}
            <small><p class="mt-0 fst-italic">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius velit, nesciunt, impedit minima animi totam nulla nemo praesentium eligendi, repudiandae maiores. Aliquid rerum magnam praesentium delectus voluptatum optio maiores perferendis!</p></small>
        @endif
    </div>

@endforeach

@if($imageCounter > 0)
    @for($i = 1; $i <= $imageCounter; $i++)
        <div class="modal fade imgModalSelector" id="imgModal-{{ $i }}" tabindex="-1" aria-labelledby="imgModal-{{ $i }}-Label" aria-hidden="true" hidden>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="imgModal-{{ $i }}-Label">Image</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <img src="{{ asset('img/default.svg') }}" class="w-100-percent mx-auto my-2"></img>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    @endfor
@endif

<script src="{{ asset('js/hideUnhideModals.js') }}"></script>