@component('fragments.modal')
    @slot('idmodal')
        modalNewNorma
    @endslot

    @slot('title')
        Agregar Norma
    @endslot

    @slot('action')
        <form id="new-standard-form" method="POST" action="{{url('normas/new_norma')}}" role="form" enctype="multipart/form-data">
    @endslot

    @slot('form')
        {{ csrf_field() }}
        <input type="hidden" name="confirmar_nombre_igual_norma_oficial" value="0">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="norma-tab" data-toggle="tab" href="#norma" role="tab" aria-controls="norma" aria-selected="true">Norma</a>
            </li>
            <!--<li class="nav-item">
                <a class="nav-link" id="informe-resultados-tab" data-toggle="tab" href="#informe-resultados" role="tab" aria-controls="informe-resultados" aria-selected="false">Informe de resultados</a>
            </li>-->
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="norma" role="tabpanel" aria-labelledby="norma-tab">

                <div class="field mt-4">
                    <label for="id_norma_oficial"><b>Norma Oficial</b></label>
                    <select id="id_norma_oficial" name="id_norma_oficial" class="selectpicker form-control" data-live-search="true">
                        <option value="" selected disabled>--Seleccione--</option>
                        @foreach ($normas_oficiales as $norma_oficial)
                            <option value="{{$norma_oficial->id_norma_oficial}}">{{$norma_oficial->nombre}}</option>
                        @endforeach
                    </select>
                    <small class="form-text text-muted">
                        Al seleccionar una norma oficial, el nombre de la norma se llenará automáticamente.
                    </small>
                </div> 

                <div class="field mt-3" id="contenedor_cambiar_nombre_norma_new">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input cambiar-nombre-norma" id="cambiar_nombre_norma_new" name="cambiar_nombre_norma" value="1">
                        <label class="custom-control-label" for="cambiar_nombre_norma_new">
                            Cambiar nombre de la norma
                        </label>
                    </div>
                    <small class="form-text text-muted">
                        Activa esta opción solo si el nombre interno de la norma será diferente al nombre de la norma oficial.
                    </small>
                </div>
                
                <div class="field mt-4">
                    <label for="nombre"><b>Nombre de la norma</b></label>
                    <input type="text" class="form-control input-nombre-norma" id="nombre" name="nombre" placeholder="Norma">
                    <small class="form-text text-muted ayuda-nombre-norma">
                        Si no activas “Cambiar nombre de la norma”, se conservará el nombre de la norma oficial seleccionada.
                    </small>
                </div>
                
                <div class="required field mt-4">    
                    <label for="descripcion" ><b>Descripción de la norma</b></label>
                    <textarea type="text" class="form-control" rows="4" id="descripcion" name="descripcion" placeholder="Descripción"></textarea>
                </div>
                
                <div class="field mt-4">
                    <label for="version" ><b>Versión</b></label>
                    <input type="text" class="form-control" id="version" name="version" placeholder="Versión">
                </div>
                
                <div class="field mt-4">
                    <label for="estatus" ><b>Estatus</b></label>
                    <select id="estatus" name="estatus" class="form-control selectpicker" title="--Selecciona--" required>
                        <option value="1">Activo</option>
                        <option value="2">Inactivo</option>
                    </select>
                </div>
                
                <!--
                <hr>
                <div class="text-center mt-4">
                    <label for="equipos"><b>Equipos</b></label>
                    <input type="text" class="form-control" id="equipos" name="equipos" placeholder="Equipos">
                </div>
                -->
                
            </div>

            
            <div class="tab-pane fade" id="informe-resultados" role="tabpanel" aria-labelledby="informe-resultados-tab">
                
                <div class="field mt-3">
                    <label for="norma" >Incisos</label>
                    <div class="custom-control custom-switch mt-3">
                        <input type="checkbox" class="custom-control-input" id="sombreado_inciso" name="sombreado_inciso">
                        <label class="custom-control-label" for="sombreado_inciso">Sombreado en incisos</label>
                    </div>
                </div>
                <br>

                <div class="field">
                    <label for="vigencia">Leyenda de acreditación</label>
                    <input type="text" class="form-control" id="leyenda_acreditacion" name="leyenda_acreditacion" placeholder="leyenda acreditación">
                </div>
                <br>
                
                <div class="field">
                    <label for="vigencia">Leyenda de pie de página</label>
                    <input type="text" class="form-control" id="leyenda_pie_pagina" name="leyenda_pie_pagina" placeholder="leyenda pie página">
                </div>
                <br>
                
                <div class="field">
                    <label for="vigencia" >Vigencia</label>
                    <input type="text" class="form-control" id="vigencia" name="vigencia" placeholder="vigencia">
                </div>
                <br>
                
                <div class="field">
                    <label for="direccion" >Dirección</label>
                    <input type="text" class="form-control" id="direccion" name="direccion" placeholder="Dirección">
                </div>
                <br>
                
                <div class="field">
                    <label for="telefonos" >Teléfonos</label>
                    <input type="text" class="form-control" id="telefonos" name="telefonos" placeholder="Teléfonos">
                </div>
                <br>
                
                <div class="field">
                    <label for="norma" >Número de revisión</label>
                    <input type="text" class="form-control" id="numero_revision" name="numero_revision" placeholder="FORSAT-XX-XX">
                </div>
                <br>

            </div>
        </div>
    @endslot
    @slot('button')
        <button type="submit" class="btn btn-primary" id="btn-new-standard">
            <i class="save icon"></i>Guardar
        </button>
    @endslot
@endcomponent