@extends('layouts.app')

@section('content')


    <div class="container" xmlns="http://www.w3.org/1999/html">
        <div class="row" style="width:100%;">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default" style="width: 120%; padding: 3%">
                    <div >
                        <h3>Mis Notificaciones</h3>

                        <div>

                            <a class="btn btn-primary"  href="{{ URL::to('/') }}/notifications">No Leídas  <span class="badge">{{$count_notif_noLeidas}}</span></a>
                            <a class="btn btn-primary"   href="{{ URL::to('/') }}/notifications/read">Leídas</a>
                            <a class="btn btn-primary"  href="{{ URL::to('/') }}/notifications/archivadas" >Archivadas</a>
                            <a class="btn btn-danger active" style="background: rgb(255,41,12);" href="{{ URL::to('/') }}/notifications/inactividad" >Inactividad  <span class="badge">{{$countInactiveNoRead}}</span></a>

                        </div>


                        <div class="input-group" style="float: right">
                            @if($notif_noLeidasRender != 'select')

                                <form class="input-group" action="{{ URL::to('/') }}/search/notificaciones" method="POST"  >
                                    <input input type="text" class="form-control" placeholder="Buscar notificaciones"  aria-label="Search" name="string">
                                    <input name="_token" type="hidden" value="{{ csrf_token() }}"/>
                                    <input name="type" type="hidden" value="Inactive" />
                                    <span class="input-group-btn"><button class="btn btn-primary"  type="submit">Buscar</button></span>
                                </form>
                            @endif

                        </div>



                            @if (is_countable($notificaciones_noLeidas))

                            <button type="button" onClick=marcarLeidos() id="arch" style="padding:5px;font-size:10px ;width:100px ;font-weight:900; color: #1e88e5 ;display:none" class="list-group-item responsive_todos">Marcar todos como leídos</button>

                        @endif


                            <table class="table table-hover"   >

                                <thead  style="border-bottom:2px solid #ddd">
                                <tr >
                                    <th >Notificaciones no leídas</th>
                                    <th style="width:15% ">Fecha</th>
                                    <th >Archivar</th>
                                    <th style="width: 11%">Marcar leído</th>

                                </tr>
                                </thead>
                                <tbody id="notificacion" style=" ">
                                <?php $user= Auth::user() ?>


                                    @if (is_countable($notificaciones_noLeidas))

                                    @foreach($notificaciones_noLeidas as $index=>$n)



                                        <tr id= "noti-{{$index}}" >

                                            <td  class="first_td">
                                                {{--Inicio switch--}}
                                                <?php
                                                switch($n['tipo_noti']){

                                                    case 'Inactive':
                                                                                                                                                                                                                                            ?>
                                                                                                                                                                                                                                            @if($n['tag_active'])
                                                                                                                                                                                                                                                {{-- Ejm de notificación--}}
                                                                                                                                                                                                                                                <a href="{{ URL::to('/') }}/tasks/{{ $n['id_tipoNoti']}}/unit/{{$n['tarea_unit']}}/show" style="color: #ff3f10 ">

                                                                                                                                                                                                                                                @endif
                                                                                                                                                                                                                                                    La tarea "<b>{{ $n['title'] }}</b>" no tiene actividad desde hace 3 días.
                                                                                                                                                                                                                                                </a>

                                                        <?php
                                                        break;
                                                }?>

                                            </td>
                                            <td >{{ $n['notiFecha']}}</td>
                                            <td>
                                                <a href="javascript:" type="button" title="Archivar" onClick=archivar("{{ $index}}") id="archived"><span style="float: left;"  class ="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
                                                    <span class="glyphicon-class"></span></a>
                                            </td>
                                            <td>
                                                <a type="button" title="Marcar leído" onclick='leido("{{$index}}")' ><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a>
                                            </td>
                                            {{--<td></td>--}}
                                        </tr>


                                    @endforeach

                                @elseif(!$notificaciones_noLeidas)
                                    <tr>
                                        <td>No tiene nuevas notificaciones.</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        {{--<td></td>--}}
                                    </tr>
                                @endif


                                </tbody>
                            </table>

                            @if($notif_noLeidasRender != 'select')
                                {!! $notif_noLeidasRender->render() !!}
                            @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style>

        .table > tbody > tr > td {
            vertical-align: baseline !important;
        }


        .first_td{width:50% !important}

        @media(max-width:900px) {

            .boton_todos{
                display: none !important;
            }
            .responsive_todos {
                display: block !important;
                float:inherit !important;
            }
        }
        button:before {
            content:'';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 0px;
            background: rgba(255,255,255,0.3);
            border-radius: 5px;
            transition: all 2s ease;
        }
        button:hover:before {
            height: 42px;
        }
    </style>
@endsection



<script>


    //    -----------------------------------------------------




    /**
     * pre: recibe por parametro el id de la notificación
     * post: marca como archivado la notificación del id recibido
     *  @param index
     */

    function archivar(index) {

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

                if(data.success = "success"){

                    $(".badge").html(parseInt($(".badge").html())-1);
                    $( "#noti-"+index).remove();

                }


            }
        });

    }



    /**
     * pre: recibe por parametro el id de la notificación
     * post: marca como leído la notificación del id recibido
     * @param index
     */
    function leido(index) {

        console.log(index);
        $.ajax({
            data: { id: index },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json',
            url:"{{ URL::to('/') }}/marcarLeido",
            type:'POST',
            success:  function (data) {

                if(data.success = "success"){

                    $(".badge").html(parseInt($(".badge").html())-1);
                    $( "#noti-"+index).remove();

                    /*
                     $( "#noti-"+index).closest('tr')
                     .children('td')
                     .animate({ padding: 0 })
                     .wrapInner('<div />')
                     .children()
                     .slideUp(100,function() {  $( "#noti-"+index).closest('tr').remove(); });
                     return false;
                     */

                }

            }
        });

    }

    /**
     * marca todas las notificaciones como leídas
     */
    function marcarLeidos() {


        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json',
            url: "{{ URL::to('/') }}/notificationsTodosleidos",
            type: 'POST',
            success: function() {
                // console.log('ok');
                document.location.href = document.location.href;
            }
        });
        // $( "#notificacion" ).remove();
    }

    /**
     * @post marca como leído las notificaciones del select elegido
     * @param typeSelec
     */
    function setToReadSelect(typeSelec) {

        console.log(typeSelec);

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

                /*Recargamos desde caché*/
                location.reload();


            }
        });

    }
</script>
