@extends('layouts.client')

@section('content')

    <div>
        <ul class="nav nav-tabs" role="tablist">
            @foreach($units as $unit)
                

                <li role="presentation" class="">
                    <a href="#" data-pane="{{ $unit->slug }}" class="nav-tab-trigger {{$active}}"
                       style="background-color: {{ $unit->color }}!important;color:#fff;border:1px solid {{ $unit->color }};"
                       aria-controls="{{ $unit->slug }}" role="tab" data-toggle="tab">
                        {{ $unit->name }}
                    </a>
                </li>
            @endforeach
            <li role="presentation" class="">
                <a href="#" data-pane="todas" class="nav-tab-trigger"
                   style="background-color: {{ $unit->color }}!important;color:#fff;border:1px solid {{ $unit->color }};"
                   aria-controls="todas" role="tab" data-toggle="tab">
                    Todas
                </a>
            </li>
        </ul>

    </div>
    @foreach($units as $index=>$unit)
        
        <div role="tabpanel" class="tab-pane" id="{{ $unit->slug }}" style="display:{{$display}}">
            <br>
            <div class="task-header-actions">

                <h4>{{ $unit->name }}</h4>
                <div class="">
                    <a class="btn btn-default" href="{{URL::to('/') }}/tasks/unit/{{ $unit->id }}/show">Abiertas</a>
                    <a class="btn btn-default" href="{{URL::to('/') }}/tasks/status/3/unit/{{ $unit->id }}/show">Cerradas</a>
                </div>

            </div>


            @if(is_countable($unit->$filtertasks) )



                <table style="margin-top: 30px;" class="table table-condensed" data-order='[[ 2, "desc" ]]' data-page-length='30'>
                    <thead style="border-bottom:2px solid #ddd;">
                    <th>Titulo</th>
                    <th>Líneas de producción</th>{{--****--}}
                    <th>Entrada</th>
                    <th>Salida</th>
                    <th>Unidad</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                    </thead>
                    <tbody>
                    @foreach($unit->$filtertasks as $task)
                        {{--{% if item.estado == 1 %}--}}
                        <tr>
                            <td style="padding:10px 4px;"> {{ $task->taskdata->title }}</td>
                            <td> {{ $task->pipeline->first()->name }}</td>
                            <td>{{ $task->created_at }}</td>
                            <td></td>

                            <td> {{ $task->unit->name }}</td>
                            <td>{{ $task->statu->name }}</td>
                            <td>
                                <a href="{{URL::to('/')}}/tasks/{{ $task->id }}/show"><i class="fa fa-pencil-square-o"
                                                                                         aria-hidden="true"></i> &nbsp;Ver
                                    tarea</a>
                            </td>
                        </tr>
                        {{--{% endif %}--}}
                    @endforeach


                    </tbody>
                </table>

            @else

                <div class="panel" style="margin-top:30px;padding:16px"> No hay tareas por el momento</div>
            @endif

        </div>






    @endforeach
    <div role="tabpanel" class="tab-pane" id="todas" style="display:none">
        <div class="task-header-actions">

            <h4>Todas las Tareas</h4>
            <div class="">
                {{--<a class="btn btn-default" href="{{URL::to('/') }}/tasks/unit/{{ $unit->id }}/show">Abiertas</a>--}}
                {{--                <a class="btn btn-default" href="{{URL::to('/') }}/tasks/status/3/unit/{{ $unit->id }}/show">Cerradas</a>--}}
            </div>

        </div>


        <table style="margin-top: 30px;" class="table table-condensed" data-order='[[ 2, "desc" ]]' data-page-length='30'>
            <thead style="border-bottom:2px solid #ddd;">
            <th>Titulo</th>
            <th>Líneas de producción</th>{{--****--}}
            <th>Entrada</th>
            <th>Deadline</th>
            <th>Unidad</th>
            <th>Pipeline</th>
            <th>Estado</th>{{--****--}}
            <th>Acciones</th>
            </thead>
            <tbody>

            @foreach($alltasks as $t)
                <tr>
                    <td>
                        {{ $t->taskdata->title }}
                    </td>
                    <td> {{  $t->pipeline->first()->name }} </td>
                    <td> {{ $t->created_at }}</td>

                    @if($t->deadline)
                        <td> {{$t->deadline }}</td>
                    @else
                        <td> {{$t->taskdata->deadline }}</td>
                    @endif

                    <td> {{ $t->unit->name }}</td>
                    <td>
                        <ul class="pipeline-timeline">

                            @foreach($t->pipeline->first()->units as $u)
                                
                                <li data-unit="{{ $u->name }}" data-toggle="tooltip" title="{{ $u->name }}" class="{{ $active }}">
                                    <a href="{{ URL::to('/') }}/tasks/{{ $t->id }}/unit/{{ $u->id }}/show">
                                        <i style="color:{{ $u->color }};" class="fa {{ $circle }}" aria-hidden="true"></i>
                                    </a>
                                </li>
                            @endforeach
                        </ul>

                    </td>
                    <td> {{ $t->statu->name }}</td>
                    <td> Accion</td>
                </tr>

            @endforeach
            </tbody>
        </table>

    </div>
@endsection

@section('scripts')

    <script>

        $(document).ready(function () {


//            $('.tab-pane').not('').css({'display': 'none'});
            $('.nav-tab-trigger').click(function (ev) {
                $('.tab-pane').css({'display': 'none'});
                $('.nav-tab-trigger').removeClass('active');
                $(this).addClass('active');

                ev.preventDefault();
                var pane = $(this).attr('data-pane');
//                console.log(pane);

                $('#' + pane).css({'display': 'block'});
            })
        });
    </script>
@endsection