easia/resources/views/livewire/onboarding.blade.php

<div class="container-fluid p-0">
    <div class="row m-0">
        <div class="col-12 p-0">
            <div class="onboarding-card">
                <div>
                    <div class="onboarding-main d-flex align-items-stretch justify-content-center">
                        <div class="onboarding-inner w-100 d-flex flex-column">
                            <a href="#" id="prevBtn" onclick="nextPrev(-1)"><i class="iconly-Arrow-Left icli arrow-back"></i></a>
                            <img class="d-block img-fluid m-auto mb-5 form-logo" src="/assets/images/logo.png" alt="logo" />
                            <form class="theme-form form-wizard flex-fill d-flex flex-column" id="onboarding" method="POST" action="#">
                                {{-- Step 1 --}}
                                <div class="tab">
                                    <div class="row">
                                        <div class="col-xs-12 mb-3">
                                            <p class="text-center">Benvenuto! Iniziamo configurando le informazioni base della tua azienda.</p>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="company">Ragione sociale</label>
                                                <input class="form-control" id="company" name="company" type="text" placeholder="Inserisci" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="business">Nome business</label>
                                                <input class="form-control" id="business" name="business" type="text" placeholder="Inserisci" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="sector">Settore</label>
                                                <select class="form-select" id="sector" name="sector" type="text" required>
                                                    <option value="" selected disabled>Seleziona</option>
                                                    <option value="sector_1">sector_1</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="activity">Attività</label>
                                                <select class="form-select" id="activity" name="activity" type="text" required>
                                                    <option value="" selected disabled>Seleziona</option>
                                                    <option value="activity_1">activity_1</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="website">Sito web</label>
                                                <input class="form-control" id="website" name="text" type="text" placeholder="Inserisci" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="logo">Logo</label>
                                                <input class="form-control" id="logo" name="logo" type="file" placeholder="Nessun file selezionato" accept="image/*" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- END - Step 1 --}}

                                {{-- Step 2 --}}
                                <div class="tab">
                                    <div class="row">
                                        <div class="col-xs-12 mb-3">
                                            <p class="text-center">Personalizza il calendario del timesheet in base alle tue esigenze.</p>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="calendar_type">Tipologia di calendario</label>
                                                <select class="form-select" id="calendar_type" name="calendar_type" type="text" required>
                                                    <option value="" selected disabled>Seleziona</option>
                                                    <option value="sector_1">calendar_type_1</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="slot_interval">Intervallo slot</label>
                                                <select class="form-select" id="slot_interval" name="slot_interval" type="text" required>
                                                    <option value="" selected disabled>Seleziona</option>
                                                    <option value="sector_1">slot_interval_1</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="start_hour">Ora inizio visualizzazione</label>
                                                <select class="form-select" id="start_hour" name="start_hour" type="text" required>
                                                    <option value="" selected disabled>Seleziona</option>
                                                    <option value="0">0</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                    <option value="6">6</option>
                                                    <option value="7">7</option>
                                                    <option value="8">8</option>
                                                    <option value="9">9</option>
                                                    <option value="10">10</option>
                                                    <option value="11">11</option>
                                                    <option value="12">12</option>
                                                    <option value="13">13</option>
                                                    <option value="14">14</option>
                                                    <option value="15">15</option>
                                                    <option value="16">16</option>
                                                    <option value="17">17</option>
                                                    <option value="18">18</option>
                                                    <option value="19">19</option>
                                                    <option value="20">20</option>
                                                    <option value="21">21</option>
                                                    <option value="22">22</option>
                                                    <option value="23">23</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="end_hour">Ora fine visualizzazione</label>
                                                <select class="form-select" id="end_hour" name="end_hour" type="text" required>
                                                    <option value="" selected disabled>Seleziona</option>
                                                    <option value="0">0</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                    <option value="6">6</option>
                                                    <option value="7">7</option>
                                                    <option value="8">8</option>
                                                    <option value="9">9</option>
                                                    <option value="10">10</option>
                                                    <option value="11">11</option>
                                                    <option value="12">12</option>
                                                    <option value="13">13</option>
                                                    <option value="14">14</option>
                                                    <option value="15">15</option>
                                                    <option value="16">16</option>
                                                    <option value="17">17</option>
                                                    <option value="18">18</option>
                                                    <option value="19">19</option>
                                                    <option value="20">20</option>
                                                    <option value="21">21</option>
                                                    <option value="22">22</option>
                                                    <option value="23">23</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- END - Step 2 --}}

                                {{-- Step 3 --}}
                                <div class="tab">
                                    <div class="row">
                                        <div class="col-xs-12 mb-5">
                                            <p class="text-left">Definisci il workflow di approvazione delle ore lavorate e delle spese sostenute dalle risorse:</p>
                                            <ul class="standard-list">
                                                <li><b>Auto approvazione</b>: vengono automaticamente convalidati, senza bisogno di revisione.</li>
                                                <li><b>Approvazione del Supervisor</b>: devono essere approvati dal supervisor assegnato alla risorsa.</li>
                                                <li><b>Approvazione del Project Manager</b>: devono essere approvati dal responsabile del progetto.</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="workflow_approval_slot">Workflow approvazione slot</label>
                                                <select class="form-select" id="workflow_approval_slot" name="workflow_approval_slot" type="text" required>
                                                    <option value="" selected disabled>Seleziona</option>
                                                    <option value="sector_1">workflow_approval_slot_1</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="workflow_approval_expenses">Workflow approvazione spese</label>
                                                <select class="form-select" id="workflow_approval_expenses" name="workflow_approval_expenses" type="text" required>
                                                    <option value="" selected disabled>Seleziona</option>
                                                    <option value="sector_1">workflow_approval_expenses_1</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xs-12 mb-3">
                                            <div class="form-group">
                                                <label for="workflow_approval_absence">Workflow approvazione assenze</label>
                                                <select class="form-select" id="workflow_approval_absence" name="workflow_approval_absence" type="text" required>
                                                    <option value="" selected disabled>Seleziona</option>
                                                    <option value="sector_1">workflow_approval_absence_1</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- END - Step 3 --}}

                                <div class="align-items-center mt-auto row w-100">
                                    <div class="col-auto">
                                        <div class="text-start"><span class="step"></span><span class="step"></span><span class="step"></span></div>
                                    </div>
                                    <div class="col">
                                        <div class="text-end btn-mb">
                                            {{-- <button class="btn btn-secondary" id="prevBtn" type="button" onclick="nextPrev(-1)">Indietro</button> --}}
                                            <button class="btn btn-primary btn-medium" id="nextBtn" type="button" onclick="nextPrev(1)">Avanti</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<!-- form wizard JS -->
<script src="../assets/js/form-wizard/form-wizard.js"></script>
@endpush