@if($projects->count() != 0)    
    @foreach($projects as $key=>$project)
        <div class="panel col-xs-3 board-column p-0 m-l-10" style="border: solid lightgray 1px; max-width: 350px; height:700px;" data-project-id="{{ $project->id }}" >
            <div class="panel-heading p-t-5 p-b-5" >
                <div class="panel-title">
                    <div class="row">
                        
                        <div class="col-xs-11">
                            <a href="{{route('admin.projects.show', $project->id)}}">
                                <p class="m-t-10">{{ $project->account_code." ".$project->project_name }}</p>
                            </a>
                        </div>

                        <div class="col-xs-1">
                            <div style="position: relative;" class="m-t-10 dropdown pull-right fullscreen-hide">
                                <a href="javascript:;"  data-toggle="dropdown"  class="dropdown-toggle "><i class="ti-settings font-normal"></i></a>
                                <ul role="menu" class="dropdown-menu">
                                    <li><a href="javascript:;" class="add" data-project-id="{{ $project->id }}" > Añadir Recurso</a>
                                    </li>
                                    <li><a href="{{route('admin.projects.edit', $project->id)}}" data-project-id="{{ $project->id }}" id="delete-rs" > Editar Proyecto</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6"><h6><b>Jefe:</b> @if($project->chief_name != null) {{$project->chief_name}} @endif</h6></div>
                        <div class="col-xs-6"><h6><b>Responsable:</b> @if($project->foreman_name != null) {{$project->foreman_name}} @endif</h6></div>
                    </div>

                    <div class="row">
                        <div class="col-xs-9"><h6>@if($project->client()->first() != null) {{$project->client()->first()->name}} @endif</h6></div>
                        <div class="col-xs-2" align="right"><h3><b @if($project->completion_percent < 30) style="color: red;" @else @if($project->completion_percent > 69) style="color: green;" @else style="color: orange;" @endif  @endif>{{$project->completion_percent}}%</b></h3></div>
                    </div>
                </div>
            </div>
            <div class="panel-body" id="projectBox_{{ $project->id }}" style="height: 50vh; overflow-y: auto">
                <div class="row">
                    <div class="col-xs-12" style="height: 200px !important;">
                        <h5><i class="ti-user fa-fw"></i><b> Personal</b></h5>
                        <hr>
                        <div class="panel panel-default lobipanel" id="panel_emp_{{$project->id}}"  data-sortable="true"></div>
                        @foreach($resources as $resource)
                            @if($resource->project_id == $project->id)
                                @if($resource->resource_type == "App\EmployeeDetails")
                                    <div class="panel panel-default lobipanel" data-resource-id="rs_emp_{{ $resource->resource_id }}" data-sortable="true" style="border: solid black 1px;">
                                        <input type="checkbox" class="checkmulti" style="position: absolute; right: 5px; height: 1.1em; widht: 1.1em; z-index: 1; text-align: right;" name="ck_emp_{{$resource->resource_id}}" hidden>
                                        <div class="panel-body view-resource" data-resource-id="rs_emp_{{ $resource->resource_id }}" style="overflow-x: hidden;">
                                            <div class="p-10 p-b-0 font-12 font-semi-bold"><b>
                                                @if($resource->resource()->first()->image_url != null)
                                                    <img src="{{$resource->resource()->first()->image_url}}" data-toggle="tooltip" data-placement="right" class="img-circle" style="width: 12%; height: 12%; border: solid lightgray 1px;">
                                                @else
                                                    <img src="/img/default-profile-3.png" data-toggle="tooltip" data-placement="right" class="img-circle" style="width: 12%; height: 12%; border: solid lightgray 1px;">
                                                @endif
                                                   {{ $resource->resource()->first()->names." ".$resource->resource()->first()->surnames}} <div class="pull-right p-10 p-b-0">{{$resource->resource()->first()->employee_id}}</div>
                                                </b>
                                            </div>
                                            <div class="row" style="margin-bottom: 2px;">
                                                <div class="p-10 font-12 font-semi-bold col-xs-5"><b>Cargo: </b><br>@if($resource->resource()->first()->charge()->first() != null){{$resource->resource()->first()->charge()->first()->description}}@endif</div>
                                                <div class="col-xs-7">
                                                    <div class="row" style="max-width: 95%;">
                                                        @php
                                                            if($resource->resource()->first()->tags != null){
                                                                $tagsList = explode('_', $resource->resource()->first()->tags);
                                                                foreach($tagsList as $value){
                                                                    $tag = $tags->where('id', $value)->first();
                                                                    if($tag != null){
                                                                        @endphp
                                                                            <div class="col-xs-2 p-10" style="max-height: 50%;">
                                                                                <b style="font-size: 0.9em;">
                                                                                @php
                                                                                    echo $tag->initial;
                                                                                @endphp
                                                                                </b>
                                                                            </div>
                                                                        @php
                                                                    }
                                                                }
                                                            }
                                                        @endphp
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="p-10 font-12 col-xs-7" style="background: @if($resource->resource()->first()->category()->first() != null) {{$resource->resource()->first()->category()->first()->color}} @endif; @if($resource->resource()->first()->category == 11 || $resource->resource()->first()->category == 12 || $resource->resource()->first()->category == 13) color:white; @endif"><b>@if($resource->resource()->first()->category()->first() != null){{$resource->resource()->first()->category()->first()->name}}@endif</b></div>

                                                <div class="col-xs-5">
                                                    <b class="font-12"><i class="icon-calender"></i> Desde</b><br>
                                                    <div class="font-12 font-semi-bold">{{ $resource->assign_date }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        @endforeach
                        <h5 style="color: rgb(128, 128, 128);"><i class="fa fa-truck fa-fw"></i><b> Camiones</b></h5>
                        <hr>
                        <div class="panel panel-default lobipanel" id="panel_trk_{{$project->id}}" data-sortable="true"></div>
                        @foreach($resources as $resource)
                            @if($resource->project_id == $project->id)
                                @if($resource->resource_type == "App\ProjectFleet")
                                    @if($resource->resource()->first()->kind == 1)
                                        <div class="panel panel-default lobipanel" data-kind-id="1" data-resource-id="rs_mac_{{ $resource->resource_id }}" data-sortable="true" style="border: solid black 1px; background: rgb(128, 128, 128);">
                                            <input type="checkbox" class="checkmulti" style="position: absolute; right: 5px; height: 1.1em; widht: 1.1em; z-index: 1; text-align: right;" name="ck_mac_{{$resource->resource_id}}" hidden>
                                            <div class="panel-body view-resource" data-resource-id="rs_mac_{{ $resource->resource_id }}" style="overflow-x: hidden;">
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        <center style="padding-top: 5px;">  
                                                            <h5><b class="text-white">{{$resource->resource()->first()->type}}</b></h5>
                                                            <div class="font-15 text-white">{{ $resource->resource()->first()->brand." | ".$resource->resource()->first()->model }}</div>
                                                            <h2 style="font-size: 1.8em;"><b class="text-white">{{$resource->resource()->first()->plate}}</b></h2>
                                                        </center>
                                                    </div>
                                                    <div class="col-xs-6 p-10">
                                                        <span class="text-white" style="font-size: 0.9em;"><b>Seg: </b>{{ \Carbon\Carbon::parse($resource->resource()->first()->insurance_date)->format($global->date_format) }}</span><br>
                                                        <span class="text-white" style="font-size: 0.9em;"><b>Itv: </b>{{ \Carbon\Carbon::parse($resource->resource()->first()->itv_date)->format($global->date_format) }}</span><br>
                                                        <span class="text-white" style="font-size: 0.9em;"><b>T.T: </b>{{ \Carbon\Carbon::parse($resource->resource()->first()->transit_date)->format($global->date_format) }}</span><br>
                                                        <span class="text-white" style="font-size: 0.9em;"><b>Adif: </b>{{ \Carbon\Carbon::parse($resource->resource()->first()->adif_date)->format($global->date_format) }}</span><br>
                                                        <span class="text-white" style="font-size: 0.9em;"><b><i class="icon-calender"></i> Desde: </b>{{ \Carbon\Carbon::parse($resource->assign_date)->format($global->date_format) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            @endif
                        @endforeach
                        <h5><i class="fa fa-cogs fa-fw"></i><b> Maquinaria</b></h5>
                        <hr>
                        <div class="panel panel-default lobipanel" id="panel_mac_{{$project->id}}" data-sortable="true"></div>
                        @foreach($resources as $resource)
                            @if($resource->project_id == $project->id)
                                @if($resource->resource_type == "App\ProjectFleet")
                                    @if($resource->resource()->first()->kind == 2)
                                        <div class="panel panel-default lobipanel" data-kind-id="2"  data-resource-id="rs_mac_{{ $resource->resource_id }}" data-sortable="true" style="border: solid black 1px; background: yellow;">
                                            <input type="checkbox" class="checkmulti" style="position: absolute; right: 5px; height: 1.1em; widht: 1.1em; z-index: 1; text-align: right;" name="ck_mac_{{$resource->resource_id}}" hidden>
                                            <div class="panel-body view-resource" data-resource-id="rs_mac_{{ $resource->resource_id }}" style="overflow-x: hidden;">
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        <center style="padding-top: 5px;">  
                                                            <h5><b>{{$resource->resource()->first()->type}}</b></h5>
                                                            <div class="font-15">{{ $resource->resource()->first()->brand." | ".$resource->resource()->first()->model }}</div>
                                                            <h2 style="font-size: 1.8em;"><b>{{$resource->resource()->first()->plate}}</b></h2>
                                                        </center>
                                                    </div>
                                                    <div class="col-xs-6 p-10">
                                                        <span style="font-size: 0.9em;"><b>Seg: </b>{{ $resource->resource()->first()->insurance_date }}</span><br>
                                                        <span style="font-size: 0.9em;"><b>Itv: </b>{{ $resource->resource()->first()->itv_date }}</span><br>
                                                        <span  style="font-size: 0.9em;"><b>T.T: </b>{{ $resource->resource()->first()->transit_date }}</span><br>
                                                        <span  style="font-size: 0.9em;"><b>Adif: </b>{{ $resource->resource()->first()->adif_date }}</span><br>
                                                        <span  style="font-size: 0.9em;"><b><i class="icon-calender"></i> Desde: </b>{{ $resource->assign_date }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            @endif
                        @endforeach
                        <h5 style="color: rgb(128, 128, 128);"><i class="fa fa-car fa-fw"></i><b> Vehiculos</b></h5>
                        <hr>
                        <div class="panel panel-default lobipanel" id="panel_vhcl_{{$project->id}}" data-sortable="true"></div>
                        @foreach($resources as $resource)
                            @if($resource->project_id == $project->id)
                                @if($resource->resource_type == "App\ProjectFleet")
                                    @if($resource->resource()->first()->kind == 3)
                                        <div class="panel panel-default lobipanel" data-kind-id="3" data-resource-id="rs_mac_{{ $resource->resource_id }}" data-sortable="true" style="border: solid black 1px; background-color: rgb(128, 128, 128);">
                                            <input type="checkbox" class="checkmulti" style="position: absolute; right: 5px; height: 1.1em; widht: 1.1em; z-index: 1; text-align: right;" name="ck_mac_{{$resource->resource_id}}" hidden>
                                            <div class="panel-body  view-resource" data-resource-id="rs_mac_{{ $resource->resource_id }}" style="overflow-x: hidden;">
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        <center style="padding-top: 5px;">  
                                                            <h5><b class="text-white">{{$resource->resource()->first()->type}}</b></h5>
                                                            <div class="font-15 text-white">{{ $resource->resource()->first()->brand." | ".$resource->resource()->first()->model }}</div>
                                                            <h2 style="font-size: 1.8em;"><b class="text-white">{{$resource->resource()->first()->plate}}</b></h2>
                                                        </center>
                                                    </div>
                                                    <div class="col-xs-6 p-10">
                                                        <span class="text-white" style="font-size: 0.9em;"><b>Seg: </b>{{ $resource->resource()->first()->insurance_date }}</span><br>
                                                        <span class="text-white" style="font-size: 0.9em;"><b>Itv: </b>{{ $resource->resource()->first()->itv_date }}</span><br>
                                                        <span class="text-white" style="font-size: 0.9em;"><b>T.T: </b>{{ $resource->resource()->first()->transit_date }}</span><br>
                                                        <span class="text-white" style="font-size: 0.9em;"><b>Adif: </b>{{ $resource->resource()->first()->adif_date }}</span><br>
                                                        <span class="text-white" style="font-size: 0.9em;"><b><i class="icon-calender"></i> Desde: </b>{{ $resource->assign_date }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endforeach
    
@else
    <div class="col-xs-12"><center><h1>No Hay Projectos</h1></center></div>
@endif
<script>
    

    $(function () {


        $('.lobipanel').on('dragged.lobiPanel', function () {
            var $parent = $(this).parent(),
                $children = $parent.children();

            var projectId = [];
            var rsIds = [];
            
            $children.each(function (ind, el) {
                //console.log(el, $(el).index());
                projectId.push($(el).closest('.board-column').data('project-id'));
                rsIds.push($(el).data('resource-id'));

                if ($(el).data('resource-id') != null) {

                    var str = $(el).data('resource-id').split('_');
                    if(str[1] == "emp"){
                        $('#panel_emp_'+$(el).closest('.board-column').data('project-id')).append($(el));
                    }
                    if(str[1] == "mac"){
                        if ($(el).data('kind-id') == "1") {
                            $('#panel_trk_'+$(el).closest('.board-column').data('project-id')).append($(el));
                        }
                        if ($(el).data('kind-id') == "2") {
                            $('#panel_mac_'+$(el).closest('.board-column').data('project-id')).append($(el));
                        }
                        if ($(el).data('kind-id') == "3") {
                            $('#panel_vhcl_'+$(el).closest('.board-column').data('project-id')).append($(el));
                        }
                    }
                }
                
            });

            // update values for all tasks
            $.easyAjax({
                url: '{{ route("admin.resourcesboard.updateIndex") }}',
                type: 'POST',
                data:{projectId: projectId, rsIds: rsIds,'_token':'{{ csrf_token() }}'},
                success: function (response) {
                    //loadData();
                }
            });

            $("body").tooltip({
                selector: '[data-toggle="tooltip"]'
            });

            $('.board-column').each(function () {
                let lobipanelItems = $(this).find('.view-resource').length;
                // console.log(lobipanelItems);
                if (lobipanelItems == 1) {
                    $(this).find('.lobipanel:first').addClass('m-b-0');
                }
            })

        }).lobiPanel({
            sortable: true,
            reload: false,
            editTitle: false,
            close: false,
            minimize: false,
            unpin: false,
            expand: false

        });

        var isDragging = 0;
        $('.lobipanel-parent-sortable').on('sortactivate', function(){
            $('.board-column > .panel-body').css('overflow-y', 'unset');
            isDragging = 1;
        });
        $('.lobipanel-parent-sortable').on('sortstop', function(e){
            $('.board-column > .panel-body').css('overflow-y', 'auto');
            isDragging = 0;
        });


        $('.add').on('click', function() {
            var projectID = $(this).data('project-id');
            var url = '{{ route('admin.resourcesboard.ajaxAdd')}}/'+projectID;

            $('#modelHeading').html('Añadir Recurso');
            $.ajaxModal('#addResourceModal', url);
        });
        $('.view-resource').on('click', function() {
            if (isDragging == 0) {
                var resourceID = $(this).data('resource-id');
                var url = '{{ route('admin.resourcesboard.ajaxEdit')}}/'+resourceID;

                $('#modelHeading').html('Editar Recurso');
                $.ajaxModal('#editResourceModal', url);
            }
        });

        /*

        $('.view-task').click(function () {
            if (isDragging == 0) {
                $(".right-sidebar").slideDown(50).addClass("shw-rside");

                var id = $(this).data('task-id');
                var url = "{{ route('admin.all-tasks.show',':id') }}";
                url = url.replace(':id', id);

                $.easyAjax({
                    type: 'GET',
                    url: url,
                    success: function (response) {
                        if (response.status == "success") {
                            $('#right-sidebar-content').html(response.view);
                        }
                    }
                });

            }
        })
        $('.delete-column').click(function () {
            var id = $(this).data('column-id');
            var url = '{{ route('admin.taskboard.destroy', ':id')}}';
            url = url.replace(':id', id);

            swal({
                title: "@lang('messages.sweetAlertTitle')",
                text: "@lang('messages.confirmation.recoveColumn')",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "@lang('messages.deleteConfirmation')",
                cancelButtonText: "@lang('messages.confirmNoArchive')",
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm){
                if (isConfirm) {
                    $.easyAjax({
                        url: url,
                        type: 'POST',
                        data: { '_token': '{{ csrf_token() }}', '_method': 'DELETE'},
                        success: function (response) {
                            if(response.status == 'success'){
                                window.location.reload();
                            }
                        }
                    });

                }
            });

        })


        {{--$('.edit-column').click(function () {--}}
            {{--var id = $(this).data('column-id');--}}
            {{--var url = '{{ route("admin.taskboard.edit", ':id') }}';--}}
            {{--url = url.replace(':id', id);--}}

            {{--$.easyAjax({--}}
                {{--url: url,--}}
                {{--type: "GET",--}}
                {{--success: function (response) {--}}
                    {{--$('#edit-column-form').html(response.view);--}}
                    {{--$(".colorpicker").asColorPicker();--}}
                    {{--$('#edit-column-form').show();--}}
                {{--}--}}
            {{--})--}}
        {{--})--}}
        */

    });
</script>