@extends('employee.employee-layouts.master')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="mb-4 col-xl-4 col-md-4">
                <div class="py-2 shadow card border-left-primary h-100">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            {{-- <div class="mr-2 col">
                                <div class="">
                                    <h4 class="font-weight-bolder">{{ __('Workspace') }}</h4>
                                    <p class="mb-0">{{ $workspace->name }}</p>
                                </div>

                            </div> --}}

                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-4 col-xl-4 col-md-4">
                <div class="py-2 shadow card border-left-success h-100">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="mr-2 col">
                                <div class="">
                                    <h4 class="font-weight-bolder">{{ __('Project') }}</h4>
                                    <p class="mb-0">{{ $pro->name }}</p>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-4 col-xl-4 col-md-4">
                <div class="py-2 shadow card border-left-warning h-100">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="mr-2 col">
                                <div class="">
                                    <h4 class="font-weight-bolder">{{ __('Assigned User') }}</h4>
                                    @foreach ($projects->users as $user)
                                        <span class="badge badge-primary p-2">{{ $user->name }} </span>
                                    @endforeach
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <div class="tile" id="tile-1">
                    <div class="d-flex flex-wra justify-content-between mb-4">
                        <ul class="nav nav-tabs mb-4" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
                                    aria-controls="home" aria-selected="true"><i
                                        class="fas fa-spinner mr-2"></i></i>{{ __('In Progress') }}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                                    aria-controls="profile" aria-selected="false"><i class="fas fa-tasks mr-2"></i></i>
                                    {{ __('To Do') }}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
                                    aria-controls="contact" aria-selected="false"><i class="fas fa-check-circle mr-2"></i>
                                    {{ __('Complete') }}</a>
                            </li>
                        </ul>
                        <div>
                            <a href="#add_workspace_modal" data-toggle="modal" class="btn btn-success"> <i
                                    class="fa fa-plus"></i> {{ __('Add Task') }}</a>
                        </div>
                    </div>
                    <!-- Nav tabs -->
                    <!-- <ul class="nav nav-tabs mb-4" role="tablist">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <li class="nav-item">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                role="tab" aria-controls="home" aria-selected="true"><i
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    class="fas fa-spinner mr-2"></i></i>{{ __('In Progress') }}</a>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </li>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <li class="nav-item">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                aria-controls="profile" aria-selected="false"><i class="fas fa-tasks mr-2"></i></i>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                {{ __('To Do') }}</a>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </li>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <li class="nav-item">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                aria-controls="contact" aria-selected="false"><i
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    class="fas fa-check-circle mr-2"></i>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                {{ __('Complete') }}</a>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </li>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </ul> -->
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div id="inprog" class="row"></div>
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div id="todo" class="row"></div>
                        </div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            <div id="finished" class="row"></div>
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>

    <div id="add_workspace_modal" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ __('Add Task') }}</h4>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <div class="mess"></div>
                    <form id="taskform" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="">{{ __('Task Name') }}</label>
                            <input name="name" id="name" class="form-control" type="text"
                                placeholder="Task Name">
                            <p class="name text-bold text-danger text-small"></p>

                            <input name="project_name" id="name" class="form-control" type="hidden"
                                value="{{ $pro->name }}">
                        </div>
                        <div class="form-group">
                            <label for="">{{ __('Description') }}</label>
                            <input name="description" id="description" class="form-control" type="text"
                                placeholder="Task Description">
                            <p class="description text-bold text-danger text-small"></p>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Start Date') }}:</label>
                            <div class="input-group date" id="reservationdate" data-target-input="nearest">
                                <input class="form-control" type="date" name="startdate" /> <br>
                                <p class="startdate text-bold text-danger text-small"></p>

                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{ __('End Date') }}:</label>
                            <div class="input-group date" id="reservationdate" data-target-input="nearest">
                                <input class="form-control" type="date" name="enddate" /> <br>
                                <p class="enddate text-bold text-danger text-small"></p>

                            </div>
                        </div>
                        <input type="hidden" name="project_id" value="{{ request()->id }}">
                        <div class="form-group">
                            <label for="role">{{ __('Select Priority') }}</label>
                            <select class="form-control" name="priority" id="role">

                                <option value="Low">{{ __('Low') }}</option>
                                <option value="Middle">{{ __('Middle') }}</option>
                                <option value="High">{{ __('High') }}</option>

                            </select>
                            <p class="priority text-bold text-danger text-small"></p>


                        </div>



                        <div class="form-group">
                            <label for="role">{{ __('Status') }}</label>
                            <select class="form-control" name="status" id="role">

                                <option value="inprogress">{{ __('In Progress') }}</option>
                                <option value="todo">{{ __('To Do') }}</option>
                                <option value="finished">{{ __('Finished') }}</option>

                            </select>
                            <p class="status text-bold text-danger text-small"></p>


                        </div>

                        <div class="form-group">
                            <label for="">{{ __('Assign To') }}</label>
                            <div class="checkbox">

                                @foreach ($projects->users as $user)
                                    <label><input type="checkbox" name="user_id[]" value="{{ $user->id }}">
                                        {{ $user->name }}</label>
                                @endforeach


                            </div>
                        </div>


                        <div class="form-group">
                            <input id="saveBtn" class="btn btn-block btn-primary" type="submit" value="create">
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="edit_workspace_modal" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ __('Edit Task') }}</h4>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="mess"></div>
                    <form id="taskform" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="">{{ __('Task Name') }}</label>
                            <input name="id" id="namey" class="form-control" type="hidden"
                                placeholder="Task Name">

                            <input name="name" id="namey" class="form-control" type="text"
                                placeholder="Task Name">
                            <p class="name text-bold text-danger text-small"></p>

                            <input name="project_name" id="name" class="form-control" type="hidden"
                                value="{{ $pro->name }}">
                        </div>
                        <div class="form-group">
                            <label for="">{{ __('Description') }}</label>
                            <input name="description" id="description" class="form-control" type="text"
                                placeholder="Task Description">
                            <p class="description text-bold text-danger text-small"></p>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Start Date') }}:</label>
                            <div class="input-group date " id="startdate" data-target-input="nearest">
                                <input class="form-control" type="date" name="startdate" />
                                <p class="tistartdatetle text-bold text-danger text-small"></p>

                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{ __('End Date') }}:</label>
                            <div class="input-group date" id="reservationdate" data-target-input="nearest">
                                <input class="form-control" type="date" name="enddate" id="enddate" />
                                <p class="enddate text-bold text-danger text-small"></p>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="role">{{ __('Select Priority') }}</label>
                            <select class="form-control" name="priority" id="priority">

                                <option value="Low">{{ __('Low') }}</option>
                                <option value="Middle">{{ __('Middle') }}</option>
                                <option value="High">{{ __('High') }}</option>

                            </select>
                            <p class="priority text-bold text-danger text-small"></p>


                        </div>



                        <div class="form-group">
                            <label for="role">{{ __('Status') }}</label>
                            <select class="form-control" name="status" id="status">

                                <option value="inprogress">{{ __('In Progress') }}</option>
                                <option value="todo">{{ __('To Do') }}</option>
                                <option value="finished">{{ __('Finished') }}</option>

                            </select>
                            <p class="status text-bold text-danger text-small"></p>


                        </div>

                        <div class="form-group">
                            <label for="">{{ __('Assign To') }}</label>
                            <div class="checkbox" id="checkbox">


                            </div>

                        </div>


                        <div class="form-group">
                            <input id="edittask" class="btn btn-block btn-primary" type="submit" value="update">
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="delete_task_modal" class="modal fade">
        <div class="modal-dialog ">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ __('Delete Task') }}</h4>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="mess"></div>

                    @csrf
                    <div class="form-group">
                        <input type="hidden" value="" name="taskID">
                        <h5>{{ __('Are You Sure To Delete This Task') }}? </h5>
                    </div>
                    <div class="form-group">

                    </div>

                </div>
                <div class="card-footer text-right">
                    <button class="btn btn-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn btn-danger" id="deletetask">{{ __('Delete') }}</button>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('style')
    <style>
        #tile-1 .nav-tabs {
            border-bottom: none;
        }

        #tile-1 .nav-tabs .nav-item {}

        #tile-1 .nav-tabs .nav-link {
            color: #777;
            border: none;
            border-bottom: 2px solid #f3f3f3;
            font-size: 18px;
            font-weight: 600;
        }

        #tile-1 .nav-tabs .nav-link.active {
            border-bottom-color: #622c87;
            background-color: #622c8720;
            color: #622c87;
        }


        /* #tile-1 .tab-pane {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            padding: 15px 0;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        #tile-1 .nav-tabs {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            position: relative;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            border: none !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            background-color: #fff;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            border-radius: 6px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        #tile-1 .nav-tabs li {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            margin: 0px !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        #tile-1 .nav-tabs li a {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            position: relative;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            margin-right: 0px !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            padding: 20px 40px !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            font-size: 16px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            border: none !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            color: rgb(255, 255, 255);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }



                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        #tile-1 .slider {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            display: inline-block;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            width: 30px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            height: 4px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            border-radius: 3px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            background-color: #281463;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            position: absolute;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            z-index: 1;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            bottom: 0;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            transition: all .4s linear;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        #tile-1 .nav-tabs .active {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            background-color: transparent !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            border: none !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            color: #ffffff !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        } */


        .mainbox {
            background-color: #fff;
            margin: auto;
            height: 280px;
            padding: 40px;
            width: 100%;
            position: relative;
            text-align: center;
        }



        .icon-not-found.fas {
            font-size: 8.5rem;
            color: #622c87;
        }

        .msg {
            text-align: center;
            font-family: "Nunito Sans", sans-serif;
            font-size: 1.6rem;
            margin-top: 15px;
        }
    </style>
@endpush


@push('script')
    <script src="{{ asset('assets/backend/js/sweetalert.min.js') }}"></script>
    <script src="{{ asset('assets/backend/js/moment.js') }}"></script>


    <script>
        'use strict'
        $(document).ready(function() {
            $("#tile-1 .nav-tabs a").on('click', function() {
                var position = $(this).parent().position();
                var width = $(this).parent().width();
                $("#tile-1 .slider").css({
                    "left": +position.left,
                    "width": width
                });
            });
            var actWidth = $("#tile-1 .nav-tabs").find(".active").parent("li").width();
            var actPosition = $("#tile-1 .nav-tabs .active").position();
            $("#tile-1 .slider").css({
                "left": +actPosition.left,
                "width": actWidth
            });

            $('#inprog').ready(function() {
                $.ajax({
                    type: "get",
                    url: "{{ route('employee.project.inprogress') }}",
                    data: {
                        id: "{{ request()->id }}"
                    },
                    success: function(response) {

                        var appendString = "";

                        if (response.length <= 0) {

                            let appendStringInProgress = `

                            <div class="mainbox">

                                <i class="icon-not-found fas fa-sad-tear"></i>

                                <div class="msg">
                                    <p>No In Progrees Task Is Available </p>
                                </div>
                            </div>

                            `;

                            $('#inprog').empty().append(appendStringInProgress);

                            return;
                        }

                        for (var i = 0; i < response.length; i++) {

                            appendString += `

                            <div class="col-xl-6 col-md-6 col-12 mb-3">
                                            <div class="shadow card h-100">
                                                <div class="card-header bg-primary">
                                                    <h5 class="text-white text-center mb-0">${response[i].name}</h5>
                                                </div>
                                                <div class="card-body">
                                                    <div class="">
                                                        <p>${response[i].description}</p>

                                                        <table class="table table-bordered text-center w-100">
                                                            <tr>
                                                                <th class="bg-success text-white">Start Date</th>
                                                                <th class="bg-danger text-white">End Date</th>
                                                                <th class="bg-primary text-white">Priority</th>
                                                            </tr>
                                                            <tr>
                                                                <td>${response[i].startdate}</td>
                                                                <td>${response[i].enddate}</td>
                                                                <td>
                                                                    ${response[i].priority}
                                                                </td>
                                                            </tr>
                                                        </table>



                                                        <p>
                                                            Project Assigned To:
                                                            <br>
                                                            <span class="badge badge-primary p-2">



                                                            `;
                            response[i].assign_to != null ?
                                JSON.parse(response[i].assign_to).map((val) => {
                                    appendString += val.name;
                                }) :
                                '';
                            appendString += `</span>

                                                        </p>



                                                    </div>

                                                    ${response[i].comments.length>0?
                                                            `<div class="commentbox"
                                                                                                                style="border:0.2px solid gray;border-radius: 10px;padding: 8px;">
                                                                                                               <ul>

                                                                                                                ${response[i].comments.map((val)=>`

                <li><span style="font-size: 13px;font-weight:bold">Noman:</span>
                                                <br> &nbsp;&nbsp; <span
                                                style="font-style: italic;font-size: 14px">${val['comment']} </span>
                                                <br> &nbsp;&nbsp;
                                                <span style="font-size: 12px">Date:
                                                        ${moment(val['created_at']).format('YYYY, MMMM, Do')}
                                                </li>

                `)}

                                                                                                                </ul>
                                                                                                                </div>
                                                                                                                    `
                                                            :''}
                                                </div>
                                                <div class="card-footer text-right">
                                                    <button class="btn btn-primary" data-id="${response[i].id}" data-toggle="modal" id="edit"><i class="fa fa-pen"></i></button>
                                                    <button class="btn btn-danger" data-id="${response[i].id}" data-toggle="modal" id="delete"><i class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                        </div>
                            `;

                        }

                        $('#inprog').empty().append(appendString);
                    },
                    error: function(error) {

                    }
                })



            })




            $('#todo').ready(function() {


                $.ajax({
                    type: "get",
                    url: "{{ route('employee.project.todo') }}",
                    dataType: "json",
                    data: {
                        id: "{{ request()->id }}"
                    },
                    success: function(response) {

                        var appendString = "";
                        if (response.length <= 0) {

                            appendString = `

                            <div class="mainbox">

                                <i class="icon-not-found fas fa-sad-tear "></i>

                                <div class="msg">
                                    <p>No Todo Task Is Available</p>
                                </div>
                            </div>

                            `;

                            $('#todo').empty().append(appendString);

                            return;
                        }

                        for (var i = 0; i < response.length; i++) {


                            appendString += `

                            <div class="col-xl-6 col-md-6 mb-3">
                                            <div class="shadow card h-100">
                                                <div class="card-header bg-primary">
                                                    <h5 class="text-white text-center mb-0">${response[i].name}</h5>
                                                </div>
                                                <div class="card-body">
                                                    <div class="">
                                                        <p>${response[i].description}</p>

                                                        <table class="table table-bordered text-center w-100">
                                                            <tr>
                                                                <th class="bg-success text-white">Start Date</th>
                                                                <th class="bg-danger text-white">End Date</th>
                                                                <th class="bg-primary text-white">Priority</th>
                                                            </tr>
                                                            <tr>
                                                                <td>${response[i].startdate}</td>
                                                                <td>${response[i].enddate}</td>
                                                                <td>
                                                                    ${response[i].priority}
                                                                </td>
                                                            </tr>
                                                        </table>


                                                        <p>
                                                            Project Assigned To:
                                                            <br>
                                                            <span class="badge badge-primary p-2">


                                                            `;
                            response[i].assign_to != null ?
                                JSON.parse(response[i].assign_to).map((val) => {
                                    appendString += val.name;
                                }) :
                                '';
                            appendString += `</span>

                                                        </p>


                                                        <div class="commentbox"
                                                        style="border:0.2px solid gray;border-radius: 10px;padding: 8px;">
                                                       <ul>

                                                        ${response[i].comments.map((val)=>`

                                                                                                            <li><span style="font-size: 13px;font-weight:bold">Noman:</span>
                                                                                                                                            <br> &nbsp;&nbsp; <span
                                                                                                                                            style="font-style: italic;font-size: 14px">${val['comment']} </span>
                                                                                                                                            <br> &nbsp;&nbsp;
                                                                                                                                            <span style="font-size: 12px">Date:
                                                                                                                                                    ${moment(val['created_at']).format('YYYY, MMMM, Do')}
                                                                                                                                            </li>

                                                                                                            `)}

                                                        </ul>
                                                        </div>


                                                    </div>
                                                </div>
                                                <div class="card-footer text-right">
                                                    <button class="btn btn-primary" data-id="${response[i].id}" data-toggle="modal" id="edit"><i class="fa fa-pen"></i></button>
                                                    <button class="btn btn-danger" data-id="${response[i].id}" data-toggle="modal" id="delete"><i class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                        </div>
                            `;


                        }


                        $('#todo').empty().append(appendString);
                    },
                    error: function(error) {

                    }
                })



            })



            $('#finished').ready(function() {


                $.ajax({
                    type: "get",
                    url: "{{ route('employee.project.finished') }}",
                    dataType: "json",
                    data: {
                        id: "{{ request()->id }}"
                    },
                    success: function(response) {
                        var appendString = "";
                        if (response.length <= 0) {

                            appendString = `

                            <div class="mainbox">

                                <i class="icon-not-found fas fa-sad-tear"></i>

                                <div class="msg">
                                    <p>No In Complete Task Is Available </p>
                                </div>
                            </div>

                            `;

                            $('#finished').empty().append(appendString);

                            return;
                        }
                        for (var i = 0; i < response.length; i++) {

                            appendString += `

                            <div class="col-xl-6 col-md-6 mb-3">
                                            <div class="shadow card h-100">
                                                <div class="card-header bg-primary">
                                                    <h5 class="text-white text-center mb-0">${response[i].name}</h5>
                                                </div>
                                                <div class="card-body">
                                                    <div class="">
                                                        <p>${response[i].description}</p>

                                                        <table class="table table-bordered text-center w-100">
                                                            <tr>
                                                                <th class="bg-success text-white">Start Date</th>
                                                                <th class="bg-danger text-white">End Date</th>
                                                                <th class="bg-primary text-white">Priority</th>
                                                            </tr>
                                                            <tr>
                                                                <td>${response[i].startdate}</td>
                                                                <td>${response[i].enddate}</td>
                                                                <td>
                                                                    ${response[i].priority}
                                                                </td>
                                                            </tr>
                                                        </table>

                                                        <p>
                                                            Project Assigned To:
                                                            <br>
                                                            <span class="badge badge-primary p-2">
                                                            `;
                            response[i].assign_to != null ?
                                JSON.parse(response[i].assign_to).map((val) => {
                                    appendString += val.name;
                                }) :
                                '';
                            appendString += `</span>

                                                        </p>


                                                        ${response[i].comments.length>0?
                                                            `
                                                                                                                <div class="commentbox"
                                                                                                            style="border:0.2px solid gray;border-radius: 10px;padding: 8px;">
                                                                                                           <ul>

                                                                                                            ${response[i].comments.map((val)=>`

                <li><span style="font-size: 13px;font-weight:bold">Noman:</span>
                                                <br> &nbsp;&nbsp; <span
                                                style="font-style: italic;font-size: 14px">${val['comment']} </span>
                                                <br> &nbsp;&nbsp;
                                                <span style="font-size: 12px">Date:
                                                        ${moment(val['created_at']).format('YYYY, MMMM, Do')}
                                                </li>

                `)}

                                                                                                            </ul>
                                                                                                            </div>
                                                                                                                `
                                                            :''}

                                                    </div>
                                                </div>
                                                <div class="card-footer text-right">
                                                    <button class="btn btn-primary" data-id="${response[i].id}" data-toggle="modal" id="edit"><i class="fa fa-pen"></i></button>
                                                    <button class="btn btn-danger" data-id="${response[i].id}" data-toggle="modal" id="delete"><i class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                        </div>
                            `;


                        }

                        $('#finished').empty().append(appendString);
                    },
                    error: function(error) {
                        console.log(error)
                        alert('not saved');
                    }
                })



            })

            $("#taskform").on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('employee.task.store') }}",
                    method: "POST",
                    ContentType: false,
                    proccessData: false,
                    data: $("#taskform").serialize(),
                    success: function(response) {

                        $("#add_workspace_modal").modal('hide')
                        location.reload();
                        swal("Good job!", "Project Created", "success");

                    },
                    error: function(response) {
                        console.log(response);
                        if (response.responseJSON.errors.name) {
                            response.responseJSON.errors.name.forEach(title => {
                                $('#taskform .name').text(title);
                            });
                        }
                        if (response.responseJSON.errors.priority) {
                            response.responseJSON.errors.priority.forEach(title => {
                                $('#taskform .priority').text(title);
                            });
                        }
                        if (response.responseJSON.errors.description) {
                            response.responseJSON.errors.description.forEach(title => {
                                $('#taskform .description').text(title);
                            });
                        }
                        if (response.responseJSON.errors.startdate) {
                            response.responseJSON.errors.startdate.forEach(title => {
                                $('#taskform .startdate').text(title);
                            });
                        }
                        if (response.responseJSON.errors.enddate) {
                            response.responseJSON.errors.enddate.forEach(title => {
                                $('#taskform .enddate').text(title);
                            });
                        }
                        if (response.responseJSON.errors.status) {
                            response.responseJSON.errors.status.forEach(title => {
                                $('#taskform .status').text(title);
                            });
                        }

                    }
                })


            })

            $(document).on('click', '#delete', function() {


                let id = $(this).attr('data-id');
                $('#delete_task_modal input[name="taskID"]').val(id);


                $('#delete_task_modal').modal('show');
            })



            $(document).on('click', '#deletetask', function(e) {
                e.preventDefault();
                let id = $('#delete_task_modal input[name="taskID"]').val();

                let url = "{{ route('employee.task.delete', ':id') }}";

                url = url.replace(':id', id);

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: url,
                    method: 'POST',
                    dataType: "json",
                    success: function(response) {
                        $('#delete_task_modal').modal('hide');
                        location.reload();
                        swal("Good job!", "Task Deleted", "success");
                    },
                    error: function(response) {

                    }
                });

            })

            //edit

            $(document).on('click', '#edit', function(e) {
                e.preventDefault();
                $('#edit_workspace_modal').modal('show');
                let id = $(this).attr('data-id');

                let url = "{{ route('employee.task.edit', ':id') }}";
                url = url.replace(':id', id);
                $('#edit_workspace_modal input[name="id"]').val(id);
                $('#checkbox').empty();

                $.ajax({
                    url: url,
                    method: 'get',
                    dataType: "json",
                    success: function(data) {

                        $('#edit_workspace_modal input[name="name"]').val(data[0].name);
                        $('#edit_workspace_modal input[name="description"]').val(data[0]
                            .description);
                        $('#edit_workspace_modal input[name="startdate"]').val(data[0]
                            .startdate);
                        $('#edit_workspace_modal input[name="enddate"]').val(data[0].enddate);
                        $('#edit_workspace_modal select[name="priority"]').val(data[0]
                            .priority);
                        $('#edit_workspace_modal select[name="status"]').val(data[0].status);
                        for (var i = 0; i < JSON.parse(data[0].assign_to).length; i++) {

                            $('#checkbox').append(`<input type="checkbox" name="user_id[]"  value="${data[0].user_id}" checked>${JSON.parse(data[0].assign_to)[i].name}
                <br>`);
                        }


                    },
                    error: function(data) {

                    }
                });

            });

            $(document).on('click', '#edittask', function(e) {
                e.preventDefault();


                let id = $('#edit_workspace_modal input[name="id"]').val();


                let url = "{{ route('employee.task.update', ':id') }}";
                url = url.replace(':id', id);

                let name = $("#edit_workspace_modal input[name=name]").val();
                let description = $("#edit_workspace_modal input[name=description]").val();

                let status = $("#status").val();

                let priority = $("#priority").val();
                let startdate = $("#edit_workspace_modal input[name=startdate]").val();
                let enddate = $("#edit_workspace_modal input[name=enddate]").val();
                let userid = $("#edit_workspace_modal input[name=user_id").val();



                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: {
                        'id': id,
                        'name': name,
                        'description': description,
                        'status': status,
                        'priority': priority,
                        'status': status,
                        'startdate': startdate,
                        'enddate': enddate,
                        'user_id': userid
                    },
                    success: function(response) {
                        console.log(response);
                        $('#edit_LeaveType_modal').modal('hide');
                        swal("Good job!", "Task Edited", "success");
                        location.reload();

                    },
                    error: function(response) {

                    }
                });


            });

        })
    </script>
@endpush