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

        @slot('title')
            Editar Norma
        @endslot

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

        @slot('form')
            {{ csrf_field() }}
            <input type="hidden" name="confirmar_nombre_igual_norma_oficial" value="0">
            <div id="modal-form-modify">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                    <a class="nav-link active" id="norma-edit-tab" data-toggle="tab" href="#norma-edit" role="tab" aria-controls="norma-edit" aria-selected="true">Norma</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" id="informe-resultados-edit-tab" data-toggle="tab" href="#informe-resultados-edit" role="tab" aria-controls="informe-resultados-edit" aria-selected="false">Informe de resultados</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="norma-edit" role="tabpanel" aria-labelledby="norma-edit-tab">
                        
                            <input type="text" class="form-control" id="id_norma" name="id_norma" hidden>
                            <div class="required field mt-3">
                                <label for="id_norma_oficial">Norma oficial</label>
                                <select id="id_norma_oficial" name="id_norma_oficial" class="selectpicker form-control" data-live-search="true">
                                    <option value="">--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">
                                    Si el nombre de la norma es igual al de la norma oficial, el campo quedará bloqueado.
                                </small>
                            </div>

                            <div class="field mt-3" id="contenedor_cambiar_nombre_norma_edit">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input cambiar-nombre-norma" id="cambiar_nombre_norma_edit" name="cambiar_nombre_norma" value="1">
                                    <label class="custom-control-label" for="cambiar_nombre_norma_edit">
                                        Cambiar nombre de la norma
                                    </label>
                                </div>
                                <small class="form-text text-muted">
                                    Activa esta opción para capturar un nombre distinto al nombre de la norma oficial.
                                </small>
                            </div>

                            <div class="field">
                                <label for="nombre">Nombre de la norma</label>
                                <input type="text" class="form-control input-nombre-norma" id="nombre" name="nombre" placeholder="Norma" readonly>
                                <small class="form-text text-muted ayuda-nombre-norma">
                                    El campo se desbloquea cuando el nombre interno es diferente al nombre de la norma oficial.
                                </small>
                            </div>
                        
                            <div class="required field">
                                
                                <label for="descripcion" >Descripción de la norma</label>
                                <textarea type="text" class="form-control" rows="4" id="descripcion" name="descripcion" placeholder="Descripción"></textarea>
                            </div>
            
                            <div class="field">
                                <label for="version" >Versión</label>
                                <input type="text" class="form-control" id="version" name="version" placeholder="Versión">
                            </div>
                            <div class="field">
                                <label for="estatus" >Estatus</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>
                        
                    </div>
                    <div class="tab-pane fade" id="informe-resultados-edit" role="tabpanel" aria-labelledby="informe-resultados-edit-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_edit" name="sombreado_inciso_edit">
                                <label class="custom-control-label" for="sombreado_inciso_edit">Sombreado en incisos</label>
                            </div>
                        </div>
                        <div class="field mt-3">
                            <label for="mostrar_apendices" >Apendices</label>
                            <div class="custom-control custom-switch mt-3">
                                <input type="checkbox" class="custom-control-input" id="mostrar_apendices" name="mostrar_apendices" value="1">
                                <label class="custom-control-label" for="mostrar_apendices">Mostrar título apendices</label>
                            </div>
                        </div>
                        <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>
                        <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>
                        <div class="field">
                            <label for="vigencia">Vigencia</label>
                            <input type="text" class="form-control" id="vigencia" name="vigencia" placeholder="vigencia">
                        </div>
                        <div class="field">
                            <label for="direccion" >Dirección</label>
                            <input type="text" class="form-control" id="direccion" name="direccion" placeholder="Dirección">
                        </div>
                        <div class="field">
                            <label for="telefonos" >Teléfonos</label>
                            <input type="text" class="form-control" id="telefonos" name="telefonos" placeholder="Teléfonos">
                        </div>
                        <div class="field">
                            <label for="descargo_responsabilidad" >Descargo de responsabilidad</label>
                            <textarea class="form-control" id="descargo_responsabilidad" name="descargo_responsabilidad" placeholder="Leyenda descargo de responsabilidad" rows="7"></textarea>
                        </div>
                        <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>
                    </div>
                </div>
            </div>
            
        @endslot

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