<?php
include 'vac_update_task.inc.php';
?>
<div class="container-fluid" style="background-color: #ffe6e6;">
<?php
$month = isset($_GET['month']) ? intval($_GET['month']) : date('m');
$year = isset($_GET['year']) ? intval($_GET['year']) : date('Y');

// Generate current and adjacent months
$monthsToShow = [];
$currentDate = new DateTime(); 
for ($i = 0; $i < 3; $i++) {  
    $date = clone $currentDate;
    $date->modify("+$i months");
    $monthsToShow[] = [
        'month' => (int)$date->format('m'),
        'year' => (int)$date->format('Y'),
        'label' => $date->format('F Y')
    ];
}
$currentDateStr = date('Y-m-d');

$query = "SELECT 
    mmt.machine_id AS task, 
    mmt.id as task_id, 
    wo.work_order_no, 
    mmt.part_id,
    mmt.setup_hours, 
    mmt.setting_instruction, 
    mmt.priority,
    mmt.total_hours AS hours_to_schedule,
    mmt.total_hours, 
    mmt.work_order_id,
    mmt.product_name,
    mmt.quantity,
    mmt.set_id, 
    won.work_order_name,  
    mmt.shift_ids AS shift_name, 
    DATE(mmt.start_date) AS start_date, 
    DATE(mmt.end_date) AS end_date,
    TIME(mmt.start_date) AS start_time,
    mmt.is_break,
    mmt.break_reason,
    mmt.is_breakdown_affected,
    mmt.breakdown_hours,
    mb.id as breakdown_id,
    mb.breakdown_reason as machine_breakdown_reason,
    m.end_date as manufacture_end_date,
    m.description as manufacture_description,
	m.parent_ids,
    im.part_number as parent_part_number,
    GROUP_CONCAT(DISTINCT wocr.work_order_no ORDER BY wocr.work_order_no SEPARATOR ', ') as customer_order_nos
FROM 
    vac_machine_table mmt
LEFT JOIN 
    work_order wo ON mmt.work_order_id = wo.id
LEFT JOIN 
    work_order_name won ON mmt.work_order_id = won.work_order_id AND mmt.part_id = won.part_id
LEFT JOIN 
    machine_breakdown mb ON mmt.machine_id = mb.machine_id AND mb.is_active = 1
LEFT JOIN (
    SELECT 
        m1.part_id, 
        m1.work_order_id, 
        m1.end_date, 
        m1.description, 
        m1.parent_ids
    FROM manufacture_machine_table m1
    INNER JOIN (
        SELECT 
            part_id, 
            work_order_id, 
            MAX(end_date) as max_end_date
        FROM manufacture_machine_table
        GROUP BY part_id, work_order_id
    ) m2 ON m1.part_id = m2.part_id 
        AND m1.work_order_id = m2.work_order_id 
        AND m1.end_date = m2.max_end_date
) m ON mmt.part_id = m.part_id 
    AND mmt.work_order_id = m.work_order_id
LEFT JOIN 
    item_management im ON m.parent_ids = im.id
LEFT JOIN 
    work_order_customer_ref_mapping wocr ON mmt.work_order_id = wocr.work_order_id
WHERE 
    mmt.end_date >= '$currentDateStr'
GROUP BY 
    mmt.id, mmt.machine_id, wo.work_order_no, mmt.part_id, mmt.setup_hours,
    mmt.setting_instruction, mmt.priority, mmt.total_hours, mmt.work_order_id,
    mmt.product_name, mmt.quantity, mmt.set_id,
    won.work_order_name, mmt.shift_ids, mmt.start_date,
    mmt.end_date, mmt.is_break, mmt.break_reason, mmt.is_breakdown_affected,
    mmt.breakdown_hours, mb.id, mb.breakdown_reason, m.end_date,
    m.description, im.part_number
ORDER BY 
    mmt.priority, mmt.machine_id"; 


$workOrders = [];
$tasks = [];
$workOrdersSet = [];

$result = mysqli_query($conn, $query);

if (!$result) {
    die("Query Error: " . mysqli_error($conn));
}

while ($row = mysqli_fetch_assoc($result)) {
    // Check if late
    $isLate = false;
    if (!empty($row['manufacture_end_date']) && $row['end_date'] > $row['manufacture_end_date']) {
        $isLate = true;
    }
    
    $row['is_late'] = $isLate;
    $tasks[] = $row;
    
    $woKey = $row['work_order_no'] . '_' . $row['part_id'];
    if (!isset($workOrdersSet[$woKey])) {
        $workOrdersSet[$woKey] = true;
        $workOrders[] = ['work_order_no' => $row['work_order_no'], 'part_id' => $row['part_id']];
    }
}

$shifts = [];
$shiftHours = [];
$shiftDays = [];
$shiftTimes = [];

$dayMap = [
    0 => "Sunday",
    1 => "Monday",
    2 => "Tuesday",
    3 => "Wednesday",
    4 => "Thursday",
    5 => "Friday",
    6 => "Saturday"
];

$sql = "SELECT shift_name, day_shifts, start_time, end_time, hours FROM working_hours";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $shiftName = $row['shift_name'];
        $startTime = $row['start_time'];
        $endTime = $row['end_time'];
        $dayIndex = (int)$row['day_shifts'];
        $hours = (float)$row['hours'];

        $shifts[] = $shiftName;
        $shiftHours[$shiftName] = $hours;
        $shiftDays[$shiftName] = $dayMap[$dayIndex];
        $shiftTimes[$shiftName] = [
            'start' => $startTime,
            'end' => $endTime,
            'hours' => $hours
        ];
    }
}

$intervalCache = [];

function generateTimeIntervals($startTime, $endTime) {
    global $intervalCache;
    $cacheKey = $startTime . '-' . $endTime;
    
    if (isset($intervalCache[$cacheKey])) {
        return $intervalCache[$cacheKey];
    }
    
    $intervals = [];
    $current = new DateTime($startTime);
    $end = new DateTime($endTime);
    
    $intervalStart = $current->format('H:i');
    $current->add(new DateInterval('PT30M'));
    
    while ($current <= $end) {
        $intervalEnd = $current->format('H:i');
        $intervals[] = [
            'start' => $intervalStart,
            'end' => $intervalEnd,
            'minutes' => (strtotime($intervalEnd) - strtotime($intervalStart)) / 60
        ];
        $intervalStart = $intervalEnd;
        $current->add(new DateInterval('PT30M'));
    }
    
    if ($intervalStart !== $end->format('H:i')) {
        $intervals[] = [
            'start' => $intervalStart,
            'end' => $end->format('H:i'),
            'minutes' => (strtotime($end->format('H:i')) - strtotime($intervalStart)) / 60
        ];
    }
    
    $intervalCache[$cacheKey] = $intervals;
    return $intervals;
}

$activeBreakdowns = [];
$breakdownQuery = "SELECT machine_id, breakdown_reason FROM machine_breakdown WHERE is_active = 1";
$breakdownResult = mysqli_query($conn, $breakdownQuery);
while ($breakdown = mysqli_fetch_assoc($breakdownResult)) {
    $activeBreakdowns[$breakdown['machine_id']] = $breakdown['breakdown_reason'];
}


function scheduleByPriority($tasks, $activeBreakdowns) {    
    $scheduledTasks = [];
    $machineAllocations = [];
    
    foreach ($tasks as $task) {
        $machineId = $task['task'];
        $hasBreakdown = isset($activeBreakdowns[$machineId]);
        
        if (!isset($machineAllocations[$machineId])) {
            $machineAllocations[$machineId] = [
                'current_time' => 0,
                'tasks' => []
            ];
        }
        
        $scheduledTask = [
            'task' => $machineId,
            'is_late' => $task['is_late'],
            'task_id' => $task['task_id'],
            'setting_instruction' => $task['setting_instruction'],
            'allocated_hours' => $task['hours_to_schedule'],
            'start_datetime' => '',
            'end_datetime' => '',
            'work_order_id' => $task['work_order_id'],
            'part_id' => $task['part_id'],
            'setup_hours' => $task['setup_hours'],
            'work_order_no' => $task['work_order_no'],
            'product_name' => $task['product_name'],
            'quantity' => $task['quantity'],
            'work_order_name' => $task['work_order_name'],
            'set_id' => $task['set_id'],
            'parent_ids' => $task['parent_ids'],
            'parent_part_number' => $task['parent_part_number'],
            'is_break' => $task['is_break'],
            'break_reason' => $task['break_reason'],
            'shift_name' => $task['shift_name'],
            'priority' => $task['priority'],
            'is_breakdown_affected' => $task['is_breakdown_affected'],
            'breakdown_hours' => $task['breakdown_hours'],
            'has_breakdown' => $hasBreakdown,
            'breakdown_reason' => $hasBreakdown ? $activeBreakdowns[$machineId] : '',
            'manufacture_end_date' => $task['manufacture_end_date'],
            'manufacture_description' => $task['manufacture_description'],
            'customer_order_nos' => $task['customer_order_nos'],
            'position' => $machineAllocations[$machineId]['current_time']
        ];
        
        $machineAllocations[$machineId]['tasks'][] = $scheduledTask;
        $machineAllocations[$machineId]['current_time'] += $task['hours_to_schedule'];
    }
    

    foreach ($machineAllocations as $allocations) {
        foreach ($allocations['tasks'] as $task) {
            $scheduledTasks[] = $task;
        }
    }
    
    return $scheduledTasks;
}

$distributedTasks = scheduleByPriority($tasks, $activeBreakdowns);

$groupedTasks = [];
foreach ($distributedTasks as $task) {
    $groupedTasks[$task['task']][] = $task;
}

$taskNames = [];
$machineQuery = mysqli_query($conn, "SELECT id, resource_code FROM station_detail_table WHERE machine_type = 1 AND hide = 0");
while ($row = mysqli_fetch_assoc($machineQuery)) {
    $taskNames[$row['id']] = $row['resource_code'];
}

function generateCalendar($month, $year, $shifts, $shiftDays, $shiftTimes) {
    $calendar = [];
    $daysInMonth = cal_days_in_month(CAL_GREGORIAN, $month, $year);
    $validWeekdays = array_unique(array_values($shiftDays));
    
    $today = new DateTime();
    $currentYear = (int)$today->format('Y');
    $currentMonth = (int)$today->format('m');
    $currentDay = (int)$today->format('d');

    $startDay = ($year == $currentYear && $month == $currentMonth) ? $currentDay : 1;

    for ($day = $startDay; $day <= $daysInMonth; $day++) {
        $date = sprintf("%04d-%02d-%02d", $year, $month, $day);
        $timestamp = strtotime($date);
        $dayOfWeek = date("l", $timestamp);

        if (in_array($dayOfWeek, $validWeekdays)) {
            foreach ($shifts as $shift) {
                if ($shiftDays[$shift] === $dayOfWeek) {
                    $intervals = generateTimeIntervals($shiftTimes[$shift]['start'], $shiftTimes[$shift]['end']);
                    $totalMinutes = array_sum(array_column($intervals, 'minutes'));
                    
                    $calendar[] = [
                        "date" => $date,
                        "day" => $day,
                        "dayOfWeek" => $dayOfWeek,
                        "month" => $month,
                        "shift" => $shift,
                        "start_time" => $shiftTimes[$shift]['start'],
                        "end_time" => $shiftTimes[$shift]['end'],
                        "hours" => $shiftTimes[$shift]['hours'],
                        "intervals" => $intervals,
                        "total_intervals" => count($intervals),
                        "total_minutes" => $totalMinutes
                    ];
                }
            }
        }
    }

    return $calendar;
}

$calendarDays = [];
foreach ($monthsToShow as $m) {
    $calendarDays = array_merge(
        $calendarDays,
        generateCalendar($m['month'], $m['year'], $shifts, $shiftDays, $shiftTimes)
    );
}

$totalWidth = 0;
$dayPositions = [];
$dayWidths = [];
$dayMinutes = [];

foreach ($calendarDays as $day) {
    $dayWidth = count($day['intervals']) * 40;
    $key = $day['date'] . '-' . $day['shift'];
    
    $dayPositions[$key] = $totalWidth;
    $dayWidths[$key] = $dayWidth;
    $dayMinutes[$key] = $day['total_minutes'];
    $totalWidth += $dayWidth;
}


$machineColors = [];
$colorPalette = [
    '#e6f5f5', '#f5e6f5', '#e6ffe6', '#fff2e6', '#f0e6ff', 
    '#e6ffff', '#ffe6f2', '#f5f5e6', '#e6f5f5', '#f5e6ff',
    '#e6ffec', '#fff0e6', '#e6f0ff', '#ffe6ff', '#e6ffe6',
    '#f5e6e6', '#e6e6f5', '#f5f5e6', '#e6f5f5', '#f5e6f5'
];
$colorIndex = 0;
$paletteCount = count($colorPalette);

foreach ($taskNames as $machineId => $taskName) {
    $machineColors[$machineId] = $colorPalette[$colorIndex % $paletteCount];
    $colorIndex++;
}



$partIds = array_unique(array_column($tasks, 'part_id'));
$bomAvailability = [];

if (!empty($partIds)) {
    $partIdsList = implode(',', array_map('intval', $partIds));
    $bomQuery = "
        SELECT 
            b.main_product_id,
            COUNT(*) AS total_parts,
            SUM(CASE WHEN i.quantity_in_stock > 0 THEN 1 ELSE 0 END) AS available_parts
        FROM bom b
        LEFT JOIN inventory i ON b.sub_part_id = i.item_id
        WHERE b.main_product_id IN ($partIdsList)
        GROUP BY b.main_product_id
    ";
    
    $bomResult = $conn->query($bomQuery);
    if ($bomResult) {
        while ($row = $bomResult->fetch_assoc()) {
            $productId = $row['main_product_id'];
            $bomAvailability[$productId] = ($row['total_parts'] > 0 && $row['total_parts'] == $row['available_parts']);
        }
    }
}
?>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
	:root {
		--primary-color: #3498db;
		--secondary-color: #2c3e50;
		--accent-color: #e74c3c;
		--light-bg: #f8f9fa;
		--dark-bg: #343a40;
		--success-color: #2ecc71;
		--warning-color: #f39c12;
		--danger-color: #e74c3c;
		--info-color: #3498db;
		--current-time-color: #e74c3c;
		--time-marker-color: #fff3cd;
		--shift-highlight: #d4edda;
		--time-interval-width: 40px;
		--task-bar-height: 130px;
		--grid-line-color: rgba(0, 0, 0, 0.1);
		--breakdown-color: #ff4444;
	}

	.gantt-container {
		position: relative;
		width: 100%;
		overflow-x: auto;
		margin-top: 20px;
		display: flex;
		background-color: white;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		border-radius: 8px;
	}

	.gantt-labels {
		position: sticky;
		left: 0;
		top: 0;
		width: 270px;
		background: #f9f9f9;
		padding: 15px;
		border-right: 1px solid #ddd;
		z-index: 20;
		height: fit-content;
		flex-shrink: 0;
	}

	.gantt-scrollable-content {
		flex: 1;
		min-width: 0;
		overflow-x: auto;
		position: relative;
	}

	.gantt-grid {
		display: inline-block;
		min-width: <?php echo $totalWidth; ?>px;
		position: relative;
	}

	.gantt-header {
		display: inline-flex;
		background: #f5f5f5;
		border-bottom: 1px solid #ddd;
		position: sticky;
		top: 0;
		z-index: 15;
	}

	.gantt-day {
		display: inline-flex;
		flex-direction: column;
		text-align: center;
		background-color: #fff;
		float: none;
		vertical-align: top;
		position: relative;
	}
	
	.gantt-day strong {
		font-size: 12px;
		color: #333;
		background: #f3f3f3;
		padding: 3px;
		border-radius: 3px;
		margin-bottom: 5px;
	}
	
	.gantt-time-intervals {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: 100%;
		background-color: #f8f9fa;
		border-top: 1px solid #dee2e6;
	}

	.gantt-time-interval {
		flex: 0 0 var(--time-interval-width);
		text-align: center;
		font-size: 10px;
		color: #555;
		border-right: 1px solid var(--grid-line-color);
		height: 30px;
		position: relative;
	}

	.gantt-time-interval-label {
		position: absolute;
		font-size: 0.9rem;
		transform: rotate(-45deg);
		transform-origin: left center;
		white-space: nowrap;
		left: 0%;
		bottom: -15px;
		color: #000;
	}

	.gantt-row {
		display: block;
		border-bottom: 1px solid #000;
		min-height: var(--task-bar-height);
		position: relative;
		white-space: nowrap;
		background-image: linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px);
		background-size: var(--time-interval-width) 1px;
		background-position: left center;
	}

	.gantt-task {
		position: absolute;
		height: 100%;
		top: 0;
		background: #3498db;
		color: white;
		text-align: center;
		border-radius: 5px;
		padding: 5px;
		line-height: 1.2;
		font-size: 12px;
		cursor: grab;
		transition: background-color 0.3s ease;
		box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
		z-index: 1;
		overflow: hidden;
		box-sizing: border-box;
	}

	.gantt-task .task-content {
		padding: 1px;
		font-size: 10px;
		height: calc(100% - 20px);
		overflow: hidden;
	}

	.gantt-task .task-hours {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,0.2);
		text-align: center;
		font-size: 9px;
		padding: 1px 0;
		border-radius: 0 0 4px 4px;
	}

	.task-color-1 { background-color: #FFA500; }
	.task-color-2 { background-color: #32CD32; }
	.task-color-3 { background-color: #ff6b6b; }
	.task-color-4 { background-color: #3498db; }

	.no-tasks {
		color: #999;
		font-style: italic;
		padding: 10px;
		text-align: center;
		width: 100%;
	}
	


	.breakdown-task {
		background-color: var(--breakdown-color) !important;
		border-left: 3px solid #cc0000 !important;
		border-right: 3px solid #cc0000 !important;
		color: white !important;
	}

	.breakdown-affected {
		background: repeating-linear-gradient(
			45deg,
			#ff6b6b,
			#ff6b6b 10px,
			#ff8e8e 10px,
			#ff8e8e 20px
		) !important;
		border: 2px dashed #ff0000 !important;
	}

	.machine-with-breakdown {
		background-color: #ffe6e6 !important;
		border-left: 4px solid var(--breakdown-color) !important;
	}

	.breakdown-indicator {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 12px;
		height: 12px;
		background-color: var(--breakdown-color);
		border-radius: 50%;
		animation: pulse 1.5s infinite;
	}
	@keyframes pulse {
		0% { opacity: 1; }
		50% { opacity: 0.5; }
		100% { opacity: 1; }
	}
	
	

	.dot-indicator {
		position: absolute;
		top: 3px;
		right: 3px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 3px solid black;
	}

	.green-dot-indicator {
		background-color: #00cc66;
	}

	.red-dot-indicator {
		background-color: #ff3333;
	}

	.blue-dot-indicator {
		background-color: #3399ff;
	}
	
	.hour-indicator {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 0.65rem;
		text-align: center;
		background: rgba(0,0,0,0.15);
		padding: 1px 0;
		border-radius: 0 0 4px 4px;
	}

	.machine-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	
	.circle-button {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 20px;
		height: 20px;
		border: none;
		border-radius: 50%;
		background-color: #4CAF50;
		cursor: pointer;
		z-index: 10;
	}

	.controls {
		background: white;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 20px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	.machine-section {
		margin-bottom: 15px;
	}

	.card {
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		transition: transform 0.2s;
	}

	.card:hover {
		transform: translateY(-2px);
	}

	.card-header {
		font-weight: 500;
		padding: 8px 12px;
	}

	.form-control {
		font-size: 0.85rem;
		padding: 0.25rem 0.5rem;
	}

	.gantt-task.dragging {
		opacity: 0.5;
		background-color: #f39c12;
	}
   
	.gantt-row.drop-target {
		outline: 2px dashed #007bff;
		background-color: #e6f7ff;
	}

	.gantt-day.today {
		background-color: #fff3cd;
		box-shadow: 0 0 0 2px #ffc107;
	}

	.gantt-day.today strong {
		background-color: #ffc107;
		color: #000;
		font-weight: bold;
	}

	.current-time-marker {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 2px;
		background-color: var(--current-time-color);
		z-index: 10;
	}

	.current-time-marker::after {
		content: '';
		position: absolute;
		top: 0;
		left: -4px;
		width: 10px;
		height: 10px;
		background-color: var(--current-time-color);
		border-radius: 50%;
	}
	.gantt-task {
		border-right: 3px solid rgba(255, 255, 255, 0.5);
		box-sizing: border-box;
	}
	.gantt-task.highlight-border {
		border-right: 100px solid rgba(255, 255, 0, 0.8) !important;
		box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
		transition: all 0.3s ease;
	}
	.break-task {
		background-color: #999 !important;
		border-left: 3px dashed #fff !important;
		border-right: 3px dashed #fff !important;
		color: #fff !important;
	}


	.gantt-task.late-task {
		background-color: #ff6b6b !important;
		border-left: 3px solid #ff0000 !important;
		border-right: 3px solid #ff0000 !important;
	}

    
	/* Modal styles */
	.modal-dialog {
		max-width: 1200px;
	}

	.modal-content {
		border-radius: 10px;
		border: none;
		box-shadow: 0 5px 20px rgba(0,0,0,0.2);
	}

	.modal-header {
		background-color: var(--secondary-color);
		color: white;
		border-radius: 10px 10px 0 0;
		padding: 15px 20px;
	}

	.modal-title {
		font-weight: 600;
	}

	.modal-body {
		padding: 20px;
	}

	.modal-footer {
		border-top: 1px solid #e9ecef;
		padding: 15px 20px;
	}

	  .custom-scroll {
		max-height: 600px;   
		overflow-y: auto;    
	}

    .gantt-task.late-task {
        background-color: #ff6b6b !important;
        border-left: 3px solid #ff0000 !important;
        border-right: 3px solid #ff0000 !important;
    }

    .gantt-task.on-time-task {
        background-color: #78c679 !important;
        border-left: 3px solid #2ecc71 !important;
        border-right: 3px solid #2ecc71 !important;
    }

    .gantt-task.break-task {
        background-color: #999 !important;
        border-left: 3px dashed #fff !important;
        border-right: 3px dashed #fff !important;
        color: #fff !important;
    }
	/* === Inventory Status Dot (Override safely) === */
.dot-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid black;
    z-index: 5;
}

.green-dot-indicator {
    background-color: #00cc66;
}

.red-dot-indicator {
    background-color: #ff3333;
}

.blue-dot-indicator {
    background-color: #3399ff;
}

</style>
    <div class="container-fluid">
        <div class="controls">
            <div class="row">
                <div class="col-md-6">
                    <h3><i class="fas fa-calendar-day me-2"></i>VAC Gantt Chart</h3>
                    <h4><?php echo date('l, F j, Y'); ?></h4>
                </div>
                <div class="col-md-6 text-end">   
					<button type="button" class="btn btn-primary show-work-order-button" data-bs-toggle="modal" data-bs-target="#workOrderModal">
						<i class="fas fa-list-check"></i> Show Work Orders
					</button>				
                    <button class="btn btn-primary" onclick="window.location.reload()">
                        <i class="fas fa-sync-alt me-2"></i>Refresh
                    </button>
                    <button class="btn btn-warning ms-2" id="addBreakBtn">
                        <i class="fas fa-clock me-2"></i>Add Break
                    </button>
					<button class="btn btn-danger ms-2 hide" id="startBreakdownBtn">
						<i class="fas fa-exclamation-triangle me-2"></i>Start Breakdown
					</button>
					<button class="btn btn-success ms-2 hide" id="stopBreakdownBtn">
						<i class="fas fa-check me-2"></i>Stop Breakdown
					</button>
                </div>
            </div>
        </div>

        <div class="gantt-container">
            <!-- Machines Section -->
            <div class="gantt-labels">
                 <h5><i class="fas fa-server me-2"></i>Machine Detail</h5>
                <div style=" margin-bottom: 20px;"></div>
                <div class="machine-list">
                    <?php
                    $renderedMachines = [];
                    foreach ($taskNames as $machineId => $taskName): 
                        if (!in_array($machineId, $renderedMachines)):
						 $hasBreakdown = isset($activeBreakdowns[$machineId]);
                            $renderedMachines[] = $machineId;
                    ?>
                        <div class="machine-section mb-0" style="width: 200px;">
                            <div class="row" style="margin-bottom: 1px; height: 120px;">
                                <div class="card <?php echo $hasBreakdown ? 'machine-with-breakdown' : ''; ?>" 
                                     style="background-color: #e6f2ff; margin-left: 12px; position: relative;">
                                    <?php if ($hasBreakdown): ?>
                                        <div class="breakdown-indicator" title="Machine Breakdown Active"></div>
                                    <?php endif; ?>
                                    <div>
                                        <div style="display: flex; justify-content: center; align-items: center; height: 100%; font-weight: bold;">
                                            <?php
											echo $taskName;
											echo "<br>";
											//echo $machineId;
											?>
                                            <?php if ($hasBreakdown): ?>
                                                <br/><small style="color: #ff0000; font-size: 10px;">BREAKDOWN</small>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php 
                        endif;
                    endforeach; ?>
                </div>
            </div>
            
       

            <div class="gantt-scrollable-content">
                <div class="gantt-grid">
                    <!-- Time Slots Header -->
                    <div class="gantt-header">
                        <?php foreach ($calendarDays as $day): 
                            $dayWidth = count($day['intervals']) * 40;
                            $isToday = $day['date'] == date('Y-m-d');
                        ?>
                            <div class="gantt-day <?php echo $isToday ? 'today' : ''; ?>" data-date="<?php echo $day["date"]; ?>" data-shift="<?php echo $day["shift"]; ?>" style="min-width: <?php echo $dayWidth; ?>px;">
                                <div><strong><?php echo $day["date"] . " (" . $day["shift"] . ")"; ?></strong></div>
                                <div class="gantt-time-intervals">
                                    <?php foreach ($day['intervals'] as $interval): ?>
                                        <div class="gantt-time-interval" data-interval="<?php echo $interval['start'] . '-' . $interval['end']; ?>">
                                            <div class="gantt-time-interval-label"><?php echo $interval['start']; ?></div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <!-- Task Rows -->
                    <?php foreach ($taskNames as $machineId => $taskName): 
                        $groupKey = $machineId;
                        $rowColor = $machineColors[$machineId];
                    ?>
                    <div class="gantt-row" 
						 data-machine-id="<?php echo $machineId; ?>"  
						 style="background-color: <?php echo $rowColor; ?>;">
						
						<?php if (isset($groupedTasks[$groupKey])): ?>
							<?php 
							$cumulativePosition = 0;
							foreach ($groupedTasks[$groupKey] as $task): 
								$taskWidth = $task['allocated_hours'] * 80;
								$leftPosition = $cumulativePosition;
								$cumulativePosition += $taskWidth;
								
								$part_id = (int)$task["part_id"];
								$work_order_id = $task["work_order_id"];
								$set_id = $task["set_id"];
								$parent_ids = $task["parent_ids"]; 
								$parent_part_number = $task["parent_part_number"];
								$setup_hours = $task["setup_hours"];
								$part_name = $task["product_name"];
								$quantity = $task["quantity"];
								$manufacture_end_date = $task["manufacture_end_date"];
								$route_detail = $task["manufacture_description"];
								$comma_customer_order_nos = $task["customer_order_nos"];
							
								// === Inventory Status Check ===
								$dotClass = "red-dot-indicator";
								$tooltipContent = "";
								$allInStock = true;
								$inventoryStatus = [];

								$product_id = (int)$task['part_id'];

								$query = "
									SELECT 
										im.part_number,
										COALESCE(i.quantity_in_stock, 0) AS quantity_in_stock
									FROM bom b
									LEFT JOIN inventory i 
										ON b.sub_part_id = i.item_id
									LEFT JOIN item_management im
										ON b.sub_part_id = im.id
									WHERE b.main_product_id = $product_id
								";

								$result = $conn->query($query);

								if (!$result) {
									$tooltipContent = 'Error fetching inventory';
								} elseif ($result->num_rows > 0) {
									while ($row = $result->fetch_assoc()) {
										$partNumber = $row['part_number'] ?: 'Unknown Item';
										$qty = (int)$row['quantity_in_stock'];

										$status = ($qty > 0) ? "In Stock" : "Out of Stock";
										$inventoryStatus[] = "$partNumber: $status (Qty: $qty)";

										if ($qty <= 0) {
											$allInStock = false;
										}
									}

									if ($allInStock) {
										$dotClass = "green-dot-indicator";
									}

									$tooltipContent = "Inventory Status:\n" . implode("\n", $inventoryStatus);
								} else {
									$tooltipContent = "No BOM child parts linked.";
								}

							?> 

							<div class="gantt-task 
								<?php echo $task['is_break'] ? 'break-task' : ''; ?> 
								<?php echo $task['is_late'] ? 'late-task' : 'on-time-task'; ?>"  
								 draggable="true"
								 data-task-id="<?php echo $task["task_id"]; ?>"
								 data-priority="<?php echo $task["priority"]; ?>"
								 data-work-order="<?php echo htmlspecialchars($task["work_order_no"]); ?>" 
								 data-part-id="<?php echo $part_id; ?>" 
								 data-work-order-id="<?php echo $work_order_id; ?>"
								 data-hours="<?php echo $task['allocated_hours']; ?>"
								 data-current-machine="<?php echo $machineId; ?>"
								 style="left: <?php echo $leftPosition; ?>px; width: <?php echo $taskWidth; ?>px;">
								
								<?php if ($task['is_break']): ?>
									<div class="task-content">
										<strong>BREAK</strong><br/>
										<?php echo htmlspecialchars($task['break_reason']); ?><br/>
										Duration: <?php echo $task['allocated_hours']; ?>h
									</div>
								<?php else: ?>
									<div 
										class="dot-indicator <?php echo $dotClass; ?>" 
										title="<?php echo htmlspecialchars($tooltipContent); ?>">
									</div>


									<div class="task-content" style="font-size:12px; line-height: 1.4;">
										<div style="margin-bottom: 0px;">
											<?php echo $parent_ids == 0 ? htmlspecialchars($comma_customer_order_nos) : htmlspecialchars($parent_part_number); ?>
										</div>
										
										<div style="margin-bottom: 0px;">
											<?php echo htmlspecialchars($task["work_order_name"]); ?>
										</div>
										
										<div style="margin-bottom: 0px;">
											<strong>Item:</strong> <?php echo htmlspecialchars($part_name); ?>
											&nbsp;&nbsp;|&nbsp;&nbsp;
											<strong>Qty:</strong> <?php echo htmlspecialchars($quantity); ?>
										</div>
										
										<div style="margin-bottom: 0px;">
											<strong>Set Hours:</strong> <?php echo htmlspecialchars($setup_hours); ?>
											&nbsp;&nbsp;|&nbsp;&nbsp;
											<strong>Setting Inst:</strong> <?php echo htmlspecialchars($task["setting_instruction"]); ?>
										</div>
										
										<?php if ($task['is_breakdown_affected']): ?>
											<div style="margin-bottom: 0px; color: #ff0000;">
												<strong>Breakdown Delay: +<?php echo $task['breakdown_hours']; ?>h</strong>
											</div>
										<?php endif; ?>
										
										<div style="margin-bottom: 0px;">
											<strong>Desc:</strong> <?php echo htmlspecialchars($route_detail); ?>
										</div>
										
										<div style="margin-bottom: 0;">
											<strong>Due Date:</strong> 
											<?php echo !empty($manufacture_end_date) ? date('d-M-Y', strtotime($manufacture_end_date)) : 'N/A'; ?>
										</div>
									</div>
								<?php endif; ?>
								
								<div class="hour-indicator">
									<?php echo $task['allocated_hours']; ?>h
									<?php if ($task['is_breakdown_affected']): ?>
										<br><small>+<?php echo $task['breakdown_hours']; ?>h delay</small>
									<?php endif; ?>
								</div>
							</div>
							<?php endforeach; ?>
						<?php else: ?>
							<div class="no-tasks">No tasks scheduled</div>
						<?php endif; ?>
					</div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>

<!-- Work Order Detail Modal -->
<div class="modal fade" id="workOrderDetailModal" tabindex="-1" aria-labelledby="workOrderDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="workOrderDetailModalLabel">
                    <i class="fas fa-info-circle me-2"></i>Work Order Details
                </h5>
               
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span>
				</button>
            </div>
            <div class="modal-body">
                <div id="detailLoadingSpinner" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Loading details...</p>
                </div>
                <div id="workOrderDetailContent" style="display: none;">
                    <!-- Work Order Information -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="fas fa-clipboard-list me-2"></i>Order Information</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                   <!-- <p><strong>Work Order No:</strong> <span id="detail_wo_no"></span></p>-->
                                    <p><strong>Customer Order:</strong> <span id="detail_customer_order"></span></p>
                                    <p><strong>Work Order Name:</strong> <span id="detail_wo_name"></span></p>
									<p><strong>Status:</strong> <span id="detail_status" class="badge"></span></p>
                                </div>
                                <div class="col-md-6">
                                    <p><strong>Final Part:</strong> <span id="detail_final_part"></span></p>
                                    <p><strong>Customer code:</strong> <span id="detail_customer_code" class=""></span></p>
									<p><strong>RefSalescode:</strong> <span id="detail_RefSalesCode" class=""></span></p>
                                    
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Part Information -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="fas fa-cog me-2"></i>Part Information</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>Part/Set Name:</strong> <span id="detail_part_name"></span></p>
									<p><strong>Desc:</strong> <span id="detail_desc"></span></p>
                                    <p><strong>Quantity:</strong> <span id="detail_quantity"></span></p>
                                   
                                </div>
                                <div class="col-md-6">
                                    <p><strong>Setup Hours:</strong> <span id="detail_setup_hours"></span></p>
                                    <p><strong>Total Hours:</strong> <span id="detail_total_hours"></span></p>
                                    <p><strong>Due Date:</strong> <span id="detail_due_date"></span></p>
                                </div>
                            </div>
                        </div>
                    </div>
					<div class="card mb-3">
						<div class="card-header bg-light">
							<h6 class="mb-0"><i class="fas fa-cubes me-2"></i>Raw Materials</h6>
						</div>
						<div class="card-body">
							<div id="detail_bought_in_materials" class="alert alert-info mb-0">
								<i class="fas fa-box me-2"></i>
								<span id="materials_list">Loading...</span>
							</div>
						</div>
					</div>

                    <!-- Production Details -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="fas fa-wrench me-2"></i>Production Details</h6>
                        </div>
                        <div class="card-body">
                            <p><strong>Setting Instruction:</strong> <span id="detail_setting_instruction"></span></p>
                            <p><strong>Description:</strong> <span id="detail_route_desc"></span></p>
                            <div id="breakdown_info" style="display: none;" class="alert alert-danger">
                                <strong><i class="fas fa-exclamation-triangle me-2"></i>Breakdown Impact:</strong>
                                <span id="detail_breakdown_hours"></span> hours delay
                            </div>
                        </div>
                    </div>
<!-- Notes Section -->
<div class="card mb-3">
    <div class="card-header bg-light">
        <h6 class="mb-0">
            <i class="fas fa-edit me-2"></i>Notes / Remarks
        </h6>
    </div>
    <div class="card-body">
        <textarea 
            id="task_note" 
            class="form-control" 
            rows="4" 
            placeholder="Enter notes here..."></textarea>

        <input type="hidden" id="note_task_id">
        <input type="hidden" id="note_work_order_id">
        <input type="hidden" id="note_part_id">

        <button class="btn btn-success mt-2" onclick="saveTaskNote()">
            Save Note
        </button>
    </div>
</div>
                    <!-- Schedule Information -->
                <!--    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="fas fa-calendar me-2"></i>Schedule Information</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>Start Date:</strong> <span id="detail_start_date"></span></p>
                                    <p><strong>Start Time:</strong> <span id="detail_start_time"></span></p>
                                </div>
                                <div class="col-md-6">
                                    <p><strong>End Date:</strong> <span id="detail_end_date"></span></p>
                                    <p><strong>Shift:</strong> <span id="detail_shift"></span></p>
                                </div>
                            </div>
                        </div>
                    </div>-->
                </div>
                <div id="detailErrorMessage" class="alert alert-danger d-none" role="alert">
                    Failed to load work order details. Please try again.
                </div>
            </div>
            <div class="modal-footer">
				 <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times me-2"></i>Close</button>
                <button type="button" class="btn btn-warning hide" id="editWorkOrderBtn">
                    <i class="fas fa-edit me-2"></i>Edit
                </button>
                <button type="button" class="btn btn-info" id="splitWorkOrderBtn" style="display:none;">
                    <i class="fas fa-cut me-2"></i>Split Work Order
                </button>
                <button type="button" class="btn btn-danger" id="deleteWorkOrderBtn">
                    <i class="fas fa-trash me-2"></i>Delete
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Work Order Modal -->
<div class="modal fade" id="editWorkOrderModal" tabindex="-1" aria-labelledby="editWorkOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title" id="editWorkOrderModalLabel">
                    <i class="fas fa-edit me-2"></i>Edit Work Order
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editWorkOrderForm">
                    <input type="hidden" id="edit_task_id" name="task_id">
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="edit_priority" class="form-label">Priority</label>
                            <input type="number" class="form-control" id="edit_priority" name="priority" min="1">
                        </div>
                        <div class="col-md-6">
                            <label for="edit_machine" class="form-label">Machine</label>
                            <select class="form-control" id="edit_machine" name="machine_id">
                                <?php foreach ($taskNames as $machineId => $taskName): ?>
                                    <option value="<?php echo $machineId; ?>"><?php echo $taskName; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="edit_setup_hours" class="form-label">Setup Hours</label>
                            <input type="number" class="form-control" id="edit_setup_hours" name="setup_hours" step="0.5" min="0">
                        </div>
                        <div class="col-md-6">
                            <label for="edit_total_hours" class="form-label">Total Hours</label>
                            <input type="number" class="form-control" id="edit_total_hours" name="total_hours" step="0.5" min="0">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="edit_setting_instruction" class="form-label">Setting Instruction</label>
                        <textarea class="form-control" id="edit_setting_instruction" name="setting_instruction" rows="3"></textarea>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="edit_start_date" class="form-label">Start Date</label>
                            <input type="date" class="form-control" id="edit_start_date" name="start_date">
                        </div>
                        <div class="col-md-6">
                            <label for="edit_quantity" class="form-label">Quantity</label>
                            <input type="number" class="form-control" id="edit_quantity" name="quantity" min="1">
                        </div>
                    </div>
                </form>
            </div>
            <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="saveEditBtn">
                    <i class="fas fa-save me-2"></i>Save Changes
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Split Work Order Modal -->
<div class="modal fade" id="splitWorkOrderModal" tabindex="-1" aria-labelledby="splitWorkOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="splitWorkOrderModalLabel">
                    <i class="fas fa-cut me-2"></i>Split Work Order
                </h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span>
				</button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Split this work order into two separate work orders based on quantity.
                </div>
                
                <form id="splitWorkOrderForm">
                    <input type="hidden" id="split_task_id" name="task_id">
                    
                    <div class="mb-3">
                        <label class="form-label"><strong>Current Quantity:</strong></label>
                        <p id="split_current_quantity" class="form-control-plaintext">-</p>
                    </div>
                    
                    <div class="mb-3">
                        <label for="split_quantity" class="form-label">Split Quantity <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="split_quantity" name="split_quantity" 
                               min="1" step="1" required>
                        <small class="form-text text-muted">Enter the quantity for the new work order</small>
                    </div>
                    
                    <div id="split_preview" style="display:none;" class="mt-3">
                        <h6 class="border-bottom pb-2">Preview:</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title text-primary">Original WO</h6>
                                        <p class="mb-1"><strong>Quantity:</strong> <span id="preview_remaining_qty">-</span></p>
                                        <p class="mb-0"><strong>Hours:</strong> <span id="preview_remaining_hours">-</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title text-success">New WO</h6>
                                        <p class="mb-1"><strong>Quantity:</strong> <span id="preview_split_qty">-</span></p>
                                        <p class="mb-0"><strong>Hours:</strong> <span id="preview_split_hours">-</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="split_error" class="alert alert-danger mt-3" style="display:none;"></div>
                </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-info" id="confirmSplitBtn">
                    <i class="fas fa-check me-2"></i>Confirm Split
                </button>
            </div>
        </div>
    </div>
</div>

<script>
$('body').addClass('sidebar-collapse');
let currentTaskDetails = null;
document.addEventListener('DOMContentLoaded', function() {
    attachTaskClickHandlers();
});

function attachTaskClickHandlers() {
    document.querySelectorAll('.gantt-task').forEach(task => {
        if (task.classList.contains('break-task')) {
            return;
        }
        
        task.style.cursor = 'pointer';
        
        task.addEventListener('click', function(e) {
            if (task.classList.contains('dragging')) {
                return;
            }
            
            const taskId = this.dataset.taskId;
            const workOrderId = this.dataset.workOrderId;
            const partId = this.dataset.partId;
            const machineId = this.dataset.currentMachine;
            
            loadWorkOrderDetails(taskId, workOrderId, partId, machineId);
        });
    });
}

function loadWorkOrderDetails(taskId, workOrderId, partId, machineId) {
    const modal = new bootstrap.Modal(document.getElementById('workOrderDetailModal'));
    modal.show();
    
    $('#detailLoadingSpinner').show();
    $('#workOrderDetailContent').hide();
    $('#detailErrorMessage').addClass('d-none');
    
    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=get_vac_task_details",
        method: "POST",
        data: {
            task_id: taskId,
            work_order_id: workOrderId,
            part_id: partId,
            machine_id: machineId
        },
        dataType: "json",
        success: function(response) {
            if (response.success) {
                currentTaskDetails = response.data;
                displayWorkOrderDetails(response.data);
                $('#detailLoadingSpinner').hide();
                $('#workOrderDetailContent').show();
            } else {
                $('#detailLoadingSpinner').hide();
                $('#detailErrorMessage').text(response.message || 'Failed to load details').removeClass('d-none');
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error:", error);
            $('#detailLoadingSpinner').hide();
            $('#detailErrorMessage').removeClass('d-none');
        }
    });
}

function displayWorkOrderDetails(data) {
    $('#detail_wo_no').text(data.work_order_no || '-');
    $('#detail_customer_order').text(data.customer_order_nos || '-');
    $('#detail_wo_name').text(data.work_order_name || '-');
    $('#detail_final_part').text(data.parent_part_number || '-');
    $('#detail_customer_code').text(data.customer_code || '-');    
    $('#detail_RefSalesCode').text(data.RefSalesCode || '-');
	// Populate note fields
	$('#task_note').val(data.task_note || '');
	$('#note_task_id').val(data.task_id);
	$('#note_work_order_id').val(data.work_order_id);
	$('#note_part_id').val(data.part_id);

    const statusBadge = $('#detail_status');
    if (data.is_late) {
        statusBadge.text('Late').removeClass().addClass('badge bg-danger');
    } else {
        statusBadge.text('On Time').removeClass().addClass('badge bg-success');
    }
    
    // Part Information
    $('#detail_part_name').text(data.product_name || '-');
    $('#detail_quantity').text(data.quantity || '-');
    $('#detail_desc').text(data.manufacture_description || '-');
    $('#detail_setup_hours').text(data.setup_hours || '-');
    $('#detail_total_hours').text(data.total_hours || '-');
    $('#detail_due_date').text(data.end_date || '-');
    
    // ADD THIS: Display bought-in materials
    const materialsDiv = $('#detail_bought_in_materials');
    const materialsList = $('#materials_list');
    
    if (data.bought_in_materials && data.bought_in_materials !== 'None') {
        materialsDiv.removeClass('alert-info').addClass('alert-success');
        materialsList.html('<strong>' + data.bought_in_materials + '</strong>');
    } else {
        materialsDiv.removeClass('alert-success').addClass('alert-warning');
        materialsList.html('<em>No bought-in materials required</em>');
    }

    $('#detail_setting_instruction').text(data.setting_instruction || '-');
    $('#detail_route_desc').text(data.route_desc || '-');

    if (data.is_breakdown_affected && data.breakdown_hours > 0) {
        $('#breakdown_info').show();
        $('#detail_breakdown_hours').text(data.breakdown_hours);
    } else {
        $('#breakdown_info').hide();
    }
    
    // Schedule Information
    $('#detail_start_date').text(data.start_date || '-');
    $('#detail_start_time').text(data.start_time || '-');
    $('#detail_end_date').text(data.end_date || '-');
    $('#detail_shift').text(data.shift_name || '-');
    
    // Show/hide split button - only for non-break tasks with quantity > 1
    console.log('Split button check:', {
        is_break: data.is_break,
        quantity: data.quantity,
        shouldShow: !data.is_break && data.quantity > 1
    });
    
    if (data.is_break == 1 || data.quantity <= 1) {
        $('#splitWorkOrderBtn').hide();
    } else {
        $('#splitWorkOrderBtn').show();
    }
}

$('#editWorkOrderBtn').on('click', function() {
    if (!currentTaskDetails) return;
    
    $('#workOrderDetailModal').modal('hide');

    $('#edit_task_id').val(currentTaskDetails.task_id);
    $('#edit_priority').val(currentTaskDetails.priority);
    $('#edit_machine').val(currentTaskDetails.machine_id);
    $('#edit_setup_hours').val(currentTaskDetails.setup_hours);
    $('#edit_total_hours').val(currentTaskDetails.total_hours);
    $('#edit_setting_instruction').val(currentTaskDetails.setting_instruction);
    $('#edit_start_date').val(currentTaskDetails.start_date);
    $('#edit_quantity').val(currentTaskDetails.quantity);

    const editModal = new bootstrap.Modal(document.getElementById('editWorkOrderModal'));
    editModal.show();
});

$('#saveEditBtn').on('click', function() {
    const formData = {
        task_id: $('#edit_task_id').val(),
        priority: $('#edit_priority').val(),
        machine_id: $('#edit_machine').val(),
        setup_hours: $('#edit_setup_hours').val(),
        total_hours: $('#edit_total_hours').val(),
        setting_instruction: $('#edit_setting_instruction').val(),
        start_date: $('#edit_start_date').val(),
        quantity: $('#edit_quantity').val()
    };

    const $btn = $(this);
    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...');
    
    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=update_vac_task",
        method: "POST",
        data: formData,
        dataType: "json",
        success: function(response) {
            if (response.success) {
                alert('Work order updated successfully!');
                $('#editWorkOrderModal').modal('hide');
                location.reload();
            } else {
                alert('Error: ' + (response.message || 'Failed to update work order'));
                $btn.prop('disabled', false).html('<i class="fas fa-save me-2"></i>Save Changes');
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error:", error);
            alert('Error updating work order: ' + error);
            $btn.prop('disabled', false).html('<i class="fas fa-save me-2"></i>Save Changes');
        }
    });
});

$('#deleteWorkOrderBtn').on('click', function() {
    if (!currentTaskDetails) return;
    
    if (!confirm('Are you sure you want to delete this work order? This action cannot be undone.')) {
        return;
    }
    
    const $btn = $(this);
    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Deleting...');
    
    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=delete_vac_task",
        method: "POST",
        data: {
            task_id: currentTaskDetails.task_id,
            work_order_id: currentTaskDetails.work_order_id,
            part_id: currentTaskDetails.part_id
        },
        dataType: "json",
        success: function(response) {
            if (response.success) {
                alert('Work order deleted successfully!');
                $('#workOrderDetailModal').modal('hide');
                location.reload();
            } else {
                alert('Error: ' + (response.message || 'Failed to delete work order'));
                $btn.prop('disabled', false).html('<i class="fas fa-trash me-2"></i>Delete');
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error:", error);
            alert('Error deleting work order: ' + error);
            $btn.prop('disabled', false).html('<i class="fas fa-trash me-2"></i>Delete');
        }
    });
});

// Split Work Order functionality
$('#splitWorkOrderBtn').on('click', function() {
    if (!currentTaskDetails) return;
    
    $('#workOrderDetailModal').modal('hide');
    
    $('#split_task_id').val(currentTaskDetails.task_id);
    $('#split_current_quantity').text(currentTaskDetails.quantity);
   const maxSplitQty = currentTaskDetails.quantity - 1;

if (maxSplitQty < 1) {
    $('#split_quantity').prop('disabled', true);
    $('#split_error')
        .text('This work order cannot be split (quantity is 1)')
        .show();
} else {
    $('#split_quantity')
        .prop('disabled', false)
        .attr('max', maxSplitQty);
}


    $('#split_quantity').val('');
    $('#split_preview').hide();
    $('#split_error').hide();
    
    $('#splitWorkOrderModal').modal('show');
});

$('#split_quantity').on('input', function() {
    const splitQty = parseFloat($(this).val());
    const currentQty = parseFloat(currentTaskDetails.quantity);
    const setupHours = parseFloat(currentTaskDetails.setup_hours);
    const totalHours = parseFloat(currentTaskDetails.total_hours);
    
    $('#split_error').hide();
    
    if (!splitQty || splitQty <= 0) {
        $('#split_preview').hide();
        return;
    }
    
    if (splitQty >= currentQty) {
        $('#split_error').text('Split quantity must be less than current quantity (' + currentQty + ')').show();
        $('#split_preview').hide();
        return;
    }
    
    if (splitQty < 1) {
        $('#split_error').text('Split quantity must be at least 1').show();
        $('#split_preview').hide();
        return;
    }
    
    const hoursWithoutSetup = totalHours - setupHours;
    const hoursPerUnit = hoursWithoutSetup / currentQty;
    
    const remainingQty = currentQty - splitQty;
    const remainingHours = (remainingQty * hoursPerUnit) + setupHours;
    const splitHours = (splitQty * hoursPerUnit) + setupHours;
    
    $('#preview_remaining_qty').text(remainingQty.toFixed(0));
    $('#preview_remaining_hours').text(remainingHours.toFixed(2) + 'h');
    $('#preview_split_qty').text(splitQty.toFixed(0));
    $('#preview_split_hours').text(splitHours.toFixed(2) + 'h');
    $('#split_preview').show();
});

$('#confirmSplitBtn').on('click', function() {
    const taskId = $('#split_task_id').val();
    const splitQty = parseFloat($('#split_quantity').val());
    
    if (!splitQty || splitQty <= 0) {
        $('#split_error').text('Please enter a valid split quantity').show();
        return;
    }
    
    const $btn = $(this);
    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Splitting...');
    
    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=split_vac_work_order",
        method: "POST",
        data: {
            task_id: taskId,
            split_quantity: splitQty
        },
        dataType: "json",
        success: function(response) {
            if (response.success) {
                alert('Work order split successfully!\n\n' +
                      'Original WO: ' + response.original_quantity + ' units (' + response.original_hours + 'h)\n' +
                      'New WO: ' + response.split_quantity + ' units (' + response.split_hours + 'h)');
                $('#splitWorkOrderModal').modal('hide');
                location.reload();
            } else {
                $('#split_error').text(response.message || 'Failed to split work order').show();
                $btn.prop('disabled', false).html('<i class="fas fa-check me-2"></i>Confirm Split');
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error:", error);
            $('#split_error').text('Error splitting work order: ' + error).show();
            $btn.prop('disabled', false).html('<i class="fas fa-check me-2"></i>Confirm Split');
        }
    });
});
</script>
<!-- Start Breakdown Modal -->
<div class="modal fade" id="startBreakdownModal" tabindex="-1" aria-labelledby="startBreakdownModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="startBreakdownModalLabel">Start Machine Breakdown</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="startBreakdownForm">
                    <div class="mb-3">
                        <label for="startBreakdownMachine" class="form-label">Machine</label>
                        <select class="form-select" id="startBreakdownMachine" required>
                            <option value="">Select Machine</option>
                            <?php foreach ($taskNames as $machineId => $taskName): ?>
                                <option value="<?php echo $machineId; ?>">
                                    <?php echo $taskName; ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="breakdownReason" class="form-label">Breakdown Reason</label>
                        <?php 
                        // Call Keycode function to generate dropdown
                        echo Keycode::getKeycodeListValue(
                            "breakdown_reason",
                            "", 
                            "100%",
                            "Please Select",
                            "id",
                            "code",
                            "breakdown_reason", 
                            "",
                            "form-select", 
                            false,
                            "required"
                        );
                        ?>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmStartBreakdownBtn">Start Breakdown</button>
            </div>
        </div>
    </div>
</div>

<!-- Stop Breakdown Modal -->
<div class="modal fade" id="stopBreakdownModal" tabindex="-1" aria-labelledby="stopBreakdownModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="stopBreakdownModalLabel">Stop Machine Breakdown</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="stopBreakdownForm">
                    <div class="mb-3">
                        <label for="stopBreakdownMachine" class="form-label">Machine</label>
                        <select class="form-select" id="stopBreakdownMachine" required>
                            <option value="">Select Machine</option>
                            <?php 
                            // Only show machines that currently have active breakdowns
                            $activeBreakdownMachines = [];
                            $breakdownQuery = "SELECT DISTINCT mb.machine_id, sd.resource_code 
                                             FROM machine_breakdown mb 
                                             JOIN station_detail_table sd ON mb.machine_id = sd.id 
                                             WHERE mb.is_active = 1";
                            $breakdownResult = mysqli_query($conn, $breakdownQuery);
                            while ($row = mysqli_fetch_assoc($breakdownResult)) {
                                $activeBreakdownMachines[$row['machine_id']] = $row['resource_code'];
                            }
                            
                            foreach ($activeBreakdownMachines as $machineId => $machineName): 
                            ?>
                                <option value="<?php echo $machineId; ?>">
                                    <?php echo $machineName; ?> (Active Breakdown)
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        This will stop the breakdown and recalculate affected work orders.
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="confirmStopBreakdownBtn">Stop Breakdown</button>
            </div>
        </div>
    </div>
</div>
<script>
// Breakdown Start/Stop functionality
document.getElementById('startBreakdownBtn').addEventListener('click', function() {
    var startBreakdownModal = new bootstrap.Modal(document.getElementById('startBreakdownModal'));
    startBreakdownModal.show();
});

document.getElementById('stopBreakdownBtn').addEventListener('click', function() {
    var stopBreakdownModal = new bootstrap.Modal(document.getElementById('stopBreakdownModal'));
    stopBreakdownModal.show();
});

// Start Breakdown

document.getElementById('confirmStartBreakdownBtn').addEventListener('click', function() {
    const machineId = document.getElementById('startBreakdownMachine').value;
    const reason = document.getElementById('breakdown_reason').value; 
    alert(reason);
    if (!machineId || !reason) {
        alert('Please select a machine and breakdown reason');
        return;
    }
    
    const breakdownData = {
        machine_id: machineId,
        breakdown_reason: reason,
    };
    
    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=start_machine_breakdown",
        method: 'POST',
        data: breakdownData,
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                alert('Breakdown started successfully');
                $('#startBreakdownModal').modal('hide');
                // Reset form
                document.getElementById('startBreakdownForm').reset();
                window.location.reload();
            } else {
                alert('Error starting breakdown: ' + response.message);
            }
        },
        error: function(xhr, status, error) {
            alert('Error starting breakdown: ' + error);
        }
    });
});
//  reset functionality when modal is shown
$('#startBreakdownModal').on('show.bs.modal', function () {
    document.getElementById('startBreakdownForm').reset();
});
// Stop Breakdown
document.getElementById('confirmStopBreakdownBtn').addEventListener('click', function() {
    const machineId = document.getElementById('stopBreakdownMachine').value;
    
    if (!machineId) {
        alert('Please select a machine with active breakdown');
        return;
    }
    
    const breakdownData = {
        machine_id: machineId
    };
    
    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=stop_machine_breakdown",
        method: 'POST',
        data: breakdownData,
        dataType: 'json',
        success: function(response) {
            if (response.status === 'success') {
                alert('Breakdown stopped successfully');
                $('#stopBreakdownModal').modal('hide');
                window.location.reload();
            } else {
                alert('Error stopping breakdown: ' + response.message);
            }
        },
        error: function(xhr, status, error) {
            alert('Error stopping breakdown: ' + error);
        }
    });
});

// Helper function to refresh breakdown status (optional)
function refreshBreakdownStatus() {
    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=get_breakdown_status",
        method: 'GET',
        dataType: 'json',
        success: function(response) {
            // Update UI based on breakdown status if needed
            console.log('Breakdown status updated', response);
        }
    });
}

// Auto-refresh breakdown status every 2 minutes
setInterval(refreshBreakdownStatus, 120000);
</script>
<div class="modal fade" id="breakModal" tabindex="-1" aria-labelledby="breakModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="breakModalLabel">Add Machine Break</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span>
				</button>
            </div>
            <div class="modal-body">
                <form id="breakForm">
                    <div class="mb-3">
                        <label for="breakMachine" class="form-label">Machine</label>
                        <select class="form-select" id="breakMachine" required>
                            <option value="">Select Machine</option>
                            <?php foreach ($taskNames as $machineId => $taskName): ?>
                                <option value="<?php echo $machineId; ?>">
                                    <?php echo $taskName; ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="breakDuration" class="form-label">Duration (hours)</label>
                        <input type="number" class="form-control" id="breakDuration" 
                               min="1" max="10" step="1" required>
                        <div class="form-text">Minimum 1 hours, Maximum 10 hours</div>
                    </div>
                    <div class="mb-3">
                        <label for="breakReason" class="form-label">Reason</label>
                        <textarea class="form-control" id="breakReason" rows="2"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveBreakBtn">Save Break</button>
            </div>
        </div>
    </div>
</div>
<?php

?>
<style>
.custom-scroll {
    max-height: 400px;
    overflow-y: auto;
}
.select2-container {
    z-index: 9999 !important;
}
.select2-dropdown {
    z-index: 99999 !important;
}
#workOrderTableBody tr {
    cursor: pointer;
}

.form-check-input {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
    border: 2px solid #6c757d;
    border-radius: 4px;
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check-input:hover {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-check-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}


#workOrderTableBody tr:hover {
    background-color: #f8f9fa;
}


#workOrderTableBody td:last-child {
    text-align: center;
}

.checkbox-cell {
    padding: 15px !important;
}

.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 25px !important;
}

.sortable:hover {
    background-color: #e9ecef !important;
}

.sortable::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    opacity: 0.3;
    font-size: 14px;
}

.sortable.asc::after {
    content: '↑';
    opacity: 1;
    color: #0d6efd;
}

.sortable.desc::after {
    content: '↓';
    opacity: 1;
    color: #0d6efd;
}
.setting-instruction {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.materials-column {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.materials-badge {
    display: inline-block;
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    margin: 1px;
}

.no-materials {
    color: #999;
    font-style: italic;
    font-size: 11px;
}

.materials-available {
    color: #28a745;
}

.materials-unavailable {
    color: #dc3545;
}
</style>
<div class="modal fade" id="workOrderModal" tabindex="-1" aria-labelledby="workOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="workOrderModalLabel">Work Orders</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body custom-scroll">
                <div id="loadingSpinner" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Loading work orders...</p>
                </div>
                <div id="workOrderContent" style="display: none;">
                    <form id="workOrderForm">
                        <table class="table table-striped" id="workOrderTable">
                            <thead>
                                <tr>
                                    <th class="sortable" data-column="work_order_name" data-type="string">WO Number</th>
                                    <th class="sortable" data-column="product_name" data-type="string">Part Number</th>
                                    <th class="sortable" data-column="product_description" data-type="string">Part Description</th>
                                    <th class="sortable" data-column="end_date" data-type="date">Due Date</th>
                                    <th class="sortable" data-column="quantity" data-type="number">Qty</th>
                                    <th class="sortable" data-column="total_hours" data-type="number">Std Hours</th>
                                    <th class="sortable" data-column="setting_instruction" data-type="string">Setting Instruction</th>
                                    <!-- ADD THIS NEW COLUMN -->
                                    <th class="sortable" data-column="bought_in_materials" data-type="string">Raw Materials
                                    </th>
                                    <th>Machine</th>
                                    <th>Select</th>
                                </tr>
                            </thead>
                            <tbody id="workOrderTableBody">
                            </tbody>
                        </table>
                    </form>
                </div>
                <div id="errorMessage" class="alert alert-danger d-none" role="alert">
                    Failed to load work orders. Please try again.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button 
                    type="button" 
                    id="submitWorkOrdersBtn" 
                    class="btn btn-primary" 
                    onclick="showSelectedWorkOrders()"
                    disabled
                >
                    <span class="btn-text">Show Selected</span>
                    <span 
                        id="spinner" 
                        class="spinner-border spinner-border-sm ms-2 d-none" 
                        role="status" 
                        aria-hidden="true"
                    ></span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // Load work orders when modal is shown
    $('#workOrderModal').on('show.bs.modal', function () {
        loadWorkOrders();
    });
    
    // Clear data when modal is hidden
    $('#workOrderModal').on('hidden.bs.modal', function () {
        $('#workOrderTableBody').empty();
        $('#workOrderContent').hide();
        $('#loadingSpinner').show();
        $('#errorMessage').addClass('d-none');
        $('#submitWorkOrdersBtn').prop('disabled', true);
    });
});

function loadWorkOrders() {
    $('#loadingSpinner').show();
    $('#workOrderContent').hide();
    $('#errorMessage').addClass('d-none');
    
    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=get_work_orders_vac",
        method: "GET",
        dataType: "json",
        success: function(response) {
            if (response.success && response.data.length > 0) {
                renderWorkOrders(response.data);
                $('#loadingSpinner').hide();
                $('#workOrderContent').show();
                $('#submitWorkOrdersBtn').prop('disabled', false);
                
                // Initialize Select2 for machine dropdowns
                $('.select2').select2({
                    dropdownParent: $('#workOrderModal'),
                    width: '100%'
                });
                
                // Initialize table sorting
                initTableSort();
            } else {
                $('#loadingSpinner').hide();
                $('#errorMessage').text(response.message || 'No work orders found.').removeClass('d-none');
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error:", error);
            $('#loadingSpinner').hide();
            $('#errorMessage').removeClass('d-none');
        }
    });
}

function renderWorkOrders(workOrders) {
    const tbody = $('#workOrderTableBody');
    tbody.empty();
    
    workOrders.forEach(function(workOrder) {
        // Format materials for display
        let materialsHtml = '';
        if (workOrder.bought_in_materials && workOrder.bought_in_materials.trim() !== '') {
            const materials = workOrder.bought_in_materials.split(',');
            const displayMaterials = materials.slice(0, 2).map(m => m.trim()).join(', ');
            const remainingCount = materials.length - 2;
            
            if (materials.length <= 2) {
                materialsHtml = `<span class="materials-column materials-available" title="${workOrder.bought_in_materials}">${displayMaterials}</span>`;
            } else {
                materialsHtml = `<span class="materials-column materials-available" title="${workOrder.bought_in_materials}">${displayMaterials} <small>(+${remainingCount} more)</small></span>`;
            }
        } else {
            materialsHtml = '<span class="no-materials">No materials</span>';
        }
        
        const row = `
            <tr data-part-id="${workOrder.part_id}" data-wo-id="${workOrder.work_order_id}" data-set-id="${workOrder.set_id || 0}">
                <td>${workOrder.work_order_name || '-'}</td>
                <td>${workOrder.product_name}</td>
                <td>${workOrder.product_description}</td>
                <td>${workOrder.end_date}</td>
                <td>${workOrder.quantity}</td>
                <td>${workOrder.total_hours}</td>
                <td class="setting-instruction" title="${workOrder.setting_instruction || 'No setting instructions available'}">
                    ${workOrder.setting_instruction || '-'}
                </td>
                <td>${materialsHtml}</td>
                <td>${workOrder.machine_dropdown}</td>
                <td class="checkbox-cell">
                    <input 
                        class="form-check-input" 
                        type="checkbox" 
                        name="workOrder[]" 
                        value="${workOrder.work_order_id}" 
                        id="workOrder${workOrder.work_order_id}_${workOrder.id}"
                        data-machine-id="${workOrder.machine_id}"
                        data-id="${workOrder.id}"
                    >
                </td>
            </tr>
        `;
        tbody.append(row);
    });
    
    // Re-attach click handlers
    $('#workOrderTableBody tr').on('click', function(e) {
        // Don't toggle if clicking on the checkbox itself, select dropdown, or its elements
        if ($(e.target).is('input[type="checkbox"]') || 
            $(e.target).is('select') || 
            $(e.target).closest('.select2').length > 0 ||
            $(e.target).closest('select').length > 0) {
            return;
        }
        
        const checkbox = $(this).find('input[type="checkbox"]');
        checkbox.prop('checked', !checkbox.prop('checked'));
    });
}

// ========== SORTING FUNCTIONALITY ==========
function initTableSort() {
    const table = document.getElementById('workOrderTable');
    if (!table) return;

    const headers = table.querySelectorAll('th.sortable');
    
    headers.forEach(header => {
        header.addEventListener('click', function() {
            const column = this.dataset.column;
            const type = this.dataset.type;
            const tbody = table.querySelector('tbody');
            const rows = Array.from(tbody.querySelectorAll('tr'));
            
            // Determine sort direction
            let direction = 'asc';
            if (this.classList.contains('asc')) {
                direction = 'desc';
            }
            
            // Remove sort classes from all headers
            headers.forEach(h => h.classList.remove('asc', 'desc'));
            
            // Add sort class to current header
            this.classList.add(direction);
            
            // Get column index
            const columnIndex = Array.from(this.parentElement.children).indexOf(this);
            
            // Sort rows
            rows.sort((a, b) => {
                let aVal = a.children[columnIndex].textContent.trim();
                let bVal = b.children[columnIndex].textContent.trim();
                
                // Handle different data types
                if (type === 'number') {
                    aVal = parseFloat(aVal) || 0;
                    bVal = parseFloat(bVal) || 0;
                } else if (type === 'date') {
                    aVal = new Date(aVal);
                    bVal = new Date(bVal);
                }
                
                if (aVal < bVal) return direction === 'asc' ? -1 : 1;
                if (aVal > bVal) return direction === 'asc' ? 1 : -1;
                return 0;
            });
            
            // Reorder rows in DOM
            rows.forEach(row => tbody.appendChild(row));
            
            // Reinitialize Select2 after sorting
            if (typeof $('.select2').select2 === 'function') {
                $('.select2').select2('destroy');
                $('.select2').select2({
                    dropdownParent: $('#workOrderModal'),
                    width: '100%'
                });
            }
            
            // Reattach click handlers for rows after sorting
            $('#workOrderTableBody tr').off('click').on('click', function(e) {
                if ($(e.target).is('input[type="checkbox"]') || 
                    $(e.target).is('select') || 
                    $(e.target).closest('.select2').length > 0 ||
                    $(e.target).closest('select').length > 0) {
                    return;
                }
                
                const checkbox = $(this).find('input[type="checkbox"]');
                checkbox.prop('checked', !checkbox.prop('checked'));
            });
        });
    });
}

function showSelectedWorkOrders() {
    const workOrders = [];

    $('input[name="workOrder[]"]:checked').each(function () {
        const workOrderId = $(this).val();
        const row = $(this).closest('tr');
        const partId = row.data('part-id');
        const dbId = $(this).data('id');
        const machineSelectId = "machine_id_" + dbId;
        const machineId = $("#" + machineSelectId).val();

        workOrders.push({
            id: dbId,
            work_order_id: workOrderId,
            part_id: partId,
            machine_id: machineId
        });
    });

    if (workOrders.length === 0) {
        alert("Please select at least one work order.");
        return;
    }

    // Disable button and show spinner
    const $btn = $("#submitWorkOrdersBtn");
    $btn.prop("disabled", true);
    $("#spinner").removeClass("d-none");
    $btn.find(".btn-text").text("Submitting...");

    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=select_order_for_vac",
        method: "POST",
        data: { work_orders: JSON.stringify(workOrders) },
        success: function (response) {
            alert("Work orders submitted successfully!");
            location.reload();
        },
        error: function (xhr, status, error) {
            console.error("AJAX Error:", error);
            location.reload();
        },
        complete: function () {
            $btn.prop("disabled", false);
            $("#spinner").addClass("d-none");
            $btn.find(".btn-text").text("Show Selected");
        }
    });
}
</script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    let draggedTask = null;
    let highlightedNeighbor = null;

    document.querySelectorAll('.gantt-task').forEach(task => {
        task.addEventListener('dragstart', (e) => {
            draggedTask = task;
            task.classList.add('dragging');
            console.log('Dragging task with priority:', task.dataset.priority);
        });

        task.addEventListener('dragend', (e) => {
            task.classList.remove('dragging');
            if (highlightedNeighbor) {
                highlightedNeighbor.classList.remove('highlight-border');
                highlightedNeighbor = null;
            }
        });
    });

    document.querySelectorAll('.gantt-row').forEach(row => {
        row.addEventListener('dragover', (e) => {
            e.preventDefault();
            row.classList.add('drop-target');
            
            if (!draggedTask) return;
            
            const dropX = e.clientX - row.getBoundingClientRect().left;
            const tasks = [...row.querySelectorAll('.gantt-task')];
            const otherTasks = tasks.filter(t => t !== draggedTask);
            
            otherTasks.sort((a, b) => parseFloat(a.style.left) - parseFloat(b.style.left));
            
            if (highlightedNeighbor) {
                highlightedNeighbor.classList.remove('highlight-border');
                highlightedNeighbor = null;
            }
            
            for (let i = 0; i < otherTasks.length; i++) {
                const task = otherTasks[i];
                const taskLeft = parseFloat(task.style.left);
                const taskRight = taskLeft + parseFloat(task.style.width);
                
                if (taskRight < dropX) {
                    highlightedNeighbor = task;
                } else {
                    break;
                }
            }
            
            if (highlightedNeighbor) {
                highlightedNeighbor.classList.add('highlight-border');
            }
        });

        row.addEventListener('dragleave', (e) => {
            row.classList.remove('drop-target');
            if (highlightedNeighbor) {
                highlightedNeighbor.classList.remove('highlight-border');
                highlightedNeighbor = null;
            }
        });

        row.addEventListener('drop', (e) => {
            e.preventDefault();
            row.classList.remove('drop-target');

            if (!draggedTask) return;

            const dropX = e.clientX - row.getBoundingClientRect().left;
            const tasks = [...row.querySelectorAll('.gantt-task')];
            const otherTasks = tasks.filter(t => t !== draggedTask);
            
            otherTasks.sort((a, b) => parseFloat(a.style.left) - parseFloat(b.style.left));

            let leftNeighbor = null;
            for (let i = 0; i < otherTasks.length; i++) {
                const task = otherTasks[i];
                const taskLeft = parseFloat(task.style.left);
                const taskRight = taskLeft + parseFloat(task.style.width);
                
                if (taskRight < dropX) {
                    leftNeighbor = task;
                } else {
                    break;
                }
            }

            if (highlightedNeighbor) {
                highlightedNeighbor.classList.remove('highlight-border');
                highlightedNeighbor = null;
            }

            const taskId = draggedTask.dataset.taskId;
            const newMachineId = row.dataset.machineId;
            const partId = draggedTask.dataset.partId;
            const workOrderId = draggedTask.dataset.workOrderId;
            const leftNeighborPriority = leftNeighbor ? leftNeighbor.dataset.priority : null;
            const leftNeighborTaskId = leftNeighbor ? leftNeighbor.dataset.taskId : null;
            const newPosition = dropX;
            
                $.ajax({
                    url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=update_vac_task_priority",
                    method: 'POST',
                    data: { 
                        task_id: taskId,
                        new_machine_id: newMachineId,
                        part_id: partId, 
                        work_order_id: workOrderId, 
                        left_neighbor_priority: leftNeighborPriority,
                        left_neighbor_task_id: leftNeighborTaskId,
                        new_position: newPosition
                    }, 
                    dataType: 'json',
                    success: function(response) {
                        if (response.status === 'success') {
                            window.location.reload();
                        } else {
                            alert("Error updating task: " + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        alert("Error updating task: " + error);
                    }
                });
            
        });
    });

    let scrollInterval = null;
    const ganttScrollable = document.querySelector('.gantt-scrollable-content');
    const scrollSpeed = 20;
    const scrollMargin = 50;

    function startAutoScroll(direction) {
        if (scrollInterval) clearInterval(scrollInterval);
        
        scrollInterval = setInterval(() => {
            if (direction === 'left') {
                ganttScrollable.scrollLeft -= scrollSpeed;
            } else {
                ganttScrollable.scrollLeft += scrollSpeed;
            }
        }, 20);
    }

    function stopAutoScroll() {
        if (scrollInterval) {
            clearInterval(scrollInterval);
            scrollInterval = null;
        }
    }

    document.addEventListener('dragover', (e) => {
        if (!draggedTask) return;
        
        const scrollRect = ganttScrollable.getBoundingClientRect();
        const xPos = e.clientX - scrollRect.left;
        
        if (xPos < scrollMargin) {
            startAutoScroll('left');
        } else if (xPos > (scrollRect.width - scrollMargin)) {
            startAutoScroll('right');
        } else {
            stopAutoScroll();
        }
    });

    document.addEventListener('dragend', () => {
        stopAutoScroll();
    });

    document.addEventListener('drop', () => {
        stopAutoScroll();
    });

    // Add Break functionality
    document.getElementById('addBreakBtn').addEventListener('click', function() {
        var breakModal = new bootstrap.Modal(document.getElementById('breakModal'));
        breakModal.show();
    });

    document.getElementById('saveBreakBtn').addEventListener('click', function() {
        const machineId = document.getElementById('breakMachine').value;
        const duration = parseFloat(document.getElementById('breakDuration').value);
        const reason = document.getElementById('breakReason').value;
        
        if (!machineId || isNaN(duration) || duration < 0.5 || duration > 10) {
            alert('Please fill all fields with valid values');
            return;
        }
        
        // Find the highest priority task for this machine
        const tasks = [...document.querySelectorAll('.gantt-task')];
        const machineTasks = tasks.filter(task => 
            task.dataset.currentMachine === machineId
        );
        
        let highestPriorityTask = null;
        if (machineTasks.length > 0) {
            machineTasks.sort((a, b) => a.dataset.priority - b.dataset.priority);
            highestPriorityTask = machineTasks[0];
        }
        
        // Prepare data for AJAX
        const breakData = {
            machine_id: machineId,
            duration: duration,
            reason: reason,
            highest_priority_task_id: highestPriorityTask ? highestPriorityTask.dataset.taskId : null,
            highest_priority: highestPriorityTask ? highestPriorityTask.dataset.priority : null
        };
        
        // Send AJAX request
        $.ajax({
            url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=add_vac_break",
            method: 'POST',
            data: breakData,
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    alert('Break added successfully');
                    window.location.reload();
                } else {
                    alert('Error adding break: ' + response.message);
                }
            },
            error: function(xhr, status, error) {
                alert('Error adding break: ' + error);
            }
        });
    });
    </script> 
	
	<script>
function saveTaskNote() {
    let taskId = $('#note_task_id').val();
    let workOrderId = $('#note_work_order_id').val();
    let partId = $('#note_part_id').val();
    let note = $('#task_note').val();

    const $btn = $('button[onclick="saveTaskNote()"]');
    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Saving...');

    $.ajax({
        url: site_url + "/modules/machines_management/index.php?page=ajax_actions&action=save_task_note",
        type: 'POST',
        data: {
            task_id: taskId,
            work_order_id: workOrderId,
            part_id: partId,
            note: note
        },
        success: function(res) {
            let data = (typeof res === 'string') ? JSON.parse(res) : res;
            if (data.status === 'success') {
                $btn.removeClass('btn-success').addClass('btn-success')
                    .html('<i class="fas fa-check me-1"></i>Saved!');
                setTimeout(() => {
                    $btn.html('Save Note').prop('disabled', false);
                }, 2000);
            } else {
                $btn.html('Save Note').prop('disabled', false);
                alert('Failed to save note.');
            }
        },
        error: function() {
            $btn.html('Save Note').prop('disabled', false);
            alert('Error saving note.');
        }
    });
}

	</script>
</div>