{{-- 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" type="text/css" href="{{asset('css/pages/app-invoice.css')}}">
    <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('vendors/dropify/css/dropify.min.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>Comisión No. {{$comision->sesion}}</strong><br><br>
                                    <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 s4">
                                            <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 class="input-field col s4">
                                            <div class="form-group">
                                                <label class="control-label" style=" color:  #960948;"><strong>Cargo:</strong></label>
                                                <select class="validate select2 browser-default  text-uppercase" id="SelectCargo" >
                                                    <option value="0" selected>Selecciona una opcion</option>
                                                   
                                                    <option value="Presidente">Presidente</option>
                                                    <option value="Secretario">Secretario</option>
                                                    <option value="Prosecretario">Prosecretario</option>
                                                    <option value="Miembro">Miembro</option>
                                                   
                                                </select>
                                            </div>
                                        </div>
                                        <div class="input-field col s4">
                                            <div class="form-group">
                                                <label class="control-label" style=" color:  #960948;"><strong>Comisiones:</strong></label>
                                                <select class="validate select2 browser-default  text-uppercase" id="SelectComision" >
                                                    <option value="0" selected>Selecciona una opcion</option>
                                                    @foreach($comisionesAsis as $value)
                                                        <option value={{ $value->id }}>{{ $value->nombre }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <br>
                            {!! Form::open(['route'=>['mcg.asistencias_comision_save', base64_encode(base64_encode($comision->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 $com => $value)
                                            @foreach($value as $key => $item)
                                                @if($item != null)
                                               
                                                <tr id="diputado{{$item->diputado->id}}{{$com}}" data-color="0">
                                                    <td>{{$key+1}}</td>
                                                    <td class="numero" data-dip={{$item->diputado->id}} data-codificado={{$item->diputado->name_field}} data-comision={{$com}}>{{$item->diputado->apaterno}} {{$item->diputado->amaterno}} {{$item->diputado->nombres}}<br>@inject('data', '\App\Http\Controllers\MCG\ComisionesController'){{ $data->ComisionNombre($com) }}<br>{{$item->cargo}}</td>
                                                    <td>
                                                        <img width="50%"
                                                            src="{{asset("/storage/img/partidos/".$item->diputado->partido->emblema)}}">
                                                    </td>
                                                    <td>
                                                        <div class="row">
                                                            <div class="input-field col s8" id="RowDip{{$item->diputado->id}}{{$com}}">
                                                                {!! Form::select($item->diputado->name_field, $estatus,  $item->diputado->asistencia_comision()->whereIdSesion($comision->id)->whereIdComision($com)->first() ? $item->diputado->asistencia_comision()->whereIdSesion($comision->id)->whereIdComision($com)->first()->asistencia : 1, ['class' => 'form-control text-uppercase sentido', "form" => "form-asistencia"]) !!}
                                                                <div style="display: none;"> {!! Form::text($item->diputado->name_field, $com, ['class' => 'form-control text-uppercase', 'placeholder' => 'LXI', 'id' => 'legislatura', 'readonly' => true,"form" => "form-asistencia"]) !!}</div>
                                                                <div style="display: none;"> {!! Form::text($item->diputado->name_field, $item->cargo, ['class' => 'form-control text-uppercase', 'placeholder' => 'LXI', 'id' => 'legislatura', 'readonly' => true,"form" => "form-asistencia"]) !!}</div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="boton" ><i
                                                        class="material-icons">delete</i></td>
                                                </tr>
                                                @endif
                                            @endforeach
                                        @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>
    <script src="{{asset('vendors/dropify/js/dropify.min.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();
            $('.select3-size-sm').select2({
                dropdownAutoWidth: true,
                width: '100%',
                containerCssClass: 'select-sm'
            });
            @if(isset($diputados))
                var diputados = @json($diputados);
            @endif

            $(document).on("click", '#addDip', function () {
                var nombreDiputado = $('#SelectDip option:selected').text();
                var nombreComision = $('#SelectComision option:selected').text();
                var cargoDip = $('#SelectCargo option:selected').text();
                var noComision = $("#SelectComision").val();
                var noDip = $("#SelectDip").val();
                var noCargo = $("#SelectCargo").val();
                const estatus =  @json($estatus);
                if(contador == 0){
                    contador = @json($key) + 2;
                }else{
                    contador += 1;
                }
                
               
                $.get( "{{asset("mcg/diputado")}}/"+ noDip, function( data ) {

                    var cod = btoa(btoa(data.id));
                    var tr = $('<tr id="diputado'+data.id+''+noComision+'" data-color="0">')
                    tr.append('<td>'+contador+'</td>')
                    tr.append('<td class="numero" data-dip='+data.id+' data-codificado='+btoa(btoa(data.id))+' data-comision='+noComision+'>'+nombreDiputado+'<br>'+nombreComision+'<br>'+cargoDip+'</td>')
                    tr.append('<td><img width="50%" src=" http://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+''+noComision+'"><select class="select2 form-control text-uppercase sentido " id="Dinamic'+data.id+'" name="' + cod + '[]" "form"="form-asistencia"></select><div style="display: none;"> <input class="form-control text-uppercase" placeholder="LXI" id="legislatura" readonly="true" form="form-asistencia" name="' + cod + '[]" type="text" value="'+noComision+'"></div><div style="display: none;"> <input class="form-control text-uppercase" placeholder="LXI" id="legislatura" readonly="true" form="form-asistencia" name="' + cod + '[]" type="text" value="'+cargoDip+'"></div></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");
                $("#SelectCargo").val(0).trigger("change");;

            });

            $(document).on("click", '.boton', function () {
                var valores = "";
                var codificado = null;
                var comisionDelete = null;
                $(this).parents("tr").find(".numero").each(function() {
                    valores += $(this).data('dip');
                    codificado = $(this).data('codificado');
                    comisionDelete = $(this).data('comision');
                }); 
                
                var no = valores+comisionDelete;
                
                if($('#diputado'+no).data('color') == 0){
                    $('#diputado'+no).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="" form="form-asistencia" name="' + codificado + '" type="text" value="0-'+comisionDelete+'"></div>');
                    $('#diputado'+no).data('color' ,1);

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

            $(document).on("click", '#submit', function (e) {
                e.preventDefault();
               
                if($("#SelectDip").val() != 0){
                    let htmll = "Revisar campo de diputado! ";
                    Swal.fire({
                        title: "Advertencia",
                        html: htmll,
                        icon: 'warning',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Ok'
                    })

                }else{
                    var config = {};
                    $('input').each(function () {
                        config[this.name] = this.value;
                    });
                    
                    let asistencia = 0;
                    let inasistencia = 0;
                    let justificante = 0;
                    $(".sentido").each(function (i, v) {
                        let val = parseInt(v.value);
                        if (val === 1) {
                            asistencia++;
                        } else if (val === 2) {
                            inasistencia++;
                        } else if (val === 3) {
                            justificante++;
                        }
                    });
                    let html = "¿Desea guardar la siguiente información?<br>";
                    html += "<strong>Total de asistencias: " + asistencia + "</strong><br>";
                    html += "<strong>Total de inasistencias: " + inasistencia + "</strong><br>";
                    html += "<strong>Total de justificaciones: " + justificante + "</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();
                        }
                    })
                }
                
            });

        });

        function eliminarDip(jsonstring){
           
            var comision = jsonstring.comision
            var diputado = jsonstring.id

        }
    </script>
@endsection