@extends('layouts.app')

@section('style')

    @endsection
@section('content')
    <div class="alert alert-success" role="alert" style="display: none">...</div>

    @if(session()->has('message'))

        <div class="alert alert-success alert-dismissable">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

            {{ session()->get('message') }}
        </div>

    @endif
    <div class="panel panel-default " style="width: 100%;padding: 2%;margin: 5%" >

        <h3 class="text-center">Lista de usuarios</h3>


        <div style="margin-bottom:20px;">
            <a href="{{ URL::to('/') }}/admin/user/create" class="btn btn-success">
                <i class="fa fa-plus"></i> Crear usuario
            </a>
        </div>
        
        <div style="width: 95%">
        <table class="table table-data table-bordered " >

            <thead >
            <tr  style="background-color: #bee5eb; color: #212529">
                <th scope="col">Id</th>
                <th  scope="col">Nombre</th>
                <th scope="col" style="width: 10%">Apellido</th>
                <th scope="col">Email</th>
                <th scope="col" style="width: 5%" >Activo</th>
                <th scope="col" style="width: 9%">Ingreso</th>
                <th scope="col" style="width: 9%">Baja</th>
                <th scope="col">Externo</th>
                <th scope="col" class="text-center" style="width: 8%">Perfiles</th>
                <th scope="col" class="text-center" style="width: 8%">Acciones</th>
            </tr>
            </thead>
            <tbody>
            @foreach($list_users as $key => $u)
                                @if(!$u->admin)
                    <th scope="row">{{$u->id}}</th>
                    <td>{{$u->name}}</td>
                    <td>{{$u->surname}}</td>
                    <td>{{$u->email}}</td>
                    <td >
                        <div class="js-example-basic"  >

                            <select id="active-{{$u->id}}" class="js-example-data" data-data="{{$u->id}}"  name="" style="width: 100%;border-radius: 18%">
                                {{--<option value="">Seleccione estado...</option>--}}
                                    @foreach($select as $key => $s)

                                        <option value="{{$s}}"

                                                @if ($active == $s)
                                                selected="selected"
                                                @endif
                                        >{{$s}}</option>
                                    @endforeach

                            </select>
                        </div>
                    </td>
                        {{--</div> @if($user->active == 1) {{ 'si'}} @else {{'no'}} @endif</td>--}}
                    <td >{{date('d-m-Y ', strtotime(str_replace('/', '-',$u->created_at)))}}</td>
                    <td>
                        @if($u->baja)
                            {{date('d-m-Y ', strtotime(str_replace('/', '-',$u->baja)))}}
                        @endif
                    </td>
                    <td class="text-center" >@if($u->isApplicant()) {{'si'}} @endif</td>

                    <td class="text-center">
                        </i> &nbsp;Perfiles</a>

                    </td>
                    <td class="text-center">
                        <a href="{{ URL::to('/') }}/admin/edit-user/{{ $u->id }}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> &nbsp;Editar</a>

                    </td>
                @endif
            </tr>
            @endforeach
            </tbody>
        </table>
        </div>

    </div>


    @endsection
@section('scripts')
    <script>

        $(document).ready(function () {
            var selects = [];
            var eventSelects = [];
            $('select').each(function(index,element){
//            console.log(element)
                selects[index]=$(element).select2();
    //                 console.log(selects[index])
    //             eventSelects[index] =
                selects[index].on('select2:select',function(ev){

                //            console.log($(element).data("data")+"dddd");//valor del id de la tarea


                    var isActive = ev.params.data.id

                    if(isActive) {

                        if (isActive == 'si' || isActive == 'no') {

                            var  user_id =$(element).data("data");

                            changeStatuActive(isActive, user_id); // esta función cambia el estado de estado la tarea

                        }

                    }
                });


            });
        });

        /**
         * función cambia el estado de la tarea
         * @param statu_id
         * @param task_id
         */

        function changeStatuActive(isActive,user_id) {

            var active = 1;
            var select_val = 'si';

            if(isActive == 'no'){
                active = 0;
                select_val = isActive
            }

            $.ajax({
                type: 'POST',
                url: '{{ URL::to('/') }}/admin/changeActive',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',

                data: {user_id: user_id, isActive: active},

                success: function (data) {
                    console.log(data);

                    if(data[0]==200) {
//                        $('#active-'+user_id).select2('val', select_val);
                        $(".alert-success").html('Estado actualizado.');
                        $(".alert-success").show(500);
                        setTimeout(function () {
                            $(".alert-success").hide(500)
                        }, 2000);
                    }

                }

            });
//        console.log(e,task_id)
        }
    </script>
    @endsection