/home/awneajlw/www/codestechvista.com/new-order.php
<?php
ob_start();
/**
* New Order Page - Create New Patient Order
* This page allows users to create new orders for patients
* Includes patient details, prescription information, and order details
* Features: Form validation, database integration, auto-tracking ID generation
*/
// Start session if not already started
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
// Include required files
require_once 'config/database.php'; // Database connection configuration
require_once 'includes/auth.php'; // Authentication functions
require_once 'includes/currency_helper.php'; // Currency helper functions
/**
* Authentication Check
* Redirect to welcome page if user is not logged in
*/
if (!isLoggedIn()) {
header('Location: welcome.php');
exit();
}
// Initialize variables for form handling
$success_message = ''; // Success message after form submission
$error_message = ''; // Error message for database issues
$field_errors = []; // Array to store field-specific errors
$form_data = []; // Array to store form data for repopulation
/**
* Form Submission Handler
* Process POST request when form is submitted
*/
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
try {
$database = new Database();
$db = $database->getConnection();
// Using orders table from database
// Collect and sanitize form data
$patient_name = sanitizeInput($_POST['patient_name'] ?? '');
$whatsapp_number = sanitizeInput($_POST['whatsapp_number'] ?? '');
$frame_detail = sanitizeInput($_POST['frame_detail'] ?? '');
$lens_type = sanitizeInput($_POST['lens_type'] ?? '');
$total_amount = floatval($_POST['total_amount'] ?? 0);
$advance = floatval($_POST['advance'] ?? 0);
$balance = floatval($_POST['balance'] ?? 0);
$delivery_date = $_POST['delivery_date'] ?? '';
// Prescription data
$right_sph = !empty($_POST['right_sph']) ? floatval($_POST['right_sph']) : null;
$right_cyl = !empty($_POST['right_cyl']) ? floatval($_POST['right_cyl']) : null;
$right_axis = !empty($_POST['right_axis']) ? intval($_POST['right_axis']) : null;
$left_sph = !empty($_POST['left_sph']) ? floatval($_POST['left_sph']) : null;
$left_cyl = !empty($_POST['left_cyl']) ? floatval($_POST['left_cyl']) : null;
$left_axis = !empty($_POST['left_axis']) ? intval($_POST['left_axis']) : null;
$add_power = !empty($_POST['add_power']) ? sanitizeInput($_POST['add_power']) : null;
$important_note = sanitizeInput($_POST['important_note'] ?? '');
$important_note = sanitizeInput($_POST['important_note'] ?? '');
// Store form data for repopulation on error
$form_data = $_POST;
// Validation
$validation_errors = [];
if (empty($patient_name)) {
$validation_errors['patient_name'] = 'Patient name is required';
} elseif (strlen($patient_name) < 2) {
$validation_errors['patient_name'] = 'Patient name must be at least 2 characters long';
} elseif (strlen($patient_name) > 255) {
$validation_errors['patient_name'] = 'Patient name is too long (maximum 255 characters)';
}
if (empty($whatsapp_number)) {
$validation_errors['whatsapp_number'] = 'WhatsApp number is required';
} elseif (strlen($whatsapp_number) < 10) {
$validation_errors['whatsapp_number'] = 'WhatsApp number must be at least 10 digits';
} elseif (strlen($whatsapp_number) > 20) {
$validation_errors['whatsapp_number'] = 'WhatsApp number is too long (maximum 20 characters)';
} elseif (!preg_match('/^[\+]?[0-9\s\-\(\)]{10,20}$/', $whatsapp_number)) {
$validation_errors['whatsapp_number'] = 'Please enter a valid WhatsApp number (only numbers, spaces, +, -, () allowed)';
}
if (empty($frame_detail)) {
$validation_errors['frame_detail'] = 'Frame detail is required';
} elseif (strlen($frame_detail) > 255) {
$validation_errors['frame_detail'] = 'Frame detail is too long (maximum 255 characters)';
}
if (empty($lens_type)) {
$validation_errors['lens_type'] = 'Lens type is required';
} elseif (strlen($lens_type) > 255) {
$validation_errors['lens_type'] = 'Lens type is too long (maximum 255 characters)';
}
if ($total_amount <= 0) {
$validation_errors['total_amount'] = 'Total amount must be greater than 0';
} elseif ($total_amount > 999999.99) {
$validation_errors['total_amount'] = 'Total amount is too large (maximum 999,999.99)';
}
if ($advance < 0) {
$validation_errors['advance'] = 'Advance cannot be negative';
} elseif ($advance > $total_amount) {
$validation_errors['advance'] = 'Advance cannot be greater than total amount';
} elseif ($advance > 999999.99) {
$validation_errors['advance'] = 'Advance amount is too large (maximum 999,999.99)';
}
// // Validate prescription values
// if ($right_eye_sph < -30 || $right_eye_sph > 30) {
// $validation_errors['right_eye_sph'] = 'Right eye SPH must be between -30.00 and +30.00';
// }
// if ($right_eye_cyl < -30 || $right_eye_cyl > 30) {
// $validation_errors['right_eye_cyl'] = 'Right eye CYL must be between -30.00 and +30.00';
// }
// if ($right_eye_axis < 0 || $right_eye_axis > 180) {
// $validation_errors['right_eye_axis'] = 'Right eye AXIS must be between 0 and 180';
// }
// if ($left_eye_sph < -30 || $left_eye_sph > 30) {
// $validation_errors['left_eye_sph'] = 'Left eye SPH must be between -30.00 and +30.00';
// }
// if ($left_eye_cyl < -30 || $left_eye_cyl > 30) {
// $validation_errors['left_eye_cyl'] = 'Left eye CYL must be between -30.00 and +30.00';
// }
// if ($left_eye_axis < 0 || $left_eye_axis > 180) {
// $validation_errors['left_eye_axis'] = 'Left eye AXIS must be between 0 and 180';
// }
// if (!empty($add_value) && strlen($add_value) > 100) {
// $validation_errors['add_value'] = 'ADD value is too long (maximum 100 characters)';
// }
// if (!empty($important_note) && strlen($important_note) > 1000) {
// $validNuation_errors['important_note'] = 'Important note is too long (maximum 1000 characters)';
// }
// Auto-calculate balance
$balance = $total_amount - $advance;
$field_errors = $validation_errors;
if (empty($validation_errors)) {
try {
// Generate tracking ID
$tracking_id = 'ORD' . date('Ymd') . '_' . str_pad(rand(1, 9999), 4, '0', STR_PAD_LEFT);
// Convert empty delivery_date to NULL
$delivery_date = empty($delivery_date) ? null : $delivery_date;
// Validate user session
if (!isset($_SESSION['user_id']) || empty($_SESSION['user_id'])) {
throw new Exception("User session expired. Please login again.");
}
$user_id = $_SESSION['user_id'];
// Check if current user is sub user and get main user ID for order creation
$order_user_id = $user_id; // Default to current user
try {
$check_user_query = "SELECT user_type, parent_user_id FROM users WHERE id = ?";
$check_user_stmt = $db->prepare($check_user_query);
$check_user_stmt->execute([$user_id]);
$user_info = $check_user_stmt->fetch(PDO::FETCH_ASSOC);
if ($user_info && $user_info['user_type'] === 'sub' && $user_info['parent_user_id']) {
// If sub user, create order under main user
$order_user_id = $user_info['parent_user_id'];
}
} catch (Exception $e) {
// If columns don't exist, use current user
error_log("User type check failed: " . $e->getMessage());
}
// Insert order into database (using orders table)
// Inserting into both old columns (right_sph, etc.) and new columns (right_eye_sph, etc.)
$insert_query = "INSERT INTO orders (
user_id, tracking_id, patient_name, whatsapp_number, frame_detail,
lens_type, total_amount, advance, balance, delivery_date,
right_sph, right_cyl, right_axis,
left_sph, left_cyl, left_axis,
add_power, important_note,
right_eye_sph, right_eye_cyl, right_eye_axis,
left_eye_sph, left_eye_cyl, left_eye_axis,
add_value, status
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'Pending')";
$stmt = $db->prepare($insert_query);
if (!$stmt) {
throw new Exception("Database preparation failed: " . implode(" ", $db->errorInfo()));
}
$result = $stmt->execute([
$order_user_id,
$tracking_id,
$patient_name,
$whatsapp_number,
$frame_detail,
$lens_type,
$total_amount,
$advance,
$balance,
$delivery_date,
// Old columns (VARCHAR - for backward compatibility)
$right_sph,
$right_cyl,
$right_axis,
$left_sph,
$left_cyl,
$left_axis,
$add_power,
$important_note,
// New columns (DECIMAL - same values)
$right_sph,
$right_cyl,
$right_axis,
$left_sph,
$left_cyl,
$left_axis,
$add_power
]);
if (!$result) {
$errorInfo = $stmt->errorInfo();
throw new Exception("Database execution failed: " . $errorInfo[2]);
}
// Send SMS notification for new order
try {
require_once 'includes/sms_service.php';
$smsService = new SMSService();
// Get order ID for notification
$order_id = $db->lastInsertId();
// Get user's currency for SMS
$user_currency = getUserCurrency($db, $user_id);
// Send new order notification
$smsService->sendNewOrderNotification(
$order_id,
$patient_name,
$total_amount, // Pass raw amount, let templates format it
$whatsapp_number, // Optional: also notify customer
$user_currency
);
error_log("SMS notification sent for new order: $tracking_id");
} catch (Exception $sms_error) {
// Don't fail order creation if SMS fails
error_log("SMS notification failed for order $tracking_id: " . $sms_error->getMessage());
}
ob_end_clean();
// Redirect to order slip page with tracking ID
header('Location: order-slip.php?tracking_id=' . urlencode($tracking_id));
exit();
} catch (Exception $e) {
error_log("New order creation error: " . $e->getMessage());
$error_message = "Failed to create order: " . $e->getMessage();
}
} else {
$error_message = "Please fix the following errors:";
}
} catch (Exception $e) {
error_log("New order error: " . $e->getMessage());
$error_message = "An error occurred. Please try again.";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Order - OPTI SLIP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: white;
min-height: 100vh;
padding: 20px;
margin: 0;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.back-btn {
background: none;
border: none;
color: black;
font-size: 24px;
cursor: pointer;
margin-bottom: 20px;
padding: 10px;
transition: all 0.3s ease;
}
.back-btn:hover {
color: #169D53;
transform: translateX(-3px);
}
.logo-section {
text-align: center;
/*margin-bottom: 30px;*/
}
.logo-container {
display: inline-block;
margin-bottom: 15px;
}
.logo-image {
width: 100%;
height: 120px;
margin-top:-100px;
object-fit: contain;
filter: brightness(0) saturate(100%);
}
.form-card {
max-width: 900px;
margin: 0 auto;
padding: 30px;
}
.field-card {
background: transparent;
border: none;
padding: 8px;
margin-bottom: 3px;
position: relative;
}
.form-group {
margin-bottom: 8px;
}
.form-label {
position: absolute;
top: -8px;
left: 20px;
background: white;
padding: 0 6px;
font-size: 13px;
color: black;
font-weight: 700;
z-index: 2;
}
.form-input {
width: 100%;
padding: 20px 15px;
border: 2px solid black;
border-radius: 25px;
font-size: 15px;
background: white;
color: black;
font-weight: 600;
min-height: 55px;
transition: all 0.3s ease;
}
.form-input12 {
width: 100%;
padding: 10px 10px;
border: 2px solid black;
border-radius: 8px;
font-size: 12px;
background: white;
color: black;
font-weight: 600;
min-height: 35px;
transition: all 0.3s ease;
margin-top: 5px;
}
/* Prescription field styling */
.prescription-field-group .form-select {
width: 100%;
padding: 10px 10px;
border: 2px solid black;
border-radius: 8px;
font-size: 12px;
background: white;
color: black;
font-weight: 600;
min-height: 35px;
transition: all 0.3s ease;
margin-top: 5px;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
.prescription-field-group .form-select:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 3px rgba(22, 157, 83, 0.1);
}
.form-input:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 3px rgba(22, 157, 83, 0.1);
}
.form-input.error {
border-color: #dc2626 !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}
.field-error {
color: #dc2626;
font-size: 11px;
margin-top: 4px;
margin-left: 18px;
font-weight: 500;
}
.form-input::placeholder {
color: #9ca3af;
opacity: 0.7;
}
.prescription-section {
margin: 30px 0;
}
/* New Card Style Design */
.prescription-cards-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.eye-card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 0;
border: 1px solid #e5e5e5;
}
.eye-card-header {
background: #169D53;
color: white;
padding: 12px 20px;
border-radius: 12px 12px 0 0;
font-weight: 600;
font-size: 16px;
text-align: center;
}
.prescription-fields {
padding: 20px;
}
.prescription-field-group {
margin-bottom: 15px;
}
.prescription-field-group:last-child {
margin-bottom: 0;
}
.field-label-small {
display: block;
font-size: 12px;
font-weight: 600;
color: #666;
margin-bottom: 8px;
}
.prescription-controls {
display: flex;
align-items: center;
gap: 8px;
}
.prescription-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
text-align: center;
background: #f9fafb;
color: #374151;
}
.prescription-input:focus {
outline: none;
border-color: #169D53;
background: white;
box-shadow: 0 0 0 2px rgba(22, 157, 83, 0.1);
}
.control-btn {
width: 32px;
height: 32px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #f9fafb;
color: #374151;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.control-btn:hover {
background: #169D53;
color: white;
border-color: #169D53;
}
.add-power-section {
background: #f8f9fa;
padding: 15px 20px;
border-radius: 10px;
border: 1px solid #e5e5e5;
}
.add-power-section .field-label {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.add-power-section .form-input {
background: white;
}
.prescription-title {
font-size: 18px;
font-weight: 700;
color: black;
margin-bottom: 20px;
text-align: left;
}
.eye-section {
margin-bottom: 25px;
}
.eye-title {
font-size: 16px;
font-weight: 700;
color: black;
margin-bottom: 15px;
}
.prescription-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.prescription-field {
position: relative;
}
.prescription-label {
font-size: 12px;
font-weight: 600;
color: #666;
margin-bottom: 5px;
text-align: center;
}
.prescription-input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
text-align: center;
background: white;
color: black;
transition: all 0.3s ease;
}
.prescription-input:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 2px rgba(22, 157, 83, 0.1);
}
.prescription-controls {
display: flex;
align-items: center;
gap: 8px;
}
.control-btn {
width: 30px;
height: 30px;
border: 2px solid #ddd;
background: white;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
.control-btn:hover {
border-color: #169D53;
color: #169D53;
}
.add-section {
margin-top: 20px;
text-align: center;
}
.add-input {
width: 120px;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
text-align: center;
background: white;
color: black;
transition: all 0.3s ease;
}
.add-input:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 2px rgba(22, 157, 83, 0.1);
}
.form-textarea {
width: 100%;
padding: 15px;
border: 2px solid black;
border-radius: 15px;
font-size: 15px;
background: white;
color: black;
font-weight: 600;
min-height: 120px;
resize: vertical;
transition: all 0.3s ease;
}
.form-textarea:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 3px rgba(22, 157, 83, 0.1);
}
.button-group {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.nav-btn {
font-size: 18px;
padding: 15px 30px;
border: 2px solid #169D53;
border-radius: 10px;
background: #169D53;
color: white;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
min-width: 150px;
white-space: nowrap;
text-decoration: none;
display: inline-block;
text-align: center;
}
.nav-btn:hover {
background: #128a43;
border-color: #128a43;
color: white;
transform: translateY(-2px);
}
.alert {
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
font-weight: 500;
}
.alert-success {
background: #d1fae5;
color: #065f46;
border: 1px solid #10b981;
}
.alert-danger {
background: #fee2e2;
color: #991b1b;
border: 1px solid #dc2626;
}
/* Auto-calculate balance styling */
.balance-display {
background: #f3f4f6;
border: 2px solid #d1d5db;
color: #374151;
cursor: not-allowed;
}
/* Mobile Responsive */
@media (max-width: 1024px) {
.container {
padding: 15px;
}
.form-card {
padding: 25px;
}
.logo-image {
width: 110px;
height: 110px;
}
}
@media (max-width: 768px) {
body {
padding: 5px;
}
.container {
padding: 5px;
max-width: 100%;
}
.form-card {
padding: 10px;
margin: 0;
}
.logo-image {
width: 80px;
height: 80px;
}
.form-input, .form-textarea {
padding: 12px 10px;
min-height: 45px;
font-size: 14px;
border-radius: 20px;
}
.form-label {
font-size: 11px;
padding: 0 4px;
left: 15px;
}
/* Card Layout for Mobile */
.prescription-cards-container {
grid-template-columns: 1fr;
gap: 15px;
}
.eye-card {
margin-bottom: 15px;
}
.eye-card-header {
padding: 10px 15px;
font-size: 14px;
}
.prescription-fields {
padding: 15px;
}
.prescription-field-group {
margin-bottom: 12px;
}
.field-label-small {
font-size: 11px;
margin-bottom: 6px;
}
.prescription-input {
padding: 8px 10px;
font-size: 13px;
}
.control-btn {
width: 28px;
height: 28px;
font-size: 14px;
}
.add-power-section {
padding: 12px 15px;
}
.field-card {
padding: 4px;
margin-bottom: 8px;
}
.prescription-title {
font-size: 16px;
margin-bottom: 15px;
text-align: center;
}
.eye-title {
font-size: 14px;
margin-bottom: 10px;
text-align: center;
}
.prescription-row {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}
.prescription-field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px;
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 0;
}
.prescription-label {
min-width: 40px;
margin-bottom: 0;
text-align: left;
font-size: 13px;
font-weight: 700;
color: #333;
}
.prescription-controls {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
justify-content: flex-end;
}
.prescription-input {
width: 80px;
padding: 8px;
font-size: 14px;
text-align: center;
border: 1px solid #ddd;
border-radius: 6px;
background: white;
}
.control-btn {
width: 28px;
height: 28px;
font-size: 14px;
font-weight: bold;
border: 1px solid #ddd;
background: white;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #333;
}
.control-btn:hover {
background: #169D53;
color: white;
border-color: #169D53;
}
.add-section {
text-align: center;
margin: 20px 0;
padding: 15px;
background: #f8f9fa;
border-radius: 12px;
}
.add-input {
width: 120px;
padding: 10px;
font-size: 14px;
text-align: center;
border: 1px solid #ddd;
border-radius: 6px;
background: white;
}
.nav-btn {
font-size: 16px;
padding: 15px 30px;
min-width: 200px;
border-radius: 12px;
}
.button-group {
margin-top: 25px;
padding: 0 10px;
}
.form-textarea {
min-height: 100px;
padding: 12px;
border-radius: 15px;
}
}
@media (max-width: 480px) {
body {
padding: 3px;
}
.container {
padding: 3px;
max-width: 100%;
}
.form-card {
padding: 8px;
margin: 0;
}
.logo-image {
width: 70px;
height: 70px;
}
.back-btn {
font-size: 18px;
margin-bottom: 10px;
padding: 8px;
}
.form-input, .form-textarea {
padding: 10px 8px;
min-height: 42px;
font-size: 13px;
border-radius: 18px;
}
.form-label {
font-size: 10px;
padding: 0 3px;
left: 12px;
}
.field-card {
padding: 3px;
margin-bottom: 6px;
}
.prescription-title {
font-size: 15px;
margin-bottom: 12px;
text-align: center;
}
.eye-title {
font-size: 13px;
margin-bottom: 8px;
text-align: center;
}
.prescription-row {
gap: 8px;
margin-bottom: 12px;
}
.prescription-field {
padding: 6px;
background: #f8f9fa;
border-radius: 10px;
gap: 8px;
}
.prescription-label {
min-width: 35px;
font-size: 12px;
font-weight: 700;
}
.prescription-input {
width: 70px;
padding: 6px;
font-size: 13px;
border-radius: 5px;
}
.control-btn {
width: 26px;
height: 26px;
font-size: 12px;
border-radius: 5px;
}
.add-section {
margin: 15px 0;
padding: 12px;
background: #f8f9fa;
border-radius: 10px;
}
.add-input {
width: 100px;
padding: 8px;
font-size: 13px;
border-radius: 5px;
}
.nav-btn {
font-size: 15px;
padding: 12px 25px;
min-width: 180px;
border-radius: 10px;
}
.button-group {
margin-top: 20px;
padding: 0 5px;
}
.form-textarea {
min-height: 80px;
padding: 10px;
border-radius: 12px;
}
.prescription-section {
margin: 15px 0;
}
.eye-section {
margin-bottom: 12px;
}
}
@media (max-width: 360px) {
.container {
padding: 3px;
}
.form-card {
padding: 8px;
}
.logo-image {
width: 60px;
height: 60px;
}
.form-input, .form-textarea {
padding: 10px 8px;
min-height: 42px;
font-size: 12px;
border-radius: 18px;
}
.form-label {
font-size: 10px;
padding: 0 3px;
left: 12px;
}
.prescription-input {
max-width: 50px;
padding: 5px;
font-size: 11px;
}
.control-btn {
width: 20px;
height: 20px;
font-size: 10px;
}
.add-input {
width: 70px;
padding: 5px;
font-size: 11px;
}
.nav-btn {
font-size: 13px;
padding: 8px 15px;
min-width: 100px;
}
.prescription-title {
font-size: 14px;
}
.eye-title {
font-size: 12px;
}
.prescription-label {
min-width: 25px;
font-size: 9px;
}
}
/* Landscape orientation for mobile */
@media (max-width: 768px) and (orientation: landscape) {
.prescription-row {
grid-template-columns: 1fr 1fr 1fr;
gap: 5px;
}
.prescription-field {
display: block;
text-align: center;
}
.prescription-label {
text-align: center;
margin-bottom: 5px;
min-width: auto;
}
.prescription-input {
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<button class="back-btn" onclick="window.location.href='home.php'">
<i class="fas fa-arrow-left"></i>
</button>
<div class="logo-section">
<div class="logo-container">
<img src="assets/images/Optislipimage.png" alt="Opti Slip Logo" class="logo-image" onerror="this.style.display='none'; this.parentElement.innerHTML='<div style=\'color: black; font-size: 24px; font-weight: bold; line-height: 1.2;\'>OPTI<br>SLIP</div>'">
</div>
</div>
<div class="form-card">
<!-- Success/Error Messages -->
<?php if ($success_message): ?>
<div class="alert alert-success">
<i class="fas fa-check-circle me-2"></i>
<?php echo htmlspecialchars($success_message); ?>
</div>
<?php endif; ?>
<?php if ($error_message): ?>
<div class="alert alert-danger">
<i class="fas fa-exclamation-triangle me-2"></i>
<?php echo htmlspecialchars($error_message); ?>
<?php if (!empty($field_errors)): ?>
<ul style="margin-top: 10px; margin-bottom: 0;">
<?php foreach ($field_errors as $field => $error): ?>
<li><strong><?php echo ucfirst(str_replace('_', ' ', $field)); ?>:</strong> <?php echo htmlspecialchars($error); ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
<?php endif; ?>
<form method="POST" id="newOrderForm">
<!-- Patient Information -->
<div class="field-card">
<div class="form-group">
<label class="form-label">Patient Name</label>
<input type="text" name="patient_name" class="form-input<?php echo isset($field_errors['patient_name']) ? ' error' : ''; ?>" placeholder="XXXXXXXXXX" value="<?php echo htmlspecialchars($form_data['patient_name'] ?? ''); ?>" required>
<?php if (isset($field_errors['patient_name'])): ?>
<div class="field-error"><?php echo htmlspecialchars($field_errors['patient_name']); ?></div>
<?php endif; ?>
</div>
</div>
<div class="field-card">
<div class="form-group">
<label class="form-label">WhatsApp Number</label>
<input type="tel" name="whatsapp_number" class="form-input<?php echo isset($field_errors['whatsapp_number']) ? ' error' : ''; ?>" placeholder="XXXXXXXXXX" value="<?php echo htmlspecialchars($form_data['whatsapp_number'] ?? ''); ?>" required>
<?php if (isset($field_errors['whatsapp_number'])): ?>
<div class="field-error"><?php echo htmlspecialchars($field_errors['whatsapp_number']); ?></div>
<?php endif; ?>
</div>
</div>
<div class="field-card">
<div class="form-group">
<label class="form-label">Frame Detail</label>
<input type="text" name="frame_detail" class="form-input<?php echo isset($field_errors['frame_detail']) ? ' error' : ''; ?>" placeholder="XXXXXXXXXX" value="<?php echo htmlspecialchars($form_data['frame_detail'] ?? ''); ?>" required>
<?php if (isset($field_errors['frame_detail'])): ?>
<div class="field-error"><?php echo htmlspecialchars($field_errors['frame_detail']); ?></div>
<?php endif; ?>
</div>
</div>
<div class="field-card">
<div class="form-group">
<label class="form-label">Lens Type</label>
<input type="text" name="lens_type" class="form-input<?php echo isset($field_errors['lens_type']) ? ' error' : ''; ?>" placeholder="XXXXXXXXXX" value="<?php echo htmlspecialchars($form_data['lens_type'] ?? ''); ?>" required>
<?php if (isset($field_errors['lens_type'])): ?>
<div class="field-error"><?php echo htmlspecialchars($field_errors['lens_type']); ?></div>
<?php endif; ?>
</div>
</div>
<div class="field-card">
<div class="form-group">
<label class="form-label">Total Amount</label>
<input type="number" name="total_amount" id="total_amount" class="form-input<?php echo isset($field_errors['total_amount']) ? ' error' : ''; ?>" placeholder="Total Ammount" step="0.01" min="0" value="<?php echo htmlspecialchars($form_data['total_amount'] ?? ''); ?>" required onchange="calculateBalance()">
<?php if (isset($field_errors['total_amount'])): ?>
<div class="field-error"><?php echo htmlspecialchars($field_errors['total_amount']); ?></div>
<?php endif; ?>
</div>
</div>
<div class="field-card">
<div class="form-group">
<label class="form-label">Advance</label>
<input type="number" name="advance" id="advance" class="form-input<?php echo isset($field_errors['advance']) ? ' error' : ''; ?>" placeholder="Advance" step="0.01" min="0" value="<?php echo htmlspecialchars($form_data['advance'] ?? ''); ?>" onchange="calculateBalance()">
<?php if (isset($field_errors['advance'])): ?>
<div class="field-error"><?php echo htmlspecialchars($field_errors['advance']); ?></div>
<?php endif; ?>
</div>
</div>
<div class="field-card">
<div class="form-group">
<label class="form-label">Balance</label>
<input type="number" name="balance" id="balance" class="form-input balance-display" placeholder="Balance" step="0.01" readonly value="<?php echo htmlspecialchars($form_data['balance'] ?? ''); ?>">
</div>
</div>
<div class="field-card">
<div class="form-group">
<label class="form-label">Delivery Date</label>
<input type="date" name="delivery_date" class="form-input" value="<?php echo htmlspecialchars($form_data['delivery_date'] ?? ''); ?>">
</div>
</div>
<!-- Prescription Section - Card Style Design -->
<div class="prescription-section">
<div class="prescription-cards-container">
<!-- Right Eye Card -->
<div class="eye-card">
<div class="eye-card-header">Right Eye</div>
<div class="prescription-fields">
<div class="prescription-field-group">
<label class="field-label-small">Sph</label>
<select class="form-select" id="dist_sph_r" name="right_sph">
<option value="">Select</option>
<option value="+24.00">+24.00</option>
<option value="+23.75">+23.75</option>
<option value="+23.50">+23.50</option>
<option value="+23.25">+23.25</option>
<option value="+23.00">+23.00</option>
<option value="+22.75">+22.75</option>
<option value="+22.50">+22.50</option>
<option value="+22.25">+22.25</option>
<option value="+22.00">+22.00</option>
<option value="+21.75">+21.75</option>
<option value="+21.50">+21.50</option>
<option value="+21.25">+21.25</option>
<option value="+21.00">+21.00</option>
<option value="+20.75">+20.75</option>
<option value="+20.50">+20.50</option>
<option value="+20.25">+20.25</option>
<option value="+20.00">+20.00</option>
<option value="+19.75">+19.75</option>
<option value="+19.50">+19.50</option>
<option value="+19.25">+19.25</option>
<option value="+19.00">+19.00</option>
<option value="+18.75">+18.75</option>
<option value="+18.50">+18.50</option>
<option value="+18.25">+18.25</option>
<option value="+18.00">+18.00</option>
<option value="+17.75">+17.75</option>
<option value="+17.50">+17.50</option>
<option value="+17.25">+17.25</option>
<option value="+17.00">+17.00</option>
<option value="+16.75">+16.75</option>
<option value="+16.50">+16.50</option>
<option value="+16.25">+16.25</option>
<option value="+16.00">+16.00</option>
<option value="+15.75">+15.75</option>
<option value="+15.50">+15.50</option>
<option value="+15.25">+15.25</option>
<option value="+15.00">+15.00</option>
<option value="+14.75">+14.75</option>
<option value="+14.50">+14.50</option>
<option value="+14.25">+14.25</option>
<option value="+14.00">+14.00</option>
<option value="+13.75">+13.75</option>
<option value="+13.50">+13.50</option>
<option value="+13.25">+13.25</option>
<option value="+13.00">+13.00</option>
<option value="+12.75">+12.75</option>
<option value="+12.50">+12.50</option>
<option value="+12.25">+12.25</option>
<option value="+12.00">+12.00</option>
<option value="+11.75">+11.75</option>
<option value="+11.50">+11.50</option>
<option value="+11.25">+11.25</option>
<option value="+11.00">+11.00</option>
<option value="+10.75">+10.75</option>
<option value="+10.50">+10.50</option>
<option value="+10.25">+10.25</option>
<option value="+10.00">+10.00</option>
<option value="+9.75">+9.75</option>
<option value="+9.50">+9.50</option>
<option value="+9.25">+9.25</option>
<option value="+9.00">+9.00</option>
<option value="+8.75">+8.75</option>
<option value="+8.50">+8.50</option>
<option value="+8.25">+8.25</option>
<option value="+8.00">+8.00</option>
<option value="+7.75">+7.75</option>
<option value="+7.50">+7.50</option>
<option value="+7.25">+7.25</option>
<option value="+7.00">+7.00</option>
<option value="+6.75">+6.75</option>
<option value="+6.50">+6.50</option>
<option value="+6.25">+6.25</option>
<option value="+6.00">+6.00</option>
<option value="+5.75">+5.75</option>
<option value="+5.50">+5.50</option>
<option value="+5.25">+5.25</option>
<option value="+5.00">+5.00</option>
<option value="+4.75">+4.75</option>
<option value="+4.50">+4.50</option>
<option value="+4.25">+4.25</option>
<option value="+4.00">+4.00</option>
<option value="+3.75">+3.75</option>
<option value="+3.50">+3.50</option>
<option value="+3.25">+3.25</option>
<option value="+3.00">+3.00</option>
<option value="+2.75">+2.75</option>
<option value="+2.50">+2.50</option>
<option value="+2.25">+2.25</option>
<option value="+2.00">+2.00</option>
<option value="+1.75">+1.75</option>
<option value="+1.50">+1.50</option>
<option value="+1.25">+1.25</option>
<option value="+1.00">+1.00</option>
<option value="+0.75">+0.75</option>
<option value="+0.50">+0.50</option>
<option value="+0.25">+0.25</option>
<option value="0.00" selected>0.00</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<option value="-1.25">-1.25</option>
<option value="-1.50">-1.50</option>
<option value="-1.75">-1.75</option>
<option value="-2.00">-2.00</option>
<option value="-2.25">-2.25</option>
<option value="-2.50">-2.50</option>
<option value="-2.75">-2.75</option>
<option value="-3.00">-3.00</option>
<option value="-3.25">-3.25</option>
<option value="-3.50">-3.50</option>
<option value="-3.75">-3.75</option>
<option value="-4.00">-4.00</option>
<option value="-4.25">-4.25</option>
<option value="-4.50">-4.50</option>
<option value="-4.75">-4.75</option>
<option value="-5.00">-5.00</option>
<option value="-5.25">-5.25</option>
<option value="-5.50">-5.50</option>
<option value="-5.75">-5.75</option>
<option value="-6.00">-6.00</option>
<option value="-6.25">-6.25</option>
<option value="-6.50">-6.50</option>
<option value="-6.75">-6.75</option>
<option value="-7.00">-7.00</option>
<option value="-7.25">-7.25</option>
<option value="-7.50">-7.50</option>
<option value="-7.75">-7.75</option>
<option value="-8.00">-8.00</option>
<option value="-8.25">-8.25</option>
<option value="-8.50">-8.50</option>
<option value="-8.75">-8.75</option>
<option value="-9.00">-9.00</option>
<option value="-9.25">-9.25</option>
<option value="-9.50">-9.50</option>
<option value="-9.75">-9.75</option>
<option value="-10.00">-10.00</option>
<option value="-10.25">-10.25</option>
<option value="-10.50">-10.50</option>
<option value="-10.75">-10.75</option>
<option value="-11.00">-11.00</option>
<option value="-11.25">-11.25</option>
<option value="-11.50">-11.50</option>
<option value="-11.75">-11.75</option>
<option value="-12.00">-12.00</option>
<option value="-12.25">-12.25</option>
<option value="-12.50">-12.50</option>
<option value="-12.75">-12.75</option>
<option value="-13.00">-13.00</option>
<option value="-13.25">-13.25</option>
<option value="-13.50">-13.50</option>
<option value="-13.75">-13.75</option>
<option value="-14.00">-14.00</option>
<option value="-14.25">-14.25</option>
<option value="-14.50">-14.50</option>
<option value="-14.75">-14.75</option>
<option value="-15.00">-15.00</option>
<option value="-15.25">-15.25</option>
<option value="-15.50">-15.50</option>
<option value="-15.75">-15.75</option>
<option value="-16.00">-16.00</option>
<option value="-16.25">-16.25</option>
<option value="-16.50">-16.50</option>
<option value="-16.75">-16.75</option>
<option value="-17.00">-17.00</option>
<option value="-17.25">-17.25</option>
<option value="-17.50">-17.50</option>
<option value="-17.75">-17.75</option>
<option value="-18.00">-18.00</option>
<option value="-18.25">-18.25</option>
<option value="-18.50">-18.50</option>
<option value="-18.75">-18.75</option>
<option value="-19.00">-19.00</option>
<option value="-19.25">-19.25</option>
<option value="-19.50">-19.50</option>
<option value="-19.75">-19.75</option>
<option value="-20.00">-20.00</option>
<option value="-20.25">-20.25</option>
<option value="-20.50">-20.50</option>
<option value="-20.75">-20.75</option>
<option value="-21.00">-21.00</option>
<option value="-21.25">-21.25</option>
<option value="-21.50">-21.50</option>
<option value="-21.75">-21.75</option>
<option value="-22.00">-22.00</option>
<option value="-22.25">-22.25</option>
<option value="-22.50">-22.50</option>
<option value="-22.75">-22.75</option>
<option value="-23.00">-23.00</option>
<option value="-23.25">-23.25</option>
<option value="-23.50">-23.50</option>
<option value="-23.75">-23.75</option>
<option value="-24.00">-24.00</option>
</select>
</div>
<div class="prescription-field-group">
<label class="field-label-small">Cyl</label>
<select class="form-select" id="dist_cyl_r" name="right_cyl">
<option value="">Select</option>
<option value="+6.00">+6.00</option>
<option value="+5.75">+5.75</option>
<option value="+5.50">+5.50</option>
<option value="+5.25">+5.25</option>
<option value="+5.00">+5.00</option>
<option value="+4.75">+4.75</option>
<option value="+4.50">+4.50</option>
<option value="+4.25">+4.25</option>
<option value="+4.00">+4.00</option>
<option value="+3.75">+3.75</option>
<option value="+3.50">+3.50</option>
<option value="+3.25">+3.25</option>
<option value="+3.00">+3.00</option>
<option value="+2.75">+2.75</option>
<option value="+2.50">+2.50</option>
<option value="+2.25">+2.25</option>
<option value="+2.00">+2.00</option>
<option value="+1.75">+1.75</option>
<option value="+1.50">+1.50</option>
<option value="+1.25">+1.25</option>
<option value="+1.00">+1.00</option>
<option value="+0.75">+0.75</option>
<option value="+0.50">+0.50</option>
<option value="+0.25">+0.25</option>
<option value="0.00" selected>0.00</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<option value="-1.25">-1.25</option>
<option value="-1.50">-1.50</option>
<option value="-1.75">-1.75</option>
<option value="-2.00">-2.00</option>
<option value="-2.25">-2.25</option>
<option value="-2.50">-2.50</option>
<option value="-2.75">-2.75</option>
<option value="-3.00">-3.00</option>
<option value="-3.25">-3.25</option>
<option value="-3.50">-3.50</option>
<option value="-3.75">-3.75</option>
<option value="-4.00">-4.00</option>
<option value="-4.25">-4.25</option>
<option value="-4.50">-4.50</option>
<option value="-4.75">-4.75</option>
<option value="-5.00">-5.00</option>
<option value="-5.25">-5.25</option>
<option value="-5.50">-5.50</option>
<option value="-5.75">-5.75</option>
<option value="-6.00">-6.00</option>
</select>
</div>
<div class="form-group">
<label class="field-label-small">Axis</label>
<input type="number" class="form-input12" id="dist_axis_r" name="right_axis" min="1" max="180" placeholder="1 to 180">
</div>
</div>
</div>
<!-- Left Eye Card -->
<div class="eye-card">
<div class="eye-card-header">Left Eye</div>
<div class="prescription-fields">
<div class="prescription-field-group">
<label class="field-label-small">Sph</label>
<select class="form-select" id="dist_sph_l" name="left_sph">
<option value="">Select</option>
<option value="+24.00">+24.00</option>
<option value="+23.75">+23.75</option>
<option value="+23.50">+23.50</option>
<option value="+23.25">+23.25</option>
<option value="+23.00">+23.00</option>
<option value="+22.75">+22.75</option>
<option value="+22.50">+22.50</option>
<option value="+22.25">+22.25</option>
<option value="+22.00">+22.00</option>
<option value="+21.75">+21.75</option>
<option value="+21.50">+21.50</option>
<option value="+21.25">+21.25</option>
<option value="+21.00">+21.00</option>
<option value="+20.75">+20.75</option>
<option value="+20.50">+20.50</option>
<option value="+20.25">+20.25</option>
<option value="+20.00">+20.00</option>
<option value="+19.75">+19.75</option>
<option value="+19.50">+19.50</option>
<option value="+19.25">+19.25</option>
<option value="+19.00">+19.00</option>
<option value="+18.75">+18.75</option>
<option value="+18.50">+18.50</option>
<option value="+18.25">+18.25</option>
<option value="+18.00">+18.00</option>
<option value="+17.75">+17.75</option>
<option value="+17.50">+17.50</option>
<option value="+17.25">+17.25</option>
<option value="+17.00">+17.00</option>
<option value="+16.75">+16.75</option>
<option value="+16.50">+16.50</option>
<option value="+16.25">+16.25</option>
<option value="+16.00">+16.00</option>
<option value="+15.75">+15.75</option>
<option value="+15.50">+15.50</option>
<option value="+15.25">+15.25</option>
<option value="+15.00">+15.00</option>
<option value="+14.75">+14.75</option>
<option value="+14.50">+14.50</option>
<option value="+14.25">+14.25</option>
<option value="+14.00">+14.00</option>
<option value="+13.75">+13.75</option>
<option value="+13.50">+13.50</option>
<option value="+13.25">+13.25</option>
<option value="+13.00">+13.00</option>
<option value="+12.75">+12.75</option>
<option value="+12.50">+12.50</option>
<option value="+12.25">+12.25</option>
<option value="+12.00">+12.00</option>
<option value="+11.75">+11.75</option>
<option value="+11.50">+11.50</option>
<option value="+11.25">+11.25</option>
<option value="+11.00">+11.00</option>
<option value="+10.75">+10.75</option>
<option value="+10.50">+10.50</option>
<option value="+10.25">+10.25</option>
<option value="+10.00">+10.00</option>
<option value="+9.75">+9.75</option>
<option value="+9.50">+9.50</option>
<option value="+9.25">+9.25</option>
<option value="+9.00">+9.00</option>
<option value="+8.75">+8.75</option>
<option value="+8.50">+8.50</option>
<option value="+8.25">+8.25</option>
<option value="+8.00">+8.00</option>
<option value="+7.75">+7.75</option>
<option value="+7.50">+7.50</option>
<option value="+7.25">+7.25</option>
<option value="+7.00">+7.00</option>
<option value="+6.75">+6.75</option>
<option value="+6.50">+6.50</option>
<option value="+6.25">+6.25</option>
<option value="+6.00">+6.00</option>
<option value="+5.75">+5.75</option>
<option value="+5.50">+5.50</option>
<option value="+5.25">+5.25</option>
<option value="+5.00">+5.00</option>
<option value="+4.75">+4.75</option>
<option value="+4.50">+4.50</option>
<option value="+4.25">+4.25</option>
<option value="+4.00">+4.00</option>
<option value="+3.75">+3.75</option>
<option value="+3.50">+3.50</option>
<option value="+3.25">+3.25</option>
<option value="+3.00">+3.00</option>
<option value="+2.75">+2.75</option>
<option value="+2.50">+2.50</option>
<option value="+2.25">+2.25</option>
<option value="+2.00">+2.00</option>
<option value="+1.75">+1.75</option>
<option value="+1.50">+1.50</option>
<option value="+1.25">+1.25</option>
<option value="+1.00">+1.00</option>
<option value="+0.75">+0.75</option>
<option value="+0.50">+0.50</option>
<option value="+0.25">+0.25</option>
<option value="0.00" selected>0.00</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<option value="-1.25">-1.25</option>
<option value="-1.50">-1.50</option>
<option value="-1.75">-1.75</option>
<option value="-2.00">-2.00</option>
<option value="-2.25">-2.25</option>
<option value="-2.50">-2.50</option>
<option value="-2.75">-2.75</option>
<option value="-3.00">-3.00</option>
<option value="-3.25">-3.25</option>
<option value="-3.50">-3.50</option>
<option value="-3.75">-3.75</option>
<option value="-4.00">-4.00</option>
<option value="-4.25">-4.25</option>
<option value="-4.50">-4.50</option>
<option value="-4.75">-4.75</option>
<option value="-5.00">-5.00</option>
<option value="-5.25">-5.25</option>
<option value="-5.50">-5.50</option>
<option value="-5.75">-5.75</option>
<option value="-6.00">-6.00</option>
<option value="-6.25">-6.25</option>
<option value="-6.50">-6.50</option>
<option value="-6.75">-6.75</option>
<option value="-7.00">-7.00</option>
<option value="-7.25">-7.25</option>
<option value="-7.50">-7.50</option>
<option value="-7.75">-7.75</option>
<option value="-8.00">-8.00</option>
<option value="-8.25">-8.25</option>
<option value="-8.50">-8.50</option>
<option value="-8.75">-8.75</option>
<option value="-9.00">-9.00</option>
<option value="-9.25">-9.25</option>
<option value="-9.50">-9.50</option>
<option value="-9.75">-9.75</option>
<option value="-10.00">-10.00</option>
<option value="-10.25">-10.25</option>
<option value="-10.50">-10.50</option>
<option value="-10.75">-10.75</option>
<option value="-11.00">-11.00</option>
<option value="-11.25">-11.25</option>
<option value="-11.50">-11.50</option>
<option value="-11.75">-11.75</option>
<option value="-12.00">-12.00</option>
<option value="-12.25">-12.25</option>
<option value="-12.50">-12.50</option>
<option value="-12.75">-12.75</option>
<option value="-13.00">-13.00</option>
<option value="-13.25">-13.25</option>
<option value="-13.50">-13.50</option>
<option value="-13.75">-13.75</option>
<option value="-14.00">-14.00</option>
<option value="-14.25">-14.25</option>
<option value="-14.50">-14.50</option>
<option value="-14.75">-14.75</option>
<option value="-15.00">-15.00</option>
<option value="-15.25">-15.25</option>
<option value="-15.50">-15.50</option>
<option value="-15.75">-15.75</option>
<option value="-16.00">-16.00</option>
<option value="-16.25">-16.25</option>
<option value="-16.50">-16.50</option>
<option value="-16.75">-16.75</option>
<option value="-17.00">-17.00</option>
<option value="-17.25">-17.25</option>
<option value="-17.50">-17.50</option>
<option value="-17.75">-17.75</option>
<option value="-18.00">-18.00</option>
<option value="-18.25">-18.25</option>
<option value="-18.50">-18.50</option>
<option value="-18.75">-18.75</option>
<option value="-19.00">-19.00</option>
<option value="-19.25">-19.25</option>
<option value="-19.50">-19.50</option>
<option value="-19.75">-19.75</option>
<option value="-20.00">-20.00</option>
<option value="-20.25">-20.25</option>
<option value="-20.50">-20.50</option>
<option value="-20.75">-20.75</option>
<option value="-21.00">-21.00</option>
<option value="-21.25">-21.25</option>
<option value="-21.50">-21.50</option>
<option value="-21.75">-21.75</option>
<option value="-22.00">-22.00</option>
<option value="-22.25">-22.25</option>
<option value="-22.50">-22.50</option>
<option value="-22.75">-22.75</option>
<option value="-23.00">-23.00</option>
<option value="-23.25">-23.25</option>
<option value="-23.50">-23.50</option>
<option value="-23.75">-23.75</option>
<option value="-24.00">-24.00</option>
</select>
</div>
<div class="prescription-field-group">
<label class="field-label-small">Cyl</label>
<select class="form-select" id="dist_cyl_l" name="left_cyl">
<option value="">Select</option>
<option value="+6.00">+6.00</option>
<option value="+5.75">+5.75</option>
<option value="+5.50">+5.50</option>
<option value="+5.25">+5.25</option>
<option value="+5.00">+5.00</option>
<option value="+4.75">+4.75</option>
<option value="+4.50">+4.50</option>
<option value="+4.25">+4.25</option>
<option value="+4.00">+4.00</option>
<option value="+3.75">+3.75</option>
<option value="+3.50">+3.50</option>
<option value="+3.25">+3.25</option>
<option value="+3.00">+3.00</option>
<option value="+2.75">+2.75</option>
<option value="+2.50">+2.50</option>
<option value="+2.25">+2.25</option>
<option value="+2.00">+2.00</option>
<option value="+1.75">+1.75</option>
<option value="+1.50">+1.50</option>
<option value="+1.25">+1.25</option>
<option value="+1.00">+1.00</option>
<option value="+0.75">+0.75</option>
<option value="+0.50">+0.50</option>
<option value="+0.25">+0.25</option>
<option value="0.00" selected>0.00</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<option value="-1.25">-1.25</option>
<option value="-1.50">-1.50</option>
<option value="-1.75">-1.75</option>
<option value="-2.00">-2.00</option>
<option value="-2.25">-2.25</option>
<option value="-2.50">-2.50</option>
<option value="-2.75">-2.75</option>
<option value="-3.00">-3.00</option>
<option value="-3.25">-3.25</option>
<option value="-3.50">-3.50</option>
<option value="-3.75">-3.75</option>
<option value="-4.00">-4.00</option>
<option value="-4.25">-4.25</option>
<option value="-4.50">-4.50</option>
<option value="-4.75">-4.75</option>
<option value="-5.00">-5.00</option>
<option value="-5.25">-5.25</option>
<option value="-5.50">-5.50</option>
<option value="-5.75">-5.75</option>
<option value="-6.00">-6.00</option>
</select>
</div>
<div class="form-group">
<label class="field-label-small">Axis</label>
<input type="number" class="form-input12" id="dist_axis_l" name="left_axis" min="1" max="180" placeholder="1 to 180">
</div>
</div>
</div>
</div>
<!-- ADD Section -->
<div class="add-power-section">
<label class="field-label">ADD</label>
<select name="add_power" class="form-input">
<option value="">Select</option>
<option value="0.00">0.00</option>
<option value="+0.25">+0.25</option>
<option value="+0.50">+0.50</option>
<option value="+0.75">+0.75</option>
<option value="+1.00">+1.00</option>
<option value="+1.25">+1.25</option>
<option value="+1.50">+1.50</option>
<option value="+1.75">+1.75</option>
<option value="+2.00">+2.00</option>
<option value="+2.25">+2.25</option>
<option value="+2.50">+2.50</option>
<option value="+2.75">+2.75</option>
<option value="+3.00">+3.00</option>
<option value="+3.25">+3.25</option>
<option value="+3.50">+3.50</option>
</select>
</div>
</div>
<!-- Important Note -->
<div class="field-card">
<div class="form-group">
<label class="form-label">Important Note</label>
<textarea name="important_note" class="form-textarea" placeholder="Type Here..."><?php echo htmlspecialchars($form_data['important_note'] ?? ''); ?></textarea>
</div>
</div>
<div class="button-group">
<button type="submit" class="nav-btn">Generate Slip</button>
</div>
</form>
</div>
</div>
<script>
function adjustValue(fieldId, adjustment) {
const field = document.getElementById(fieldId);
let currentValue = parseFloat(field.value) || 0;
let newValue = (currentValue + adjustment).toFixed(2);
field.value = newValue;
}
function calculateBalance() {
const totalAmount = parseFloat(document.getElementById('total_amount').value) || 0;
const advance = parseFloat(document.getElementById('advance').value) || 0;
const balance = totalAmount - advance;
document.getElementById('balance').value = balance.toFixed(2);
}
// Calculate balance on page load
document.addEventListener('DOMContentLoaded', function() {
calculateBalance();
const form = document.getElementById('newOrderForm');
form.addEventListener('submit', function(e) {
const submitBtn = form.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.textContent = 'Generating...';
// Re-enable after 3 seconds to prevent permanent disable on error
setTimeout(() => {
submitBtn.disabled = false;
submitBtn.textContent = 'Generate Slip';
}, 3000);
});
});
</script>
</body>
</html>