{{-- layout extend --}}
@extends('../Administrador/layouts.app')

{{-- page title --}}
@section('title', 'MCG - Iniciativas')

@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" type="text/css"
          href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/select.dataTables.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/sweetalert/sweetalert.css')}}">
@endsection

{{-- page styles --}}
@section('page-style')
    <link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('vendors/select2/select2-materialize.css') }}" type="text/css">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/form-select2.css') }}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-invoice.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/dropify/css/dropify.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-invoice.css')}}">
@endsection

@section('content')
    <!-- invoice list -->
    <section class="invoice-list-wrapper section">
        <!-- create invoice button-->
        <!-- Options and filter dropdown button-->
        <div class="seaction">
            <div class="row">
                <div class="col s12 m12 l12">
                    <div id="button-trigger2" class="card card card-default scrollspy">
                        <div class="card-content">
                            <!-- create invoice button-->
                            <div class="row">
                                <div class="input-field col s8">
                                    <strong>Si desea agregar un diputado presione el boton. <i class="material-icons" id="addDip">add</i></strong>
                                    <div class="row">
                                        <div class="input-field col s6">
                                            <div class="form-group">
                                                <label class="control-label" style=" color:  #960948;"><strong>Diputados:</strong></label>
                                                <select class="validate select2 browser-default  text-uppercase" id="SelectDip" >
                                                    <option value="0" selected>Selecciona una opcion</option>
                                                    @foreach($dip as $item)
                                                        <option value={{$item->id}}>{{$item->apaterno}} {{$item->amaterno}} {{$item->nombres}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>
                            {!! Form::open(['route'=>['mcg.asistencias_save', base64_encode(base64_encode($sesion->id))], 'method'=>'PUT', 'role' => 'form','id' => 'form-asistencia']) !!}

                            <div class="responsive-table">
                                <table class="table white border-radius-4 pt-1">
                                    <thead>
                                    <tr>
                                        <th style="width: 10%">
                                            <span>#</span>
                                        </th>
                                        <th style="width: 40%">Diputado</th>
                                        <th style="width: 10%">Partido</th>
                                        <th>Sentido</th>
                                        <th>Acciones</th>
                                    </tr>
                                    </thead>
                                    <tbody id="TableDip">
                                    @foreach($diputados as $key => $item)
                                        <tr id="diputado{{$item->id}}" data-color="0">
                                            <td>{{$key+1}}</td>
{{--                                            <td>{{$item->apaterno}} {{$item->amaterno}} {{$item->nombres}}</td>--}}
                                            <td class="numero" data-dip={{$item->id}} data-codificado={{$item->name_field}} >{{$item->apaterno}} {{$item->amaterno}} {{$item->nombres}} </td>
                                            <td>
                                                <img width="50%"
                                                     src="{{asset("/storage/img/partidos/".$item->partido->emblema)}}">
                                            </td>
                                            <td>
                                                <div class="row">
                                                    <div class="input-field col s8" id="RowDip{{$item->id}}">
                                                        {!! Form::select($item->name_field, $estatus,  $item->asistencia()->whereIdSesion($sesion->id)->first() ? $item->asistencia()->whereIdSesion($sesion->id)->first()->asistencia : 1, ['class' => 'form-control text-uppercase sentido', "form" => "form-asistencia"]) !!}
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="boton" >
                                                <i class="material-icons">delete</i>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                                <div class="row">
                                    <div class="col s12">
                                        <button class="btn cyan waves-effect waves-light right" form="form-votaciones"
                                                id="submit">
                                            Guardar
                                            <i class="material-icons right">save</i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('vendor-script')
    <script src="{{asset('vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
    <script src="{{asset('vendors/data-tables/js/dataTables.select.min.js')}}"></script>
    <script src="{{asset('vendors/sweetalert/sweetalert.min.js')}}"></script>
    <script src="{{ asset('vendors/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('js/scripts/form-select2.js') }}"></script>
@endsection
{{-- page script --}}
@section('page-script')
    <script>
        var datoDip;
        var contador=0;
        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $(".select2").select2();

            @if(session('votacion') == 'ok')
            Swal.fire({
                title: 'Operación exitosa',
                text: '¡Votación registrada correctamente!',
                icon: 'success',
            })
            @endif
            $("#submit").click(function (e) {
                e.preventDefault();
                let asistencia = 0;
                let inasistencia  = 0;

                $(".sentido").each(function (i, v) {
                    let val = parseInt(v.value);
                    if (val === 1) {
                        asistencia++;
                    } else if (val === 2) {
                        inasistencia++;
                    }
                });
                let html = "¿Desea guardar la siguiente información?<br>";
                html += "<strong>Total de asistencias: " + asistencia + "</strong><br>";
                html += "<strong>Total de inasistencias justificadas: " + inasistencia + "</strong><br>";
                Swal.fire({
                    title: "Confirmación",
                    html: html,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Aceptar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $("#form-asistencia").submit();
                    }
                })
            });

            $(document).on("click", '#addDip', function () {
                var nombreDiputado = $('#SelectDip option:selected').text();
                var noDip = $("#SelectDip").val();
                const estatus =  @json($estatus);
                if(contador == 0){
                    contador = @json($key) + 2;
                }else{
                    contador += 1;
                }

                $.get( "{{asset("mcg/diputado")}}/"+ noDip, function( data ) {
                    console.log(contador)
                    var cod = btoa(btoa(data.id));
                    var tr = $('<tr id="diputado'+data.id+'" >')
                    tr.append('<td>'+contador+'</td>')
                    tr.append('<td class="numero" data-dip='+data.id+' data-codificado='+btoa(btoa(data.id)) + '>'+nombreDiputado+'</td>')
                    tr.append('<td><img width="50%" src=" http://legislacion.legislativoedomex.gob.mx/storage/img/partidos/'+data.partido.emblema+'"></td>')
                    tr.append('<td><div class="row"><div class="input-field col s8" id="RowDip'+data.id+'"><select class="select2 form-control text-uppercase sentido " id="Dinamic'+data.id+'" name="' + cod + '[]" "form"="form-asistencia"></select></div></div></td>')
                    tr.append('<td class="boton" ><i class="material-icons">delete</i></td>')
                    tr.append('</tr>')
                    $('#TableDip').append(tr)
                    $.each(estatus, function (i, item) {
                        $('#Dinamic'+data.id).append($('<option>', {
                            value: i,
                            text : item
                        }));
                    });
                    $(".select2").select2();
                });

                // $("#SelectDip").val(0).trigger("change");
                // $("#SelectComision").val(0).trigger("change");

            });

            $(document).on("click", '.boton', function () {
                console.log("hola marti");
                var valores = "";
                var codificado = null;
                var comisionDelete = null;

                $(this).parents("tr").find(".numero").each(function() {
                    valores += $(this).data('dip');
                    codificado = $(this).data('codificado');
                }); //F55B5B

                var no = valores;
                console.log(codificado);


                if($('#diputado'+no).data('color') == 0){
                    $('#diputado'+valores).css('background-color', '#F19595');
                    $("#RowDip"+no).append('<div  style="display: none;" id="Delete'+no+'"> <input class="form-control text-uppercase" placeholder="LXI" id="legislatura" readonly="true" form="form-asistencia" name="' + codificado + '" type="text" value="0"></div>');
                    $('#diputado'+valores).data('color' ,1);

                }else{
                    $("#Delete"+no).remove();
                    $('#diputado'+valores).data('color' ,0);
                    $('#diputado'+valores).css('background-color', '');
                }
            });

        });
    </script>
@endsection