@php
$maxSteps = rand(2,7);
$fiveRandomLipsums = ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo ad impedit velit, minus veritatis aperiam! Quasi, debitis unde doloribus incidunt asperiores, enim sapiente tempore dolore eveniet maiores inventore. Ducimus, eos?', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, similique repudiandae pariatur doloremque, rerum aliquam recusandae fuga hic blanditiis ad maxime ab, neque ullam fugit. Laboriosam fugit aut ut ex?', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis commodi quidem vitae. Ratione laboriosam minus accusamus voluptatum numquam ad iste voluptatem nesciunt, tempore expedita omnis inventore, magni suscipit maiores sint?', 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut dicta quasi, voluptas porro odit fuga architecto necessitatibus fugit aut autem, voluptatum quaerat consectetur id nulla animi. Distinctio eaque amet quas.', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, vitae. Quos consequuntur corrupti obcaecati excepturi! Cumque iste harum similique, praesentium delectus repudiandae molestiae animi officiis non recusandae tempore sequi quas!'];
$imgModals = [];
@endphp
@extends('layouts.app')
@section('title', 'Guide: How To Example')
@section('content')

@for($i = 1; $i <= $maxSteps; $i++)
    <div class="mt-4 mb-5">
        <h6>Step {{ $i }}: Step{{ $i }}Procedure</h6>
        <p>{{ $fiveRandomLipsums[rand(0,4)] }}</p>

        @php
        $hasImage = rand(0,1) === 0 ? false : true;
        $imgModals[] = (object)[
            'label' => 'Step '.$i,
            'src' => null
        ];
        @endphp

        @if($hasImage)
        <a href="#" data-bs-toggle="modal" data-bs-target="#imgModal-{{ count($imgModals) }}" class="modalTriggerSelector" hidden>
            <img src="{{ asset('img/default.svg') }}" class="img-step-guide"></img>
        </a>
        @endif
    </div>
@endfor

@endsection

@if(count($imgModals) > 0)
    @foreach($imgModals as $ind => $img)
    <div class="modal fade imgModalSelector" id="imgModal-{{ $ind+1 }}" tabindex="-1" aria-labelledby="imgModal-{{ $ind+1 }}-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-{{ $ind+1 }}-Label">{{ $img->label }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img src="{{ $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>
    @endforeach
<div class="img-modals">
</div>
@endif

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