@extends('layoutPr')
@section('title')
    SPID
@endsection
@section('content')
    <div class="container">
        <div class="section">
            <div class="card">
                <div class="card-content" style='background-image: url("{{asset('spid/images/logo/fondo_pleno.png')}}"); background-repeat: no-repeat; background-size: cover; '>
                    <div class="height-30vh">
                        <center>
                            {{--                            <img src="{{asset('spid/images/logo/logo_legis.png')}}" alt="materialize"/>--}}
                            <img src="{{asset('spid/images/logo/logo_legis.png')}}"
                                 srcset="{{asset('spid/images/logo/logo_legis.png')}} 480w, {{asset('spid/images/logo/logo_legis.png')}} 768w, {{asset('spid/images/logo/logo_legis.png')}} 1024w"
                                 sizes="(max-width: 480px) 50vw, (max-width: 768px) 50vw, 50vw"
                                 alt="Imagen ajustada">
                        </center>
                    </div>
                    <div class="row">
                        <form class="col s12">
                            <h4 class="text-align center">Asuntos del orden del día {{$evento->nombreEvento}} {{$evento->fechaEvento}}</h4>
                        </form>
                    </div>
                    <div id="asuntosdiv" style="display: block">
                        <div class="row">
                            <div class="input-field col s12">
                                <table class="display" id="table_id">
                                    <tr>
                                        <th style="width: 5%!important;">No.</th>
                                        <th style="width: 90%!important;">Documento</th>
                                        <th style="width: 5%!important;">Ver</th>
                                    </tr>
                                    @if($evento->asuntos)
                                        @foreach($evento->asuntos as $item)
                                            <tr>
                                                <td>{{$item->no_punto}}</td>
                                                <td>{{$item->nombre_corto}}</td>
                                                <td>
                                                    <a class="tooltipped" data-position="bottom" data-tooltip="Ver" onclick="verAsunto({{$item->id}})">
                                                        <i class="material-icons iconlegislatura">visibility</i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="3"> <center>Sin archivos que mostrar</center></td>
                                        </tr>
                                    @endif
                                </table>
                            </div>
                        </div>
                    </div>
                    <div id="frameDiv" style="display: none;">
                        <div class="row">
                            <div class="input-field col s12">
                                <center>
                                    <iframe width="1450" height="580" id="path_asunto" name="path_asunto"  frameborder="0"></iframe>
                                </center>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <center>
                                    <a class="tooltipped" data-position="bottom" data-tooltip="Regresar"
                                       onclick="regresarAsuntos();">
                                        <i class="material-icons" style="font-size: 40px; color: #95134c">home</i>
                                    </a>
                                </center>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col s2">
                            <a class="tooltipped" data-position="bottom" data-tooltip="Regresar"
                               href="{{ route('sistemaVotos.index') }}">
                                <i class="material-icons" style="font-size: 60px; color: #95134c">arrow_back</i>
                            </a>
                        </div>
                        <div class="col s8" ></div>
                        <div class="col s2">
                            <img src="{{asset('spid/images/logo/spid.png')}}"
                                 srcset="{{asset('spid/images/logo/spid.png')}} 480w, {{asset('spid/images/logo/spid.png')}} 768w, {{asset('spid/images/logo/spid.png')}} 1024w"
                                 sizes="(max-width: 480px) 50vw, (max-width: 768px) 50vw, 50vw"
                                 alt="Imagen ajustada">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection



@push('scripts')

    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        function verAsunto(id){
            $.ajax({
                url: "{{ url('getAsuntoPleno') }}",
                type: 'GET',
                data: {
                    id,
                },
                success: function (response) {
                    document.getElementById('asuntosdiv').style.display='none';
                    document.getElementById('frameDiv').style.display='block';
                    $('#path_asunto').attr('src', 'storage/'+response);
                },
            });
        }

        function regresarAsuntos(){
            document.getElementById('asuntosdiv').style.display='block';
            document.getElementById('frameDiv').style.display='none';
        }
    </script>
@endpush