@extends('header_nuevo_generico')
@section('main')
<!--styles-->
<link rel="stylesheet" href="general_style.css" type="text/css">

<!--creacion de todo la pagina de formulario-->
<div class="create-form">
    <!--boton de atras y nombre del apartado-->
    <div class="header-form">
        <a href="/forms" class="card-botton">
            <i class="fas fa-arrow-alt-circle-left fa-lg" style="color: #057151;"></i>
            </a>
            <h2> Nuevo Formulario </h2>
        
    </div>
        <!-- Campo oculto con el JSON -->

       @if(!empty($jsonData))
            <input type="hidden" id="json-data" value="{{ $jsonData }}">
            <input type="hidden" id="tipo_doc" value="{{ $tipo_doc }}">
            <input type="hidden" id="Duplicado" value="{{ $D }}">
        @else
            <input type="hidden" id="json-data" value="">
        @endif

       @if(!empty($tipo_doc))
            <input type="hidden" id="tipo_doc" value="{{ $tipo_doc }}">
        @else
            <input type="hidden" id="tipo_doc" value="">
        @endif
        @if(!empty($D))
            <input type="hidden" id="D" value="{{ $D }}">
        @else
            <input type="hidden" id="D" value="">
        @endif
        <!--bloque de formulario completo-->
        <div class="bloq-content-form">
            <!--lado izquierdo donde se manejan las secciones-->
            <div class="bloq-content-form">
        <!-- lado izquierdo donde se manejan las secciones -->
                <div class="left-tags">
                    <!-- botón de creación de sección -->
                    <button class="Btn-new-section" data-bs-toggle="modal" data-bs-target="#modalSeccion">
                        <div class="sign">+</div>
                        <div class="text">Sección</div>
                    </button>

                    <!-- Aquí se renderizarán las secciones -->
                    <div id="seccionesContainer"></div>
                </div>

                <!-- lado derecho para mostrar el contenido de las secciones -->
              

        <!--recuadro del formulario-->
        <div class="container-form">
            <!--titulo del formulario-->
            <h3 contenteditable="true" id="TituloForm" value="">Título del Formulario</h3>
            
            <!--descripcion del formulario-->
            <div class="form-group">
                <input type="text" id="form-description" placeholder="Descripción del formulario">
            </div>
            <!--etiqueta de la seccion ya creada-->
            <div class="left-tags" id="seccionesContainer">
                <!-- Las secciones se añadirán aquí dinámicamente -->
                        <div class="right-content">
                            <div id="sectionContent">
                                <!-- Aquí se mostrará el formulario o contenido de cada sección seleccionada -->
                                <h3>Selecciona una sección</h3>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
                <!--boton de creacion de campo-->
                

                
            <!--boton de finalizado de formulario-->
            <div class="finish-btn" data-bs-toggle="modal" data-bs-target="#finish-modal" >
                <button>Terminar Formulario</button>
            </div>
    
        </div>
    
    @include('/ag-modal/modal_camps') 
    @include('/ag-modal/modal_section')
    @include('/ag-modal/modal_finish_form')
    @section('funcionesJS')
    <script type="text/javascript" src="{{ URL::asset('js/forms/createform.js') }}"> </script>
    @endsection
</div>
</div>
</div>
@endsection
<style>
    .create-form{
        margin:12% 2% 5% 2% ;
        }
        .header-form {
                display: flex;
                align-items: center;
                justify-content: space-between; 
                padding: 5px ;
                margin: 0% 50% 5% 3% ;
                background-color: #FCF8F8;
            }
    
            .header-form i {
                font-size: 30px;
            }
    
            .header-form h2 {
                font-size: 16px;
                flex-grow: 1; 
                text-align: center; 
                color: #057151;
                font-weight: bold;
            }
    
            .back-btn {
                font-size: 30px;
                color: #057151;
                cursor: pointer;
                position: absolute;
                top: 20%;
                left: 10%;
            }
    
        .bloq-content-form {
            font-family: 'Roboto', sans-serif;
            background-color: #FCF8F8;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 10vh;
            }
    
    
            .left-tags {
            display: flex;
            flex-direction: column; 
            align-items: flex-start; 
            }
    
                .Btn-new-section,
                .tab-active {
                    margin: 0px 0px 70px 0px; 
                }
    
                .tab.active {
                    border-radius: 10px 0px 0px 10px;
                    width: 100%;
                    background-color: #057151;
                                
                }
            
    
    
            .container-form {
                background-color: white;
                width: 90%;
                max-width: 1200px;
                padding: 50px;
                border-radius: 15px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                position: relative;
            }
    
                h3 {
                    font-size: 20px;
                    margin-bottom: 20px;
                    text-align: center;
                    border-bottom: 2px solid #D9D9D9;
                    padding-bottom: 10px;
                }
    
                .form-group input[type="text"] {
                    width: 100%;
                    padding: 15px;
                    font-size: 16px;
                    border: 1px solid #D9D9D9;
                    border-radius: 8px;
                    margin-bottom: 20px;
                }
    
                .tabs {
                    display: flex;
                    justify-content: flex-start;
                }
    
                    .tab {
                        padding: 10px 20px;
                        background-color: #41A788;
                        color: white;
                        text-align: center;
                        border-radius: 5px;
                        cursor: pointer;
                        box-shadow: 4px 1px 4px rgba(0, 0, 0, 0.2);
                        margin-right: 0px;
                        
                        margin-bottom: 3px;
                        height:44px;
                    }
                    .tabPadre {
                        width:1100px;
                    }   
                .section-options {
                display: flex;
                justify-content: flex-end;
                margin-bottom: 20px;
                margin-top: 70px;
                float:right;
                }
                
                .titulo_seccion {
                display: flex;
                }
    
                .section-options button {
                    background-color: transparent;
                    border: none;
                    color: #41A788;
                    cursor: pointer;
                    margin-left: 10px;
                    font-size: 16px;
                }
    
                .section-options button:hover {
                    color: #057151;
                }
    
                .row-new {
                display: flex;
                justify-content: center;
                align-items: center;
                }
                .Btn-new-section {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    width: 80px;
                    height: 60px;
                    border: none;
                    border-radius: 30px;
                    position: relative;
                    overflow: hidden;
                    transition-duration: .3s;
                    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
                }
                .Btn-new-camp
                {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    width: 40px;
                    height: 20px;
                    border: none;
                    border-radius: 30px;
                    position: relative;
                    overflow: hidden;
                    transition-duration: .3s;
                    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
                }
                .Btn-new-camp {
                    background-color: #41A788;
                }
    
                .Btn-new-section {
                    background-color: #057151;
                }
    
    
                .sign {
                    width: 100%;
                    font-size: 2em;
                    color: white;
                    transition-duration: .3s;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
    
    
                .text {
                    position: absolute;
                    right: 0%;
                    width: 0%;
                    opacity: 0;
                    color: white;
                    font-size: 1.2em;
                    font-weight: 500;
                    transition-duration: .3s;
                }
    
    
                .Btn-new-camp:hover,
                .Btn-new-section:hover {
                    width: 9rem;
                    border-radius: 5px;
                    padding: 1rem;
                    transition-duration: .3s;
                }
    
                .Btn-new-camp:hover .sign,
                .Btn-new-section:hover .sign {
                    width: 30%;
                    transition-duration: .3s;
                    padding-right: 30px;
                    margin: 0 50px 0 10px;
                }
    
                .Btn-new-camp:hover .text,
                .Btn-new-section:hover .text {
                    opacity: 1;
                    width: 70%;
                    transition-duration: .3s;
                    padding-left: 10px;
                }
    
                .Btn-new-camp:active,
                .Btn-new-section:active {
                    transform: translate(2px, 2px);
                }
    
        .finish-btn {
                text-align: right;
                margin-top: 40px;
            }
    
        .finish-btn button {
                background-color: #444444;
                color: white;
                border: none;
                padding: 10px;
                border-radius: 10px;
                cursor: pointer;
                font-size: 16px;
            }
    
        .finish-btn button:hover {
                background-color: #FF3B30;
            }
        
      .bloq-content-form {
        display: flex;
        width: 100%;
    }
    
        /* Centrando el título y la descripción */
        #sectionContent h3, #sectionContent h6 {
            text-align: center;
            margin-bottom: 20px;
        }
    
        /* Estilos generales para el contenedor de las preguntas */
        .pregunta {
            margin-bottom: 15px;
            font-weight: bold;
        }
    
        .respuestas, .TipoArchivo, .Obligatorio {
            margin-left: 20px;
            margin-bottom: 10px;
        }
    
        /* Alinear el contenedor de opciones a la derecha */
        .section-options {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }
    
        /* Estilos de los botones en la sección de opciones */
        .tab-seccion button {
            background-color: #f0f0f0;
            border: none;
            padding: 10px 15px;
            margin: 5px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
    
        .tab-seccion button i {
            font-size: 16px;
        }
    
        .tab-seccion button:hover {
            background-color: #ddd;
        }
        .right-content{
            width:100%;
        }
        /* Botón de agregar campo */
        .Btn-new-camp {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
            background-color: #41A788;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 14px;
            
        }
    
        .Btn-new-camp .sign {
            font-size: 20px;
            margin-right: 5px;
        }
    
        .Btn-new-camp .text {
            font-size: 14px;
        }
    
        /* Botón de agregar campo hover */
        .Btn-new-camp:hover {
            background-color: #369b75;
        }
    
        /* Ajustar los contenedores dentro de las secciones */
        .pregunta {
            font-size: 16px;
            margin-bottom: 10px;
        }
    
        .respuestas, .TipoArchivo, .Obligatorio {
            font-size: 14px;
        }
    
    
    
            
       
     @media (max-width: 768px) {
    
                .container-form {
                    width: 95%;
                    padding: 20px;
                }
    
                h1 {
                    font-size: 28px;
                }
    
                .form-group input[type="text"] {
                    font-size: 16px;
                }
    
                .tab {
                    padding: 10px;
                    font-size: 14px;
                }
    
                .finish-btn button {
                    padding: 10px 20px;
                    font-size: 14px;
                }
    
                .Btn-new-camp,
                .Btn-new-section {
                    width: 70px;
                    height: 50px;
                }
            }
        
        .section-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .section-options button {
        background-color: #41A788;
        color: white;
        border: none;
        border-radius: 5px;
        padding:  0px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .section-options button:hover {
        background-color: #36a07a;
    }
    
    .tituloydesc {
        margin: 20px 0;
    }
    
    .tituloydesc h3 {
        margin: 0;
        font-size: 1.5em;
        color: #333;
    }
    
    .tituloydesc h6 {
        margin: 5px 0;
        color: #666;
    }
    
    .preguntasmap {
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 15px;
        background-color: #f9f9f9;
    }
    
    .pregunta, .respuestas, .TipoArchivo, .CantidadCa, .Obligatorio {
        margin: 10px 0;
    }
    
    .pregunta label, .respuestas label, .TipoArchivo label, .CantidadCa label, .Obligatorio label {
        font-weight: bold;
    }
    
    .Btn-new-camp {
        display: flex;
        align-items: center;
        background-color: #41A788;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer;
    }
    
    .Btn-new-camp .sign {
        font-size: 1.5em;
        margin-right: 5px;
    }
    /* Estilo general para el contenedor de secciones */
    .section-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;
        padding: 0px !important;
        background-color: #f0f8ff; /* Color de fondo claro */
        border-radius: 5px;
    }
    
    /* Botones en las opciones de sección */
    .section-options button {
        background-color: #41A788; /* Color de fondo */
        color: white; /* Color del texto */
        border: none;
        border-radius: 5px;
        padding: 8px 12px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s; /* Transiciones suaves */
    }
    
    .section-options button:hover {
        background-color: #369b75; /* Color de fondo en hover */
        transform: translateY(-2px); /* Efecto de elevación */
    }
    
    /* Estilo para los títulos y descripciones */
    .tituloydesc {
        margin: 20px 0;
        padding: 15px;
        background-color: #fff; /* Fondo blanco */
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .tituloydesc h3 {
        margin: 0;
        font-size: 1.5em;
        color: #333;
    }
    
    .tituloydesc h6 {
        margin: 5px 0;
        color: #666;
    }
    
    /* Estilo para las preguntas */
    .preguntasmap {
        margin: 20px 0;
        border: 1px solid #ddd; /* Borde del contenedor */
        border-radius: 5px;
        padding: 15px;
        background-color: #f9f9f9; /* Color de fondo de las preguntas */
    }
    
    .pregunta, .respuestas, .TipoArchivo, .CantidadCa, .Obligatorio {
        margin: 10px 0;
    }
    
    .pregunta label, .respuestas label, .TipoArchivo label, .CantidadCa label, .Obligatorio label {
        font-weight: bold;
        color: #555; /* Color de texto */
    }
    
    /* Ajustes para el botón de agregar campo */
    .Btn-new-camp {
        display: flex;
        align-items: center;
        background-color: #41A788; /* Color de fondo */
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer;
        transition: background-color 0.3s; /* Transición */
    }
    
    .Btn-new-camp .sign {
        font-size: 1.5em;
        margin-right: 5px;
    }
    
    .Btn-new-camp:hover {
        background-color: #369b75; /* Color de fondo en hover */
    }
</style>