@extends('layouts.dash')

@section('content')
<!--begin::Main-->
				<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
					<!--begin::Content wrapper-->
					<div class="d-flex flex-column flex-column-fluid">
						<!--begin::Toolbar-->
						<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
							<!--begin::Toolbar container-->
							<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
								<!--begin::Page title-->
								<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
									<!--begin::Title-->
									<h1
										class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
										Task Template</h1>
									<!--end::Title-->
									<!--begin::Breadcrumb-->
                                    <div id="alert-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999; display: none;"></div>
								</div>
								<!--end::Page title-->
							</div>
							<!--end::Toolbar container-->
						</div>
						<!--end::Toolbar-->
						<!--begin::Content-->
						<div id="kt_app_content" class="app-content flex-column-fluid">
							<!--begin::Content container-->
							<div id="kt_app_content_container" class="app-container container-xxl">
							 
								<!--begin::Card-->
								<div class="card">
									<!--begin::Card header-->
									<div class="card-header border-0 pt-6">
										<!--begin::Card title-->
										<div class="card-title">
											<!--begin::Search-->
											<!--<div class="d-flex align-items-center position-relative my-1">-->
											<!--	<i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">-->
											<!--		<span class="path1"></span>-->
											<!--		<span class="path2"></span>-->
											<!--	</i>-->
											<!--	<input type="text" data-kt-user-table-filter="search"-->
											<!--		class="form-control form-control-solid w-250px ps-13"-->
											<!--		placeholder="Search user" />-->
											<!--</div>-->
											<!--end::Search-->
										</div>
										<!--begin::Card title-->
										<!--begin::Card toolbar-->
										<div class="card-toolbar">
											<!--begin::Toolbar-->
											<div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
												
												<!--begin::Export-->
												<button type="button" class="btn btn-light-primary me-3"
													data-bs-toggle="modal" id="exportBtn">
													<i class="ki-duotone ki-exit-up fs-2">
														<span class="path1"></span>
														<span class="path2"></span>
													</i>Export</button>
												<!--end::Export-->
												<!--begin::Add user-->
												<button type="button" class="btn btn-primary" data-bs-toggle="modal"
													data-bs-target="#kt_modal_add_user" onclick="openTaskTemplateModal()">
													<i class="ki-duotone ki-plus fs-2"></i>New</button>
												<!--end::Add user-->
											</div>
											<!--end::Toolbar-->
											<!--begin::Group actions-->
											<div class="d-flex justify-content-end align-items-center d-none"
												data-kt-user-table-toolbar="selected">
												<div class="fw-bold me-5">
													<span class="me-2"
														data-kt-user-table-select="selected_count"></span>Selected
												</div>
												<button type="button" class="btn btn-danger"
													data-kt-user-table-select="delete_selected">Delete Selected</button>
											</div>
											<!--end::Group actions-->
											<!--begin::Modal - Adjust Balance-->
											<div class="modal fade" id="kt_modal_export_users" tabindex="-1"
												aria-hidden="true">
												<!--begin::Modal dialog-->
												<div class="modal-dialog modal-dialog-centered mw-650px">
													<!--begin::Modal content-->
													<div class="modal-content">
														<!--begin::Modal header-->
														<div class="modal-header">
															<!--begin::Modal title-->
															<h2 class="fw-bold">Export Users</h2>
															<!--end::Modal title-->
															<!--begin::Close-->
															<div class="btn btn-icon btn-sm btn-active-icon-primary"
																data-kt-users-modal-action="close">
																<i class="ki-duotone ki-cross fs-1">
																	<span class="path1"></span>
																	<span class="path2"></span>
																</i>
															</div>
															<!--end::Close-->
														</div>
														<!--end::Modal header-->
														<!--begin::Modal body-->
														<div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
															<!--begin::Form-->
															<form id="kt_modal_export_users_form" class="form"
																action="#">
																<!--begin::Input group-->
																<div class="fv-row mb-10">
																	<!--begin::Label-->
																	<label
																		class="fs-6 fw-semibold form-label mb-2">Select
																		Roles:</label>
																	<!--end::Label-->
																	<!--begin::Input-->
																	<select name="role" data-control="select2"
																		data-placeholder="Select a role"
																		data-hide-search="true"
																		class="form-select form-select-solid fw-bold">
																		<option></option>
																		<option value="Administrator">Administrator
																		</option>
																		<option value="Analyst">Analyst</option>
																		<option value="Developer">Developer</option>
																		<option value="Support">Support</option>
																		<option value="Trial">Trial</option>
																	</select>
																	<!--end::Input-->
																</div>
																<!--end::Input group-->
																<!--begin::Input group-->
																<div class="fv-row mb-10">
																	<!--begin::Label-->
																	<label
																		class="required fs-6 fw-semibold form-label mb-2">Select
																		Export Format:</label>
																	<!--end::Label-->
																	<!--begin::Input-->
																	<select name="format" data-control="select2"
																		data-placeholder="Select a format"
																		data-hide-search="true"
																		class="form-select form-select-solid fw-bold">
																		<option></option>
																		<option value="excel">Excel</option>
																		<option value="pdf">PDF</option>
																		<option value="cvs">CVS</option>
																		<option value="zip">ZIP</option>
																	</select>
																	<!--end::Input-->
																</div>
																<!--end::Input group-->
																<!--begin::Actions-->
																<div class="text-center">
																	<button type="reset" class="btn btn-light me-3"
																		data-kt-users-modal-action="cancel">Discard</button>
																	<button type="submit" class="btn btn-primary"
																		data-kt-users-modal-action="submit">
																		<span class="indicator-label">Submit</span>
																		<span class="indicator-progress">Please wait...
																			<span
																				class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
																	</button>
																</div>
																<!--end::Actions-->
															</form>
															<!--end::Form-->
														</div>
														<!--end::Modal body-->
													</div>
													<!--end::Modal content-->
												</div>
												<!--end::Modal dialog-->
											</div>
											<!--end::Modal - New Card-->
											<!--begin::Modal - Add task-->
											<div class="modal fade" id="kt_modal_task_template" tabindex="-1"
												aria-hidden="true">
												<!--begin::Modal dialog-->
												<div class="modal-dialog modal-fullscreen p-9">
													<!--begin::Modal content-->
													<div class="modal-content">
														<!--begin::Modal header-->
														<div class="modal-header" id="kt_modal_add_user_header">
															<!--begin::Modal title-->
															<h2 class="fw-bold" id="model_template_head">New Project Template Section</h2>
															<!--end::Modal title-->
															<!--begin::Close-->
															<div class="btn btn-icon btn-sm btn-active-icon-primary"
																data-bs-dismiss="modal">
																<i class="ki-duotone ki-cross fs-1">
																	<span class="path1"></span>
																	<span class="path2"></span>
																</i>
															</div>
															<!--end::Close-->
														</div>
														<!--end::Modal header-->
														<!--begin::Modal body-->
														<div class="modal-body px-5 my-7">
															<!--begin::Form-->
															<form id="kt_modal_template_form" class="form" action="{{ route('savetaskTemplate')}}" method="POST">
																@csrf
																<div class="mb-5">
																	<label for="projectTemplateName"
																		class="form-label">Project Template Name <span style="color: red;">*</span></label>
																	<input type="text" class="form-control" name="task_template_name"
																		id="task_template_name" value="" required />
																		<div id="validation-errors" style="color: red;"></div>
																</div>

																<h4>Tasks</h4>
																<div class="d-flex justify-content-end mb-3">
																	<button type="button" class="btn btn-primary"
																		data-bs-toggle="modal" data-bs-target="#kt_modal_new_task" id="TaskForm">+ New
																		Task</button>
																</div>
																<div class="table-responsive">
																	<!--begin::Table-->
																	<table class="table align-middle gs-0 gy-4 table-bodered" id="taskListsContainer">
																		<!--begin::Table head-->
																		<thead>
																			<tr class="fw-bold text-muted bg-light">
																				<th>Task Name</th>
																				<th>Task Dependency</th>
																				<th>Associated Team</th>
																				<th>Approval By level1</th>
																				<th>Approval By level2</th>
																				<th>Uploaded File</th>
																				<th>Items</th>
																				<th></th>
																				<th></th>
																			</tr>
																		</thead>

																		<tbody id="taskRows">
																			
																		</tbody>
																	</table>
																	<!--end::Table-->
																</div>
																<input type="hidden" id="taskArrayField" name="tasks" />
																<input type="hidden" id="template_id" name="template_id" />
																<!-- New Task Button -->


																<div class="text-center pt-10">
																	<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
																	<button type="submit" class="btn btn-primary" id="templatebtn">
																		<span class="indicator-label">Submit</span>
                                                                        <span class="indicator-progress">Please wait...
                                                                            <span
                                                                                class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
																	</button>
																</div>
															</form>
															<!--end::Form-->
														</div>
														<!--end::Modal body-->
													</div>
													<!--end::Modal content-->
												</div>
												<!--end::Modal dialog-->
											</div>

											<!-- New Task Modal -->
											<div class="modal fade" id="kt_modal_new_task" tabindex="-1"
												aria-hidden="true">
												<div class="modal-dialog modal-lg">
													<div class="modal-content">
														<div class="modal-header">
															<h5 class="modal-title" id="task_title">Add New Task</h5>
															<button type="button" class="btn-close"
																data-bs-dismiss="modal" aria-label="Close"></button>
														</div>
														<div class="modal-body">
															<!-- New Task Form -->
															<form id="new_task_form" enctype="multipart/form-data">
																<div class="row">
																	<div class="col-md-6 mb-3">
																		<label for="taskName" class="form-label">Task
																			Name <span style="color: red;">*</span></label>
																		<input type="text" class="form-control" name="task_name"
																			id="task_name" required/>
																		<span id="tname-error" class="text-danger"></span>
																	</div>
																	<div class="col-md-6 mb-3">
																		<label for="taskDependency"
																			class="form-label">Task Description</label>
																		<input type="text" class="form-control" name="task_dependency"
																			id="task_dependency"/>
																	</div>
																</div>

																<div class="row">
																	<div class="col-md-6 mb-3">
																		<label for="associatedTeam"
																			class="form-label">Assigned To <span style="color: red;">*</span></label>
																		<!--<input type="text" class="form-control" name="associated_team"
																			id="associated_team" />-->

																		<select name="associated_team" id="associated_team" required class="form-control" required>
																			<option value="">Select a Team</option>
																			<option value="DistrictCoordinator">DistrictCoordinator</option>
																			<option value="contractor">contractor</option>
																			<option value="delivery_agent">delivery_agent</option>	
																		</select>
																		<span id="tassign-error" class="text-danger"></span>
																	</div>
																	<div class="col-md-6 mb-3">
																		<label for="approvalBy1"
																			class="form-label">Approval By Level
																			1</label>
																		<!--<input type="text" class="form-control" name="approval_by_level_1"
																			id="approval_by_level_1"  />-->
																			<select name="approval_by_level_1" id="approval_by_level_1" class="form-control">
																			    <option value="">Select a Team</option>
																				<option value="district_coordinator">District coordinator</option>
																				<option value="state_coordinator">State coordinator</option>
																			</select>
																			<span id="tapp1-error" class="text-danger"></span>
																	</div>
																</div>

																<div class="row">
																	<div class="col-md-6 mb-3">
																		<label for="approvalBy2"
																			class="form-label">Approval By Level
																			2</label>
																		
																		<select name="approval_by_level_2" id="approval_by_level_2" class="form-control">
																		    <option value="">Select a Team</option>
																			<option value="district_coordinator">District Coordinator</option>
																			<option value="state_coordinator">State Coordinator</option>
																		</select>
																		<span id="tapp2-error" class="text-danger"></span>
																		<!--<input type="text" class="form-control" name="approval_by_level_2"
																			id="approval_by_level_2"/>-->
																	</div>

																	<div class="col-md-6 mb-3">
																		<label for="approvalBy2"
																			class="form-label">Upload File
																			2</label>
																		
																			<input type="file" id="fileUpload" name="fileUpload" accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg" />
																			<span id="fileInput"></span>
																		<!--<input type="text" class="form-control" name="approval_by_level_2"
																			id="approval_by_level_2"/>-->
																	</div>
																</div>
																<input type="hidden" name="task_id" id="task_id">
																<!-- Items Table -->
																<div class="table-responsive mb-3">
																	<table class="table align-middle gs-0 gy-4">
																		<thead>
																			<tr class="fw-bold text-muted bg-light">
																				<th>Item</th>
																				<th>Quantity</th>
																				<th>Specification</th>
																			</tr>
																		</thead>
																		<tbody id="itemRows">
																			
																		</tbody>
																	</table>
																</div>

																<button type="button" class="btn btn-light" id="addItemBtn">+ Add
																	More</button>
																
																<input type="hidden" name="temp_id" id="temp_id">
															
																<div class="modal-footer">
																	<button type="button" class="btn btn-secondary"
																		data-bs-dismiss="modal">Cancel</button>
																	<button type="button"
																		class="btn btn-primary" id="saveTaskBtn">Submit</button>
																</div>

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


											<!--end::Modal - Add task-->
										</div>
										<!--end::Card toolbar-->
									</div>
									<!--end::Card header-->
									<!--begin::Card body-->
									<div class="card-body py-4">
										<!--begin::Table-->
										<table class="table align-middle table-row-dashed fs-6 gy-5"
											id="kt_table_users">
											<thead>
												<tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
													
													<th class="min-w-125px">Template Name</th>
													<th class="min-w-125px"></th>
													<th class="min-w-100px"></th>
													<th class=" min-w-100px"></th>
													<th class="text-end min-w-50px"></th>
												</tr>
											</thead>
											<tbody class="text-gray-600 fw-semibold">
											    @foreach($list as $li)
												<tr>
													<td>{{$li->template_name}}</td>
													<td></td>
													<td></td>
													<td></td>
													<td class="text-end">
														<a href="#"
															class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm"
															data-kt-menu-trigger="click"
															data-kt-menu-placement="bottom-end"><i
																class="fas fa-ellipsis-v ki-down"></i>
														</a>
														<!--begin::Menu-->
														<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
															data-kt-menu="true">
															<!--begin::Menu item-->
															<div class="menu-item px-3">
																<a href="#" onclick="event.preventDefault();openTaskTemplateModal('{{$li->id}}', '{{$li->template_name}}')"
																	class="menu-link px-3">Edit</a>
															</div>
															<!--end::Menu item-->
															<!--begin::Menu item-->
															<div class="menu-item px-3">
																<a href="#" class="menu-link px-3"
																	data-kt-users-table-filter="delete_row" onclick="event.preventDefault();delete_template({{$li->id}})">Delete</a>
															</div>
															<!--end::Menu item-->
														</div>
														<!--end::Menu-->
													</td>
												</tr>
                                                @endforeach
											</tbody>
										</table>
										<!--end::Table-->
									</div>
									<!--end::Card body-->
								</div>
								<!--end::Card-->
							</div>
							<!--end::Content container-->
						</div>
						<!--end::Content-->
					</div>
					<!--end::Content wrapper-->
					<!--begin::Footer-->

					<!--end::Footer-->
				</div>
				<!--end:::Main-->
<script>

	

	function openTaskTemplateModal(templateId = null, templateName = '') {
		
		
		document.getElementById('kt_modal_template_form').reset();
		document.getElementById('template_id').value = templateId;
		document.getElementById('task_template_name').value = templateName;

		
		const modalTitle = templateId ? 'Edit Task Template' : 'Add Task Template';
		document.getElementById('model_template_head').innerText = modalTitle;

		document.getElementById("temp_id").value = templateId;


		const url = `{{ url('tasklists') }}/?templateId=${templateId}`;
		fetch(url)
        .then(response => response.json())
        .then(data => {
			 
            const taskListsContainer = document.getElementById("taskRows");
            taskListsContainer.innerHTML = ""; 

            data.forEach(task => {
				
				const firstItem = task['items'][0];
				const displayItem = firstItem ? `${firstItem.item_name} x ${firstItem.quantity}` : "No items";
				const filePath = task.file_path ? `/uploads/tasks/${task.file_path.split('/').pop()}` : ''; 
				const originalFileName = task.file_path ? task.file_path.split('/').pop() : 'file';
                const taskItem = document.createElement("tr");
				
				taskItem.innerHTML = `
				<td>${task.task_name}</td>
				<td>${task.task_dependency !== null ? task.task_dependency : ''}</td>
				<td>${task.associated_team}</td>
				<td>${task.approved_by_level1}</td>
				<td>${task.approved_by_level2}</td>
				<td><a href="${filePath}" download="${originalFileName}">Download</a></td>
			
				<td class="task-item" onmouseover="showFullList(0)" onmouseout="hideFullList(0)">
					${displayItem} 
					<span class="badge">${task.items.length}</span> 
					<div class="full-item-list" id="fullItemList_0" style="display: none;">
						${displayFullItems(task['items'])}
					</div>
				</td>
				<td>
                <button type="button" class="btn" onclick="edit_task(${task.id})">Edit</button>
            	<button type="button" class="btn " onclick="delete_task(${task.id},${templateId},'${templateName}')">Delete</button>
            	</td>
				`;
                document.getElementById('taskRows').appendChild(taskItem);
				
            })
        })
        .catch(error => console.error('Error fetching task lists:', error));


		const modal2Element = document.getElementById('kt_modal_new_task');
		const modal2 = new bootstrap.Modal(modal2Element);
		modal2Element.classList.remove('show');
		modal2Element.style.display = 'none';

		const modal = new bootstrap.Modal(document.getElementById('kt_modal_task_template'));
		console.log("Showing Task Template Modal");
		modal.show();

		
	}

	function edit_task(id)
	{
		fetch(`{{ url('/tasks') }}/${id}/edit`)
			.then(response => response.json())
			.then(task => {
				console.log(task);
				
				document.getElementById("task_name").value = task.task_name;
				document.getElementById("task_dependency").value = task.task_dependency;
				document.getElementById("associated_team").value = task.associated_team;
				document.getElementById("approval_by_level_1").value = task.approved_by_level1;
				document.getElementById("approval_by_level_2").value = task.approved_by_level2;
				document.getElementById("task_id").value = task.id;
				document.getElementById('fileInput').innerHTML = task.file_path;

				const itemListsContainer = document.getElementById("itemRows");
            	itemListsContainer.innerHTML = ""; 
				itemsListn = task.items;
				itemsListn.forEach((item, index) =>{
				
					const newRow = document.createElement('tr');
					newRow.setAttribute('id', 'itemRow_' + index);

					newRow.innerHTML = `
						<td>
							<input type="text" class="form-control item-name" name="items[${index}][name]" value="${item.item_name}" placeholder="Item Name" />
							<input type="hidden" class="item-id" name="items[${index}][id]" id="items[${index}][name]" value="${item.id}"
						</td>
						<td>
							<div class="d-flex align-items-center">
								<button type="button" class="btn btn-light" onclick="decrementQuantity(${index})">-</button>
								<input type="number" class="form-control mx-2 quantity" name="items[${index}][quantity]" id="quantity_${itemCounter}" value="${item.quantity}" min="1" style="width: 70px;" />
								<button type="button" class="btn btn-light" onclick="incrementQuantity(${index})">+</button>
							</div>
						</td>
						<td>
							<input type="text" class="form-control specification" name="items[${index}][specification]" placeholder="Specification" value="${item.specification}" />
						</td>
						<td>
							<button type="button" class="btn" onclick="delete_item(${item.id})">Delete</button>
						</td>
					`;

					document.getElementById('itemRows').appendChild(newRow);
				});

			
			})
			.catch(error => console.error('Error:', error));

		
		const modal = new bootstrap.Modal(document.getElementById('kt_modal_new_task'));
		modal.show();

	}

	function delete_item(id,index)
	{
        template_id = document.getElementById("temp_id").value;
        temp_name = document.getElementById("task_template_name").value;
        
        if (confirm('Are you sure you want to delete this item?')) {
			fetch(`{{ url('/item_delete') }}/${id}`, { 
				method: 'DELETE',
				headers: {
					'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
				}
			})
			.then(response => response.json())
			.then(data => {
				alert(data.message);
				const row = document.getElementById(`itemRow_${index}`);
                
                // Remove the row from the DOM if it exists
                if (row) {
                    row.remove();
                }
                openTaskTemplateModal(template_id,temp_name);
			})
			.catch(error => console.error('Error:', error));
		}
	}

	function delete_task(id,tid,tname)
	{
		if (confirm('Are you sure you want to delete this task?')) {
			fetch(`{{ url('/tasks') }}/${id}`, { 
				method: 'DELETE',
				headers: {
					'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
				}
			})
			.then(response => response.json())
			.then(data => {
				if (data.success) {
                    showNotification('success', data.message); // Show success notification
    
                    // Reload the page after a short delay
                    setTimeout(() => {
                        openTaskTemplateModal(tid,tname)
                    }, 600); 
                } else {
                    showNotification('error', data.message); // Show error notification
                }
				
			})
			.catch(error => console.error('Error:', error));
		}
	}

	function delete_template(id)
	{
		const url = `{{ url('/deleteTemplate') }}?id=${id}`;
		if (confirm('Are you sure you want to delete this template?')) {
			fetch(url, { 
				method: 'DELETE',
				headers: {
					'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
				}
			})
			.then(response => response.json())
			.then(data => {
				 if (data.success) {
                    showNotification('success', data.message); // Show success notification
    
                    // Reload the page after a short delay
                    setTimeout(() => {
                        window.location.reload();
                    }, 600); 
                } else {
                    showNotification('error', data.message); // Show error notification
                }
			})
			.catch(error => console.error('Error:', error));
		}
	}
	
	function showNotification(type, message) {
    const alertContainer = document.getElementById('alert-container');
    alertContainer.style.display = 'block';
    alertContainer.innerHTML = `
        <div style="
            background-color: ${type === 'success' ? '#4CAF50' : '#f44336'};
            color: white;
            padding: 15px;
            border-radius: 5px;
            margin: 10px;
            font-size: 14px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: opacity 0.5s ease-in-out;
        ">
            ${message}
        </div>
    `;

    
    setTimeout(() => {
        alertContainer.style.display = 'none';
        alertContainer.innerHTML = '';
    }, 500);
	}

    let itemCounter = 0;

	document.getElementById('TaskForm').addEventListener('click', function () {
		
		document.getElementById('new_task_form').reset();
		document.getElementById('itemRows').innerHTML = "";
	});

    document.getElementById('addItemBtn').addEventListener('click', function () {
        itemCounter++;

        const newRow = document.createElement('tr');
        newRow.setAttribute('id', 'itemRow_' + itemCounter);

        newRow.innerHTML = `
            <td>
                <input type="text" class="form-control item-name" name="items[${itemCounter}][name]" placeholder="Item Name" />
            </td>
            <td>
                <div class="d-flex align-items-center">
                    <button type="button" class="btn btn-light" onclick="decrementQuantity(${itemCounter})">-</button>
                    <input type="number" class="form-control mx-2 quantity" name="items[${itemCounter}][quantity]" id="quantity_${itemCounter}" value="1" min="1" style="width: 70px;" />
                    <button type="button" class="btn btn-light" onclick="incrementQuantity(${itemCounter})">+</button>
                </div>
            </td>
            <td>
                <input type="text" class="form-control specification" name="items[${itemCounter}][specification]" placeholder="Specification" />
            </td>
            <td>
                <button type="button" class="btn btn-danger" onclick="removeItemRow(${itemCounter})">Remove</button>
            </td>
        `;

        document.getElementById('itemRows').appendChild(newRow);
    });

	function incrementQuantity(itemId) {
        const quantityInput = document.getElementById('quantity_' + itemId);
        quantityInput.value = parseInt(quantityInput.value) + 1;
    }

    function decrementQuantity(itemId) {
        const quantityInput = document.getElementById('quantity_' + itemId);
        if (quantityInput.value > 1) {
            quantityInput.value = parseInt(quantityInput.value) - 1;
        }
    }

    function removeItemRow(itemId) {
        document.getElementById('itemRow_' + itemId).remove();
    }

	let tasks = [];
	let taskCounder=0;
	let taskArray = [];

	let taskC = 0;
	let taskList = [];
	let taskArr = [];
	
	
	document.getElementById("task_name").addEventListener("input", function () {
        const errorContainer = document.getElementById("tname-error");
        if (this.value.trim() === "") {
            errorContainer.textContent = "Task Task Name is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });
    
    document.getElementById("associated_team").addEventListener("input", function () {
        const errorContainer = document.getElementById("tassign-error");
        if (this.value.trim() === "") {
            errorContainer.textContent = "The assigned to field is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });
    
    /*document.getElementById("approval_by_level_1").addEventListener("input", function () {
        const errorContainer = document.getElementById("tapp1-error");
        if (this.value.trim() === "") {
            errorContainer.textContent = "The approve by level1 is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });
    
    document.getElementById("approval_by_level_2").addEventListener("input", function () {
        const errorContainer = document.getElementById("tapp2-error");
        if (this.value.trim() === "") {
            errorContainer.textContent = "The approve by level2 is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });*/
	
	document.getElementById('saveTaskBtn').addEventListener('click', function (e) {
		
		e.preventDefault();

		template_id = document.getElementById("temp_id").value;
		task_id = document.getElementById("task_id").value;
		
	    document.getElementById("tname-error").innerText = "";
        document.getElementById("tassign-error").innerText = "";
        document.getElementById("tapp1-error").innerText = "";
        document.getElementById("tapp2-error").innerText = "";

		if(task_id)
		{
			const taskName = document.getElementById("task_name").value;
			const taskDependency = document.getElementById("task_dependency").value;
			const associated_team  = document.getElementById("associated_team").value;
			const approval_by_level_1 = document.getElementById("approval_by_level_1").value;
			const approval_by_level_2 = document.getElementById("approval_by_level_2").value;
			const taskAttachment = document.getElementById("fileUpload").files[0];
			
			if (!taskName) {
				document.getElementById("tname-error").innerText = "The task name field is required.";
				return;
			}
			
			if (!associated_team) {
				document.getElementById("tassign-error").innerText = "The assigned to field is required.";
				return;
			}
			
			/*if (!approval_by_level_1) {
				document.getElementById("tapp1-error").innerText = "The approve by level1 field is required.";
				return;
			}
			
			if (!approval_by_level_2) {
				document.getElementById("tapp2-error").innerText = "The approve by level2 field is required.";
				return;
			}*/

			const eitems = [];
			const itemRows = document.querySelectorAll("#itemRows tr");

			itemRows.forEach(element => {
				//const itemId = element.querySelector(".item-id").value.trim();
				const itemIdElement = element.querySelector(".item-id");
                const itemId = itemIdElement ? itemIdElement.value.trim() : null;
				const itemName = element.querySelector(".item-name").value.trim();
				const quantity = element.querySelector(".quantity").value.trim();
				const specification = element.querySelector(".specification").value.trim();
				

				if(itemName && quantity && specification)
				{
					eitems.push({
						item_id : itemId,
						item_name : itemName,
						quantity : quantity,
						specification : specification
					});
				}
			});

			/*if (eitems.length === 0) {
					alert("Please add at least one item.");
					return;
			}*/

			const formData = new FormData();
			formData.append(`task_id`, task_id);
			formData.append(`task_name`, taskName);
			formData.append(`task_dependency`, taskDependency);
			formData.append(`associated_team`, associated_team);
			formData.append(`approved_by_level1`, approval_by_level_1);
			formData.append(`approved_by_level2`, approval_by_level_2);

			eitems.forEach((eitem, eitemIndex) => {
				formData.append(`items[${eitemIndex}][item_id]`, eitem.item_id);
				formData.append(`items[${eitemIndex}][item_name]`, eitem.item_name);
				formData.append(`items[${eitemIndex}][quantity]`, eitem.quantity);
				formData.append(`items[${eitemIndex}][specification]`, eitem.specification);
			});
				
			if (taskAttachment instanceof File) {
				event.preventDefault();
				console.log(taskAttachment);
				formData.append(`file`, taskAttachment);
			}
			

			console.log(...formData);
			event.preventDefault();
			fetch('{{ url('/editTask') }}', {
				method: 'POST',
				body: formData,
				headers: {
					'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
				}
			})
			.then(response => response.text())
			.then(data => {
				console.log(data);
				alert("Success");
				window.location.reload();
			})
			.catch(error => console.error('Error:', error));
		}
		else
		{
			taskCounder++;

			const taskName = document.getElementById("task_name").value;
			const taskDependency = document.getElementById("task_dependency").value;
			const associated_team  = document.getElementById("associated_team").value;
			const approval_by_level_1 = document.getElementById("approval_by_level_1").value;
			const approval_by_level_2 = document.getElementById("approval_by_level_2").value;
			const taskAttachment = document.getElementById("fileUpload").files[0];
			
			if (!taskName) {
				document.getElementById("tname-error").innerText = "The task name field is required.";
				return;
			}
			
			if (!associated_team) {
				document.getElementById("tassign-error").innerText = "The assigned to field is required.";
				return;
			}
			
			/*if (!approval_by_level_1) {
				document.getElementById("tapp1-error").innerText = "The approve by level1 field is required.";
				return;
			}
			
			if (!approval_by_level_2) {
				document.getElementById("tapp2-error").innerText = "The approve by level2 field is required.";
				return;
			}*/

			const items = [];
			const itemRows = document.querySelectorAll("#itemRows tr");

			itemRows.forEach(element => {
				const itemName = element.querySelector(".item-name").value.trim();
				const quantity = element.querySelector(".quantity").value.trim();
				const specification = element.querySelector(".specification").value.trim();
				

				if(itemName && quantity && specification)
				{
					items.push({
						item_name : itemName,
						quantity : quantity,
						specification : specification
					});
				}
			});

			/*if (items.length === 0) {
					alert("Please add at least one item.");
					return;
			}*/	
			
			const tasks = {
				task_name: taskName,
				task_dependency: taskDependency,
				associated_team: associated_team,
				approved_by_level1: approval_by_level_1,
				approved_by_level2: approval_by_level_2,
				items: items,
				attachment: taskAttachment 
			};

            const tasksJson = JSON.stringify(tasks);
            document.getElementById('taskArrayField').value = tasksJson;
			taskArray.push(tasks);
			
			document.getElementById('new_task_form').reset();
			const modalElement = document.getElementById('kt_modal_new_task');
			const modalInstance = bootstrap.Modal.getInstance(modalElement) || new bootstrap.Modal(modalElement);
			modalInstance.hide();
			
			updateTaskList();

			
			const addUserModal = document.getElementById('kt_modal_task_template');
			const addUserBootstrapModal = new bootstrap.Modal(addUserModal);
			addUserBootstrapModal.show();
		}
		
	});

	function updateTaskList()
	{
		
		const taskList = document.getElementById("taskRows");
		template_id = document.getElementById("temp_id").value;
		if(template_id == "")
		{		
			taskList.innerHTML = '';	
		}
		console.log(taskArray);
		removeRemovableRows();
		taskArray.forEach((tasks, index) => {
			
			const row = document.createElement('tr');
			row.className = 'removable'; 

			const firstItem = tasks['items'][0];
			const displayItem = firstItem ? `${firstItem.item_name} x ${firstItem.quantity}` : "No items";
			
			row.innerHTML =`
				<td>${tasks['task_name']}</td>
				<td>${tasks['task_dependency']}</td>
				<td>${tasks['associated_team']}</td>
				<td>${tasks['approved_by_level1']}</td>
				<td>${tasks['approved_by_level2']}</td>
				<td>${tasks['attachment']}</td>
				<td class="task-item" onmouseover="showFullList(${index})" onmouseout="hideFullList(${index})">
					${displayItem}
					<div class="full-item-list" id="fullItemList_${index}" style="display: none;">
						${displayFullItems(tasks['items'])}
					</div>
				</td>
				<td>
                	<button type="button" class="btn btn-danger" onclick="removeTask(${index})">Remove</button>
            	</td>`;
				
				taskList.appendChild(row);

		});
	}

	function removeRemovableRows() {
		const taskList = document.getElementById("taskRows");
		const removableRows = taskList.querySelectorAll('tr.removable'); // Select all rows with the class "removable"
		
		removableRows.forEach(row => {
			row.remove(); // Remove the row from the DOM
		});
	}

	function removeTask(index)
	{
		taskArray.splice(index,1);
		updateTaskList();
	}

	function displayFullItems(items) {
	
		return items.map(item => `
			<!--<div>
				${item.item_name} 
				<span class="item-quantity">${item.quantity}</span>
				<span class="item-spec">${item.specification}</span>
			</div>-->
			<div>
				<span>${item.item_name} x ${item.quantity} ${item.specification}</span>
			</div>
		`).join('');
	}

	function showFullList(taskIndex) {
		const fullItemList = document.getElementById(`fullItemList_${taskIndex}`);
		if (fullItemList) {
			fullItemList.style.display = 'block'; // Show the full item list
		}
	}

	function hideFullList(taskIndex) {
		const fullItemList = document.getElementById(`fullItemList_${taskIndex}`);
		if (fullItemList) {
			fullItemList.style.display = 'none'; // Hide the full item list
		}
	}

    document.getElementById("task_template_name").addEventListener("input", function () {
        const errorContainer = document.getElementById("validation-errors");
        if (this.value.trim() === "") {
            errorContainer.textContent = "Task Template Name is required.";
        } else {
            errorContainer.textContent = ""; // Clear error if input is valid
        }
    });
    
    let isSubmitting = false;
    document.getElementById("templatebtn").addEventListener("click", function(event) {
    event.preventDefault();  // Prevent default form submission
    
    let template_name = document.getElementById("task_template_name").value;
    let temp_id = document.getElementById("temp_id").value;
    document.getElementById('validation-errors').innerHTML = "";
    if (template_name.trim() === "") {
        document.getElementById('validation-errors').innerHTML = "Template Name is empty";
        return;
    }
    
    if(!temp_id)
    {
        if (taskArray.length === 0) {
            alert("Please add at least one task.");  // Alert the user if no tasks are found
            return;  // Exit and do not submit
        }
    }
    
    if (isSubmitting) {
        return;  // Exit if form is already in the process of being submitted
    }

    // Set the flag to true and disable the button
    isSubmitting = true;
    const templateBtn = document.getElementById("templatebtn");
    templateBtn.disabled = true;
    templateBtn.querySelector('.indicator-label').style.display = 'none';
    templateBtn.querySelector('.indicator-progress').style.display = 'inline-block';
    
    
    const formData = new FormData();

    // Prevent multiple clicks by disabling the button
    

    // Append task template name
    formData.append('task_template_name', template_name);

    if (temp_id) {
        formData.append('temp_id', temp_id);

        taskArray.forEach((task, index) => {
            formData.append(`tasks[${index}][task_name]`, task.task_name);
            formData.append(`tasks[${index}][task_dependency]`, task.task_dependency);
            formData.append(`tasks[${index}][associated_team]`, task.associated_team);
            formData.append(`tasks[${index}][approved_by_level1]`, task.approved_by_level1);
            formData.append(`tasks[${index}][approved_by_level2]`, task.approved_by_level2);

            task.items.forEach((item, itemIndex) => {
                formData.append(`tasks[${index}][items][${itemIndex}][item_name]`, item.item_name);
                formData.append(`tasks[${index}][items][${itemIndex}][quantity]`, item.quantity);
                formData.append(`tasks[${index}][items][${itemIndex}][specification]`, item.specification);
            });

            if (task.attachment instanceof File) {
                formData.append(`tasks[${index}][file]`, task.attachment);
            }
        });

        fetch('{{ url("/add_task") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.text())
        .then(data => {
            console.log(data);
            alert("Success");
            window.location.reload();
        })
        .catch(error => {
            console.error('Error:', error);
            resetButton();  // Re-enable button on error
        });
    } else {
        taskArray.forEach((task, index) => {
            formData.append(`tasks[${index}][task_name]`, task.task_name);
            formData.append(`tasks[${index}][task_dependency]`, task.task_dependency);
            formData.append(`tasks[${index}][associated_team]`, task.associated_team);
            formData.append(`tasks[${index}][approved_by_level1]`, task.approved_by_level1);
            formData.append(`tasks[${index}][approved_by_level2]`, task.approved_by_level2);

            task.items.forEach((item, itemIndex) => {
                formData.append(`tasks[${index}][items][${itemIndex}][item_name]`, item.item_name);
                formData.append(`tasks[${index}][items][${itemIndex}][quantity]`, item.quantity);
                formData.append(`tasks[${index}][items][${itemIndex}][specification]`, item.specification);
            });

            if (task.attachment instanceof File) {
                formData.append(`tasks[${index}][file]`, task.attachment);
            }
        });

        fetch('{{ url("/savetaskTemplate") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.errors) {
               
                resetButton();  
            } else {
                console.log(data);
                window.location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            resetButton();  // Re-enable button on error
        });
    }
    
    function resetButton() {
            // Reset the button to its original state
            templateBtn.disabled = false;
            templateBtn.querySelector('.indicator-label').style.display = 'inline-block';
            templateBtn.querySelector('.indicator-progress').style.display = 'none';
            isSubmitting = false;
        }
    });

                document.getElementById('exportBtn').addEventListener('click', function () {
                        let table = document.getElementById('kt_table_users');
                        let rows = Array.from(table.querySelectorAll('tr'));
                    
                        // Create CSV data excluding the "Actions" column (last column)
                        let csvContent = rows.map(row => {
                            let cols = Array.from(row.querySelectorAll('th, td'));
                            
                            // Filter out the last column (index -1 means skip the last column)
                            let filteredCols = cols.slice(0, -2);
                    
                            // Join the content as CSV format
                            return filteredCols.map(col => `"${col.textContent}"`).join(',');
                        }).join('\n');
                    
                        // Create a downloadable link
                        let csvBlob = new Blob([csvContent], { type: 'text/csv' });
                        let csvUrl = URL.createObjectURL(csvBlob);
                        let link = document.createElement('a');
                        link.href = csvUrl;
                        link.download = 'export.csv';
                    
                        // Trigger the download
                        link.click();
                    });


</script>

<style>
	.full-item-list {
		background-color: white; 
		border: 1px solid #ddd; 
		padding: 5px;
		position: absolute; 
		z-index: 1000;
		max-width: 400px; 
    	width: 100%;
	}
	.task-item {
		position: relative; 
	}
	.full-item-list div {
		display: flex;
		justify-content: space-between;
		padding: 4px 0;
		width: 100%; 
	}
	@media (max-width: 600px) {
		.full-item-list div {
			flex-direction: column; 
		}
	}
	.badge {
    display: inline-block;
    background-color: #101010; 
    color: white;
    border-radius: 50%; 
    padding: 0.5em 0.75em;
    font-size: 0.9em;
    margin-left: 5px; 
}
</style>
@endsection