.-.-.-.-.-

<?php include('head.php'); ?>
<?php
// Get schedule ID from URL parameter
$schedule_id = $_GET['id'];
// Include database connection and TaskService class
require_once '../../Classes/Database.php';
require_once '../../Service/TaskService.php';

require_once '../../Classes/System.php';

require_once '../../Service/ServiceService.php';

// Create ServiceService instance
$serviceService = new ServiceService();
$services = $serviceService->getAllServicesForDropdown();

// Create TaskService instance
$taskService = new TaskService();
$System = new System();

$schedule_id = $System->decryptData($_GET['id']);
// show error if the provided id is not valid with Swal alert
if (!$schedule_id) {
    echo "<script>
        Swal.fire({
            title: 'Invalid Schedule ID',
            text: 'The URL parameter is invalid. Please go back and try again.',
            icon: 'error',
            confirmButtonText: 'OK'
        }).then(() => {
            window.location.href = 'viewschedules.php';
        });
    </script>";
    exit;
}

// Fetch tasks from the database that belong to the given schedule
$tasks = $taskService->getTasksByScheduleId($schedule_id);
?>
<div class="main-content">
    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-layers bg-blue"></i>
                        <div class="d-inline">
                            <h5>View Tasks</h5>
                            <span>View tasks for the selected schedule</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="../../index.html"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">Schedules</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">View Tasks</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-header-left">
                            <a href="javascript:history.back()" class="btn btn-outline-primary">Back</a>
                        </div>
                        <div class="card-header-right">

<?php //echo $schedule_id; ?>

<button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#createTaskModal"><i class="ik ik-plus"></i>Create Task
                            </button>
                        </div>

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

<div class="modal fade" id="createTaskModal" role="dialog" aria-labelledby="exampleModalCenterLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-xl mt-0 mb-0" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalCenterLabel">Add a Task</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="tasksForm">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <div class="col-sm-9">
                                            <input type="text" id="schedule-id" name="schedule-id" class="form-control"
                                                   value="<?php echo $schedule_id; ?>" <?php echo isset($schedule_id) ? 'readonly' : ''; ?>
                                                   hidden>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="service-id" class="col-sm-3 col-form-label">Service:</label>
                                        <div class="col-sm-9">
                                            <select id="service-id" name="service-id" class="form-control select2"></select>
                                        </div>
                                    </div>

services.forEach(service => {
                                                var option = document.createElement("option");
                                                option.value = service.id; // Use service ID as value
                                                option.textContent = service.name; // Show service name
                                                serviceSelect.appendChild(option);
                                            });
                                        });
                                    </script>

<div class="form-group row">
                                        <label for="frequency" class="col-sm-3 col-form-label">Frequency:</label>
                                        <div class="col-sm-9">
                                            <select id="frequency" name="frequency" class="form-control select2 frequencySelect">
                                                <option value="daily">Daily</option>
                                                <option value="3x/week">3x/week</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <input type="text" id="dates" name="dates" hidden>
                                <div class="col-md-6">
                                    <div class="d-flex flex-column">
                                        <h1>Select Dates</h1>
                                        <div class="date-picker"></div>
                                        <div class="date-time-container"></div>
                                    </div>
                                </div>
                            </div>
                        </form>

<div id="message" class="mt-3"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" form="tasksForm" class="btn btn-primary">Add Task</button>
                    </div>
                </div>
            </div>
        </div>

});

function initializeFlatpickr() {
                $('.date-picker').each(function () {
                    flatpickr(this, {
                        dateFormat: "Y-m-d",
                        mode: "multiple",
                        inline: true,
                        onChange: function (selectedDates, dateStr, instance) {
                            const container = $(instance.element).closest('.d-flex').find('.date-time-container');
                            const existingDateTimePairs = [];

container.find('.form-group').each(function () {
                                const date = $(this).find('input[type="text"]').first().val();
                                const time = $(this).find('.time-picker').val();
                                existingDateTimePairs.push({ date, time });
                            });

selectedDates.sort((a, b) => new Date(a) - new Date(b));
                            container.empty();

selectedDates.forEach((date) => {
                                const formattedDate = formatDate(date);
                                let timeValue = '';

existingDateTimePairs.forEach(pair => {
                                    if (pair.date === formattedDate) {
                                        timeValue = pair.time;
                                    }
                                });

container.append(`
                            <div class="form-group mb-2 mr-sm-2 mb-sm-0">
                                <input type="text" class="form-control" value="${formattedDate}" readonly>
                                <input type="text" class="form-control time-picker" placeholder="Select Time" value="${timeValue}">
                            </div>
                        `);
                            });

initializeTimePicker(container);
                        }
                    });
                });
            }

function initializeTimePicker(container) {
                container.find('.time-picker').each(function () {
                    flatpickr(this, {
                        enableTime: true,
                        noCalendar: true,
                        dateFormat: "H:i",
                    });
                });
            }

document.getElementById('tasksForm').addEventListener('submit', function (event) {
                event.preventDefault();

// Collect date-time pairs
                const dateTimePairs = [];
                document.querySelectorAll('.date-time-container .form-group').forEach(group => {
                    const date = group.querySelector('input[type="text"]').value;
                    const time = group.querySelector('.time-picker').value;
                    dateTimePairs.push({ date, time });
                });

// Set the dates field value
                document.getElementById('dates').value = JSON.stringify(dateTimePairs);

// Validate dates
                if (dateTimePairs.length === 0) {
                    Swal.fire({
                        title: 'Error',
                        text: 'Please select dates',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

// Collect form data
                const formData = new FormData(this);

// Send form data via fetch
                fetch('submit_task.php', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => response.text())
                    .then(data => {
                        // Reset form fields
                        document.getElementById('service-id').value = '';
                        document.getElementById('frequency').value = '';
                        document.querySelector('.date-time-container').innerHTML = '';

// Show success message
                        Swal.fire({
                            title: 'Task Created',
                            text: data,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            location.reload();
                        });
                    })
                    .catch(error => {
                        // Show error message
                        Swal.fire({
                            title: 'Error',
                            text: error,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    });
            });

function populateRegion() {
                var selectedService = document.getElementById('service-name').value;
                var selectedServiceData = <?php echo json_encode($services); ?>;
                var regionSelect = document.getElementById('region');

regionSelect.innerHTML = '';

selectedServiceData.forEach(service => {
                    if (service.name === selectedService) {
                        var regionOption = document.createElement('option');
                        regionOption.value = service.region;
                        regionOption.textContent = service.region;
                        regionSelect.appendChild(regionOption);
                    }
                });
            }

populateRegion();
        </script>

<div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-header-left">
                            <h3>View Tasks</h3>
                        </div>
                        <div class="card-header-right">

</div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <div class="col-sm-3">
                                        <label for="filter_service" class="col-form-label">Filter Service Name:</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="filter_service">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-2">
                                        <div class="row">
                                            <div class="col-sm-3">
                                                <label for="filter_region" class="col-form-label">Filter Region:</label>
                                            </div>
                                            <div class="col-sm-9">
                                            <select class="form-control" id="filter_region">
                                                <option value="">All Regions</option>
                                                     <?php
                                                    // Collect unique regions
                                                    $uniqueRegions = [];
                                                    foreach ($services as $service) {
                                                        if (!in_array($service->region, $uniqueRegions)) {
                                                            $uniqueRegions[] = $service->region;
                                                            ?>
                                                            <option value="<?= htmlspecialchars($service->region) ?>"><?= htmlspecialchars($service->region) ?></option>
                                                            <?php
                                                        }
                                                    }
                                                    ?>
                                            </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="row">
                                            <div class="col-sm-2">
                                                <label for="filter_finished" class="col-form-label">Filter
                                                    Finished:</label>
                                            </div>
                                            <div class="col-sm-9">
                                                <select class="form-control" id="filter_finished">
                                                    <option value="">All</option>
                                                    <option value="Not Finished">Not Finished.</option>
                                                    <option value="Finished.">Finished.</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="row">
                                            <div class="col-sm-2">
                                                <label for="filter_assigned" class="col-form-label">Filter
                                                    Assigned:</label>
                                            </div>
                                            <div class="col-sm-9">
                                                <select class="form-control" id="filter_assigned">
                                                    <option value="">All</option>
                                                    <option value="Not Assigned">Not Assigned.</option>
                                                    <option value="Assigned.">Assigned.</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="row">
                                            <div class="col-sm-2">
                                                <label for="filter_public" class="col-form-label">Filter Public:</label>
                                            </div>
                                            <div class="col-sm-8">
                                                <select class="form-control" id="filter_public">
                                                    <option value="">All</option>
                                                    <option value="Not Public">Not Public</option>
                                                    <option value="Public.">Public.</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">

</div>
                                </div>
                                
                            </div>
                        </div>
                        <table id="superadvanced_table" class="table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Service Name</th>
                                <th>Region</th>
                                <th>Frequency</th>
                                <th>Created By</th>
                                <th>Created At</th>
                                <th>Finished</th>
                                <th>Assigned</th>

<th>Public Status</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php foreach ($tasks as $task): ?>
                                <tr>
                                    <td><?php echo 'TSK-000' . $task->id; ?></td>
                                    <td><?php echo $task->service_name; ?></td>
                                    <td><?php echo $task->region; ?></td>
                                    <td><?php echo $task->frequency; ?></td>
                                    <td><?php echo $task->created_by_name; ?></td>
                                    <td><?php echo date('F j, Y, g:i a', strtotime($task->created_at)); ?></td>
                                    <td><?php echo($task->finished ? '<label class="badge badge-success">Finished.</label>' : '<label class="badge badge-warning">Not Finished</label>'); ?></td>
                                    <td><?php echo($task->is_assigned ? '<label class="badge badge-success">Assigned.</label>' : '<label class="badge badge-warning">Not Assigned</label>'); ?></td>

<td><?php echo($task->isPublic ? '<label class="badge badge-warning">Public.</label>' : '<label class="badge badge-success">Not Public</label>'); ?></td>
                                    <td>
                                        <a href="viewtask.php?id=<?php echo $System->encryptData($task->id); ?>"
                                           class="btn btn-primary">View Details</a>
                                        <?php if ($task->is_assigned == 0): ?>
                                            <button class="btn btn-danger delete-task"
                                                    data-task-id="<?php echo $System->encryptData($task->id); ?>">Remove
                                            </button>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                    <script>
                        $(document).ready(function () {
                            // Initialize DataTable
                            var table = $('#superadvanced_table').DataTable({
                                // Configure initial settings if needed
                            });

// Function to save filters to localStorage
                            function saveFilters() {
                                var filters = {
                                    service: $('#filter_service').val(),
                                    region: $('#filter_region').val(),
                                    finished: $('#filter_finished').val(),
                                    assigned: $('#filter_assigned').val(),
                                    public: $('#filter_public').val()
                                };
                                localStorage.setItem('superadvancedTableFilters', JSON.stringify(filters));
                            }

// Function to apply saved filters
                            function applyFilters() {
                                var filters = JSON.parse(localStorage.getItem('superadvancedTableFilters'));
                                if (filters) {
                                    $('#filter_service').val(filters.service).trigger('keyup');
                                    $('#filter_region').val(filters.region).trigger('change');
                                    $('#filter_finished').val(filters.finished).trigger('change');
                                    $('#filter_assigned').val(filters.assigned).trigger('change');
                                    $('#filter_public').val(filters.public).trigger('change');
                                }
                            }

// Function to reset filters
                            function resetFilters() {
                                $('#filter_service').val('').trigger('keyup');
                                $('#filter_region').val('').trigger('change');
                                $('#filter_finished').val('').trigger('change');
                                $('#filter_assigned').val('').trigger('change');
                                $('#filter_public').val('').trigger('change');
                                localStorage.removeItem('superadvancedTableFilters');
                                table.search('').columns().search('').draw();
                            }

// Check previous page and apply filters if necessary
                            function checkPreviousPage() {
                                var previousUrl = sessionStorage.getItem('previousUrl');
                                if (!previousUrl || !previousUrl.includes('viewtask.php')) {
                                    resetFilters();
                                } else {
                                    applyFilters();
                                }
                            }

checkPreviousPage();

// Add custom filters
                            $('#filter_service').on('keyup', function () {
                                table.column(1).search($(this).val()).draw();
                                saveFilters();
                            });

$('#filter_finished').on('change', function () {
                                table.column(6).search($(this).val()).draw();
                                saveFilters();
                            });

$('#filter_region').on('change', function () {
                                table.column(2).search($(this).val()).draw();
                                saveFilters();
                            });

$('#filter_assigned').on('change', function () {
                                table.column(7).search($(this).val()).draw();
                                saveFilters();
                            });

$('#filter_public').on('change', function () {
                                table.column(8).search($(this).val()).draw();
                                saveFilters();
                            });

// Add reset filters button functionality
                            $('#reset_filters').on('click', function () {
                                resetFilters();
                            });

// Apply saved filters on initial load
                            applyFilters();
                        });
                    </script>

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

</div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var deleteButtons = document.querySelectorAll('.delete-task');
        deleteButtons.forEach(function (button) {
            button.addEventListener('click', function () {
                var taskId = button.getAttribute('data-task-id');

Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        var xhr = new XMLHttpRequest();
                        xhr.open('POST', 'delete_task.php', true);
                        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState == 4 && xhr.status == 200) {
                                if (xhr.responseText === 'success') {
                                    Swal.fire({
                                        title: 'Deleted!',
                                        text: 'Your task has been deleted.',
                                        icon: 'success'
                                    }).then(() => {
                                        window.location.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        title: 'Error!',
                                        text: xhr.responseText,
                                        icon: 'error'
                                    });
                                }
                            }
                        };
                        xhr.send('taskId=' + taskId);
                    }
                });
            });
        });
    });
</script>

<?php include('footer.php'); ?>

/home/emeraadmin/.razor/../www/pages/taskprovider/viewscheduletasks.php