{{-- 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')}}">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <style>
        .selects-agregar .select2-container { width: 100% !important; }
        .selects-agregar .select2-container--default .select2-selection--single {
            height: 42px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            transition: border-color .15s ease;
        }
        .selects-agregar .select2-container--default.select2-container--open .select2-selection--single,
        .selects-agregar .select2-container--default .select2-selection--single:hover {
            border-color: #960948;
        }
        .selects-agregar .select2-selection__rendered { line-height: normal !important; padding: 0 !important; }
        .selects-agregar .select2-selection__arrow { height: 40px !important; }
        .select2-dropdown { border-color: #960948 !important; }
        .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #960948 !important; }

        #TablaIntegrantes { border-collapse: separate; border-spacing: 0; overflow: hidden; }

        #TablaIntegrantes thead tr { background: #960948; }
        #TablaIntegrantes thead th { color: #fff; font-weight: 600; letter-spacing: .03em; padding-top: 12px; padding-bottom: 12px; }

        tr.cargo-header td {
            background: #fbeaf1;
            border-left: 4px solid #960948;
            color: #960948;
            font-size: .85em;
            letter-spacing: .06em;
            padding: 8px 16px;
        }
        tbody.cargo-group:not(:first-of-type) tr.cargo-header td { border-top: 10px solid #fff; }

        tr.integrante-row { cursor: move; transition: background-color .15s ease; }
        tr.integrante-row:hover { background: #fafafa; }
        tr.integrante-row td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
        tr.integrante-row .boton, tr.integrante-row a { cursor: pointer; }

        tr.integrante-row.ui-sortable-helper {
            display: table;
            background: #fff;
            box-shadow: 0 6px 16px rgba(0,0,0,.18);
            border-radius: 4px;
            outline: 1px solid #f0d3e0;
        }

        .ui-sortable-placeholder {
            visibility: visible !important;
            background: #fbeaf1;
            border: 2px dashed #d68cae;
        }

        td.drag-handle {
            color: #bdbdbd;
            text-align: center;
            width: 40px;
        }
        tr.integrante-row:hover td.drag-handle { color: #960948; }

        td.numero { line-height: 1.4; }
        td.boton { text-align: center; }
        td.boton i { color: #bdbdbd; transition: color .15s ease; }
        td.boton:hover i { color: #d32f2f; }

        #TablaIntegrantes img { display: block; margin: 0 auto; max-height: 36px; width: auto; }
    </style>
@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="col s12">

                                    <strong>Si desea agregar un diputado presione el boton. <i class="material-icons" id="addDip">add</i></strong>
                                    <div class="row selects-agregar">
                                        <div class="input-field col s12 m4">
                                            <label class="control-label" style=" color:  #960948;"><strong>Comision: </strong></label>
                                            {!! Form::select('comision[id_comision]', $comisiones,  isset($comision) ? $comision->id : null,['class' => 'select2 browser-default form-control text-uppercase', 'id' => 'id_comision', 'name' => 'comisiones', 'placeholder' => 'SELECCIONE UNA OPCION', 'required' => true]) !!}
                                        </div>
                                        <div class="input-field col s12 m4">
                                            <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 class="input-field col s12 m4">
                                            <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>
                                                @foreach($cargos as $cargo)
                                                    <option value="{{ $cargo }}">{{ $cargo }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            {!! Form::open(['route'=>['mcg.integrantes_save'], 'method'=>'PUT', 'role' => 'form','id' => 'form-asistencia']) !!}

                            <div class="responsive-table">
                                @if(isset($integrantes) && count($integrantes))
                                    <p class="grey-text">Arrastra <i class="material-icons tiny" style="vertical-align: middle;">drag_indicator</i> un integrante para cambiar su orden dentro de su mismo cargo.</p>
                                @endif
                                <table id="TablaIntegrantes" class="table white border-radius-4 pt-1">
                                    <thead>
                                    <tr>
                                        <th style="width: 5%"></th>
                                        <th style="width: 10%">
                                            <span>#</span>
                                        </th>
                                        <th style="width: 35%">Diputado</th>
                                        <th style="width: 10%">Partido</th>
                                        <th style="width: 10%">Acciones</th>
                                    </tr>
                                    </thead>
                                    @if(isset($integrantes))
                                        @php $contadorFila = 0; @endphp
                                        @foreach($integrantes->groupBy('cargo') as $cargo => $miembros)
                                            <tbody class="cargo-group" data-cargo="{{ $cargo }}">
                                                <tr class="cargo-header">
                                                    <td colspan="5"><strong>{{ strtoupper($cargo) }}</strong></td>
                                                </tr>
                                                @foreach($miembros as $item)
                                                    @php $idDiputado = base64_encode(base64_encode($item->id_diputado)).'[]'; @endphp

                                                    <tr id="diputado{{$item->id_diputado}}{{$item->id_comision}}" class="integrante-row" data-cargo="{{ $item->cargo }}" data-color="0">
                                                        <td class="drag-handle" style="cursor: move;"><i class="material-icons">drag_indicator</i></td>
                                                        <td>{{ ++$contadorFila }}</td>
                                                        <td class="numero" data-dip={{$item->id_diputado}} data-codificado={{$item->id_diputado}} data-comision={{$item->id_comision}}>{{ strtoupper($item->diputado->completo) }}<br> {{ strtoupper($item->cargo) }} </td>
                                                        <td>
                                                            <img src="{{asset("/storage/img/partidos/".$item->diputado->partido->emblema)}}">
                                                        </td>
                                                        <td class="boton">
                                                            <div style="display: none;" id="RowDip{{$item->id_diputado}}{{$item->id_comision}}">
                                                                <div> {!! Form::text($idDiputado, $item->cargo, ['class' => 'form-control text-uppercase', 'placeholder' => 'LXI', 'id' => 'legislatura', 'readonly' => true,"form" => "form-asistencia"]) !!}</div>
                                                                <div> {!! Form::text($idDiputado, $item->id_comision, ['class' => 'form-control text-uppercase', 'placeholder' => 'LXI', 'id' => 'legislatura', 'readonly' => true,"form" => "form-asistencia"]) !!}</div>
                                                                <div> {!! Form::text("id_comision", $item->id_comision, ['class' => 'form-control text-uppercase', 'placeholder' => 'LXI', 'id' => 'legislatura', 'readonly' => true,"form" => "form-asistencia"]) !!}</div>
                                                            </div>
                                                            <i class="material-icons">delete</i>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        @endforeach
                                    @endif
                                </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>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.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

            iniciarSortable();

            $(document).on("click", '#addDip', function () {
                var nombreDiputado = $('#SelectDip option:selected').text();
                var nombreComision = $('#SelectComision option:selected').text();
                var cargoDip = document.getElementById("SelectCargo").value;
                var noComision = $("#id_comision").val();
                var noDip = $("#SelectDip").val();
                var noCargo = $("#SelectCargo").val();
                const estatus =  1;
                if(contador == 0){
                    contador = 1;
                }else{
                    contador += 1;
                }


                $.get( "{{asset("mcg/diputado")}}/"+ noDip, function( data ) {

                    var cod = btoa(btoa(data.id));
                    var tr = $('<tr id="diputado'+data.id+''+noComision+'" class="integrante-row" data-cargo="'+cargoDip+'" data-color="0">')
                    tr.append('<td class="drag-handle" style="cursor: move;"><i class="material-icons">drag_indicator</i></td>')
                    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 src=" http://legislativoedomex.gob.mx/storage/img/partidos/'+data.partido.emblema+'"></td>')
                    tr.append('<td class="boton"><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="'+cargoDip+'"></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="'+noComision+'"></div><div style="display: none;"> <input class="form-control text-uppercase" placeholder="LXI" id="legislatura" readonly="true" form="form-asistencia" name="id_comision" type="text" value="'+noComision+'"></div></div></div><i class="material-icons">delete</i></td>')
                    tr.append('</tr>')

                    var grupo = $('#TablaIntegrantes tbody.cargo-group[data-cargo="'+cargoDip+'"]');
                    if (grupo.length === 0) {
                        grupo = $('<tbody class="cargo-group" data-cargo="'+cargoDip+'"><tr class="cargo-header"><td colspan="5"><strong>'+cargoDip.toUpperCase()+'</strong></td></tr></tbody>');
                        $('#TablaIntegrantes').append(grupo);
                    }
                    grupo.append(tr);
                    iniciarSortable();

                    $.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;
                $(this).closest('tr').remove();
                /*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();



                    let html = "¿Desea guardar la siguiente información?<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

        }

        function fixHelper(e, ui) {
            ui.children().each(function () {
                $(this).width($(this).width());
            });
            return ui;
        }

        function iniciarSortable() {
            if (typeof $.fn.sortable === 'undefined') {
                console.error('jQuery UI Sortable no está disponible: revisa que https://code.jquery.com/ui/1.13.2/jquery-ui.js haya cargado.');
                return;
            }
            $('tbody.cargo-group').each(function () {
                var grupo = $(this);
                if (grupo.data('ui-sortable')) {
                    grupo.sortable('destroy');
                }
                grupo.sortable({
                    items: 'tr.integrante-row',
                    helper: fixHelper,
                    cursor: 'move',
                    axis: 'y',
                    cancel: '.boton, .boton *, input, select, a',
                    placeholder: 'ui-sortable-placeholder',
                    forcePlaceholderSize: true,
                    update: function () {
                        grupo.find('tr.integrante-row').each(function (i) {
                            $(this).find('td:eq(1)').text(i + 1);
                        });
                    }
                }).disableSelection();
            });
        }
    </script>
@endsection