@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">Detalle 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">Nuevo detalle 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('detallepreguntas') }}" method="post">
                                                                @csrf
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="exampleModalLabel1">Agregar
                                                                        nuevo detalle 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">
                                                                        <div class="text-bold-600 font-medium-2">

                                                                        </div>
                                                                        <input type="number" name="preguntas_id"
                                                                            id="preguntas_id" class="form-control"
                                                                            placeholder="No Pregunta"
                                                                            value="{{ $preguntas_id }}" required>
                                                                    </fieldset>
                                                                    <fieldset class="form-group col-12">
                                                                        <input type="text" name="video" id="video"
                                                                            class="form-control" placeholder="Video"
                                                                            value="{{ old('video') }}" required>
                                                                    </fieldset>
                                                                    <fieldset class="form-group col-12">
                                                                        <input type="text" name="opcion" id="opcion"
                                                                            class="form-control" placeholder="Texto"
                                                                            required>
                                                                    </fieldset>
                                                                    <fieldset class="form-group col-12">
                                                                        <input type="number" name="paguina_siguiente"
                                                                            id="paguina_siguiente" class="form-control"
                                                                            placeholder="Pagina Siguiente" required>
                                                                    </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="submit"  class="btn btn-info" data-dismiss="modal"><i class="la la-paper-plane-o d-block d-lg-none"></i> <span class="d-none d-lg-block">Add New</span></button> -->
                                                                    </fieldset>
                                                                </div>
                                                            </form>
                                                        </section>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal fade" id="EditContactModal" tabindex="-1" role="dialog"
                                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <section class="contact-form">
                                                            <form id="form-edit-contact" class="contact-input">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="exampleModalLabel">Edit
                                                                        Contact</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" id="name"
                                                                            class="name form-control" placeholder="Name">
                                                                    </fieldset>
                                                                    <fieldset class="form-group col-12">
                                                                        <input type="text" id="email"
                                                                            class="email form-control"
                                                                            placeholder="Email">
                                                                    </fieldset>
                                                                    <fieldset class="form-group col-12">
                                                                        <input type="text" id="phone"
                                                                            class="phone form-control"
                                                                            placeholder="Phone Number">
                                                                    </fieldset>
                                                                    <span id="fav" class="d-none"></span>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <fieldset
                                                                        class="form-group position-relative has-icon-left mb-0">
                                                                        <button type="button" id="edit-contact-item"
                                                                            class="btn btn-info edit-contact-item"
                                                                            data-dismiss="modal"><i
                                                                                class="la la-paper-plane-o d-lg-none"></i>
                                                                            <span
                                                                                class="d-none d-lg-block">Edit</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 id="users-contacts"
                                                class="table table-white-space table-bordered row-grouping display no-wrap icheck table-middle text-center">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Video</th>
                                                        <th>Audio</th>
                                                        <th>Opción</th>
                                                        <th>Selección única</th>                       
                                                        <th>Pagina siguiente niño</th>
                                                        <th>Pagina siguiente adulto</th>
                                                        <th>Pagina siguiente adulto mayor</th>
                                                        <th></th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($detallepreguntas as $detallepregunta)
                                                        <tr>
                                                            <td>
                                                                {{ $detallepregunta->preguntas_id }}
                                                            </td>
                                                            <td>
                                                                <a
                                                                    href="{{ $detallepregunta->video }}">{{ $detallepregunta->video }}</a>
                                                            </td>

                                                            <td>
                                                                <audio controls>
                                                                    <source
                                                                        src="{{ url('/audios/' . $detallepregunta->file) }}"
                                                                        type="audio/ogg">
                                                                </audio>
                                                                <!-- <a href="{{ $detallepregunta->file }}">{{ $detallepregunta->file }}</a>                                                             -->
                                                            </td>

                                                            <td>
                                                                {{ $detallepregunta->opcion }}
                                                            </td>
                                                            <td>
                                                            {{ $detallepregunta->SeleccionUnica }}
                                                            </td>
                                                            <td>
                                                                {{ $detallepregunta->pagina_siguiente_ninio }}
                                                            </td>
                                                            <td>
                                                                {{ $detallepregunta->pagina_siguiente_adulto }}
                                                            </td>
                                                            <td>
                                                                {{ $detallepregunta->pagina_siguiente_adulto_mayor }}
                                                            </td>
                                                            <td>
                                                                {{-- <a data-toggle="modal" data-target="#EditContactModal" class="primary edit mr-1"><i class="la la-pencil"></i></a> --}}
                                                                <a href="{{ url('detallepreguntas/' . $detallepregunta->id . '/edit') }}"
                                                                    class="btn btn-warning btn-sm">Editar</a>

                                                            </td>
                                                            <td>
                                                                <form id='frm_eliminar'
                                                                    action="{{ url('detallepreguntas/' . $detallepregunta->id) }}"
                                                                    method="POST">
                                                                    @method('DELETE')
                                                                    @csrf
                                                                    <button type="submit"
                                                                        class="btn btn-danger btn-sm">Eliminar</button>
                                                                </form>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                                <tfoot>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Video</th>
                                                        <th>Audio</th>
                                                        <th>Opción</th>
                                                        <th>Selección única</th>
                                                        <th>Pagina siguiente niño</th>
                                                        <th>Pagina siguiente adulto</th>
                                                        <th>Pagina siguiente adulto mayor</th>
                                                        <th></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