@extends('layout/template')

@section('title','Usuarios | sistema')

@section('contenido')

 <!-- BEGIN: Content-->
 <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="content-wrapper">
            <div class="content-header row">
            </div>
            <div class="content-detached">
                <div class="content-body">
                    <div class="content-overlay"></div>                
                    <section class="row all-contacts">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-head">
                                    <div class="card-header">
                                        <h4 class="card-title">Preguntas</h4>
                                        <div class="heading-elements mt-0">                                                                                
                                        <button class="btn btn-primary btn-sm " data-toggle="modal" data-target="#AddContactModal"><i class="d-md-none d-block ft-plus white"></i>                                            
                                                <span class="d-md-block d-none">Nueva preguntas</span></button>                                                                                    
                                            <div class="modal fade" id="AddContactModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <section class="contact-form">                                                            
                                                            <form action="{{ url('preguntas')}}" method="post">            
                                                            @csrf
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="exampleModalLabel1">Agregar nueva pregunta</h5>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>
                                                                <div class="modal-body">
                                                                <fieldset class="form-group col-12">
                                                                        <input type="text"  name="numero_pregunta" id="numero_pregunta" value="{{ $total +1 }}" class="form-control" required placeholder="No de pregunta">
                                                                    </fieldset>
                                                                    <fieldset class="form-group col-12">
                                                                    <div class="text-bold-600 font-medium-2">
                                                                    Título de pregunta
                                                                    </div>                                           
                                                                    <select name="titulo_preguntas" id="titulo_preguntas" class="select2 form-control" required>                                                                                              
                                                                        <option value="">Seleccionar</option>               
                                                                        @foreach ($titulo_preguntas as $titulo_pregunta) 
                                                                        <option value="{{$titulo_pregunta->id}}">{{$titulo_pregunta->titulo}}</option>                                     
                                                                        @endforeach                                                                                                                                                                                                                
                                                                    </select> 
                                                                    </fieldset>
                                                                    <fieldset class="form-group col-12">
                                                                        <input type="text" name="video" id="video" value="{{ old('video') }}" class="form-control" required placeholder="Video">
                                                                    </fieldset>
                                                                    <fieldset class="form-group col-12">
                                                                        <input type="text" name="texto" id="texto" value="{{ old('texto') }}" class="form-control" required placeholder="Texto">
                                                                    </fieldset>                                                                                                                                                                                                                                                   
                                                                    <fieldset class="form-group col-12">
                                                                    <div class="text-bold-600 font-medium-2">
                                                                    Tipo de pregunta
                                                                    </div>                                           
                                                                    <select  name="tipo_preguntas" id="tipo_preguntas" class="select2 form-control" required>                                                                                              
                                                                    <option value="">Seleccionar</option>               
                                                                        @foreach ($tipo_preguntas as $tipo_pregunta) 
                                                                        <option value="{{$tipo_pregunta->id}}">{{$tipo_pregunta->descripcion}}</option>                                     
                                                                        @endforeach
                                                                    </select> 
                                                                    </fieldset>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <fieldset class="form-group position-relative has-icon-left mb-0">
                                                                    <button type="submit" class="btn btn-success">Guardar</button>
                                                                        <!-- <button type="button" id="add-contact-item" class="btn btn-info add-contact-item" data-dismiss="modal"><i class="la la-paper-plane-o d-block d-lg-none"></i> <span class="d-none d-lg-block">Guardar</span></button> -->
                                                                    </fieldset>
                                                                </div>
                                                            </form>
                                                        </section>
                                                    </div>
                                                </div>
                                            </div>
                                           
                                            <button class="btn btn-default btn-sm"><i class="ft-settings white"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">

                                    <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                                            {{-- <h3 class="content-header-title mb-0 d-inline-block">  {{$pregunta->texto}}</h3>                                             --}}
                                        </div>
                                        <!-- Task List table -->                                       
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered text-inputs-searching dataex-html5-export">           
                                                <thead>
                                                    <tr>
                                                    <th>No de preguntas</th>
                                                        <th>Título de las preguntas</th>
                                                        <th>Video</th>
                                                        <th>Audio</th>
                                                        <th>Texto</th>                    
                                                        <th>Tipo Pregunta</th>                                                       
                                                        <th></th>
                                                      
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                @foreach($preguntas as $pregunta)
                                                    <tr>                                                        
                                                        <td>
                                                            <div class="media">                                                              
                                                                <div class="media-body media-middle">
                                                                    <a class="media-heading name">{{$pregunta->numero_pregunta}}</a>
                                                                </div>
                                                            </div>
                                                        </td>

                                                        <td>
                                                            <div class="media">                                                              
                                                                <div class="media-body media-middle">
                                                                    <a class="media-heading name">{{$pregunta->titulo_pregunta->titulo}}</a>
                                                                </div>
                                                            </div>
                                                        </td>

                                                        <td>
                                                            <div class="media">                                                              
                                                                <div class="media-body media-middle">
                                                                    <a class="media-heading name"><a href="{{$pregunta->video}}">{{$pregunta->video}}</a></a>
                                                                </div>
                                                            </div>
                                                        </td>

                                                        <td>
                                                            <div class="media">                                                              
                                                                <div class="media-body media-middle">
                                                                    <audio controls > 
                                                                    <source src="{{url('/audios/'.$pregunta->file)}}" type="audio/ogg">
                                                                    </audio>
                                                                    <!-- <a class="media-heading name"><a href="{{ $pregunta->file}}">{{$pregunta->file}}</a></a> -->
                                                                </div>
                                                            </div>
                                                        </td>

                                                        <td>
                                                            <div class="media">                                                              
                                                                <div class="media-body media-middle">
                                                                    <a class="media-heading name">{{$pregunta->texto}}</a>
                                                                </div>
                                                            </div>
                                                        </td>

                                                        <td>
                                                            <div class="media">                                                              
                                                                <div class="media-body media-middle">
                                                                    <a class="media-heading name">{{$pregunta->tipo_pregunta->descripcion}}</a>
                                                                </div>
                                                            </div>
                                                        </td>                                                                                                               
                                                        <td>
                                                            <table  cellspacing="0">
                                                                <tr>
                                                                    <td>
                                                                        <a href="{{url('preguntas/'.$pregunta->id.'/edit') }}" class="btn btn-warning btn-sm">Editar</a>
                                                                    </td>
                                                                    <td>
                                                                        <a href="{{url('detallepreguntas/'.$pregunta->numero_pregunta) }}"  class="btn btn-primary btn-sm">Detalles</a>
                                                                    </td>
                                                                    <td>
                                                                        <form action="{{ url('preguntas/'.$pregunta->id) }}" method="POST">
                                                                            @method("DELETE")
                                                                            @csrf
                                                                            <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
                                                                        </form>                                                                            
                                                                    </td>
                                                                </tr>                                                               
                                                            </table>
                                                            
                                                         
                                                        </td>
                                                   
                                                    </tr>  
                                                    @endforeach
                                                </tbody>
                                                <tfoot>
                                                    <tr>  
                                                        <th>No de preguntas</th>                                                     
                                                        <th>Título de las preguntas</th>
                                                        <th>Video</th>
                                                        <th>Audio</th>
                                                        <th>Texto</th>                    
                                                        <th>Tipo Pregunta</th>
                                                        <th></th>                                                       
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Content-->

@endsection

@section('scripts')
<script>
    $('#frm_eliminar').on(
        'submit',function(e){
            e.preventDefault();    
            Swal.fire({ 
                title: 'Desea eliminar el registro?',
                text: "Tu respuesta no es reversible!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Eliminar',
                confirmButtonClass: 'btn btn-primary',
                cancelButtonClass: 'btn btn-danger ml-1',
                buttonsStyling: false,
            }).then((result)=>{
                if (result.value) {                    
                    this.submit()
            }
        })
    });
    

   
</script>

@if(Session::has('success'))
<script>
    Swal.fire(
            'OK!',
            'Registro eliminado correctamente!',
            'success'
        )    
</script>
@endif

@if(Session::has('save'))
<script>
    Swal.fire(
            'OK!',
            'Registro guardado correctamente!',
            'success'
        )    
</script>
@endif

@if(Session::has('duplicate'))
<script>
    Swal.fire(
            'OK!',
            'Este pregunta ya tiene un  detalle pregunta!',
            'error'
        )    
</script>
@endif
@endsection