@extends('dashboard._theme_dashboard')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body p-4">
                        <h5 class="card-title fw-semibold mb-4">
                            Adicionar Formulário
                        </h5>
                        <input type="hidden" name="itineraries_id" id="itineraries_id"
                               value="{{isset($itineraries) ?  $itineraries->itineraries_id : "" }}">
                        <div class="row">
                            <div class="col-6">
                                <div class="col-12 mb-1">
                                    <label class="form-label" for="itineraries_name">Título:</label>
                                    <input type="text" class="form-control" id="itineraries_name"
                                           name="itineraries_name" required>
                                </div>
                                <div class="col-12 mb-2">
                                    <label class="form-label" for="department_id">Departamento:</label>
                                    <select class="form-select" name="department_id" id="department_id" required>
                                        <option value="">Selecione</option>
                                        @foreach($departments as $item)
                                            <option value="{{$item->CodAuto}}">{{$item->Departamento}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 mb-2">
                                    <label class="form-label" for="itineraries_send">Enviar Avaliação de Atendimento:</label>
                                    <select class="form-select" name="itineraries_send" id="itineraries_send" required>
                                        <option value="Não">Não</option>
                                        <option value="Sim">Sim</option>
                                    </select>
                                </div>

                            </div>
                            <div class="col-6">
                                <div class="col-12">
                                    <h5>Adicionar elementos:</h5>
                                </div>
                                <div class="col-12">
                                    <div class="accordion accordion-flush">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed fw-semibold" type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse_forms_inputs" aria-expanded="false"
                                                        aria-controls="collapse_forms_inputs">
                                                    Formulário:
                                                </button>
                                            </h2>
                                            <div id="collapse_forms_inputs" class="accordion-collapse collapse">
                                                <div class="accordion-body">
                                                    <div class="row">
                                                        <div class="col-3">
                                                            <div class="card custom-border custom-shadow" role="button"
                                                                 onclick="openCanvas('add_input_text')">
                                                                <div class="card-body text-center p-1">
                                                                    <i class="fal fa-keyboard"></i>
                                                                    <br>
                                                                    <strong>Texto</strong>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-3">
                                                            <div class="card custom-border custom-shadow" role="button"
                                                                 onclick="openCanvas('add_input_select', 'select_options')">
                                                                <div class="card-body text-center p-1">
                                                                    <i class="fal fa-ballot-check"></i>
                                                                    <br>
                                                                    <strong>Lista</strong>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-3">
                                                            <div class="card custom-border custom-shadow" role="button"
                                                                 onclick="openCanvas('add_input_radio', 'radio_options')">
                                                                <div class="card-body text-center p-1">
                                                                    <i class="fa fa-dot-circle"></i>
                                                                    <br>
                                                                    <strong>Único</strong>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-3">
                                                            <div class="card custom-border custom-shadow" role="button"
                                                                 onclick="openCanvas('add_input_checkbox', 'checkbox_options')">
                                                                <div class="card-body text-center p-1">
                                                                    <i class="fa fa-check-square"></i>
                                                                    <br>
                                                                    <strong>Múltiplo</strong>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-3">
                                                            <div class="card custom-border custom-shadow" role="button"
                                                                 onclick="openCanvas('add_input_textarea')">
                                                                <div class="card-body text-center p-1">
                                                                    <i class="fa fa-check-square"></i>
                                                                    <br>
                                                                    <strong>Texto Longo</strong>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed fw-semibold" type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse_aux" aria-expanded="false"
                                                        aria-controls="collapse_aux">
                                                    Auxiliares:
                                                </button>
                                            </h2>
                                            <div id="collapse_aux" class="accordion-collapse collapse">
                                                <div class="accordion-body">
                                                    <div class="row">
                                                        <div class="col-3">
                                                            <div class="card custom-border custom-shadow" role="button"
                                                                 onclick="addDividerForms()">
                                                                <div class="card-body text-center p-1">
                                                                    <i class="fal fa-code"></i>
                                                                    <br>
                                                                    <strong>Divisória</strong>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-3">
                                                            <div class="card custom-border custom-shadow" role="button"
                                                                 onclick="openCanvas('add_forms_title')">
                                                                <div class="card-body text-center p-1">
                                                                    <i class="fal fa-text-size"></i>
                                                                    <br>
                                                                    <strong>Título</strong>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 text-end">
                                <button class="btn btn-primary" onclick="sendForm()">Salvar</button>
                            </div>
                            <div class="col-12 mb-2">
                                <hr>
                            </div>
                            <div class="col-12">
                                <div class="accordion accordion-flush">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button fw-semibold" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#collapse_itineraries" aria-expanded="true"
                                                    aria-controls="collapse_itineraries">
                                                Formulário:
                                            </button>
                                        </h2>
                                        <div id="collapse_itineraries" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <table id="itineraries_table" class="table">
                                                            <thead>
                                                            <tr>
                                                                <th>Título</th>
                                                                <th>Tamanho</th>
                                                                <th>Tipo</th>
                                                                <th>Ações</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed fw-semibold" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#collapse_preview" aria-expanded="false"
                                                    aria-controls="collapse_preview">
                                                Pré-visualizar:
                                            </button>
                                        </h2>
                                        <div id="collapse_preview" class="accordion-collapse collapse">
                                            <div class="accordion-body">
                                                <div class="row">
                                                    <div class="col-12 text-center">
                                                        <h5 class="card-title fw-semibold mb-4"
                                                            id="preview_forms_title"></h5>
                                                    </div>
                                                </div>
                                                <div class="text-center fw-bold mb-3">Pré-visualização Mobile</div>
                                                <div class="d-flex justify-content-center">
                                                    <div class="position-relative"
                                                         style="width: 100%; max-width: 360px;">
                                                        <svg viewBox="0 0 360 740" xmlns="http://www.w3.org/2000/svg"
                                                             class="w-100 h-auto">
                                                            <!-- Smartphone frame -->
                                                            <rect x="0" y="0" width="360" height="740" rx="40" ry="40"
                                                                  fill="#333"/>

                                                            <!-- Notch (simples) -->
                                                            <rect x="140" y="10" width="80" height="20" rx="10"
                                                                  fill="#111"/>

                                                            <!-- Screen (area de preview real) -->
                                                            <foreignObject x="20" y="50" width="320" height="640">
                                                                <div xmlns="http://www.w3.org/1999/xhtml"
                                                                     style="height:100%; overflow-y:auto; background-color: #fff; padding: 0.5rem;">

                                                                    <div id="preview_forms_div" class="row gx-2 my-2"></div>
                                                                </div>
                                                            </foreignObject>
                                                            <circle cx="180" cy="715" r="18" fill="#111" />
                                                        </svg>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="add_input_text_canvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Formulário de texto</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_text_title">Título:</label>
                    <input type="text" class="form-control" id="add_input_text_title" required>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_text_size">Tamanho:</label>
                    <select class="form-select" id="add_input_text_size">
                        <option value="2">2</option>
                        <option value="4">4</option>
                        <option value="6">6</option>
                        <option value="8">8</option>
                        <option value="10">10</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col-12 mb-2 text-center">
                    <button type="submit" class="btn btn-primary form-submit-button" data-form-type="text"
                            data-form-type-name="Texto">
                        Adicionar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="add_input_select_canvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Formulário de Lista</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_select_title">Título:</label>
                    <input type="text" class="form-control" id="add_input_select_title" required>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_select_size">Tamanho:</label>
                    <select class="form-select" id="add_input_select_size">
                        <option value="2">2</option>
                        <option value="4">4</option>
                        <option value="6">6</option>
                        <option value="8">8</option>
                        <option value="10">10</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_select_options">Opções (Mínimo 1)</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="add_input_select_options">
                        <span class="input-group-text" role="button" onclick="addOptionList('select_options')">
                            <i class="fal fa-plus-circle"></i>
                        </span>
                    </div>
                </div>
                <div class="col-12">
                    <ul class="list-group" id="select_options_preview">
                    </ul>
                </div>
                <div class="col-12 mb-2 text-center">
                    <button type="submit" class="btn btn-primary form-submit-button" data-form-type="select"
                            data-form-type-name="Lista">
                        Adicionar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="add_input_radio_canvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Formulário de seleção única</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_radio_title">Título:</label>
                    <input type="text" class="form-control" id="add_input_radio_title" required>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_radio_size">Tamanho:</label>
                    <select class="form-select" id="add_input_radio_size">
                        <option value="2">2</option>
                        <option value="4">4</option>
                        <option value="6">6</option>
                        <option value="8">8</option>
                        <option value="10">10</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_radio_options">Opções (Mínimo 2)</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="add_input_radio_options">
                        <span class="input-group-text" role="button" onclick="addOptionList('radio_options')">
                            <i class="fal fa-plus-circle"></i>
                        </span>
                    </div>
                </div>
                <div class="col-12">
                    <ul class="list-group" id="radio_options_preview">
                    </ul>
                </div>
                <div class="col-12 mb-2 text-center">
                    <button type="submit" class="btn btn-primary form-submit-button" data-form-type="radio"
                            data-form-type-name="Único">
                        Adicionar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="add_input_checkbox_canvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Formulário de seleção multipla</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_checkbox_title">Título:</label>
                    <input type="text" class="form-control" id="add_input_checkbox_title" required>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_checkbox_size">Tamanho:</label>
                    <select class="form-select" id="add_input_checkbox_size">
                        <option value="2">2</option>
                        <option value="4">4</option>
                        <option value="6">6</option>
                        <option value="8">8</option>
                        <option value="10">10</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_checkbox_options">Opções (Mínimo 1)</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="add_input_checkbox_options">
                        <span class="input-group-text" role="button" onclick="addOptionList('checkbox_options')">
                            <i class="fal fa-plus-circle"></i>
                        </span>
                    </div>
                </div>
                <div class="col-12">
                    <ul class="list-group" id="checkbox_options_preview">
                    </ul>
                </div>
                <div class="col-12 mb-2 text-center">
                    <button type="submit" class="btn btn-primary form-submit-button" data-form-type="checkbox"
                            data-form-type-name="Múltiplo">
                        Adicionar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="add_input_textarea_canvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Formulário de texto longo</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_textarea_title">Título:</label>
                    <input type="text" class="form-control" id="add_input_textarea_title" required>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_input_textarea_size">Tamanho:</label>
                    <select class="form-select" id="add_input_textarea_size">
                        <option value="2">2</option>
                        <option value="4">4</option>
                        <option value="6">6</option>
                        <option value="8">8</option>
                        <option value="10">10</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col-12 mb-2 text-center">
                    <button type="submit" class="btn btn-primary form-submit-button" data-form-type="textarea"
                            data-form-type-name="Texto Longo">
                        Adicionar
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="add_forms_title_canvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Adicionar Título</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_forms_title_title">Título:</label>
                    <input type="text" class="form-control" id="add_forms_title_title" required>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="add_forms_title_position">Posição:</label>
                    <select class="form-select" id="add_forms_title_position">
                        <option value="text-start">Início</option>
                        <option value="text-center">Centro</option>
                        <option value="text-end">Fim</option>
                    </select>
                </div>
                <div class="col-12 mb-2 text-center">
                    <button type="submit" class="btn btn-primary" onclick="addTitleForms()">
                        Adicionar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="edit_input_canvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Editar Item do Roteiro</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fechar"></button>
        </div>
        <div class="offcanvas-body">
            <input type="hidden" id="edit_item_index">
            <div class="row">
                <div class="col-12 mb-2">
                    <label class="form-label" for="edit_title">Título:</label>
                    <input type="text" class="form-control" id="edit_title">
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="edit_size">Tamanho:</label>
                    <select class="form-select" id="edit_size">
                        <option value="2">2</option>
                        <option value="4">4</option>
                        <option value="6">6</option>
                        <option value="8">8</option>
                        <option value="10">10</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col-12 mb-2" id="edit_options_container">
                    <label class="form-label" for="edit_options">Opções:</label>
                    <textarea class="form-control" id="edit_options"
                              placeholder="Separe as opções por vírgula"></textarea>
                </div>
                <div class="col-12 mb-2 text-center">
                    <button type="button" class="btn btn-primary" id="save_edit">Salvar Alterações</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('customJS')
    <script>
        itineraries_path = @js([
        'token' => csrf_token(),
        'save' => route('itineraries.save'),
        'load' => route('itineraries.load'),
    ]);
    </script>
    <script src="{{asset("_js/itineraries/forms.js")}}"></script>
@endsection