@extends('layouts.admin')

@section('page-title') {{__('Task Board')}} @endsection
@php
    $logo=\App\Models\Utility::get_file('users-avatar/');
     $logo_tasks=\App\Models\Utility::get_file('tasks/');
@endphp
@section('content')

    <section class="section">

        @if($project && $currentWorkspace)
            <div class="row">
                <div class="col-12">
                    <div class="container-kanban">
                        <div class="kanban-board project-task-kanban-box" data-toggle="dragula" data-containers='{{json_encode($statusClass)}}'>
                            @foreach($stages as $stage)
                                <div class="kanban-col px-0">
                                    <div class="card-list card-list-flush">
                                        <div class="card-list-title row align-items-center mb-3">
                                            <div class="col">
                                                <h6 class="mb-0 text-white text-sm">{{$stage->name}}</h6>
                                            </div>
                                            <div class="col text-right">
                                                <span class="badge badge-secondary rounded-pill count">{{$stage->tasks->count()}}</span>
                                            </div>
                                        </div>
                                        <div id="{{'task-list-'.str_replace(' ','_',$stage->id)}}" data-status="{{$stage->id}}" class="card-list-body scrollbar-inner">
                                            @foreach($stage->tasks as $task)
                                                <div class="card card-progress draggable-item border shadow-none mb-3" id="{{$task->id}}">
                                                    <div class="card-body">
                                                        <div class="row align-items-center">
                                                            <div class="col-6">
                                                                @if($task->priority =='Low')
                                                                    <div class="badge badge-pill badge-xs badge-success"> {{ $task->priority }}</div>
                                                                @elseif($task->priority =='Medium')
                                                                    <div class="badge badge-pill badge-xs badge-warning"> {{ $task->priority }}</div>
                                                                @elseif($task->priority =='High')
                                                                    <div class="badge badge-pill badge-xs badge-danger"> {{ $task->priority }}</div>
                                                                @endif
                                                            </div>
                                                            <div class="col-6 text-right">
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <a href="#" data-url="@auth('web'){{route('tasks.show',[$currentWorkspace->slug,$task->project_id,$task->id])}}@elseauth{{route('client.tasks.show',[$currentWorkspace->slug,$task->project_id,$task->id])}}@endauth" data-ajax-popup="true" data-title="{{__('Task Detail')}}" class="h6 task-title">{{$task->title}}</a>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col">
                                                                <div class="action-item">
                                                                    {{\App\Models\Utility::dateFormat($task->start_date)}}
                                                                </div>
                                                            </div>
                                                            <div class="col text-right">
                                                                <div class="action-item">
                                                                    {{\App\Models\Utility::dateFormat($task->due_date)}}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col">
                                                                <div class="action-item">
                                                                    {{$task->taskCompleteSubTaskCount()}}/{{$task->taskTotalSubTaskCount()}}
                                                                </div>
                                                            </div>
                                                            <div class="col text-right">
                                                                <div class="avatar-group">
                                                                    @if($users = $task->users())
                                                                        @foreach($users as $key => $user)
                                                                            @if($key < 3)
                                                                                <a href="#" class="avatar rounded-circle avatar-sm">
                                                                                    <img alt="image" data-toggle="tooltip" data-original-title="{{$user->name}}" @if($user->avatar) src="{{$logo.$user->avatar}}" @else avatar="{{ $user->name }}"@endif>
                                                                                </a>
                                                                            @endif
                                                                        @endforeach
                                                                        @if(count($users) > 3)
                                                                            <a href="#" class="avatar rounded-circle avatar-sm">
                                                                                <img alt="image" data-toggle="tooltip" data-original-title="{{count($users)-3}} {{__('more')}}" avatar="+ {{ count($users)-3 }}">
                                                                            </a>
                                                                        @endif
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                            <span class="empty-container" data-placeholder="Empty"></span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div> <!-- end col -->
            </div>
        @else
            <div class="container mt-5">
                <div class="card">
                    <div class="card-body p-4">
                        <div class="page-error">
                            <div class="page-inner">
                                <h1>404</h1>
                                <div class="page-description">
                                    {{ __('Page Not Found') }}
                                </div>
                                <div class="page-search">
                                    <p class="text-muted mt-3">{{ __("It's looking like you may have taken a wrong turn. Don't worry... it happens to the best of us. Here's a little tip that might help you get back on track.")}}</p>
                                    <div class="mt-3">
                                        <a class="btn-return-home badge-blue" href="{{route('home')}}"><i class="fas fa-reply"></i> {{ __('Return Home')}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </section>

@endsection
@if($project && $currentWorkspace)
    @push('scripts')
        <!-- third party js -->
        <script src="{{ asset('assets/custom/js/dragula.min.js') }}"></script>
        <script>
            !function (a) {
                "use strict";
                var t = function () {
                    this.$body = a("body")
                };
                t.prototype.init = function () {
                    a('[data-toggle="dragula"]').each(function () {
                        var t = a(this).data("containers"), n = [];
                        if (t) for (var i = 0; i < t.length; i++) n.push(a("#" + t[i])[0]); else n = [a(this)[0]];
                        var r = a(this).data("handleclass");
                        r ? dragula(n, {
                            moves: function (a, t, n) {
                                return n.classList.contains(r)
                            }
                        }) : dragula(n).on('drop', function (el, target, source, sibling) {
                            var sort = [];
                            $("#" + target.id + " > div").each(function (key) {
                                sort[key] = $(this).attr('id');
                            });
                            var id = el.id;
                            var old_status = $("#" + source.id).data('status');
                            var new_status = $("#" + target.id).data('status');
                            var project_id = '{{$project->id}}';

                            $("#" + source.id).parents('.card-list').find('.count').text($("#" + source.id + " > div").length);
                            $("#" + target.id).parents('.card-list').find('.count').text($("#" + target.id + " > div").length);
                            $.ajax({
                                url:'{{route('tasks.update.order',[$currantWorkspace->slug,$project->id])}}',
                                type: 'PUT',
                                data:{
                                    id:id,
                                    sort:sort,
                                    client_id:{{$clientID}},
                                    new_status:new_status,
                                    old_status:old_status,
                                    project_id:project_id,
                                },
                                success: function (data) {
                                    // console.log(data);
                                }
                            });
                        });
                    })
                }, a.Dragula = new t, a.Dragula.Constructor = t
            }(window.jQuery), function (a) {
                "use strict";
                a.Dragula.init()
            }(window.jQuery);
        </script>
        <!-- third party js ends -->
        <script>
            $(document).on('click', '#form-comment button', function (e) {
                var comment = $.trim($("#form-comment textarea[name='comment']").val());
                if (comment != '') {
                    $.ajax({
                        url: $("#form-comment").data('action'),
                        data: {comment: comment},
                        type: 'POST',
                        success: function (data) {
                            data = JSON.parse(data);

                            if (data.user_type == 'Client') {
                                var avatar = "avatar='" + data.client.name + "'";
                                var html = "<li class='media'>" +
                                    "                    <img class='mr-3 avatar-sm rounded-circle img-thumbnail' width='60' " + avatar + " alt='" + data.client.name + "'>" +
                                    "                    <div class='media-body'>" +
                                    "                        <h5 class='mt-0'>" + data.client.name + "</h5>" +
                                    "                        " + data.comment +
                                    "                    </div>" +
                                    "                </li>";
                            } else {
                                var avatar = (data.user.avatar) ? "src='{{$logo}}/" + data.user.avatar + "'" : "avatar='" + data.user.name + "'";
                                var html = "<li class='media'>" +
                                    "                    <img class='mr-3 avatar-sm rounded-circle img-thumbnail' width='60' " + avatar + " alt='" + data.user.name + "'>" +
                                    "                    <div class='media-body'>" +
                                    "                        <h5 class='mt-0'>" + data.user.name + "</h5>" +
                                    "                        " + data.comment +
                                    "                    </div>" +
                                    "                </li>";
                            }

                            $("#comments").prepend(html);
                            LetterAvatar.transform();
                            $("#form-comment textarea[name='comment']").val('');
                            show_toastr('{{__('Success')}}', '{{ __("Comment Added Successfully!")}}', 'success');
                        },
                        error: function (data) {
                            show_toastr('{{__('Error')}}', '{{ __("Some Thing Is Wrong!")}}', 'error');
                        }
                    });
                } else {
                    show_toastr('{{__('Error')}}', '{{ __("Please write comment!")}}', 'error');
                }
            });

            $(document).on('submit', '#form-file', function (e) {
                e.preventDefault();
                $.ajax({
                    url: $("#form-file").data('action'),
                    type: 'POST',
                    data: new FormData(this),
                    dataType: 'JSON',
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (data) {
                        show_toastr('{{__('Success')}}', '{{ __("Comment Added Successfully!")}}', 'success');
                       
                        var delLink = '';

                        if (data.deleteUrl.length > 0) {
                            delLink = "<a href='#' class='text-danger text-muted delete-comment-file'  data-url='" + data.deleteUrl + "'>" +
                                "                                        <i class='fas fa-trash'></i>" +
                                "                                    </a>";
                        }

                        var html = "<div class='card mb-1 shadow-none border'>" +
                            "                        <div class='card-body py-2'>" +
                            "                            <div class='row align-items-center'>" +
                            "                                <div class='col-auto'>" +
                            "                                    <div class='avatar-sm'>" +
                            "                                        <span class='avatar-title rounded text-uppercase'>" +
                            data.extension +
                            "                                        </span>" +
                            "                                    </div>" +
                            "                                </div>" +
                            "                                <div class='col pl-0'>" +
                            "                                    <a href='#' class='text-muted font-weight-bold'>" + data.name + "</a>" +
                            "                                    <p class='mb-0'>" + data.file_size + "</p>" +
                            "                                </div>" +
                            "                                <div class='col-auto'>" +
                            "                                    <a download href='{{$logo_tasks}}/" + data.file + "' class='btn btn-link text-muted'>" +
                            "                                        <i class='dripicons-download'></i>" +
                            "                                    </a>" +
                            delLink +
                            "                                </div>" +
                            "                            </div>" +
                            "                        </div>" +
                            "                    </div>";
                        $("#comments-file").prepend(html);
                    },
                    error: function (data) {
                        data = data.responseJSON;
                        if (data.message) {
                            show_toastr('{{__('Error')}}', data.message, 'error');
                            $('#file-error').text(data.errors.file[0]).show();
                        } else {
                            show_toastr('{{__('Error')}}', '{{ __("Some Thing Is Wrong!")}}', 'error');
                        }
                    }
                });
            });
        </script>
    @endpush
@endif