544 lines
46 KiB
PHP
544 lines
46 KiB
PHP
@extends('layout.layout')
|
|
|
|
@php
|
|
$title='Kanban';
|
|
$subTitle = 'Kanban';
|
|
$script = '<script>
|
|
$(function() {
|
|
$("#sortable-wrapper").sortable();
|
|
});
|
|
|
|
$(function() {
|
|
$("#sortable1, #sortable2, #sortable3").sortable({
|
|
connectWith: ".connectedSortable"
|
|
}).disableSelection();
|
|
});
|
|
</script>
|
|
|
|
<!--=========================== Delete & Duplicate js code start ==============================-->
|
|
<script>
|
|
// Duplicate Item js
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
document.querySelectorAll(".duplicate-button").forEach(button => {
|
|
button.addEventListener("click", function() {
|
|
// Find the closest card to the clicked button
|
|
const card = this.closest(".kanban-item");
|
|
// Clone the card
|
|
const clone = card.cloneNode(true);
|
|
// Append the cloned card to the parent container
|
|
card.parentNode.appendChild(clone);
|
|
|
|
// Add event listener to delete button of the cloned card
|
|
clone.querySelector(".delete-button").addEventListener("click", function() {
|
|
clone.remove();
|
|
});
|
|
});
|
|
});
|
|
|
|
$(document).on("click", ".delete-button", function() {
|
|
$(this).closest(".kanban-item").addClass("hidden");
|
|
});
|
|
});
|
|
</script>
|
|
<!--=========================== Delete & Duplicate js code End ==============================-->
|
|
|
|
<!--=========================== Add new Task & Edit Task js code Start ==============================-->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Show the modal to add a new task
|
|
document.querySelectorAll(".add-kanban, .add-task-button").forEach(button => {
|
|
button.addEventListener("click", function() {
|
|
var addTaskModal = new bootstrap.Modal(document.getElementById("addTaskModal"));
|
|
document.getElementById("editTaskId").value = ""; // Clear edit ID
|
|
document.getElementById("taskTitle").value = ""; // Clear title
|
|
document.getElementById("taskDescription").value = ""; // Clear description
|
|
document.getElementById("taskTag").value = ""; // Clear Tag
|
|
document.getElementById("startDate").value = ""; // Clear Date
|
|
document.getElementById("taskImage").value = ""; // Clear file input
|
|
document.getElementById("taskImagePreview").style.display = "none"; // Hide image preview
|
|
document.getElementById("taskImagePreview").src = ""; // Clear image preview
|
|
addTaskModal.show();
|
|
});
|
|
});
|
|
|
|
// Preview the image when a file is selected
|
|
document.getElementById("taskImage").addEventListener("change", function() {
|
|
var file = this.files[0];
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
document.getElementById("taskImagePreview").src = e.target.result;
|
|
document.getElementById("taskImagePreview").style.display = "block";
|
|
};
|
|
if (file) {
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// Save task button click handler
|
|
document.getElementById("saveTaskButton").addEventListener("click", function() {
|
|
var title = document.getElementById("taskTitle").value;
|
|
var description = document.getElementById("taskDescription").value;
|
|
var tag = document.getElementById("taskTag").value;
|
|
var date = document.getElementById("startDate").value;
|
|
var editTaskId = document.getElementById("editTaskId").value;
|
|
var imageSrc = document.getElementById("taskImagePreview").src;
|
|
|
|
if (title === "" || description === "") {
|
|
alert("Title and Description cannot be empty");
|
|
return;
|
|
}
|
|
|
|
var kanbanCardHTML = `
|
|
<div class="kanban-card bg-neutral-50 p-16 radius-8 mb-24" id="${editTaskId ? editTaskId : "kanban-" + new Date().getTime()}">
|
|
${imageSrc ? `<div class="radius-8 mb-12 max-h-350-px overflow-hidden"><img src="${imageSrc}" alt="" class="w-100 h-100 object-fit-cover"></div>` : ""}
|
|
<h6 class="kanban-title text-lg fw-semibold mb-8">${title}</h6>
|
|
<p class="kanban-desc text-secondary-light">${description}</p>
|
|
<button type="button" class="start-date btn text-primary-600 border rounded border-primary-600 bg-hover-primary-600 text-hover-white d-flex align-items-center gap-2">
|
|
<iconify-icon icon="lucide:tag" class="icon"></iconify-icon> <span class="kanban-tag fw-semibold">${tag}</span>
|
|
</button>
|
|
<div class="mt-12 d-flex align-items-center justify-content-between gap-10">
|
|
<div class="d-flex align-items-center justify-content-between gap-10">
|
|
<iconify-icon icon="solar:calendar-outline" class="text-primary-light"></iconify-icon>
|
|
<span class="start-date text-secondary-light">${date}</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between gap-10">
|
|
<button type="button" class="card-edit-button text-success-600"><iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon></button>
|
|
<button type="button" class="card-delete-button text-danger-600"><iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
if (editTaskId) {
|
|
// Edit existing card
|
|
var editCard = document.getElementById(editTaskId);
|
|
if (editCard) {
|
|
editCard.outerHTML = kanbanCardHTML;
|
|
}
|
|
} else {
|
|
// Add new card
|
|
var targetKanbanItem = document.querySelector(".kanban-item");
|
|
if (targetKanbanItem) {
|
|
var firstKanbanCard = targetKanbanItem.querySelector(".card-body .kanban-card");
|
|
if (firstKanbanCard) {
|
|
firstKanbanCard.insertAdjacentHTML("beforebegin", kanbanCardHTML);
|
|
} else {
|
|
targetKanbanItem.querySelector(".card-body").insertAdjacentHTML("afterbegin", kanbanCardHTML);
|
|
}
|
|
}
|
|
}
|
|
|
|
var addTaskModal = bootstrap.Modal.getInstance(document.getElementById("addTaskModal"));
|
|
addTaskModal.hide();
|
|
});
|
|
|
|
// Delegate edit and delete button events to dynamically added kanban cards
|
|
document.addEventListener("click", function(e) {
|
|
if (e.target.closest(".card-edit-button")) {
|
|
var card = e.target.closest(".kanban-card");
|
|
document.getElementById("taskTitle").value = card.querySelector(".kanban-title").textContent;
|
|
document.getElementById("taskDescription").value = card.querySelector(".kanban-desc").textContent;
|
|
document.getElementById("taskTag").value = card.querySelector(".kanban-tag").textContent;
|
|
document.getElementById("startDate").value = card.querySelector(".start-date").textContent;
|
|
document.getElementById("editTaskId").value = card.id;
|
|
var img = card.querySelector("img");
|
|
if (img) {
|
|
document.getElementById("taskImagePreview").src = img.src;
|
|
document.getElementById("taskImagePreview").style.display = "block";
|
|
} else {
|
|
document.getElementById("taskImagePreview").style.display = "none";
|
|
document.getElementById("taskImagePreview").src = "";
|
|
}
|
|
|
|
var addTaskModal = new bootstrap.Modal(document.getElementById("addTaskModal"));
|
|
addTaskModal.show();
|
|
}
|
|
if (e.target.closest(".card-delete-button")) {
|
|
var card = e.target.closest(".kanban-card");
|
|
if (card) {
|
|
card.remove();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="grid grid-cols-12">
|
|
<div class="col-span-12">
|
|
<div class="overflow-x-auto scroll-sm pb-8">
|
|
<div class="kanban-wrapper min-w-[1560px]">
|
|
<div class="flex items-start gap-6" id="sortable-wrapper">
|
|
<div class="w-[25%] kanban-item rounded-xl progress-card">
|
|
<div class="card p-0 rounded-xl overflow-hidden shadow-none border-0">
|
|
<div class="card-body p-0 pb-6">
|
|
<div class="flex items-center gap-2 justify-between ps-6 pt-6 pe-6">
|
|
<h6 class="text-lg font-semibold mb-0">In Progress</h6>
|
|
<div class="flex items-center gap-3 justify-between mb-0">
|
|
<button type="button" class="text-2xl hover-text-primary add-task-button flex" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="ph:plus-circle" class="icon"></iconify-icon>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button data-dropdown-toggle="dropdown1" class="text-neutral-800 flex text-lg dark:text-white" type="button">
|
|
<i class="ri-more-2-fill"></i>
|
|
</button>
|
|
|
|
<div id="dropdown1" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
|
|
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2 duplicate-button">
|
|
<iconify-icon class="text-xl" icon="humbleicons:duplicate"></iconify-icon>
|
|
Duplicate
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2 delete-button">
|
|
<iconify-icon class="text-xl" icon="mingcute:delete-2-line"></iconify-icon>
|
|
Delete
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="connectedSortable ps-6 pt-6 pe-6" id="sortable1">
|
|
<div class="kanban-card bg-neutral-50 dark:bg-dark-3 p-4 rounded-lg mb-6" id="kanban-1">
|
|
<div class="rounded-lg mb-3 max-h-[350px] overflow-hidden">
|
|
<img src="{{ asset('assets/images/kanban/kanban-1.png') }}" alt="" class="w-full h-full object-fit-cover">
|
|
</div>
|
|
<h6 class="kanban-title text-lg font-semibold mb-2">Creating a new website</h6>
|
|
<p class="kanban-desc text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
|
|
<button type="button" class="btn text-primary-600 border rounded border-primary-600 bg-hover-primary-600 text-hover-white flex items-center gap-2 my-3">
|
|
<iconify-icon icon="lucide:tag" class="icon"></iconify-icon>
|
|
<span class="kanban-tag font-semibold">UI Design</span>
|
|
</button>
|
|
<div class="mt-3 flex items-center justify-between gap-2.5">
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<iconify-icon icon="solar:calendar-outline" class="text-neutral-600 dark:text-neutral-200"></iconify-icon>
|
|
<span class="start-date text-secondary-light">25 Aug 2024</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<button type="button" class="card-edit-button text-success-600" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
<button type="button" class="card-delete-button text-danger-600">
|
|
<iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="kanban-card bg-neutral-50 dark:bg-dark-3 p-4 rounded-lg mb-6" id="kanban-2">
|
|
<div class="rounded-lg mb-3 max-h-[350px] overflow-hidden">
|
|
<img src="{{ asset('assets/images/kanban/kanban-2.png') }}" alt="" class="w-full h-full object-fit-cover">
|
|
</div>
|
|
<h6 class="kanban-title text-lg font-semibold mb-2">Creating a new website</h6>
|
|
<p class="kanban-desc text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
|
|
<button type="button" class="btn text-primary-600 border rounded border-primary-600 bg-hover-primary-600 text-hover-white flex items-center gap-2 my-3">
|
|
<iconify-icon icon="lucide:tag" class="icon"></iconify-icon>
|
|
<span class="kanban-tag font-semibold">UI Design</span>
|
|
</button>
|
|
<div class="mt-3 flex items-center justify-between gap-2.5">
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<iconify-icon icon="solar:calendar-outline" class="text-neutral-600 dark:text-neutral-200"></iconify-icon>
|
|
<span class="start-date text-secondary-light">25 Aug 2024</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<button type="button" class="card-edit-button text-success-600" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
<button type="button" class="card-delete-button text-danger-600">
|
|
<iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Add Task Button -->
|
|
<button type="button" class="flex items-center gap-2 font-medium w-full text-primary-600 justify-center text-hover-primary-800 add-task-button" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="ph:plus-circle" class="icon text-xl"></iconify-icon>
|
|
Add Task
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[25%] kanban-item rounded-xl pending-card">
|
|
<div class="card p-0 rounded-xl overflow-hidden shadow-none border-0">
|
|
<div class="card-body p-0 pb-6">
|
|
<div class="flex items-center gap-2 justify-between ps-6 pt-6 pe-6">
|
|
<h6 class="text-lg font-semibold mb-0">Pending</h6>
|
|
<div class="flex items-center gap-3 justify-between mb-0">
|
|
<button type="button" class="text-2xl hover-text-primary add-task-button flex" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="ph:plus-circle" class="icon"></iconify-icon>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button data-dropdown-toggle="dropdown2" class="text-neutral-800 flex text-lg dark:text-white" type="button">
|
|
<i class="ri-more-2-fill"></i>
|
|
</button>
|
|
|
|
<div id="dropdown2" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
|
|
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
|
|
<iconify-icon class="text-xl" icon="humbleicons:duplicate"></iconify-icon>
|
|
Duplicate
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
|
|
<iconify-icon class="text-xl" icon="mingcute:delete-2-line"></iconify-icon>
|
|
Delete
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connectedSortable ps-6 pt-6 pe-6" id="sortable2">
|
|
<div class="kanban-card bg-neutral-50 dark:bg-dark-3 p-4 rounded-lg mb-6" id="kanban-3">
|
|
<h6 class="kanban-title text-lg font-semibold mb-2">Creating a new website</h6>
|
|
<p class="kanban-desc text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
|
|
<button type="button" class="btn text-primary-600 border rounded border-primary-600 bg-hover-primary-600 text-hover-white flex items-center gap-2 my-3">
|
|
<iconify-icon icon="lucide:tag" class="icon"></iconify-icon>
|
|
<span class="kanban-tag font-semibold">UI Design</span>
|
|
</button>
|
|
<div class="mt-3 flex items-center justify-between gap-2.5">
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<iconify-icon icon="solar:calendar-outline" class="text-neutral-600 dark:text-neutral-200"></iconify-icon>
|
|
<span class="start-date text-secondary-light">25 Aug 2024</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<button type="button" class="card-edit-button text-success-600" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
<button type="button" class="card-delete-button text-danger-600">
|
|
<iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="kanban-card bg-neutral-50 dark:bg-dark-3 p-4 rounded-lg mb-6" id="kanban-4">
|
|
<div class="rounded-lg mb-3 max-h-[350px] overflow-hidden">
|
|
<img src="{{ asset('assets/images/kanban/kanban-2.png') }}" alt="" class="w-full h-full object-fit-cover">
|
|
</div>
|
|
<h6 class="kanban-title text-lg font-semibold mb-2">Creating a new website</h6>
|
|
<p class="kanban-desc text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
|
|
<button type="button" class="btn text-primary-600 border rounded border-primary-600 bg-hover-primary-600 text-hover-white flex items-center gap-2 my-3">
|
|
<iconify-icon icon="lucide:tag" class="icon"></iconify-icon>
|
|
<span class="kanban-tag font-semibold">UI Design</span>
|
|
</button>
|
|
<div class="mt-3 flex items-center justify-between gap-2.5">
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<iconify-icon icon="solar:calendar-outline" class="text-neutral-600 dark:text-neutral-200"></iconify-icon>
|
|
<span class="start-date text-secondary-light">25 Aug 2024</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<button type="button" class="card-edit-button text-success-600" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
<button type="button" class="card-delete-button text-danger-600">
|
|
<iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Add Task Button -->
|
|
<button type="button" class="flex items-center gap-2 font-medium w-full text-primary-600 justify-center text-hover-primary-800 add-task-button" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="ph:plus-circle" class="icon text-xl"></iconify-icon>
|
|
Add Task
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[25%] kanban-item rounded-xl done-card">
|
|
<div class="card p-0 rounded-xl overflow-hidden shadow-none border-0">
|
|
<div class="card-body p-0 pb-6">
|
|
<div class="flex items-center gap-2 justify-between ps-6 pt-6 pe-6">
|
|
<h6 class="text-lg font-semibold mb-0">Done</h6>
|
|
<div class="flex items-center gap-3 justify-between mb-0">
|
|
<button type="button" class="text-2xl hover-text-primary add-task-button flex" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="ph:plus-circle" class="icon"></iconify-icon>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button data-dropdown-toggle="dropdown3" class="text-neutral-800 flex text-lg dark:text-white" type="button">
|
|
<i class="ri-more-2-fill"></i>
|
|
</button>
|
|
|
|
<div id="dropdown3" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-neutral-100 dark:border-neutral-600 w-44 dark:bg-gray-700">
|
|
<ul class="p-2 text-sm text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<button type="submit" class="w-full text-start px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-600 rounded dark:hover:text-white flex items-center gap-2">
|
|
<iconify-icon class="text-xl" icon="humbleicons:duplicate"></iconify-icon>
|
|
Duplicate
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" class="w-full text-start px-4 py-2.5 hover:bg-danger-100 dark:hover:bg-danger-600/25 rounded hover:text-danger-500 dark:hover:text-danger-600 flex items-center gap-2">
|
|
<iconify-icon class="text-xl" icon="mingcute:delete-2-line"></iconify-icon>
|
|
Delete
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connectedSortable ps-6 pt-6 pe-6" id="sortable3">
|
|
<div class="kanban-card bg-neutral-50 dark:bg-dark-3 p-4 rounded-lg mb-6" id="kanban-5">
|
|
<h6 class="kanban-title text-lg font-semibold mb-2">Creating a new website</h6>
|
|
<p class="kanban-desc text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
|
|
<button type="button" class="btn text-primary-600 border rounded border-primary-600 bg-hover-primary-600 text-hover-white flex items-center gap-2 my-3">
|
|
<iconify-icon icon="lucide:tag" class="icon"></iconify-icon>
|
|
<span class="kanban-tag font-semibold">UI Design</span>
|
|
</button>
|
|
<div class="mt-3 flex items-center justify-between gap-2.5">
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<iconify-icon icon="solar:calendar-outline" class="text-neutral-600 dark:text-neutral-200"></iconify-icon>
|
|
<span class="start-date text-secondary-light">25 Aug 2024</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<button type="button" class="card-edit-button text-success-600" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
<button type="button" class="card-delete-button text-danger-600">
|
|
<iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="kanban-card bg-neutral-50 dark:bg-dark-3 p-4 rounded-lg mb-6" id="kanban-6">
|
|
<h6 class="kanban-title text-lg font-semibold mb-2">Creating a new website</h6>
|
|
<p class="kanban-desc text-secondary-light">Lorem ipsum dolor sit amet, consectetur </p>
|
|
<button type="button" class="btn text-primary-600 border rounded border-primary-600 bg-hover-primary-600 text-hover-white flex items-center gap-2 my-3">
|
|
<iconify-icon icon="lucide:tag" class="icon"></iconify-icon>
|
|
<span class="kanban-tag font-semibold">UI Design</span>
|
|
</button>
|
|
<div class="mt-3 flex items-center justify-between gap-2.5">
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<iconify-icon icon="solar:calendar-outline" class="text-neutral-600 dark:text-neutral-200"></iconify-icon>
|
|
<span class="start-date text-secondary-light">25 Aug 2024</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<button type="button" class="card-edit-button text-success-600" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
<button type="button" class="card-delete-button text-danger-600">
|
|
<iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="kanban-card bg-neutral-50 dark:bg-dark-3 p-4 rounded-lg mb-6" id="kanban-7">
|
|
<div class="rounded-lg mb-3 max-h-[350px] overflow-hidden">
|
|
<img src="{{ asset('assets/images/kanban/kanban-2.png') }}" alt="" class="w-full h-full object-fit-cover">
|
|
</div>
|
|
<h6 class="kanban-title text-lg font-semibold mb-2">Creating a new website</h6>
|
|
<p class="kanban-desc text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
|
|
<button type="button" class="btn text-primary-600 border rounded border-primary-600 bg-hover-primary-600 text-hover-white flex items-center gap-2 my-3">
|
|
<iconify-icon icon="lucide:tag" class="icon"></iconify-icon>
|
|
<span class="kanban-tag font-semibold">UI Design</span>
|
|
</button>
|
|
<div class="mt-3 flex items-center justify-between gap-2.5">
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<iconify-icon icon="solar:calendar-outline" class="text-neutral-600 dark:text-neutral-200"></iconify-icon>
|
|
<span class="start-date text-secondary-light">25 Aug 2024</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<button type="button" class="card-edit-button text-success-600" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
<button type="button" class="card-delete-button text-danger-600">
|
|
<iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Task Button -->
|
|
<button type="button" class="flex items-center gap-2 font-medium w-full text-primary-600 justify-center text-hover-primary-800 add-task-button" data-modal-target="default-modal" data-modal-toggle="default-modal">
|
|
<iconify-icon icon="ph:plus-circle" class="icon text-xl"></iconify-icon>
|
|
Add Task
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[25%] kanban-item rounded-xl overflow-hidden">
|
|
<div class="card p-0 rounded-xl overflow-hidden shadow-none border-0">
|
|
<div class="card-body p-6">
|
|
<button type="button" data-modal-target="default-modal" data-modal-toggle="default-modal" class="add-kanban flex items-center gap-2 font-medium w-full text-primary-600 justify-center text-hover-primary-800 line-height-1">
|
|
<iconify-icon icon="ph:plus-circle" class="icon text-xl flex"></iconify-icon>
|
|
Add Task
|
|
</button>
|
|
<!-- Modal toggle -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main modal -->
|
|
<div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
|
|
<div class="relative p-4 w-full max-w-2xl max-h-full">
|
|
<div class="relative bg-white rounded-lg shadow dark:bg-dark-2">
|
|
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add New Task </h3>
|
|
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
|
</svg>
|
|
<span class="sr-only">Close modal</span>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 md:p-5 space-y-4">
|
|
<form id="taskForm">
|
|
<input type="hidden" id="editTaskId" value="">
|
|
<div class="mb-3">
|
|
<label for="taskTitle" class="inline-block font-semibold text-neutral-600 dark:text-neutral-200 text-sm mb-2">Title</label>
|
|
<input type="text" class="form-control" placeholder="Enter Event Title " id="taskTitle" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="taskTag" class="inline-block font-semibold text-neutral-600 dark:text-neutral-200 text-sm mb-2">Tag</label>
|
|
<input type="text" class="form-control" placeholder="Enter tag" id="taskTag" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="startDate" class="inline-block font-semibold text-neutral-600 dark:text-neutral-200 text-sm mb-2">Start Date</label>
|
|
<input type="date" class="form-control" id="startDate" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="taskDescription" class="inline-block font-semibold text-neutral-600 dark:text-neutral-200 text-sm mb-2">Description</label>
|
|
<textarea class="form-control" id="taskDescription" rows="3" placeholder="Write some text" required></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="taskImage" class="inline-block font-semibold text-neutral-600 dark:text-neutral-200 text-sm mb-2">Attachments <span class="text-sm">(Jpg, Png format)</span> </label>
|
|
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="taskImage" type="file">
|
|
<img id="taskImagePreview" src="{{ asset('assets/images/carousel/carousel-img1.png') }}" alt="Image Preview">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="flex items-center gap-4 p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
|
|
<button type="button" data-modal-hide="default-modal" class="border border-danger-600 bg-hover-danger-200 text-danger-600 text-base px-[50px] py-[11px] rounded-lg" data-bs-dismiss="modal">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-primary border border-primary-600 text-base px-7 py-3 rounded-lg" id="saveTaskButton">
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
|
|
|