@php
    use App\Http\Controllers\Mod\ModClientProvider;
    use App\Http\Controllers\ModCronos;
    use App\Http\Controllers\Mod\ModKanban;

@endphp

<style>
    .tasks {
    {{--width: {{$process_width}}rem;--}}

    }

    .rotation-wrapper-outer {
        display: table;
    }

    .rotation-wrapper-inner {
        padding: 50% 0;
        height: 0;
    }

    .element-to-rotate {
        display: block;
        transform-origin: top left;
        /* Note: for a CLOCKWISE rotation, use the commented-out
           transform instead of this one. */
        /* transform: rotate(-90deg) translate(-90%);*/
        transform: rotate(90deg) translate(0, -90%);
        /* transform: rotate(90deg) translate(0, -100%); */
        margin-top: -50%;

        /* Not vital, but possibly a good idea if the element you're rotating contains
           text and you want a single long vertical line of text and the pre-rotation
           width of your element is small enough that the text wraps: */
        white-space: nowrap;
    }
</style>
<div class="row">
    <div class="col-sm-12 font-12 m-t-5 text-muted">Total: {{$record->total()}}</div>
</div>
<!-- Task Item -->
@foreach($record as $row)
    @php

        $id_general = isset($row->idGeneral)?$row->idGeneral:null;

        //--------------------------------------------------------------------------------------------------------------
        //TAREFAS: CLIENTE
        $record_task = ModClientProvider::information([
            'idClientProvider'=>$id_general
            ]);

        //--------------------------------------------------------------------------------------------------------------
        //ID CRIPTOGRAFADO
        $task = ModKanban::taskId([
               'idKanban'=>$row->idKanban,
               'idKanbanTask'=>$row->idKanbanTask,
               'idKanbanProcess'=>$row->idKanbanProcess,
               'idGeneral'=>$row->idGeneral,
        ]);
    @endphp

    <div class="card task mb-0 border" id="{{$task}}">
        <div class="card-body " style="padding: 0px;">
            <button type="button"
                    style="padding: 2px 0px;margin-right: -2px;"
                    class="right-side-open btn waves-effect waves-light "
                    data-target="sidebar-right"
                    onclick="loadsDataForm('#sidebarRight  .content','{{ url('/clientprovider/slidebar/')}}/{{ Crypt::encrypt(isset($id_general)?$id_general:null)}}','#actionIndexNot',['#_token'])">
                <i class="bi bi-person-fill-up font-18 text-themecolor"></i>

            </button>
            <div class="rotation-wrapper-outer" style="/*width: 161px*/"
                 >

                <div class="rotation-wrapper-inner" style="white-space: nowrap;
                          width: 110px;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          margin-left: 18px;">
                    <h5 class="element-to-rotate card-subtitle font-12 text-overflow-ellipsis">
                        {{isset($record_task->xName)?$record_task->xName:null}}
                    </h5>
                </div>
            </div>

        </div> <!-- end card-body -->
    </div>
    <!-- Task Item End -->

@endforeach

@include('mod-kanban.script-refresh')