@extends('admin.partial.admin_master')
@section('title')
<title>Project Lists | Aplikasi Project Management</title>
@endsection
@section('css')
    {{-- <link href="{{ asset('backend/assets/css/vendor/frappe-gantt.css') }}" rel="stylesheet" type="text/css" />        --}}
    <link href="{{ asset('backend/assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/app.min.css') }}" rel="stylesheet" type="text/css" id="app-style"/>
    {{-- <link href="{{ asset('backend/assets/css/vendor/dataTables.bootstrap5.css') }}" rel="stylesheet" type="text/css" /> --}}
    {{-- <link href="{{ asset('backend/assets/css/vendor/responsive.bootstrap5.css') }}" rel="stylesheet" type="text/css" /> --}}
    <link href="{{ asset('backend/assets/css/fontawesome.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('backend/assets/css/toastr.css') }}" rel="stylesheet" />   
    {{-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  --}}
    <link rel="stylesheet" href="{{ asset('jqueryui113/jquery-ui.css') }}">
    <link rel="stylesheet" href="{{ asset('datepicker/bootstrap-datepicker.css') }}">
    {{-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> --}}
    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> --}}

    <style nonce="{{ csp_nonce() }}">
    .cal{
        margin-top: 36px;
    }
        .task-board {
            /* background: #1464bc; */
            display: inline-block;
            padding: 12px;
            border-radius: 3px;
            width: 100%;
            white-space: nowrap;
            overflow-x: scroll;
            min-height: 300px;
        }

        .status-card {
            width: 380px;
            margin-right: 8px;
            background: #e2e4e6;
            border-radius: 3px;
            display: inline-block;
            vertical-align: top;
            font-size: 0.9em;
        }

        .status-card:last-child {
            margin-right: 0px;
        }

        .card-header {
            width: 100%;
            padding: 10px 10px 0px 10px;
            /* background-color: #f4740c; */
            color: green;
            box-sizing: border-box;
            border-radius: 3px;
            display: block;
            font-weight: bold;
        }

        .card-header-text {
            display: block;
        }

        ul.sortable {
            padding-bottom: 10px;
        }

        ul.sortable li:last-child {
            margin-bottom: 0px;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0px;
        }

        .text-row {
            padding: 15px 10px;
            margin: 10px;
            background: #fff;
            color: black;
            box-sizing: border-box;
            border-radius: 3px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
            font-size: 0.8em;
            white-space: normal;
            line-height: 20px;
        }

        .ui-sortable-placeholder {
            visibility: inherit !important;
            background: transparent;
            border: #666 2px dashed;
        }
    </style>
@endsection
@section('main')
@can('Kanban Board')
    <!-- Start Content-->
<div class="container-fluid">
                        
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>                        
                        <li class="breadcrumb-item active"><a href="{{ route('todo.index') }}">Manage To Do List</a></li>
                    </ol>
                </div>  
                <h4 class="page-title">To do list
                    @can('Add Task')
                        <a href="#" data-bs-toggle="modal" data-bs-target="#add-new-task-modal" class="btn btn-success btn-sm ms-3">Add</a>
                    @endcan
                    @can('Recycle Task')
                        <a href="{{ route('todo.recycle') }}" class="btn btn-primary btn-sm ms-3"><i class="mdi mdi-recycle-variant"></i></a>
                    @endcan
                    
                </h4>             
            </div>
        </div>
    </div>     
    <!-- end page title --> 

    

    <div class="row">
        <div class="col-12">
            <div class="task-board">
                @foreach ($cardstatus as $row )
                    <div class="status-card">
                        <div class="card-header">
                            <span class="card-header-text text-uppercase text-center">{{ $row->status_name }}</span>

                            <ul class="sortable ui-sortable" id="sort{{ $row->id }}" data-status-id={{ $row->id }}>
                                @if (!empty($row->Tasks))
                                    @foreach ($row->Tasks as $val)
                                        @if ($val->cardstatus_id == $row->id)
                                        <li class="text-row ui-sortable-handle" data-task-id="{{ $val->id }}">
                                            <div>                                                                                               
                                                <div class="card-body p-3">
                                                    <small class="float-end text-muted">{{ Carbon\Carbon::parse($val->duedate)->isoFormat('D MMMM Y') }}</small>
                                                    @if ($val->status == 'Low')
                                                        <span class="badge bg-success">Low</span>
                                                    @elseif ($val->status == 'Medium')
                                                        <span class="badge bg-warning">Low</span>
                                                    @else
                                                        <span class="badge bg-danger">High</span>
                                                    @endif

                                                    <h5 class="mt-2 mb-2">
                                                        <a href="#centermodal-{{ $val->id }}" data-bs-toggle="modal" data-bs-target="#task-detail-modaltodo-{{ $val->id }}" class="text-body">{{ $val->task_name }}</a>
                                                    </h5>

                                                    <div class="modal fade task-modal-content" id="task-detail-modaltodo-{{ $val->id }}" tabindex="-1" role="dialog" aria-labelledby="TaskDetailModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h4 class="modal-title" id="TaskDetailModalLabel">{{ $val->task_name }}
                                                                        @if ($val->status == 'Low')
                                                                            <span class="badge bg-success">Low</span>
                                                                        @elseif ($val->status == 'Medium')
                                                                            <span class="badge bg-warning">Low</span>
                                                                        @else
                                                                            <span class="badge bg-danger">High</span>
                                                                        @endif
                                                                    </h4>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                
                                                                    <div class="p-2">
                                                                        <h5 class="mt-0">Description:</h5>
                                                
                                                                        <p class="text-muted mb-4">
                                                                            {!! $val->description !!}
                                                                        </p>
                
                                                                        <h5 class="mt-0">Project Relation:</h5>
                                                
                                                                        <p class="text-muted mb-4">
                                                                        {{ $val->project->project_name??'' }}
                                                                        </p>
                                                
                                                                        <div class="row">
                                                                            <div class="col-md-4">
                                                                                <div class="mb-4">
                                                                                    <h5>Created Date</h5>
                                                                                    <p>{{ Carbon\Carbon::parse($val->created_at)->isoFormat('D MMMM Y') }}</p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-4">
                                                                                <div class="mb-4">
                                                                                    <h5><span class="text-danger">Due Date</span></h5>
                                                                                    <p>{{ Carbon\Carbon::parse($val->duedate)->isoFormat('D MMMM Y') }}</p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-4">
                                                                                <div class="mb-4" id="tooltip-container">
                                                                                    <h5>Created By:</h5>
                                                                                    {{ $val->createdby->name }}
                                                                                </div>
                                                                            </div>
                                                                        </div>                                                                                                                   
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <p class="mb-0">
                                                        <span class="pe-2 text-nowrap mb-2 d-inline-block">
                                                            <i class="mdi mdi-briefcase-outline text-muted"></i>
                                                            {{ $val->project->project_name??'' }}
                                                        </span>
                                                    </p>

                                                    <p class="mb-0">                                        
                                                        <span class="align-middle">{{ $val->createdby->name }}</span>
                                                    </p>
                                                    <div class="float-end">    
                                                        @can('Delete Task')
                                                            <a href="{{ route('todo.softdelete',encrypt($val->id)) }}" id="delete"><i class="mdi mdi-trash-can-outline text-danger"></i></a>&nbsp;
                                                        @endcan   
                                                        @can('Update Task')
                                                        <a href="#centermodal-{{ $val->id }}" data-bs-toggle="modal" data-bs-target="#edit-task-modal-{{ $val->id }}"><i class="mdi mdi-pencil-outline"></i></a>
                                                        <div class="modal fade task-modal-content" id="edit-task-modal-{{ $val->id }}" tabindex="-1" role="dialog" aria-labelledby="NewTaskModalLabel" aria-hidden="true">
                                                            <div class="modal-dialog modal-dialog-centered modal-lg">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h4 class="modal-title" id="NewTaskModalLabel">Edit Task</h4>
                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                    </div>                                                                    
                                                                    <div class="modal-body">
                                                                        <form class="p-2" action="{{ route('todo.update') }}" method="POST" enctype="multipart/form-data">
                                                                            @csrf
                                                                            {{-- <div class="mb-3">
                                                                                <label class="form-label">Project</label>
                                                                                <select class="form-select form-control-light" name="project_id">
                                                                                    <option>Select</option>
                                                                                    @foreach ($pj as $row )
                                                                                    <option value="{{ $row->id }}"@if($val->project_id == $row->id)selected @endif>{{ $row->project_name }}</option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div> --}}
                                                                            <input type="hidden" value="{{ $val->id }}" name="idtask">
                                                                            <input type="hidden" value="{{ $val->cardstatus_id }}" name="cardstatus_id">
                                                                            <div class="row">
                                                                                <div class="mb-3">
                                                                                    <label class="form-label">Project</label>
                                                                                    <select class="form-select form-control-light" name="project_id">
                                                                                        <option>Select</option>
                                                                                        @foreach ($pj as $row )
                                                                                        <option value="{{ $row->id }}" {{ $row->id == $val->project_id ? 'selected' : '' }}>{{ $row->project_name }}</option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                                <div class="col-md-8">
                                                                                    <div class="mb-3">
                                                                                        <label for="task-title" class="form-label">Title<span class="text-danger">*</span></label>
                                                                                        <input type="text" name="task_name" class="form-control form-control-light" id="task-title" value="{{ $val->task_name }}" required>
                                                                                    </div>
                                                                                </div>
                
                                                                                <div class="col-md-4">
                                                                                    <div class="mb-3">
                                                                                        <label for="task-priority2" class="form-label">Priority</label>
                                                                                        <select class="form-select form-control-light" id="task-priority2" name="status">
                                                                                            <option value="Low" @if($val->status == 'Low')selected @endif>Low</option>
                                                                                            <option value="Medium" @if($val->status == 'Medium')selected @endif>Medium</option>
                                                                                            <option value="High" @if($val->status == 'High')selected @endif>High</option>
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                
                                                                            <div class="mb-3">
                                                                                <label for="task-description" class="form-label">Description</label>
                                                                                <textarea class="form-control form-control-light" id="task-description" rows="3" name="description">{!! $val->description !!}</textarea>
                                                                            </div>
                
                                                                            <div class="row">
                                                                                <div class="col-md-6">                               
                                                                                    <div class="mb-3" id="datepicker1">
                                                                                        <label for="task-priority" class="form-label">Due Date<span class="text-danger">*</span></label>
                                                                                        <input type="text" class="form-control date" data-provide="datepicker" data-date-container="#datepicker1" name="duedate" value="{{ $val->duedate }}" required>                                                                                        
                                                                                    </div>
                                                                                    
                                                                                </div>
                                                                                <div class="col-md-6 cal">                                
                                                                                    <i class="mdi mdi-calendar"></i>
                                                                                </div>
                                                                            </div>
                                                                            
                                                                            <div class="text-end">
                                                                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                                                                                <button type="submit" class="btn btn-primary">Update</button>
                                                                            </div>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>                                        
                                                            
                                                        @endcan                                 
                                                        
                                                    </div>
                                                </div> 
                                            </div>                                           
                                        </li>
                                        @endif                                                                              
                                    @endforeach                                    
                                @endif
                            </ul>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

 

    <!-- end row-->
    <div class="modal fade task-modal-content" id="add-new-task-modal" tabindex="-1" role="dialog" aria-labelledby="NewTaskModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="NewTaskModalLabel">Create New Task</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="p-2" action="{{ route('todo.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Project</label>
                            <select class="form-select form-control-light" name="project_id">
                                <option>Select</option>
                                @foreach ($pj as $val )
                                <option value="{{ $val->id }}">{{ $val->project_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="task-title" class="form-label">Title<span class="text-danger">*</span></label>
                                    <input type="text" name="task_name" class="form-control form-control-light" id="task-title" placeholder="Enter title" required>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="task-priority2" class="form-label">Priority</label>
                                    <select class="form-select form-control-light" id="task-priority2" name="status">
                                        <option value="Low">Low</option>
                                        <option value="Medium">Medium</option>
                                        <option value="High">High</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="task-description" class="form-label">Description</label>
                            <textarea class="form-control form-control-light" id="task-description" rows="3" name="description"></textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6">          
                                    <div class="mb-3" id="datepicker1">
                                        <label for="task-priority" class="form-label">Due Date<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control date" data-provide="datepicker" data-date-container="#datepicker1" name="duedate" required>                                        
                                    </div>
                            </div>
                            <div class="col-md-6 cal">                                
                                <i class="mdi mdi-calendar"></i>
                            </div>
                        </div>
                        
                        <div class="text-end">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    


    
</div> <!-- container -->
@endcan

@endsection
@section('js')
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/app.min.js') }}"></script>    
    {{-- <script src="{{ asset('backend/assets/js/vendor/jquery.dataTables.min.js') }}"></script> --}}
    {{-- <script src="{{ asset('backend/assets/js/vendor/dataTables.bootstrap5.js') }}"></script> --}}
    {{-- <script src="{{ asset('backend/assets/js/vendor/dataTables.responsive.min.js') }}"></script> --}}
    {{-- <script src="{{ asset('backend/assets/js/vendor/responsive.bootstrap5.min.js') }}"></script> --}}
    {{-- <script src="{{ asset('backend/assets/js/pages/demo.datatable-init.js') }}"></script> --}}
    <script src="{{ asset('backend/assets/js/toastr.js') }}"></script>
    <script src="{{ asset('backend/assets/js/sweetalert2.all.min.js') }}"></script>
    {{-- <script src="{{ asset('backend/assets/js/vendor/dragula.min.js') }}"></script> --}}
    {{-- <script src="{{ asset('backend/assets/js/ui/component.dragula.js') }}"></script> --}}
    <script src="{{ asset('backend/assets/js/pages/demo.timepicker.js') }}"></script> 
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
     
    {{-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> --}}
    <script src="{{ asset('datepicker/bootstrap-datepicker.js') }}"></script>
    <script src="{{ asset('jqueryui113/jquery-ui.min.js') }}"></script>
    <script nonce="{{ csp_nonce() }}">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $( function() {
            var url = "{{ route('todo.update-status') }}";
            $('ul[id^="sort"]').sortable({
                connectWith: ".sortable",
                receive: function (e, ui) {
                    var status_id = $(ui.item).parent(".sortable").data("status-id");
                    var task_id = $(ui.item).data("task-id");
                    var task_ids = [];
                    $('#sort'+status_id+' li').each(function(){
                        var a = $(this).data("task-id");
                        task_ids.push(a);
                        console.log(a);
                    })
                    $.ajax({
                        url: url,
                        method: 'post',
                        data: 'status_id='+status_id+'&task_id='+task_ids,
                        success: function(response){
                            }
                    });
                    }
            
            }).disableSelection();
            } );
    
        $('.date').datepicker({  
            format: 'yyyy-mm-dd'
        });
    </script>
    <script nonce="{{ csp_nonce() }}">
        $(function() {           
            $(document).on('click', '#delete', function(e) {
                e.preventDefault();
                var link = $(this).attr("href");
                Swal.fire({
                    title: 'Are You Sure?',
                    text: "Delete this task?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes!',
                    cancelButtonText: 'Cancel!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = link
                        Swal.fire(
                            'Deleted!',
                            'Your file has been deleted.',
                            'success'
                        )
                    }
                })
            });

        });
    </script>
    
@endsection