adjust the ui of services.php like customers.php

services.php:<?php
// services.php
include 'db.php';

// Συνάρτηση για την παραγωγή ενός μοναδικού αριθμού υπηρεσίας
function generateServiceNumber($pdo) {
    do {
        $service_number = mt_rand(100000, 999999); // Δημιουργία 6ψήφιου αριθμού
        // Έλεγχος αν ο παραγόμενος αριθμός έχει ήδη χρησιμοποιηθεί
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM services WHERE service_number = ?");
        $stmt->execute([$service_number]);
    } while ($stmt->fetchColumn() > 0); // Επανάληψη αν ο αριθμός έχει ήδη χρησιμοποιηθεί

    return $service_number;
}

// Διαχείριση διαφορετικών ενεργειών
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action'])) {
        switch ($_POST['action']) {
            case 'add_service': // Προσθήκη νέας υπηρεσίας
                $customer_id = $_POST['customer_id'];
                $device_id = $_POST['device_id'];
                $service_date = $_POST['service_date'];
                $comments = $_POST['comments'];
                $technician_comments = $_POST['technician_comments'];
                $status = $_POST['status'];
                $delivered_date = isset($_POST['delivered_date']) ? $_POST['delivered_date'] : null;
                $service_number = generateServiceNumber($pdo);

                $stmt = $pdo->prepare("INSERT INTO services (customer_id, device_id, service_date, comments, technician_comments, service_number, status, delivered_date) VALUES (?, ?, ?, ?, ?, ?, ?, ?)");
                $stmt->execute([$customer_id, $device_id, $service_date, $comments, $technician_comments, $service_number, $status, $delivered_date]);

                header('Location: services.php?status=success');
                exit;

            case 'edit_service': // Επεξεργασία υπάρχουσας υπηρεσίας
                $service_id = $_POST['service_id'];
                $customer_id = $_POST['customer_id'];
                $device_id = $_POST['device_id'];
                $service_date = $_POST['service_date'];
                $comments = $_POST['comments'];
                $technician_comments = $_POST['technician_comments'];
                $status = $_POST['status'];
                $delivered_date = isset($_POST['delivered_date']) ? $_POST['delivered_date'] : null;

                $stmt = $pdo->prepare("UPDATE services SET customer_id = ?, device_id = ?, service_date = ?, comments = ?, technician_comments = ?, status = ?, delivered_date = ? WHERE id = ?");
                $stmt->execute([$customer_id, $device_id, $service_date, $comments, $technician_comments, $status, $delivered_date, $service_id]);

                header('Location: services.php?status=edited');
                exit;

            case 'delete_service': // Διαγραφή υπηρεσίας
                $service_id = $_POST['service_id'];
                $stmt = $pdo->prepare("DELETE FROM services WHERE id = ?");
                $stmt->execute([$service_id]);

                header('Location: services.php?status=deleted');
                exit;
        }
    }
}

// Απόκτηση συσκευών πελάτη
if (isset($_GET['action']) && $_GET['action'] == 'get_devices') {
    $customer_id = $_GET['customer_id'];
    $devices = $pdo->prepare("SELECT d.id, d.type, d.brand, d.model, cd.serial_number 
                              FROM devices d
                              JOIN customer_devices cd ON d.id = cd.device_id
                              WHERE cd.customer_id = ?");
    $devices->execute([$customer_id]);
    echo json_encode($devices->fetchAll(PDO::FETCH_ASSOC));
    exit;
}

// Προβολή λεπτομερειών υπηρεσίας
if (isset($_GET['view_id'])) {
    $view_id = $_GET['view_id'];
    $stmt = $pdo->prepare("SELECT s.*, c.full_name, d.type, d.brand, d.model, cd.serial_number 
                           FROM services s
                           JOIN customers c ON s.customer_id = c.id
                           JOIN customer_devices cd ON s.device_id = cd.device_id
                           JOIN devices d ON cd.device_id = d.id
                           WHERE s.id = ?");
    $stmt->execute([$view_id]);
    $viewService = $stmt->fetch(PDO::FETCH_ASSOC);
    echo json_encode($viewService);
    exit;
}

// Απόκτηση υπηρεσίας προς επεξεργασία
$editService = null;
if (isset($_GET['edit_id'])) {
    $edit_id = $_GET['edit_id'];
    $stmt = $pdo->prepare("SELECT * FROM services WHERE id = ?");
    $stmt->execute([$edit_id]);
    $editService = $stmt->fetch(PDO::FETCH_ASSOC);
}
?>

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Υπηρεσίες - Digihack</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: #f4f6f8;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
        }
        .container {
            flex: 1;
            margin-top: 20px;
        }
        .navbar {
            background-color: #282828;
        }
        .navbar-brand img {
            height: 40px;
        }
        .nav-link {
            color: #fff !important;
        }
        .nav-link.active {
            font-weight: bold;
            color: #d32f2f !important;
        }
        .content {
            margin-top: 40px;
        }
        .modal-header, .btn-custom, .footer {
            background-color: #d32f2f;
            color: white;
        }
        .btn-custom:hover {
            background-color: #b71c1c;
        }
        .footer a {
            color: #d32f2f;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
        .footer {
            background-color: #282828;
            color: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }
        .table-hover tbody tr:hover {
            background-color: #e9ecef;
        }
        .select2-container--default .select2-selection--single {
            height: calc(2.25rem + 2px);
        }
        .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: 2.25rem;
        }
        .select2-container .select2-selection--single .select2-selection__arrow {
            height: 100%;
        }
        .alert {
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="#"><img src="uploads/digihack-logo-new.png" alt="Digihack"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link <?= ($page == 'customers') ? 'active' : '' ?>" href="customers.php">Πελάτες</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($page == 'services') ? 'active' : '' ?>" href="services.php">Υπηρεσίες</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($page == 'devices') ? 'active' : '' ?>" href="devices.php">Συσκευές</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($page == 'settings') ? 'active' : '' ?>" href="settings.php">Ρυθμίσεις</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <h1 class="text-center mb-4">Διαχείριση Υπηρεσιών</h1>

        <?php if (isset($_GET['status'])): ?>
            <div class="alert alert-<?php echo $_GET['status'] == 'success' ? 'success' : ($_GET['status'] == 'edited' ? 'info' : 'danger'); ?>">
                Η υπηρεσία <?php echo ($_GET['status'] == 'success' ? 'προστέθηκε' : ($_GET['status'] == 'edited' ? 'ενημερώθηκε' : 'διαγράφηκε')); ?> επιτυχώς!
            </div>
        <?php endif; ?>

        <div class="d-flex justify-content-between mb-3">
            <button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#serviceModal">
                <?php echo $editService ? 'Επεξεργασία Υπηρεσίας' : 'Προσθήκη Νέας Υπηρεσίας'; ?>
            </button>
            <input type="text" id="serviceSearch" class="form-control w-50" placeholder="Αναζήτηση υπηρεσιών με αριθμό υπηρεσίας ή όνομα πελάτη...">
        </div>

        <!-- Modal Υπηρεσίας -->
        <div class="modal fade" id="serviceModal" tabindex="-1" aria-labelledby="serviceModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="serviceModalLabel"><?php echo $editService ? 'Επεξεργασία Υπηρεσίας' : 'Προσθήκη Νέας Υπηρεσίας'; ?></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 action="services.php" method="post">
                            <input type="hidden" name="action" value="<?php echo $editService ? 'edit_service' : 'add_service'; ?>">
                            <?php if ($editService): ?>
                                <input type="hidden" name="service_id" value="<?php echo $editService['id']; ?>">
                            <?php endif; ?>
                            <div class="form-group">
                                <label for="customer_id">Επιλογή Πελάτη</label>
                                <select id="customer_id" name="customer_id" class="form-control select2" required onchange="fetchDevices(this.value)">
                                    <option value="">Επιλέξτε πελάτη</option>
                                    <?php
                                    $customers = $pdo->query("SELECT id, full_name FROM customers")->fetchAll(PDO::FETCH_ASSOC);
                                    foreach ($customers as $customer) {
                                        $selected = $editService && $editService['customer_id'] == $customer['id'] ? 'selected' : '';
                                        echo "<option value=\"{$customer['id']}\" $selected>{$customer['full_name']}</option>";
                                    }
                                    ?>
                                </select>
                            </div>
                            <div class="form-group" id="deviceSelectContainer" style="display:<?php echo $editService ? 'block' : 'none'; ?>;">
                                <label for="device_id">Επιλογή Συσκευής Πελάτη</label>
                                <select id="device_id" name="device_id" class="form-control" required>
                                    <?php if ($editService): ?>
                                        <?php
                                        $devices = $pdo->prepare("SELECT d.id, d.type, d.brand, d.model, cd.serial_number 
                                                                  FROM devices d
                                                                  JOIN customer_devices cd ON d.id = cd.device_id
                                                                  WHERE cd.customer_id = ?");
                                        $devices->execute([$editService['customer_id']]);
                                        foreach ($devices as $device) {
                                            $selected = $editService['device_id'] == $device['id'] ? 'selected' : '';
                                            echo "<option value=\"{$device['id']}\" $selected>{$device['type']} - {$device['brand']} - {$device['model']} - Σειριακός: {$device['serial_number']}</option>";
                                        }
                                        ?>
                                    <?php endif; ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="service_date">Ημερομηνία Υπηρεσίας</label>
                                <input type="date" class="form-control" id="service_date" name="service_date" required value="<?php echo $editService ? $editService['service_date'] : ''; ?>">
                            </div>
                            <div class="form-group">
                                <label for="comments">Σχόλια</label>
                                <textarea class="form-control" id="comments" name="comments"><?php echo $editService ? $editService['comments'] : ''; ?></textarea>
                            </div>
                            <div class="form-group">
                                <label for="technician_comments">Σχόλια Τεχνικού</label>
                                <textarea class="form-control" id="technician_comments" name="technician_comments"><?php echo $editService ? $editService['technician_comments'] : ''; ?></textarea>
                            </div>
                            <div class="form-group">
                                <label for="status">Κατάσταση</label>
                                <select id="status" name="status" class="form-control">
                                    <option value="Παραλαβή" <?php echo $editService && $editService['status'] == 'Received' ? 'selected' : ''; ?>>Παραλαβή</option>
                                    <option value="Αναμονή για Ανταλλακτικό" <?php echo $editService && $editService['status'] == 'On Hold for Part' ? 'selected' : ''; ?>>Αναμονή για Ανταλλακτικό</option>
                                    <option value="Παραδόθηκε" <?php echo $editService && $editService['status'] == 'Delivered' ? 'selected' : ''; ?>>Παραδόθηκε</option>
                                </select>
                            </div>
                            <div class="form-group" id="deliveredDateContainer" style="display:<?php echo $editService && $editService['status'] == 'Delivered' ? 'block' : 'none'; ?>;">
                                <label for="delivered_date">Ημερομηνία Παράδοσης</label>
                                <input type="date" class="form-control" id="delivered_date" name="delivered_date" value="<?php echo $editService ? $editService['delivered_date'] : ''; ?>">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Ακύρωση</button>
                                <button type="submit" class="btn btn-outline-danger"><?php echo $editService ? 'Ενημέρωση Υπηρεσίας' : 'Προσθήκη Υπηρεσίας'; ?></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Προβολής Υπηρεσίας -->
        <div class="modal fade" id="viewServiceModal" tabindex="-1" aria-labelledby="viewServiceModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="viewServiceModalLabel">Προβολή Λεπτομερειών Υπηρεσίας</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="serviceDetails">
                            <!-- Οι λεπτομέρειες της υπηρεσίας θα φορτωθούν εδώ -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Κλείσιμο</button>
                    </div>
                </div>
            </div>
        </div>

        <h2>Λίστα Υπηρεσιών</h2>
        <?php
        $services = $pdo->query("SELECT s.id, s.service_number, s.service_date, c.full_name AS customer_name, s.status, s.delivered_date
                                FROM services s
                                JOIN customers c ON s.customer_id = c.id
                                ORDER BY s.service_date DESC")->fetchAll(PDO::FETCH_ASSOC);
        if (count($services) > 0): ?>
            <table class="table table-bordered table-hover mt-4">
                <thead class="thead-dark">
                    <tr>
                        <th>Αριθμός Υπηρεσίας</th>
                        <th>Πελάτης</th>
                        <th>Ημερομηνία Υπηρεσίας</th>
                        <th>Κατάσταση</th>
                        <th>Ημερομηνία Παράδοσης</th>
                        <th>Ενέργειες</th>
                    </tr>
                </thead>
                <tbody id="serviceTable">
                    <?php foreach ($services as $service): ?>
                    <tr>
                        <td><?= htmlspecialchars($service['service_number']) ?></td>
                        <td><?= htmlspecialchars($service['customer_name']) ?></td>
                        <td><?= htmlspecialchars($service['service_date']) ?></td>
                        <td><?= htmlspecialchars($service['status']) ?></td>
                        <td><?= $service['delivered_date'] ? htmlspecialchars($service['delivered_date']) : '' ?></td>
                        <td>
                            <div class="btn-group" role="group">
                                <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#viewServiceModal" onclick="loadServiceDetails(<?= htmlspecialchars($service['id']) ?>)">Προβολή</button>
                                <a href="services.php?edit_id=<?= htmlspecialchars($service['id']) ?>" class="btn btn-warning btn-sm">Επεξεργασία</a>
                                <form action="services.php" method="post" style="display:inline;" onsubmit="return confirmDelete();">
                                    <input type="hidden" name="action" value="delete_service">
                                    <input type="hidden" name="service_id" value="<?= htmlspecialchars($service['id']) ?>">
                                    <button type="submit" class="btn btn-danger btn-sm">Διαγραφή</button>
                                </form>
                                <a href="generate_service_pdf.php?id=<?= htmlspecialchars($service['id']) ?>" class="btn btn-secondary btn-sm" target="_blank">Εκτύπωση</a>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php else: ?>
            <p>Δεν βρέθηκαν υπηρεσίες.</p>
        <?php endif; ?>
    </div>
    <div class="footer">
        <p>&copy; 2024 Digihack. Όλα τα δικαιώματα διατηρούνται. από <a href="" target="_blank">skypulse.uk</a></p>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: 'Επιλέξτε πελάτη',
                allowClear: true
            });

            $('#serviceSearch').on('input', function() {
                let filter = this.value.toLowerCase();
                $('#serviceTable tr').each(function() {
                    let text = $(this).text().toLowerCase();
                    $(this).toggle(text.includes(filter));
                });
            });

            <?php if ($editService): ?>
            $('#serviceModal').modal('show');
            <?php endif; ?>

            $('#status').on('change', function() {
                if ($(this).val() === 'Delivered') {
                    $('#deliveredDateContainer').show();
                } else {
                    $('#deliveredDateContainer').hide();
                }
            });

            // Load service details in a modal
            $('#viewServiceModal').on('show.bs.modal', function(event) {
                let serviceId = $(event.relatedTarget).data('id');
                loadServiceDetails(serviceId);
            });
        });

        function fetchDevices(customerId) {
            if (!customerId) {
                $('#deviceSelectContainer').hide();
                return;
            }

            fetch('services.php?action=get_devices&customer_id=' + customerId)
                .then(response => response.json())
                .then(data => {
                    let deviceSelect = $('#device_id');
                    deviceSelect.empty();
                    if (data.length > 0) {
                        data.forEach(device => {
                            let option = $('<option>').val(device.id).text(device.type + ' - ' + device.brand + ' - ' + device.model + ' - Σειριακός: ' + device.serial_number);
                            deviceSelect.append(option);
                        });
                        $('#deviceSelectContainer').show();
                    } else {
                        $('#deviceSelectContainer').hide();
                    }
                })
                .catch(error => console.error('Error fetching devices:', error));
        }

        function confirmDelete() {
            return confirm('Είστε σίγουροι ότι θέλετε να διαγράψετε αυτήν την υπηρεσία;');
        }

        function loadServiceDetails(serviceId) {
            fetch('services.php?view_id=' + serviceId)
                .then(response => response.json())
                .then(data => {
                    if (data) {
                        $('#viewServiceModalLabel').text('Προβολή Λεπτομερειών Υπηρεσίας - ' + data.full_name);
                        $('#serviceDetails').html(
                            '<p><strong>Αριθμός Υπηρεσίας:</strong> ' + data.service_number + '</p>' +
                            '<p><strong>Πελάτης:</strong> ' + data.full_name + '</p>' +
                            '<p><strong>Συσκευή:</strong> ' + data.type + ' - ' + data.brand + ' - ' + data.model + ' - Σειριακός: ' + data.serial_number + '</p>' +
                            '<p><strong>Ημερομηνία Υπηρεσίας:</strong> ' + data.service_date + '</p>' +
                            '<p><strong>Σχόλια:</strong> ' + data.comments + '</p>' +
                            '<p><strong>Σχόλια Τεχνικού:</strong> ' + data.technician_comments + '</p>' +
                            '<p><strong>Κατάσταση:</strong> ' + data.status + '</p>' +
                            (data.delivered_date ? '<p><strong>Ημερομηνία Παράδοσης:</strong> ' + data.delivered_date + '</p>' : '') +
                            '<p><strong>Barcode:</strong> <img src="generate_barcode.php?code=' + data.service_number + '" alt="Barcode" /></p>'
                        );
                    } else {
                        $('#serviceDetails').html('<p>Δεν υπάρχουν διαθέσιμες λεπτομέρειες για αυτήν την υπηρεσία.</p>');
                    }
                })
                .catch(error => {
                    console.error('Error loading service details:', error);
                    $('#serviceDetails').html('<p>Σφάλμα κατά τη φόρτωση των λεπτομερειών της υπηρεσίας.</p>');
                });
        }
    </script>
</body>
</html>
customers.php:
<?php
// customers.php
include 'db.php';

// Διαχείριση υποβολών φόρμας
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action']) && $_POST['action'] == 'add_customer') {
        // Προσθήκη νέου πελάτη
        $full_name = $_POST['full_name'];
        $landline_phone = $_POST['landline_phone'];
        $cellphone_number = $_POST['cellphone_number'];
        $registration_date = date('Y-m-d');

        $stmt = $pdo->prepare("INSERT INTO customers (full_name, landline_phone, cellphone_number, registration_date) VALUES (?, ?, ?, ?)");
        $stmt->execute([$full_name, $landline_phone, $cellphone_number, $registration_date]);

        $customer_id = $pdo->lastInsertId();

        foreach ($_POST['devices'] as $device) {
            if (!empty($device['device_id']) && $device['device_id'] !== 'none') {
                $device_id = $device['device_id'];
                $serial_number = $device['serial_number'];
                $stmt = $pdo->prepare("INSERT INTO customer_devices (customer_id, device_id, serial_number) VALUES (?, ?, ?)");
                $stmt->execute([$customer_id, $device_id, $serial_number]);
            }
        }
    } elseif (isset($_POST['action']) && $_POST['action'] == 'edit_customer') {
        // Επεξεργασία υπάρχοντος πελάτη
        $customer_id = $_POST['customer_id'];
        $full_name = $_POST['full_name'];
        $landline_phone = $_POST['landline_phone'];
        $cellphone_number = $_POST['cellphone_number'];

        $stmt = $pdo->prepare("UPDATE customers SET full_name = ?, landline_phone = ?, cellphone_number = ? WHERE id = ?");
        $stmt->execute([$full_name, $landline_phone, $cellphone_number, $customer_id]);

        // Διαγραφή παλιών συσκευών
        $stmt = $pdo->prepare("DELETE FROM customer_devices WHERE customer_id = ?");
        $stmt->execute([$customer_id]);

        // Εισαγωγή ενημερωμένων συσκευών
        foreach ($_POST['devices'] as $device) {
            if (!empty($device['device_id']) && $device['device_id'] !== 'none') {
                $device_id = $device['device_id'];
                $serial_number = $device['serial_number'];
                $stmt = $pdo->prepare("INSERT INTO customer_devices (customer_id, device_id, serial_number) VALUES (?, ?, ?)");
                $stmt->execute([$customer_id, $device_id, $serial_number]);
            }
        }
    } elseif (isset($_POST['action']) && $_POST['action'] == 'delete_customer') {
        // Διαγραφή πελάτη
        $customer_id = $_POST['customer_id'];

        // First, delete related records in the customer_devices table
        $stmt = $pdo->prepare("DELETE FROM customer_devices WHERE customer_id = ?");
        $stmt->execute([$customer_id]);

        // Then, delete the customer record
        $stmt = $pdo->prepare("DELETE FROM customers WHERE id = ?");
        $stmt->execute([$customer_id]);
    }

    header('Location: customers.php?status=success');
    exit;
}

// Ανάκτηση διαθέσιμων συσκευών για το μενού επιλογής
$devices = $pdo->query("SELECT id, type, brand, model FROM devices")->fetchAll(PDO::FETCH_ASSOC);

// Ανάκτηση λεπτομερειών πελατών για τα modals (προβολή, επεξεργασία, διαγραφή, εκτύπωση)
$customers = $pdo->query("SELECT * FROM customers ORDER BY id DESC")->fetchAll(PDO::FETCH_ASSOC);

function fetchCustomerDevices($pdo, $customer_id) {
    $stmt = $pdo->prepare("SELECT cd.device_id, cd.serial_number, d.type, d.brand, d.model FROM customer_devices cd JOIN devices d ON cd.device_id = d.id WHERE cd.customer_id = ?");
    $stmt->execute([$customer_id]);
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Πελάτες - Digihack</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: #f4f6f8;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
        }
        .container {
            flex: 1;
            margin-top: 20px;
        }
        .navbar {
            background-color: #282828;
        }
        .navbar-brand img {
            height: 40px;
        }
        .nav-link {
            color: #fff !important;
        }
        .nav-link.active {
            font-weight: bold;
            color: #d32f2f !important;
        }
        .content {
            margin-top: 40px;
        }
        .content .form-group label {
            font-weight: bold;
        }
        .content .form-control, .content .form-control-file {
            border-radius: 5px;
        }
        .content .modal-content {
            border-radius: 10px;
        }
        .btn-custom {
            background-color: #007bff;
            color: #fff;
            border: none;
            transition: background-color 0.3s ease;
        }
        .btn-custom:hover {
            background-color: #0056b3;
        }
        .table th, .table td {
            vertical-align: middle;
        }
        .table-hover tbody tr:hover {
            background-color: #f1f1f1;
        }
        .device-item {
            margin-bottom: 15px;
        }
        .device-item .form-group {
            flex: 1 1 auto;
        }
        .device-item .select2-container {
            width: 100% !important;
        }
        .select2-container--default .select2-selection--single {
            border-radius: 0.25rem;
            height: calc(1.5em + 0.75rem + 2px);
            border-color: #ced4da;
        }
        .select2-selection__rendered {
            line-height: 1.5em;
        }
        .select2-selection__arrow {
            top: 50%;
            transform: translateY(-50%);
        }
        @media (max-width: 768px) {
            .device-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .device-item .form-group, .device-item .close-btn {
                width: 100%;
            }
            .device-item .close-btn {
                text-align: right;
            }
        }
        .footer {
            background-color: #282828;
            color: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }
        .footer a {
            color: #d32f2f;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="#"><img src="uploads/digihack-logo-new.png" alt="Digihack"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link <?= ($page == 'customers') ? 'active' : '' ?>" href="customers.php">Πελάτες</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($page == 'services') ? 'active' : '' ?>" href="services.php">Υπηρεσίες</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($page == 'devices') ? 'active' : '' ?>" href="devices.php">Συσκευές</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($page == 'settings') ? 'active' : '' ?>" href="settings.php">Ρυθμίσεις</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <div class="content">
            <h1 class="text-center mb-4">Διαχείριση Πελατών</h1>

            <?php if (isset($_GET['status']) && $_GET['status'] == 'success'): ?>
                <div class="alert alert-success">Η ενέργεια πελάτη ολοκληρώθηκε με επιτυχία!</div>
            <?php endif; ?>

            <!-- Κουμπί ενεργοποίησης modal -->
            <button type="button" class="btn btn-outline-danger mb-4" data-toggle="modal" data-target="#customerModal">
                Προσθήκη Νέου Πελάτη
            </button>

            <!-- Modal για προσθήκη νέου πελάτη -->
            <div class="modal fade" id="customerModal" tabindex="-1" aria-labelledby="customerModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="customerModalLabel">Προσθήκη Νέου Πελάτη</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 action="customers.php" method="post">
                                <input type="hidden" name="action" value="add_customer">
                                <div class="form-group">
                                    <label for="full_name">Ονοματεπώνυμο</label>
                                    <input type="text" class="form-control" id="full_name" name="full_name" required>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="landline_phone">Τηλέφωνο Σταθερό</label>
                                        <input type="text" class="form-control" id="landline_phone" name="landline_phone">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="cellphone_number">Αριθμός Κινητού</label>
                                        <input type="text" class="form-control" id="cellphone_number" name="cellphone_number">
                                    </div>
                                </div>
                                <h3 class="mt-4">Συσκευές σε Κατοχή</h3>
                                <div id="device_list">
                                    <div class="device-item d-flex align-items-end">
                                        <div class="form-group mr-2">
                                            <label for="device_id">Επιλογή Συσκευής</label>
                                            <select class="form-control device-select" id="device_id" name="devices[0][device_id]" required onchange="toggleSerialInput(this)">
                                                <option value="" selected disabled>Επιλέξτε συσκευή</option>
                                                <option value="none">Χωρίς συσκευή</option>
                                                <?php foreach ($devices as $device): ?>
                                                    <option value="<?= $device['id'] ?>"><?= $device['type'] ?> - <?= $device['brand'] ?> - <?= $device['model'] ?></option>
                                                <?php endforeach; ?>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="serial_number">Σειριακός Αριθμός</label>
                                            <input type="text" class="form-control serial-number" id="serial_number" name="devices[0][serial_number]" required>
                                        </div>
                                        <button type="button" class="close-btn ml-2" onclick="removeDevice(this)">&times;</button>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-outline-danger mt-2" id="add_device">Προσθήκη Άλλης Συσκευής</button>
                                <button type="submit" class="btn btn-outline-danger mt-2 ml-2">Προσθήκη Πελάτη</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Λίστα Πελατών -->
            <h2>Λίστα Πελατών</h2>
            <input type="text" id="customerSearch" class="form-control mb-3" placeholder="Αναζήτηση πελατών...">
            <?php if (count($customers) > 0): ?>
                <table class="table table-bordered table-hover">
                    <thead class="thead-dark">
                        <tr>
                            <th>ID</th>
                            <th>Ονοματεπώνυμο</th>
                            <th>Τηλέφωνο Σταθερό</th>
                            <th>Αριθμός Κινητού</th>
                            <th>Ημερομηνία Εγγραφής</th>
                            <th>Ενέργειες</th>
                        </tr>
                    </thead>
                    <tbody id="customerTable">
                        <?php foreach ($customers as $customer): ?>
                        <tr>
                            <td><?= htmlspecialchars($customer['id']) ?></td>
                            <td><?= htmlspecialchars($customer['full_name']) ?></td>
                            <td><?= htmlspecialchars($customer['landline_phone']) ?></td>
                            <td><?= htmlspecialchars($customer['cellphone_number']) ?></td>
                            <td><?= htmlspecialchars($customer['registration_date']) ?></td>
                            <td>
                                <!-- Προβολή, Επεξεργασία, Διαγραφή, Εκτύπωση -->
                                <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#viewCustomerModal<?= $customer['id'] ?>">Προβολή</button>
                                <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#editCustomerModal<?= $customer['id'] ?>">Επεξεργασία</button>
                                <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteCustomerModal<?= $customer['id'] ?>">Διαγραφή</button>
                                <button class="btn btn-secondary btn-sm" onclick="printCustomer(<?= $customer['id'] ?>)">Εκτύπωση</button>
                            </td>
                        </tr>
                        <!-- Modal Προβολής Πελάτη -->
                        <div class="modal fade" id="viewCustomerModal<?= $customer['id'] ?>" tabindex="-1" aria-labelledby="viewCustomerModalLabel<?= $customer['id'] ?>" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="viewCustomerModalLabel<?= $customer['id'] ?>">Προβολή Πελάτη</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p><strong>Ονοματεπώνυμο:</strong> <?= htmlspecialchars($customer['full_name']) ?></p>
                                        <p><strong>Τηλέφωνο Σταθερό:</strong> <?= htmlspecialchars($customer['landline_phone']) ?></p>
                                        <p><strong>Αριθμός Κινητού:</strong> <?= htmlspecialchars($customer['cellphone_number']) ?></p>
                                        <p><strong>Ημερομηνία Εγγραφής:</strong> <?= htmlspecialchars($customer['registration_date']) ?></p>
                                        <h4>Συσκευές σε Κατοχή:</h4>
                                        <ul>
                                            <?php
                                            $customer_devices = fetchCustomerDevices($pdo, $customer['id']);
                                            foreach ($customer_devices as $device):
                                            ?>
                                            <li><?= htmlspecialchars($device['type']) ?> - <?= htmlspecialchars($device['brand']) ?> - <?= htmlspecialchars($device['model']) ?> (Σειριακός: <?= htmlspecialchars($device['serial_number']) ?>)</li>
                                            <?php endforeach; ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal Επεξεργασίας Πελάτη -->
                        <div class="modal fade" id="editCustomerModal<?= $customer['id'] ?>" tabindex="-1" aria-labelledby="editCustomerModalLabel<?= $customer['id'] ?>" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="editCustomerModalLabel<?= $customer['id'] ?>">Επεξεργασία Πελάτη</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 action="customers.php" method="post">
                                            <input type="hidden" name="action" value="edit_customer">
                                            <input type="hidden" name="customer_id" value="<?= $customer['id'] ?>">
                                            <div class="form-group">
                                                <label for="full_name">Ονοματεπώνυμο</label>
                                                <input type="text" class="form-control" id="full_name" name="full_name" value="<?= htmlspecialchars($customer['full_name']) ?>" required>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label for="landline_phone">Τηλέφωνο Σταθερό</label>
                                                    <input type="text" class="form-control" id="landline_phone" name="landline_phone" value="<?= htmlspecialchars($customer['landline_phone']) ?>">
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label for="cellphone_number">Αριθμός Κινητού</label>
                                                    <input type="text" class="form-control" id="cellphone_number" name="cellphone_number" value="<?= htmlspecialchars($customer['cellphone_number']) ?>">
                                                </div>
                                            </div>
                                            <h3 class="mt-4">Συσκευές σε Κατοχή</h3>
                                            <div id="edit_device_list<?= $customer['id'] ?>">
                                                <?php
                                                foreach ($customer_devices as $index => $device):
                                                ?>
                                                <div class="device-item d-flex align-items-end">
                                                    <div class="form-group mr-2">
                                                        <label for="device_id">Επιλογή Συσκευής</label>
                                                        <select class="form-control device-select" id="device_id" name="devices[<?= $index ?>][device_id]" required onchange="toggleSerialInput(this)">
                                                            <option value="" disabled>Επιλέξτε συσκευή</option>
                                                            <option value="none" <?= $device['device_id'] == 'none' ? 'selected' : '' ?>>Χωρίς συσκευή</option>
                                                            <?php foreach ($devices as $d): ?>
                                                                <option value="<?= $d['id'] ?>" <?= $d['id'] == $device['device_id'] ? 'selected' : '' ?>><?= $d['type'] ?> - <?= $d['brand'] ?> - <?= $d['model'] ?></option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="serial_number">Σειριακός Αριθμός</label>
                                                        <input type="text" class="form-control serial-number" id="serial_number" name="devices[<?= $index ?>][serial_number]" value="<?= htmlspecialchars($device['serial_number']) ?>" <?= $device['device_id'] == 'none' ? 'disabled' : '' ?>>
                                                    </div>
                                                    <button type="button" class="close-btn ml-2" onclick="removeDevice(this)">&times;</button>
                                                </div>
                                                <?php endforeach; ?>
                                            </div>
                                            <button type="button" class="btn btn-outline-danger mt-2" onclick="addDevice(<?= $customer['id'] ?>)">Προσθήκη Άλλης Συσκευής</button>
                                            <button type="submit" class="btn btn-outline-danger mt-2 ml-2">Αποθήκευση Αλλαγών</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal Διαγραφής Πελάτη -->
                        <div class="modal fade" id="deleteCustomerModal<?= $customer['id'] ?>" tabindex="-1" aria-labelledby="deleteCustomerModalLabel<?= $customer['id'] ?>" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="deleteCustomerModalLabel<?= $customer['id'] ?>">Διαγραφή Πελάτη</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Είστε σίγουροι ότι θέλετε να διαγράψετε τον πελάτη: <strong><?= htmlspecialchars($customer['full_name']) ?></strong>;</p>
                                        <form action="customers.php" method="post">
                                            <input type="hidden" name="action" value="delete_customer">
                                            <input type="hidden" name="customer_id" value="<?= $customer['id'] ?>">
                                            <button type="submit" class="btn btn-danger">Διαγραφή</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <?php endforeach; ?>
                    </tbody>
                </table>
            <?php else: ?>
                <p>Δεν βρέθηκαν πελάτες.</p>
            <?php endif; ?>
        </div>
    </div>

    <div class="footer">
        <p>&copy; 2024 Digihack. Όλα τα δικαιώματα διατηρούνται. από <a href="https://skypulse.uk" target="_blank">skypulse.uk</a></p>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.device-select').select2({
                placeholder: 'Επιλέξτε συσκευή ή πληκτρολογήστε για αναζήτηση',
                allowClear: true
            });

            $('.modal').on('shown.bs.modal', function () {
                $(this).find('.device-select').select2({
                    placeholder: 'Επιλέξτε συσκευή ή πληκτρολογήστε για αναζήτηση',
                    allowClear: true
                });
            });
        });

        function addDevice(customerId) {
            let index = document.querySelectorAll('#edit_device_list' + customerId + ' .device-item').length;
            let newDevice = `
                <div class="device-item d-flex align-items-end">
                    <div class="form-group mr-2">
                        <label for="device_id">Επιλογή Συσκευής</label>
                        <select class="form-control device-select" id="device_id" name="devices[${index}][device_id]" required onchange="toggleSerialInput(this)">
                            <option value="" selected disabled>Επιλέξτε συσκευή</option>
                            <option value="none">Χωρίς συσκευή</option>
                            <?php foreach ($devices as $device): ?>
                                <option value="<?= $device['id'] ?>"><?= $device['type'] ?> - <?= $device['brand'] ?> - <?= $device['model'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="serial_number">Σειριακός Αριθμός</label>
                        <input type="text" class="form-control serial-number" id="serial_number" name="devices[${index}][serial_number]" required>
                    </div>
                    <button type="button" class="close-btn ml-2" onclick="removeDevice(this)">&times;</button>
                </div>`;
            document.getElementById('edit_device_list' + customerId).insertAdjacentHTML('beforeend', newDevice);
            $('.device-select').select2({
                placeholder: 'Επιλέξτε συσκευή ή πληκτρολογήστε για αναζήτηση',
                allowClear: true
            });
        }

        document.getElementById('add_device').addEventListener('click', function() {
            let index = document.querySelectorAll('#device_list .device-item').length;
            let newDevice = `
                <div class="device-item d-flex align-items-end">
                    <div class="form-group mr-2">
                        <label for="device_id">Επιλογή Συσκευής</label>
                        <select class="form-control device-select" id="device_id" name="devices[${index}][device_id]" required onchange="toggleSerialInput(this)">
                            <option value="" selected disabled>Επιλέξτε συσκευή</option>
                            <option value="none">Χωρίς συσκευή</option>
                            <?php foreach ($devices as $device): ?>
                                <option value="<?= $device['id'] ?>"><?= $device['type'] ?> - <?= $device['brand'] ?> - <?= $device['model'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="serial_number">Σειριακός Αριθμός</label>
                        <input type="text" class="form-control serial-number" id="serial_number" name="devices[${index}][serial_number]" required>
                    </div>
                    <button type="button" class="close-btn ml-2" onclick="removeDevice(this)">&times;</button>
                </div>`;
            document.getElementById('device_list').insertAdjacentHTML('beforeend', newDevice);
            $('.device-select').select2({
                placeholder: 'Επιλέξτε συσκευή ή πληκτρολογήστε για αναζήτηση',
                allowClear: true
            });
        });

        function toggleSerialInput(selectElement) {
            const serialInput = selectElement.closest('.device-item').querySelector('.serial-number');
            if (selectElement.value === 'none') {
                serialInput.value = '';
                serialInput.disabled = true;
            } else {
                serialInput.disabled = false;
            }
        }

        function removeDevice(button) {
            button.closest('.device-item').remove();
        }

        document.getElementById('customerSearch').addEventListener('input', function() {
            let filter = this.value.toLowerCase();
            document.querySelectorAll('#customerTable tr').forEach(row => {
                let text = row.textContent.toLowerCase();
                row.style.display = text.includes(filter) ? '' : 'none';
            });
        });

        function printCustomer(customerId) {
            window.open('generate_customer_pdf.php?id=' + customerId, '_blank');
        }
    </script>
</body>
</html>