Edit file File name : invoice-edit.php Content :<?php session_start(); if (!isset($_SESSION['user_id'])) { header('Location: index.php'); exit(); } require_once '_helpers.php'; load_data(); $is_editing = false; $customer = null; $customer_id = $_GET['id'] ?? null; if ($customer_id) { try { require 'db_config.php'; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { throw new Exception("Connection failed: " . $conn->connect_error); } $stmt = $conn->prepare("SELECT * FROM customers WHERE id = ?"); $stmt->bind_param("s", $customer_id); $stmt->execute(); $result = fetch_all_assoc($stmt); $stmt->close(); $conn->close(); if (!empty($result)) { $customer = $result[0]; $is_editing = true; } else { http_response_code(404); die("Customer not found."); } } catch (Exception $e) { die("Error fetching customer data."); } } else { die("Customer ID is required."); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Edit Customer - <?php echo htmlspecialchars($business['name']); ?></title> <script src="https://cdn.tailwindcss.com"></script> <style>:root { --primary: <?php echo htmlspecialchars($business['primary_color'] ?? '217 91% 60%'); ?>; } .bg-primary { background-color: hsl(var(--primary)); } .text-primary { color: hsl(var(--primary)); } .ring-primary:focus-visible { --tw-ring-color: hsl(var(--primary)); }</style> </head> <body class="bg-slate-50"> <div class="flex h-screen"> <?php include '_sidebar.php'; ?> <div class="flex-1 flex flex-col overflow-hidden lg:ml-64"> <?php include '_header.php'; ?> <main class="flex-1 overflow-x-hidden overflow-y-auto bg-slate-50 p-6"> <form id="customer-form" class="max-w-4xl mx-auto" method="POST" action="api.php" enctype="multipart/form-data"> <input type="hidden" name="action" value="update_customer"> <input type="hidden" name="customer_id" value="<?php echo htmlspecialchars($customer['id']); ?>"> <input type="hidden" name="existing_logo_path" value="<?php echo htmlspecialchars($customer['logo'] ?? ''); ?>"> <div class="flex flex-col gap-8"> <div> <h1 class="text-3xl font-bold tracking-tight">Edit Customer</h1> <p class="text-slate-500 mt-1">Update the details for <?php echo htmlspecialchars($customer['name']); ?>.</p> </div> <div class="flex flex-col-reverse md:flex-row gap-8"> <div class="flex-grow space-y-8"> <div class="bg-white rounded-lg shadow-sm border p-6"> <h2 class="text-xl font-semibold mb-6">Customer Details</h2> <div class="grid sm:grid-cols-2 gap-6"> <div> <label for="name" class="block text-sm font-medium text-slate-700">Full Name</label> <input type="text" name="name" id="name" required class="mt-1 block w-full h-10 px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus-visible:ring-2 ring-primary" value="<?php echo htmlspecialchars($customer['name']); ?>"> </div> <div> <label for="email" class="block text-sm font-medium text-slate-700">Email</label> <input type="email" name="email" id="email" class="mt-1 block w-full h-10 px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus-visible:ring-2 ring-primary" value="<?php echo htmlspecialchars($customer['email']); ?>"> </div> <div class="sm:col-span-2"> <label for="phone" class="block text-sm font-medium text-slate-700">Phone Number</label> <input type="tel" name="phone" id="phone" class="mt-1 block w-full h-10 px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus-visible:ring-2 ring-primary" value="<?php echo htmlspecialchars($customer['phone']); ?>"> </div> <div class="sm:col-span-2"> <label for="address" class="block text-sm font-medium text-slate-700">Address</label> <textarea name="address" id="address" rows="3" class="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus-visible:ring-2 ring-primary"><?php echo htmlspecialchars($customer['address']); ?></textarea> </div> </div> </div> </div> <div class="md:w-1/3 space-y-8"> <div class="bg-white rounded-lg shadow-sm border p-6"> <h2 class="text-xl font-semibold mb-2">Customer Logo</h2> <p class="text-sm text-slate-500 mb-6">Upload a logo for this customer.</p> <div class="flex flex-col items-center gap-4"> <div id="logo-preview" class="h-24 w-24 rounded-full bg-slate-100 flex items-center justify-center text-3xl font-medium text-slate-400 overflow-hidden"> <?php if (!empty($customer['logo'])): ?> <img src="<?php echo htmlspecialchars($customer['logo']); ?>" alt="Logo Preview" class="h-full w-full object-cover rounded-full"> <?php else: ?> <?php echo htmlspecialchars(get_initials($customer['name'])); ?> <?php endif; ?> </div> <input type="file" name="logo" id="logo-upload" class="hidden" accept="image/*"> <button type="button" id="upload-btn" class="px-4 py-2 border rounded-full text-sm font-medium hover:bg-slate-100 flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg> Upload </button> </div> </div> </div> </div> <div class="flex justify-end gap-2"> <a href="customers.php" class="px-6 py-2 border rounded-full text-sm font-medium hover:bg-slate-100">Cancel</a> <button type="submit" class="px-6 py-2 bg-primary text-white rounded-full text-sm font-semibold hover:bg-opacity-90">Save Changes</button> </div> </div> </form> </main> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const nameInput = document.getElementById('name'); const logoPreview = document.getElementById('logo-preview'); const uploadBtn = document.getElementById('upload-btn'); const logoUploadInput = document.getElementById('logo-upload'); const getInitials = (name) => { if (!name) return 'CU'; const words = name.split(' '); if (words.length > 1) { return (words[0][0] + words[words.length - 1][0]).toUpperCase(); } return name.substring(0, 2).toUpperCase(); }; nameInput.addEventListener('input', (e) => { if (!logoUploadInput.files.length && !document.querySelector('#logo-preview img')) { logoPreview.textContent = getInitials(e.target.value); } }); uploadBtn.addEventListener('click', () => { logoUploadInput.click(); }); logoUploadInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { logoPreview.innerHTML = `<img src="${event.target.result}" alt="Logo Preview" class="h-full w-full object-cover rounded-full">`; }; reader.readAsDataURL(file); } }); document.getElementById('customer-form').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(this); fetch('api.php', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { if (data.success) { alert(data.data.message); window.location.href = data.data.redirect || 'customers.php'; } else { alert('Error: ' + data.message); } }) .catch(error => { console.error('Error:', error); alert('An error occurred. Please try again.'); }); }); }); </script> </body> </html> Save