please make this : 

from flask import Flask, render_template_string, request, redirect, url_for, jsonify
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+mysqlconnector://root:@localhost/tech_store'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

# Database models
class Customer(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    full_name = db.Column(db.String(100), nullable=False)
    landline_phone = db.Column(db.String(20))
    cellphone_number = db.Column(db.String(20))
    registration_date = db.Column(db.Date, default=datetime.now)

class Device(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    type = db.Column(db.String(50), nullable=False)
    brand = db.Column(db.String(50), nullable=False)
    model = db.Column(db.String(50), nullable=False)

class CustomerDevice(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    customer_id = db.Column(db.Integer, db.ForeignKey('customer.id'), nullable=False)
    device_id = db.Column(db.Integer, db.ForeignKey('device.id'), nullable=False)

class Service(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    customer_id = db.Column(db.Integer, db.ForeignKey('customer.id'))
    device_id = db.Column(db.Integer, db.ForeignKey('device.id'))
    service_number = db.Column(db.String(50), unique=True)
    service_date = db.Column(db.Date)
    comments = db.Column(db.Text)
    technician_comments = db.Column(db.Text)

@app.route('/')
def index():
    customers = Customer.query.all()
    devices = Device.query.all()
    return render_template_string(TEMPLATE, customers=customers, devices=devices)

@app.route('/get_devices/<int:customer_id>')
def get_devices(customer_id):
    devices = db.session.query(Device).join(CustomerDevice).filter(CustomerDevice.customer_id == customer_id).all()
    devices_json = [{'id': d.id, 'name': f"{d.type} {d.brand} {d.model}"} for d in devices]
    return jsonify(devices_json)

@app.route('/add_customer', methods=['POST'])
def add_customer():
    data = request.form
    new_customer = Customer(
        full_name=data.get('full_name'),
        landline_phone=data.get('landline_phone'),
        cellphone_number=data.get('cellphone_number'),
        registration_date=datetime.now()
    )
    db.session.add(new_customer)
    db.session.commit()
    return redirect(url_for('index'))

@app.route('/edit_customer/<int:customer_id>', methods=['POST'])
def edit_customer(customer_id):
    data = request.form
    customer = Customer.query.get(customer_id)
    if customer:
        customer.full_name = data.get('full_name')
        customer.landline_phone = data.get('landline_phone')
        customer.cellphone_number = data.get('cellphone_number')
        db.session.commit()
    return redirect(url_for('index'))

@app.route('/add_device', methods=['POST'])
def add_device():
    data = request.form
    new_device = Device(
        type=data.get('type'),
        brand=data.get('brand'),
        model=data.get('model')
    )
    db.session.add(new_device)
    db.session.commit()
    return redirect(url_for('index'))

@app.route('/add_service', methods=['POST'])
def add_service():
    data = request.form
    new_service = Service(
        customer_id=data.get('customer_id'),
        device_id=data.get('device_id'),
        service_number=f"SERV-{data.get('customer_id')}-{data.get('device_id')}",
        service_date=data.get('service_date'),
        comments=data.get('comments'),
        technician_comments=data.get('technician_comments')
    )
    db.session.add(new_service)
    db.session.commit()
    return redirect(url_for('index'))

TEMPLATE = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Store Management</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">Tech Store Management</h1>

        <!-- Customer Management -->
        <div class="card mb-4">
            <div class="card-header">Add Customer</div>
            <div class="card-body">
                <form id="customerForm" action="{{ url_for('add_customer') }}" method="POST">
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="full_name">Full Name</label>
                            <input type="text" class="form-control" id="full_name" name="full_name" required>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="landline_phone">Landline Phone</label>
                            <input type="text" class="form-control" id="landline_phone" name="landline_phone">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="cellphone_number">Cellphone Number</label>
                            <input type="text" class="form-control" id="cellphone_number" name="cellphone_number">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Add Customer</button>
                </form>
            </div>
        </div>

        <!-- Device Management -->
        <div class="card mb-4">
            <div class="card-header">Add Device</div>
            <div class="card-body">
                <form id="deviceForm" action="{{ url_for('add_device') }}" method="POST">
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="type">Device Type</label>
                            <input type="text" class="form-control" id="type" name="type" required>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="brand">Brand</label>
                            <input type="text" class="form-control" id="brand" name="brand">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="model">Model</label>
                            <input type="text" class="form-control" id="model" name="model">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Add Device</button>
                </form>
            </div>
        </div>

        <!-- Service Management -->
        <div class="card mb-4">
            <div class="card-header">Add Service</div>
            <div class="card-body">
                <form id="serviceForm" action="{{ url_for('add_service') }}" method="POST">
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="customer_id">Customer</label>
                            <select id="customer_id" name="customer_id" class="form-control select2" style="width:100%">
                                {% for customer in customers %}
                                <option value="{{ customer.id }}">{{ customer.full_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="device_id">Device</label>
                            <select id="device_id" name="device_id" class="form-control select2" style="width:100%">
                                <!-- Options will be populated dynamically based on selected customer -->
                            </select>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="service_date">Service Date</label>
                            <input type="date" class="form-control" id="service_date" name="service_date">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="comments">Comments</label>
                        <textarea id="comments" name="comments" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="technician_comments">Technician Comments</label>
                        <textarea id="technician_comments" name="technician_comments" class="form-control"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Add Service</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Initialize select2
            $('.select2').select2();

            // Load devices for selected customer
            $('#customer_id').on('change', function() {
                var customerId = $(this).val();
                $.ajax({
                    url: "{{ url_for('get_devices', customer_id=0) }}".replace('0', customerId),
                    method: 'GET',
                    success: function(data) {
                        var deviceSelect = $('#device_id');
                        deviceSelect.empty();
                        data.forEach(function(device) {
                            deviceSelect.append(new Option(device.name, device.id));
                        });
                        deviceSelect.trigger('change');
                    }
                });
            });

            // Trigger change event on page load to preload devices
            $('#customer_id').trigger('change');
        });
    </script>
</body>
</html>
'''

if __name__ == '__main__':
    with app.app_context():
        db.create_all()
    app.run(debug=True)

like this :

<?php
// index.php
include 'db.php';

// Fetch analytics data
$totalCustomers = $pdo->query("SELECT COUNT(*) FROM customers")->fetchColumn();
$totalServices = $pdo->query("SELECT COUNT(*) FROM services")->fetchColumn();
$totalDevices = $pdo->query("SELECT COUNT(*) FROM devices")->fetchColumn();
?>

<!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">
    <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 .card {
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 20px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            background-color: #fff;
        }
        .content .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        }
        .content .card img {
            width: 80px;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .content .card-title {
            font-size: 1.5rem;
            margin-top: 15px;
            color: #d32f2f;
        }
        .content .card-text {
            font-size: 1rem;
            margin-bottom: 15px;
        }
        .analytics-section {
            margin: 40px 0;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .analytics-section .card {
            text-align: center;
            padding: 20px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            flex: 1 1 30%;
            margin: 10px;
            background-color: #fff;
        }
        .analytics-section .card h2 {
            font-size: 2.5rem;
            color: #d32f2f;
        }
        .analytics-section .card p {
            font-size: 1.2rem;
            color: #555;
        }
        .footer {
            width: 100%;
            padding: 20px;
            text-align: center;
            background-color: #282828;
            color: white;
            border-radius: 10px;
        }
        .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">
            <div class="row">
                <div class="col-md-4">
                    <div class="card text-center">
                        <img src="https://img.icons8.com/ios-filled/100/000000/groups.png" class="card-img-top mx-auto" alt="Customers">
                        <div class="card-body">
                            <h5 class="card-title">Διαχείριση Πελατών</h5>
                            <p class="card-text">Δείτε και διαχειριστείτε τις πληροφορίες πελατών, παρακολουθήστε τις συσκευές και το ιστορικό υπηρεσιών τους.</p>
                            <a href="customers.php" class="btn btn-outline-danger">Διαχείριση Πελατών</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-center">
                        <img src="https://img.icons8.com/ios-filled/100/000000/maintenance.png" class="card-img-top mx-auto" alt="Services">
                        <div class="card-body">
                            <h5 class="card-title">Διαχείριση Υπηρεσιών</h5>
                            <p class="card-text">Καταγράψτε και παρακολουθήστε τις υπηρεσίες που παρέχονται στους πελάτες, συμπεριλαμβανομένων λεπτομερειών και πληρωμών.</p>
                            <a href="services.php" class="btn btn-outline-danger">Διαχείριση Υπηρεσιών</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-center">
                        <img src="https://img.icons8.com/ios-filled/100/000000/device-manager.png" class="card-img-top mx-auto" alt="Devices">
                        <div class="card-body">
                            <h5 class="card-title">Διαχείριση Συσκευών</h5>
                            <p class="card-text">Διατηρήστε ένα απόθεμα όλων των συσκευών, παρακολουθήστε την κατάστασή τους και διαχειριστείτε τις πληροφορίες συσκευών πελατών.</p>
                            <a href="devices.php" class="btn btn-outline-danger">Διαχείριση Συσκευών</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="analytics-section">
            <div class="card">
                <h2><?= $totalCustomers ?></h2>
                <p>Πελάτες</p>
            </div>
            <div class="card">
                <h2><?= $totalServices ?></h2>
                <p>Ολοκληρωμένες Υπηρεσίες</p>
            </div>
            <div class="card">
                <h2><?= $totalDevices ?></h2>
                <p>Εγγεγραμμένες Συσκευές</p>
            </div>
        </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>
</body>
</html>

customers.php
<?php
// customers.php
include 'db.php';

// Enable PDO error handling
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// Helper function to log detailed errors
function logError($message) {
    error_log($message);
    echo "<script>console.error('PHP Error: " . addslashes($message) . "');</script>";
}

// To handle devices associated with a customer
function processDevices($pdo, $customer_id, $devices) {
    foreach ($devices as $index => $device) {
        if (!empty($device['device_id']) && $device['device_id'] !== 'none') {
            $device_id = $device['device_id'];
            $serial_number = $device['serial_number'];
            try {
                // Log each prepared statement execution
                $stmt = $pdo->prepare("INSERT INTO customer_devices (customer_id, device_id, serial_number) VALUES (?, ?, ?)");
                $result = $stmt->execute([$customer_id, $device_id, $serial_number]);
                logError("[DEBUG] Executed INSERT INTO customer_devices (customer_id, device_id, serial_number) VALUES ($customer_id, $device_id, '$serial_number') with result ".var_export($result, true));
            } catch (Exception $e) {
                logError("[ERROR] Failed to INSERT device ID: $device_id for customer: $customer_id: " . $e->getMessage());
            }
        } else {
            logError("[DEBUG] Skipping device entry due to missing or 'none' ID for index: $index");
        }
    }
}

// Main script logic
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action'])) {
        try {
            // Print incoming POST data for verification
            var_dump($_POST);

            if ($_POST['action'] === 'add_customer') {
                $full_name = $_POST['full_name'];
                $landline_phone = $_POST['landline_phone'] ?? null;
                $cellphone_number = $_POST['cellphone_number'] ?? null;
                $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]);
                logError("[DEBUG] Added customer: $full_name");

                $customer_id = $pdo->lastInsertId();
                processDevices($pdo, $customer_id, $_POST['devices'] ?? []);

            } elseif ($_POST['action'] === 'edit_customer') {
                $customer_id = $_POST['customer_id'];
                $full_name = $_POST['full_name'];
                $landline_phone = $_POST['landline_phone'] ?? null;
                $cellphone_number = $_POST['cellphone_number'] ?? null;

                $stmt = $pdo->prepare("UPDATE customers SET full_name = ?, landline_phone = ?, cellphone_number = ? WHERE id = ?");
                $stmt->execute([$full_name, $landline_phone, $cellphone_number, $customer_id]);
                logError("[DEBUG] Updated customer: $full_name with ID: $customer_id");

                // Remove prior devices and re-process
                $stmt = $pdo->prepare("DELETE FROM customer_devices WHERE customer_id = ?");
                $stmt->execute([$customer_id]);
                logError("[DEBUG] Deleted devices for customer ID: $customer_id");
                
                processDevices($pdo, $customer_id, $_POST['devices'] ?? []);

            } elseif ($_POST['action'] === 'delete_customer') {
                $customer_id = $_POST['customer_id'];
                $stmt = $pdo->prepare("DELETE FROM customers WHERE id = ?");
                $stmt->execute([$customer_id]);
                logError("[DEBUG] Deleted customer with ID: $customer_id");
            }

            header('Location: customers.php?status=success');
            exit;
        } catch (Exception $e) {
            logError("[ERROR] Processing request failed: " . $e->getMessage());
            echo "An error occurred. Please check the server logs.";
        }
    }
}

// Retrieve devices for selection
$devices = $pdo->query("SELECT id, type, brand, model FROM devices")->fetchAll(PDO::FETCH_ASSOC);

// Retrieve customers
$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>
        /* Styles for aesthetics */
        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; ?>

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

            <!-- Add Customer 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_0">Επιλογή Συσκευής</label>
                                            <select class="form-control device-select" id="device_id_0" name="devices[0][device_id]" required>
                                                <option value="" disabled selected>Επιλέξτε συσκευή</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_0">Σειριακός Αριθμός</label>
                                            <input type="text" class="form-control serial-number" id="serial_number_0" 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>

                        <!-- View Customer 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>

                        <!-- Edit Customer 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="edit_full_name_<?= $customer['id'] ?>">Ονοματεπώνυμο</label>
                                                <input type="text" class="form-control" id="edit_full_name_<?= $customer['id'] ?>" name="full_name" value="<?= htmlspecialchars($customer['full_name']) ?>" required>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label for="edit_landline_phone_<?= $customer['id'] ?>">Τηλέφωνο Σταθερό</label>
                                                    <input type="text" class="form-control" id="edit_landline_phone_<?= $customer['id'] ?>" name="landline_phone" value="<?= htmlspecialchars($customer['landline_phone']) ?>">
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label for="edit_cellphone_number_<?= $customer['id'] ?>">Αριθμός Κινητού</label>
                                                    <input type="text" class="form-control" id="edit_cellphone_number_<?= $customer['id'] ?>" name="cellphone_number" value="<?= htmlspecialchars($customer['cellphone_number']) ?>">
                                                </div>
                                            </div>
                                            <h3 class="mt-4">Συσκευές σε Κατοχή:</h3>
                                            <div id="edit_device_list_<?= $customer['id'] ?>">
                                                <?php
                                                $editDevices = fetchCustomerDevices($pdo, $customer['id']);
                                                foreach ($editDevices as $index => $device):
                                                ?>
                                                <div class="device-item d-flex align-items-end">
                                                    <div class="form-group mr-2">
                                                        <label for="edit_device_id_<?= $customer['id'] ?>_<?= $index ?>">Επιλογή Συσκευής</label>
                                                        <select class="form-control device-select" id="edit_device_id_<?= $customer['id'] ?>_<?= $index ?>" name="devices[<?= $index ?>][device_id]" required>
                                                            <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="edit_serial_number_<?= $customer['id'] ?>_<?= $index ?>">Σειριακός Αριθμός</label>
                                                        <input type="text" class="form-control serial-number" id="edit_serial_number_<?= $customer['id'] ?>_<?= $index ?>" 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 add-edit-device" data-customer-id="<?= $customer['id'] ?>">Προσθήκη Άλλης Συσκευής</button>
                                            <button type="submit" class="btn btn-outline-danger mt-2 ml-2">Αποθήκευση Αλλαγών</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Delete Customer Modal -->
                        <div class="modal fade" id="deleteCustomerModal<?= $customer['id'] ?>" tabindex="-1" aria-labelledby="deleteCustomerModalLabel<?= $customer['id'] ?>" aria-hidden="true">
                            <div class="modal-dialog">
                                <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() {
            function initializeSelect2() {
                $('.device-select').select2({
                    placeholder: 'Επιλέξτε συσκευή ή πληκτρολογήστε για αναζήτηση',
                    allowClear: true
                });
            }

            initializeSelect2();

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

            $('#add_device').on('click', function() {
                let index = $('#device_list .device-item').length;
                $('#device_list').append(`
                    <div class="device-item d-flex align-items-end">
                        <div class="form-group mr-2">
                            <label for="device_id_${index}">Επιλογή Συσκευής</label>
                            <select class="form-control device-select" id="device_id_${index}" name="devices[${index}][device_id]" required>
                                <option value="" disabled selected>Επιλέξτε συσκευή</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_${index}">Σειριακός Αριθμός</label>
                            <input type="text" class="form-control serial-number" id="serial_number_${index}" name="devices[${index}][serial_number]" required>
                        </div>
                        <button type="button" class="close-btn ml-2" onclick="removeDevice(this)">&times;</button>
                    </div>`);
                initializeSelect2();
            });

            $(document).on('click', '.add-edit-device', function() {
                const customerId = $(this).data('customer-id');
                let index = $('#edit_device_list_' + customerId + ' .device-item').length;
                $('#edit_device_list_' + customerId).append(`
                    <div class="device-item d-flex align-items-end">
                        <div class="form-group mr-2">
                            <label for="edit_device_id_${customerId}_${index}">Επιλογή Συσκευής</label>
                            <select class="form-control device-select" id="edit_device_id_${customerId}_${index}" name="devices[${index}][device_id]" required>
                                <option value="" disabled selected>Επιλέξτε συσκευή</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="edit_serial_number_${customerId}_${index}">Σειριακός Αριθμός</label>
                            <input type="text" class="form-control serial-number" id="edit_serial_number_${customerId}_${index}" name="devices[${index}][serial_number]" required>
                        </div>
                        <button type="button" class="close-btn ml-2" onclick="removeDevice(this)">&times;</button>
                    </div>`);
                initializeSelect2();
            });

            $('#customerSearch').on('input', function() {
                const filter = this.value.toLowerCase();
                $('#customerTable tr').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(filter) > -1);
                });
            });

            window.printCustomer = function(customerId) {
                window.open('generate_customer_pdf.php?id=' + customerId, '_blank');
            };

            console.log("Devices on page load:", <?= json_encode($devices) ?>);
            console.log("Customers on page load:", <?= json_encode($customers) ?>);
        });

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

        function removeDevice(button) {
            $(button).closest('.device-item').remove();
        }
    </script>
</body>
</html>

generate_customer_pdf:

<?php
// Include Dompdf's autoload.php file
require_once 'D:/xampp/htdocs/vaggelis/dompdf/vendor/autoload.php';
require 'db.php'; // Include your database connection and related functions

use Dompdf\Dompdf;
use Dompdf\Options;

// Function to fetch customer devices
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);
}

// Fetch store details from the settings table
function fetchStoreDetails($pdo) {
    $stmt = $pdo->query("SELECT store_name, address, phone_number, logo_path FROM settings WHERE id = 1");
    return $stmt->fetch(PDO::FETCH_ASSOC);
}

if (isset($_GET['id'])) {
    $customer_id = (int)$_GET['id'];
    $stmt = $pdo->prepare("SELECT * FROM customers WHERE id = ?");
    $stmt->execute([$customer_id]);
    $customer = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($customer) {
        $devices = fetchCustomerDevices($pdo, $customer_id);
        $storeDetails = fetchStoreDetails($pdo);

        // Prepare store details
        $store_name = htmlspecialchars($storeDetails['store_name'], ENT_QUOTES, 'UTF-8');
        $store_address = htmlspecialchars($storeDetails['address'], ENT_QUOTES, 'UTF-8');
        $store_phone = htmlspecialchars($storeDetails['phone_number'], ENT_QUOTES, 'UTF-8');
        $logo_path = $storeDetails['logo_path'];

        // Base URL for resources
        $base_url = 'http://localhost/vaggelis';

        // Ensure the logo path is correct and accessible
        $logo_url = !empty($logo_path) ? $base_url . '/' . ltrim($logo_path, '/') : '';

        // Create HTML content for PDF
        $html = "
        <style>
            @font-face {
                font-family: 'DejaVu Sans';
                font-style: normal;
                font-weight: normal;
                src: url('https://example.com/path-to-your-local-fonts/DejaVuSans.ttf') format('truetype');
            }
            body {
                font-family: 'DejaVu Sans', sans-serif;
                color: #333;
                line-height: 1.6;
            }
            .container {
                width: 100%;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                border: 1px solid #ddd;
                border-radius: 5px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                background-color: #fff;
            }
            .header {
                text-align: center;
                margin-bottom: 20px;
            }
            .header img {
                max-width: 100px;
                margin-bottom: 10px;
            }
            .header h1 {
                margin: 0;
                font-size: 24px;
                color: #d32f2f;
            }
            .details {
                margin-bottom: 20px;
            }
            .details p {
                margin: 5px 0;
                font-size: 14px;
            }
            .devices {
                margin-top: 20px;
            }
            .devices h2 {
                margin-bottom: 10px;
                font-size: 20px;
                color: #d32f2f;
            }
            .devices ul {
                list-style: none;
                padding: 0;
            }
            .devices ul li {
                margin: 5px 0;
                padding: 5px;
                border-bottom: 1px solid #ddd;
            }
            .footer {
                margin-top: 20px;
                text-align: center;
                font-size: 12px;
                color: #777;
            }
            .footer p {
                margin: 2px 0;
            }
            .footer strong {
                color: #d32f2f;
            }
        </style>
        <div class='container'>
            <div class='header'>
                <img src='$logo_url' alt='Λογότυπο Καταστήματος'>
                <h1>Στοιχεία Πελάτη</h1>
            </div>
            <div class='details'>
                <p><strong>Πλήρες Όνομα:</strong> " . htmlspecialchars($customer['full_name'], ENT_QUOTES, 'UTF-8') . "</p>
                <p><strong>Σταθερό Τηλέφωνο:</strong> " . htmlspecialchars($customer['landline_phone'], ENT_QUOTES, 'UTF-8') . "</p>
                <p><strong>Κινητό Τηλέφωνο:</strong> " . htmlspecialchars($customer['cellphone_number'], ENT_QUOTES, 'UTF-8') . "</p>
            </div>
            <div class='devices'>
                <h2>Συσκευές σε Κατοχή</h2>
                <ul>";

        foreach ($devices as $device) {
            $html .= "<li>" . htmlspecialchars($device['type'], ENT_QUOTES, 'UTF-8') . " - " . htmlspecialchars($device['brand'], ENT_QUOTES, 'UTF-8') . " - " . htmlspecialchars($device['model'], ENT_QUOTES, 'UTF-8') . " (Σειριακός Αριθμός: " . htmlspecialchars($device['serial_number'], ENT_QUOTES, 'UTF-8') . ")</li>";
        }

        $html .= "</ul>
            </div>
            <div class='footer'>
                <p><strong>$store_name</strong></p>
                <p>$store_address</p>
                <p>Τηλέφωνο: $store_phone</p>
            </div>
        </div>";

        // Create a new Dompdf instance
        $options = new Options();
        $options->set('isRemoteEnabled', true); // Enable fetching remote content
        $options->set('defaultFont', 'DejaVu Sans'); // Set default font supporting Greek
        $dompdf = new Dompdf($options);
        $dompdf->loadHtml($html);
        $dompdf->setPaper('A4', 'portrait'); // Set the paper size and orientation
        $dompdf->render(); // Render the HTML as PDF

        // Output the generated PDF (1 = download, 0 = preview)
        $dompdf->stream("Customer_$customer_id.pdf", array("Attachment" => 0));
    } else {
        echo "Ο πελάτης δεν βρέθηκε.";
    }
} else {
    echo "Δεν παρέχεται ταυτότητα πελάτη.";
}
?>

generate_service_pdf:

<?php
// Require Dompdf and database connection
require_once 'D:/xampp/htdocs/vaggelis/dompdf/vendor/autoload.php';
require 'db.php';

use Dompdf\Dompdf;
use Dompdf\Options;

// Function to fetch store details
function fetchStoreDetails($pdo) {
    $stmt = $pdo->query("SELECT store_name, address, phone_number, logo_path FROM settings WHERE id = 1");
    return $stmt->fetch(PDO::FETCH_ASSOC);
}

// Fetch service details if service ID is provided
if (isset($_GET['id'])) {
    $service_id = (int)$_GET['id'];

    // Prepare and execute query to get service details
    $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([$service_id]);
    $service = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($service) {
        $storeDetails = fetchStoreDetails($pdo);

        // Escape and prepare store details for HTML
        $store_name = htmlspecialchars($storeDetails['store_name'], ENT_QUOTES, 'UTF-8');
        $store_address = htmlspecialchars($storeDetails['address'], ENT_QUOTES, 'UTF-8');
        $store_phone = htmlspecialchars($storeDetails['phone_number'], ENT_QUOTES, 'UTF-8');
        $logo_path = htmlspecialchars($storeDetails['logo_path'], ENT_QUOTES, 'UTF-8');
        $base_url = 'http://localhost/vaggelis'; // Ensure the base URL is correct
        $logo_url = !empty($logo_path) ? $base_url . '/' . ltrim($logo_path, '/') : '';

        // Create HTML content with enhanced design
        $html = "
        <style>
            @font-face {
                font-family: 'DejaVu Sans';
                font-style: normal;
                font-weight: normal;
            }
            body {
                font-family: 'DejaVu Sans', sans-serif;
                color: #333;
                line-height: 1.6;
                margin: 0;
                background-color: #f4f4f4;
            }
            .container {
                width: 100%;
                max-width: 800px;
                margin: 20px auto;
                padding: 20px;
                background-color: #fff;
                border-radius: 5px;
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            }
            .header, .footer {
                text-align: center;
                margin-bottom: 20px;
            }
            .header img {
                max-width: 120px;
                margin-bottom: 10px;
            }
            .header h1 {
                margin: 0;
                font-size: 24px;
                color: #d32f2f;
            }
            .details {
                margin-bottom: 15px;
            }
            .details p {
                font-size: 12px;
                margin-bottom: 5px;
            }
            .signatures {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 20px;
                gap: 10px;
            }
            .signature-box {
                width: 90%; /* Occupies most of the container width */
                text-align: center;
                padding: 15px;
                border: 1px dashed #ccc;
                min-height: 50px;
                background-color: #fafafa;
            }
            .signature-title {
                text-align: center;
                margin-bottom: 5px;
                font-weight: bold;
                font-size: 12px;
            }
            .footer, .disclaimer {
                font-size: 10px;
                color: #777;
            }
            .disclaimer {
                margin-top: 10px;
                line-height: 1.4;
            }
        </style>
        <div class='container'>
            <div class='header'>
                <img src='$logo_url' alt='Λογότυπο Καταστήματος'>
                <h1>Αναφορά Υπηρεσίας</h1>
            </div>
            <div class='details'>
                <p><strong>Αριθμός Υπηρεσίας:</strong> {$service['service_number']}</p>
                <p><strong>Πελάτης:</strong> {$service['full_name']}</p>
                <p><strong>Συσκευή:</strong> {$service['type']} - {$service['brand']} - {$service['model']} (Σειριακός: {$service['serial_number']})</p>
                <p><strong>Ημερομηνία Υπηρεσίας:</strong> {$service['service_date']}</p>
                <p><strong>Κατάσταση Υπηρεσίας:</strong> {$service['status']}</p>
            </div>
            <div class='signatures'>
                <div>
                    <p class='signature-title'>Υπογραφή Πελάτη</p>
                    <div class='signature-box'>
                        <!-- Signature space -->
                    </div>
                </div>
                <div>
                    <p class='signature-title'>Υπογραφή Τεχνικού</p>
                    <div class='signature-box'>
                        <!-- Signature space -->
                    </div>
                </div>
            </div>
            <div class='footer'>
                <p><strong>$store_name</strong></p>
                <p>$store_address</p>
                <p>Τηλέφωνο: $store_phone</p>
            </div>
            <div class='disclaimer'>
                <p>Μετά από τη σχετική ειδοποίηση ότι το παρόν προϊόν είναι έτοιμο προς παραλαβή, ο πελάτης οφείλει να το παραλάβει εντός 10 ημερών. Εάν παρέλθει διάστημα 30 ημερών χωρίς παραλαβή, το προϊόν θα οδηγείται προς καταστροφή.</p>
                <p>Για τυχόν προβλήματα της συσκευής που δεν αναφέρθηκαν αρχικά, το κατάστημα δεν φέρει ευθύνη για την επισκευή. Υποχρεούται μόνο να ενημερώσει τον πελάτη και να ζητήσει έγκριση για οποιαδήποτε επιπλέον επισκευή.</p>
                <p>Η εγγύηση καλύπτει μόνο την επισκευή της συγκεκριμένης βλάβης, εφόσον αυτή δεν οφείλεται σε κακή χρήση από τον πελάτη, και ισχύει για τρεις μήνες από την ημέρα παραλαβής.</p>
            </div>
        </div>";

        // Initialize and configure Dompdf
        $options = new Options();
        $options->set('isRemoteEnabled', true);
        $dompdf = new Dompdf($options);
        $dompdf->loadHtml($html);

        // Set paper size and orientation
        $dompdf->setPaper('A4', 'portrait');

        // Render and output the PDF to the browser
        $dompdf->render();
        $dompdf->stream("service_report_$service_id.pdf", array("Attachment" => false));
    } else {
        echo "Service not found.";
    }
} else {
    echo "No service ID provided.";
}
?>

services:

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

// Function to generate a unique service number
function generateServiceNumber($pdo) {
    do {
        $service_number = mt_rand(100000, 999999);
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM services WHERE service_number = ?");
        $stmt->execute([$service_number]);
    } while ($stmt->fetchColumn() > 0);

    return $service_number;
}

// Handle different actions
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;
        }
    }
}

// Fetch customer devices
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;
}

// Fetch service details
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;
}

// Fetch service for editing
$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);
}

// Define status labels for display (Handling both English and Greek statuses)
$status_labels = array(
    'Received' => 'Παραλαβή',
    'On Hold for Part' => 'Αναμονή για Ανταλλακτικό',
    'Delivered' => 'Παραδόθηκε',
    'Παραλαβή' => 'Παραλαβή',
    'Αναμονή για Ανταλλακτικό' => 'Αναμονή για Ανταλλακτικό',
    'Παραδόθηκε' => 'Παραδόθηκε'
);

// Set current page for navigation active state
$page = 'services';
?>
<!DOCTYPE html>
<html lang="el">
<head>
    <!-- Meta tags and other head content -->
    <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">
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        /* Your custom CSS styles */
        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>
    <!-- Navbar -->
    <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>
        <!-- Navigation Links -->
        <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>

        <!-- Status Messages -->
        <?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>
        </div>

        <!-- Service 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" onclick="window.location.href='services.php'">
                            <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" onchange="toggleDeliveredDate(this.value)">
                                    <option value="Received" <?php echo ($editService && ($editService['status'] == 'Received' || $editService['status'] == 'Παραλαβή')) ? 'selected' : ''; ?>>Παραλαβή</option>
                                    <option value="On Hold for Part" <?php echo ($editService && ($editService['status'] == 'On Hold for Part' || $editService['status'] == 'Αναμονή για Ανταλλακτικό')) ? 'selected' : ''; ?>>Αναμονή για Ανταλλακτικό</option>
                                    <option value="Delivered" <?php echo ($editService && ($editService['status'] == 'Delivered' || $editService['status'] == 'Παραδόθηκε')) ? 'selected' : ''; ?>>Παραδόθηκε</option>
                                </select>
                            </div>
                            <div class="form-group" id="deliveredDateContainer" style="display:<?php echo ($editService && ($editService['status'] == 'Delivered' || $editService['status'] == 'Παραδόθηκε')) ? '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" onclick="window.location.href='services.php'">Ακύρωση</button>
                                <button type="submit" class="btn btn-outline-danger"><?php echo $editService ? 'Ενημέρωση Υπηρεσίας' : 'Προσθήκη Υπηρεσίας'; ?></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- View Service 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" onclick="$('#viewServiceModal').modal('hide')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="serviceDetails">
                            <!-- Service details will be loaded here -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#viewServiceModal').modal('hide')">Κλείσιμο</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Services List -->
        <h2>Λίστα Υπηρεσιών</h2>
        <input type="text" id="serviceSearch" class="form-control mb-3" placeholder="Αναζήτηση υπηρεσιών με αριθμό υπηρεσίας ή όνομα πελάτη...">
        
        <?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($status_labels[$service['status']] ?? $service['status']) ?></td>
                        <td><?= $service['delivered_date'] ? htmlspecialchars($service['delivered_date']) : '' ?></td>
                        <td>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#viewServiceModal" data-id="<?= 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>

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

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- Include Popper and Bootstrap JS -->
    <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>
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        // Document Ready Function
        $(document).ready(function() {
            // Initialize Select2 for customer selection
            $('.select2').select2({
                placeholder: 'Επιλέξτε πελάτη',
                allowClear: true
            });

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

            // Load service details on View button click
            $('button[data-target="#viewServiceModal"]').click(function() {
                const serviceId = $(this).data('id');
                loadServiceDetails(serviceId);
            });

            // Show the modal if editing a service
            <?php if ($editService): ?>
            $('#serviceModal').modal('show');
            <?php endif; ?>

            // Toggle delivered date field based on status
            $('#status').on('change', function() {
                toggleDeliveredDate(this.value);
            });
        });

        // Fetch devices for the selected customer
        function fetchDevices(customerId) {
            $('#deviceSelectContainer').hide();
            $('#device_id').empty();
            if (!customerId) return;

            $.getJSON('services.php?action=get_devices&customer_id=' + customerId, function(data) {
                let deviceSelect = $('#device_id');
                if (data.length > 0) {
                    data.forEach(device => {
                        deviceSelect.append(new Option(`${device.type} - ${device.brand} - ${device.model} - Σειριακός: ${device.serial_number}`, device.id));
                    });
                    $('#deviceSelectContainer').show();
                }
            });
        }

        // Toggle the delivered date field
        function toggleDeliveredDate(status) {
            if (status === 'Delivered' || status === 'Παραδόθηκε') {
                $('#deliveredDateContainer').show();
            } else {
                $('#deliveredDateContainer').hide();
            }
        }

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

        // Load service details into the modal
        function loadServiceDetails(serviceId) {
            $.getJSON('services.php?view_id=' + serviceId, function(data) {
                if (data) {
                    // Map status to labels
                    var statusLabels = {
                        'Received': 'Παραλαβή',
                        'On Hold for Part': 'Αναμονή για Ανταλλακτικό',
                        'Delivered': 'Παραδόθηκε',
                        'Παραλαβή': 'Παραλαβή',
                        'Αναμονή για Ανταλλακτικό': 'Αναμονή για Ανταλλακτικό',
                        'Παραδόθηκε': 'Παραδόθηκε'
                    };
                    var statusLabel = statusLabels[data.status] || data.status;

                    $('#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> ' + statusLabel + '</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>');
                }
            }).fail(function() {
                $('#serviceDetails').html('<p>Σφάλμα κατά τη φόρτωση των λεπτομερειών της υπηρεσίας.</p>');
            });
        }
    </script>
</body>
</html>

devices:

<?php
// devices.php
include 'db.php';

$error = null;
$itemsPerPage = 50; // Number of devices per page
$searchQuery = isset($_GET['search']) ? $_GET['search'] : '';

if ($searchQuery) {
    $totalDevices = $pdo->prepare("SELECT COUNT(*) FROM devices WHERE type LIKE :search OR brand LIKE :search OR model LIKE :search");
    $totalDevices->execute(['search' => '%' . $searchQuery . '%']);
} else {
    $totalDevices = $pdo->query("SELECT COUNT(*) FROM devices");
}
$totalDevices = $totalDevices->fetchColumn();
$totalPages = ceil($totalDevices / $itemsPerPage);
$currentPage = isset($_GET['page']) ? max(1, min($totalPages, $_GET['page'])) : 1;
$offset = ($currentPage - 1) * $itemsPerPage;

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action']) && $_POST['action'] == 'add_device') {
        $type = !empty($_POST['type']) ? $_POST['type'] : $_POST['new_type'];
        $brand = !empty($_POST['brand']) ? $_POST['brand'] : $_POST['new_brand'];
        $model = !empty($_POST['model']) ? $_POST['model'] : $_POST['new_model'];

        if (empty($type) || empty($brand) || empty($model)) {
            $error = "Όλα τα πεδία είναι υποχρεωτικά.";
        } else {
            $stmt = $pdo->prepare("INSERT INTO devices (type, brand, model) VALUES (?, ?, ?)");
            $stmt->execute([$type, $brand, $model]);

            header('Location: devices.php?status=success');
            exit;
        }
    } elseif (isset($_POST['action']) && $_POST['action'] == 'edit_device') {
        $device_id = $_POST['device_id'];
        $type = !empty($_POST['type']) ? $_POST['type'] : $_POST['new_type'];
        $brand = !empty($_POST['brand']) ? $_POST['brand'] : $_POST['new_brand'];
        $model = !empty($_POST['model']) ? $_POST['model'] : $_POST['new_model'];

        if (empty($type) || empty($brand) || empty($model)) {
            $error = "Όλα τα πεδία είναι υποχρεωτικά.";
        } else {
            $stmt = $pdo->prepare("UPDATE devices SET type = ?, brand = ?, model = ? WHERE id = ?");
            $stmt->execute([$type, $brand, $model, $device_id]);

            header('Location: devices.php?status=updated');
            exit;
        }
    } elseif (isset($_POST['action']) && $_POST['action'] == 'delete_device') {
        $device_id = $_POST['device_id'];

        $stmt = $pdo->prepare("DELETE FROM devices WHERE id = ?");
        $stmt->execute([$device_id]);

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

// Fetch existing device types, brands, and models
$types = $pdo->query("SELECT DISTINCT type FROM devices WHERE type IS NOT NULL")->fetchAll(PDO::FETCH_COLUMN);
$brands = $pdo->query("SELECT DISTINCT brand FROM devices WHERE brand IS NOT NULL")->fetchAll(PDO::FETCH_COLUMN);
$models = $pdo->query("SELECT DISTINCT model FROM devices WHERE model IS NOT NULL")->fetchAll(PDO::FETCH_COLUMN);

// Fetch devices based on search or pagination
if ($searchQuery) {
    $query = $pdo->prepare("SELECT * FROM devices WHERE type LIKE :search OR brand LIKE :search OR model LIKE :search ORDER BY id DESC LIMIT :limit OFFSET :offset");
    $query->bindValue(':search', '%' . $searchQuery . '%', PDO::PARAM_STR);
} else {
    $query = $pdo->prepare("SELECT * FROM devices ORDER BY id DESC LIMIT :limit OFFSET :offset");
}
$query->bindValue(':limit', $itemsPerPage, PDO::PARAM_INT);
$query->bindValue(':offset', $offset, PDO::PARAM_INT);
$query->execute();
$devices = $query->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">
    <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 {
            padding: 20px;
            text-align: center;
            background-color: #282828;
            color: white;
        }
        .table-hover tbody tr:hover {
            background-color: #e9ecef;
        }
        .alert {
            margin-top: 15px;
        }
        .pagination {
            justify-content: center;
        }
    </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-success">
                <?php
                if ($_GET['status'] == 'success') echo "Η συσκευή προστέθηκε με επιτυχία!";
                elseif ($_GET['status'] == 'updated') echo "Η συσκευή ενημερώθηκε με επιτυχία!";
                elseif ($_GET['status'] == 'deleted') echo "Η συσκευή διαγράφηκε με επιτυχία!";
                ?>
            </div>
        <?php endif; ?>

        <?php if (isset($error)): ?>
            <div class="alert alert-danger"><?= htmlspecialchars($error) ?></div>
        <?php endif; ?>

        <button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deviceModal">
            Προσθήκη Νέας Συσκευής
        </button>

        <!-- Modal for Adding New Device -->
        <div class="modal fade" id="deviceModal" tabindex="-1" aria-labelledby="deviceModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deviceModalLabel">Προσθήκη Νέας Συσκευής</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="devices.php" method="post">
                            <input type="hidden" name="action" value="add_device">
                            <div class="form-group">
                                <label for="type">Τύπος</label>
                                <select class="form-control" id="type" name="type">
                                    <option value="">Επιλέξτε Τύπο</option>
                                    <?php foreach ($types as $type): ?>
                                        <option value="<?= htmlspecialchars($type) ?>"><?= htmlspecialchars($type) ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <input type="text" class="form-control mt-2" id="new_type" name="new_type" placeholder="Προσθήκη Νέου Τύπου">
                            </div>
                            <div class="form-group">
                                <label for="brand">Μάρκα</label>
                                <select class="form-control" id="brand" name="brand">
                                    <option value="">Επιλέξτε Μάρκα</option>
                                    <?php foreach ($brands as $brand): ?>
                                        <option value="<?= htmlspecialchars($brand) ?>"><?= htmlspecialchars($brand) ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <input type="text" class="form-control mt-2" id="new_brand" name="new_brand" placeholder="Προσθήκη Νέας Μάρκας">
                            </div>
                            <div class="form-group">
                                <label for="model">Μοντέλο</label>
                                <select class="form-control" id="model" name="model">
                                    <option value="">Επιλέξτε Μοντέλο</option>
                                    <?php foreach ($models as $model): ?>
                                        <option value="<?= htmlspecialchars($model) ?>"><?= htmlspecialchars($model) ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <input type="text" class="form-control mt-2" id="new_model" name="new_model" placeholder="Προσθήκη Νέου Μοντέλου">
                            </div>
                            <button type="submit" class="btn btn-outline-danger">Προσθήκη Συσκευής</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <h2 class="mt-4">Λίστα Συσκευών</h2>
        <form method="get" class="mb-3">
            <input type="text" name="search" value="<?= htmlspecialchars($searchQuery) ?>" class="form-control" placeholder="Αναζήτηση συσκευών..." formtarget="_self">
            <input type="submit" hidden>
        </form>

        <?php if (count($devices) > 0): ?>
            <table class="table table-bordered table-hover" id="deviceTable">
                <thead class="thead-dark">
                    <tr>
                        <th>ID</th>
                        <th>Τύπος</th>
                        <th>Μάρκα</th>
                        <th>Μοντέλο</th>
                        <th>Ενέργειες</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($devices as $device): ?>
                    <tr>
                        <td><?= htmlspecialchars($device['id']) ?></td>
                        <td><?= htmlspecialchars($device['type']) ?></td>
                        <td><?= htmlspecialchars($device['brand']) ?></td>
                        <td><?= htmlspecialchars($device['model']) ?></td>
                        <td>
                            <!-- View Device Modal Trigger -->
                            <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#viewDeviceModal<?= $device['id'] ?>">Προβολή</button>
                            <!-- Edit Device Modal Trigger -->
                            <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#editDeviceModal<?= $device['id'] ?>">Επεξεργασία</button>
                            <!-- Delete Device Modal Trigger -->
                            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteDeviceModal<?= $device['id'] ?>">Διαγραφή</button>
                        </td>
                    </tr>

                    <!-- View Device Modal -->
                    <div class="modal fade" id="viewDeviceModal<?= $device['id'] ?>" tabindex="-1" aria-labelledby="viewDeviceModalLabel<?= $device['id'] ?>" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="viewDeviceModalLabel<?= $device['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>ID:</strong> <?= htmlspecialchars($device['id']) ?></p>
                                    <p><strong>Τύπος:</strong> <?= htmlspecialchars($device['type']) ?></p>
                                    <p><strong>Μάρκα:</strong> <?= htmlspecialchars($device['brand']) ?></p>
                                    <p><strong>Μοντέλο:</strong> <?= htmlspecialchars($device['model']) ?></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Edit Device Modal -->
                    <div class="modal fade" id="editDeviceModal<?= $device['id'] ?>" tabindex="-1" aria-labelledby="editDeviceModalLabel<?= $device['id'] ?>" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="editDeviceModalLabel<?= $device['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="devices.php" method="post">
                                        <input type="hidden" name="action" value="edit_device">
                                        <input type="hidden" name="device_id" value="<?= $device['id'] ?>">
                                        <div class="form-group">
                                            <label for="type">Τύπος</label>
                                            <input type="text" class="form-control" id="type" name="type" value="<?= htmlspecialchars($device['type']) ?>">
                                        </div>
                                        <div class="form-group">
                                            <label for="brand">Μάρκα</label>
                                            <input type="text" class="form-control" id="brand" name="brand" value="<?= htmlspecialchars($device['brand']) ?>">
                                        </div>
                                        <div class="form-group">
                                            <label for="model">Μοντέλο</label>
                                            <input type="text" class="form-control" id="model" name="model" value="<?= htmlspecialchars($device['model']) ?>">
                                        </div>
                                        <button type="submit" class="btn btn-outline-danger">Αποθήκευση Αλλαγών</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Delete Device Modal -->
                    <div class="modal fade" id="deleteDeviceModal<?= $device['id'] ?>" tabindex="-1" aria-labelledby="deleteDeviceModalLabel<?= $device['id'] ?>" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="deleteDeviceModalLabel<?= $device['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>Είστε σίγουροι ότι θέλετε να διαγράψετε αυτή τη συσκευή;</p>
                                    <form action="devices.php" method="post">
                                        <input type="hidden" name="action" value="delete_device">
                                        <input type="hidden" name="device_id" value="<?= $device['id'] ?>">
                                        <button type="submit" class="btn btn-danger">Διαγραφή</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <?php endforeach; ?>
                </tbody>
            </table>

            <!-- Pagination -->
            <nav>
                <ul class="pagination">
                    <li class="page-item <?= ($currentPage == 1) ? 'disabled' : '' ?>">
                        <a class="page-link" href="?page=<?= $currentPage - 1 ?>&search=<?= htmlspecialchars($searchQuery) ?>" tabindex="-1">Προηγούμενη</a>
                    </li>
                    <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                        <li class="page-item <?= ($currentPage == $i) ? 'active' : '' ?>">
                            <a class="page-link" href="?page=<?= $i ?>&search=<?= htmlspecialchars($searchQuery) ?>"><?= $i ?></a>
                        </li>
                    <?php endfor; ?>
                    <li class="page-item <?= ($currentPage == $totalPages) ? 'disabled' : '' ?>">
                        <a class="page-link" href="?page=<?= $currentPage + 1 ?>&search=<?= htmlspecialchars($searchQuery) ?>">Επόμενη</a>
                    </li>
                </ul>
            </nav>

        <?php else: ?>
            <p>Δεν βρέθηκαν συσκευές.</p>
        <?php endif; ?>
    </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>
</body>
</html>

settings:

<?php
// settings.php
include 'db.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $store_name = $_POST['store_name'];
    $address = $_POST['address'];
    $phone_number = $_POST['phone_number'];
    $logo_path = $settings['logo_path'] ?? '';

    // Διαχείριση μεταφόρτωσης αρχείου για το λογότυπο
    if (isset($_FILES['logo']) && $_FILES['logo']['error'] == UPLOAD_ERR_OK) {
        $logo = basename($_FILES['logo']['name']);
        $upload_dir = 'uploads/';
        $upload_file = $upload_dir . $logo;
        
        // Δημιουργία καταλόγου αν δεν υπάρχει
        if (!is_dir($upload_dir)) {
            mkdir($upload_dir, 0777, true);
        }
        
        // Μετακίνηση του μεταφορτωμένου αρχείου στον προορισμό
        if (move_uploaded_file($_FILES['logo']['tmp_name'], $upload_file)) {
            $logo_path = $upload_file;
        }
    }

    // Έλεγχος αν οι ρυθμίσεις υπάρχουν ήδη
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM settings");
    $stmt->execute();
    $count = $stmt->fetchColumn();

    if ($count > 0) {
        // Ενημέρωση υπαρχουσών ρυθμίσεων
        $stmt = $pdo->prepare("UPDATE settings SET store_name = ?, address = ?, phone_number = ?, logo_path = ? WHERE id = 1");
        $stmt->execute([$store_name, $address, $phone_number, $logo_path]);
    } else {
        // Εισαγωγή νέων ρυθμίσεων
        $stmt = $pdo->prepare("INSERT INTO settings (store_name, address, phone_number, logo_path) VALUES (?, ?, ?, ?)");
        $stmt->execute([$store_name, $address, $phone_number, $logo_path]);
    }

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

// Ανάκτηση υπαρχουσών ρυθμίσεων
$stmt = $pdo->query("SELECT * FROM settings WHERE id = 1");
$settings = $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">
    <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 {
            padding: 20px;
            text-align: center;
            background-color: #282828;
            color: white;
        }
        .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']) && $_GET['status'] == 'success'): ?>
            <div class="alert alert-success">Οι ρυθμίσεις ενημερώθηκαν με επιτυχία!</div>
        <?php endif; ?>

        <form action="settings.php" method="post" enctype="multipart/form-data" class="mb-4">
            <div class="form-group">
                <label for="store_name">Όνομα Καταστήματος</label>
                <input type="text" class="form-control" id="store_name" name="store_name" value="<?= htmlspecialchars($settings['store_name'] ?? '') ?>" required>
            </div>
            <div class="form-group">
                <label for="address">Διεύθυνση</label>
                <textarea class="form-control" id="address" name="address"><?= htmlspecialchars($settings['address'] ?? '') ?></textarea>
            </div>
            <div class="form-group">
                <label for="phone_number">Αριθμός Τηλεφώνου</label>
                <input type="text" class="form-control" id="phone_number" name="phone_number" value="<?= htmlspecialchars($settings['phone_number'] ?? '') ?>">
            </div>
            <div class="form-group">
                <label for="logo">Λογότυπο</label>
                <input type="file" class="form-control-file" id="logo" name="logo">
                <?php if (!empty($settings['logo_path'])): ?>
                    <p>Τρέχον Λογότυπο: <img src="<?= htmlspecialchars($settings['logo_path']) ?>" alt="Λογότυπο" style="max-width: 100px;"></p>
                <?php endif; ?>
            </div>
            <button type="submit" class="btn btn-outline-danger">Αποθήκευση Ρυθμίσεων</button>
        </form>
    </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>
</body>
</html>

db : 

<?php
// db.php

try {
    $pdo = new PDO('mysql:host=localhost;dbname=tech_store', 'root', '');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Could not connect to the database: " . $e->getMessage());
}
?>

connect with external db that i administrate on phpmyadmin sql db xammp 

scheme of db :

-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Sep 26, 2024 at 02:28 PM
-- Server version: 10.4.32-MariaDB
-- PHP Version: 8.2.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `tech_store`
--

-- --------------------------------------------------------

--
-- Table structure for table `customers`
--

CREATE TABLE `customers` (
  `id` int(11) NOT NULL,
  `full_name` varchar(100) NOT NULL,
  `landline_phone` varchar(20) DEFAULT NULL,
  `cellphone_number` varchar(20) DEFAULT NULL,
  `registration_date` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- --------------------------------------------------------

--
-- Table structure for table `customer_devices`
--

CREATE TABLE `customer_devices` (
  `id` int(11) NOT NULL,
  `customer_id` int(11) NOT NULL,
  `device_id` int(11) NOT NULL,
  `serial_number` varchar(100) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- --------------------------------------------------------

--
-- Table structure for table `devices`
--

CREATE TABLE `devices` (
  `id` int(11) NOT NULL,
  `type` varchar(50) NOT NULL,
  `brand` varchar(50) NOT NULL,
  `model` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- --------------------------------------------------------

--
-- Table structure for table `services`
--

CREATE TABLE `services` (
  `id` int(11) NOT NULL,
  `customer_id` int(11) DEFAULT NULL,
  `service_number` varchar(50) DEFAULT NULL,
  `service_date` date DEFAULT NULL,
  `comments` text DEFAULT NULL,
  `technician_comments` text DEFAULT NULL,
  `amount_paid` decimal(10,2) DEFAULT NULL,
  `device_id` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- --------------------------------------------------------

--
-- Table structure for table `settings`
--

CREATE TABLE `settings` (
  `id` int(11) NOT NULL,
  `store_name` varchar(100) DEFAULT NULL,
  `address` text DEFAULT NULL,
  `phone_number` varchar(20) DEFAULT NULL,
  `logo_path` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `customers`
--
ALTER TABLE `customers`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `customer_devices`
--
ALTER TABLE `customer_devices`
  ADD PRIMARY KEY (`id`),
  ADD KEY `customer_id` (`customer_id`),
  ADD KEY `device_id` (`device_id`);

--
-- Indexes for table `devices`
--
ALTER TABLE `devices`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `services`
--
ALTER TABLE `services`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `service_number` (`service_number`),
  ADD KEY `customer_id` (`customer_id`),
  ADD KEY `device_id` (`device_id`);

--
-- Indexes for table `settings`
--
ALTER TABLE `settings`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `customers`
--
ALTER TABLE `customers`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `customer_devices`
--
ALTER TABLE `customer_devices`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `devices`
--
ALTER TABLE `devices`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `services`
--
ALTER TABLE `services`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `settings`
--
ALTER TABLE `settings`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- Constraints for dumped tables
--

--
-- Constraints for table `customer_devices`
--
ALTER TABLE `customer_devices`
  ADD CONSTRAINT `customer_devices_ibfk_1` FOREIGN KEY (`customer_id`) REFERENCES `customers` (`id`),
  ADD CONSTRAINT `customer_devices_ibfk_2` FOREIGN KEY (`device_id`) REFERENCES `devices` (`id`);

--
-- Constraints for table `services`
--
ALTER TABLE `services`
  ADD CONSTRAINT `services_ibfk_1` FOREIGN KEY (`customer_id`) REFERENCES `customers` (`id`),
  ADD CONSTRAINT `services_ibfk_2` FOREIGN KEY (`device_id`) REFERENCES `devices` (`id`);
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


but i dont wanna run on a web browser but on a windows like a program please provide me with the complete py  and i want everything on a single file please provide the complete full code