/home/awneajlw/www/codestechvista.com/add-record.php
<?php
/**
* Add Record Page - Order Creation
* This page allows users to add new patient records/orders
* Features: Patient details, prescription information, order details, form validation
*/
// 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 validation/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 add record form is submitted
*/
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
try {
$database = new Database();
$db = $database->getConnection();
// Get user's currency
$user_currency = getUserCurrency($db, $_SESSION['user_id']);
// Create orders table if it doesn't exist
$create_add_record_table_sql = "CREATE TABLE IF NOT EXISTS add_record (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
tracking_id VARCHAR(50) DEFAULT NULL,
patient_name VARCHAR(255) NOT NULL,
whatsapp_number VARCHAR(20) NOT NULL,
frame_detail VARCHAR(255) DEFAULT NULL,
lens_type VARCHAR(255) DEFAULT NULL,
booking_date DATE DEFAULT NULL,
total_amount DECIMAL(10,2) DEFAULT 0,
special_note TEXT DEFAULT NULL,
right_eye_sph DECIMAL(5,2) DEFAULT NULL,
right_eye_cyl DECIMAL(5,2) DEFAULT NULL,
right_eye_axis INT DEFAULT NULL,
left_eye_sph DECIMAL(5,2) DEFAULT NULL,
left_eye_cyl DECIMAL(5,2) DEFAULT NULL,
left_eye_axis INT DEFAULT NULL,
add_value DECIMAL(5,2) DEFAULT NULL,
status VARCHAR(50) DEFAULT 'Active',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";
$db->exec($create_add_record_table_sql);
// Add booking_date column if it doesn't exist (for backward compatibility)
$alter_add_record_sql = "ALTER TABLE add_record ADD COLUMN booking_date DATE DEFAULT NULL";
try {
$db->exec($alter_add_record_sql);
} catch (PDOException $e) {
// Column already exists, ignore error
}
// 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'] ?? '');
$booking_date = $_POST['booking_date'] ?? '';
$total_amount = floatval($_POST['total_amount'] ?? 0);
$special_note = sanitizeInput($_POST['special_note'] ?? '');
// Prescription data
$right_eye_sph = floatval($_POST['right_eye_sph'] ?? 0);
$right_eye_cyl = floatval($_POST['right_eye_cyl'] ?? 0);
$right_eye_axis = intval($_POST['right_eye_axis'] ?? 0);
$left_eye_sph = floatval($_POST['left_eye_sph'] ?? 0);
$left_eye_cyl = floatval($_POST['left_eye_cyl'] ?? 0);
$left_eye_axis = intval($_POST['left_eye_axis'] ?? 0);
$add_value = floatval($_POST['add_value'] ?? 0);
// Store form data for repopulation on error
$form_data = $_POST;
// Detailed field validation with specific error messages
$field_errors = [];
// Patient name validation
if (empty($patient_name)) {
$field_errors['patient_name'] = 'Patient name is required';
} elseif (strlen($patient_name) < 2) {
$field_errors['patient_name'] = 'Patient name must be at least 2 characters long';
} elseif (strlen($patient_name) > 100) {
$field_errors['patient_name'] = 'Patient name cannot exceed 100 characters';
}
// WhatsApp number validation
if (empty($whatsapp_number)) {
$field_errors['whatsapp_number'] = 'WhatsApp number is required';
} elseif (!preg_match('/^[0-9+\-\s\(\)]+$/', $whatsapp_number)) {
$field_errors['whatsapp_number'] = 'WhatsApp number contains invalid characters';
} elseif (strlen(preg_replace('/[^0-9]/', '', $whatsapp_number)) < 10) {
$field_errors['whatsapp_number'] = 'WhatsApp number must be at least 10 digits';
}
// Frame detail validation
if (empty($frame_detail)) {
$field_errors['frame_detail'] = 'Frame detail is required';
} elseif (strlen($frame_detail) < 2) {
$field_errors['frame_detail'] = 'Frame detail must be at least 2 characters long';
}
// Lens type validation
if (empty($lens_type)) {
$field_errors['lens_type'] = 'Lens type is required';
} elseif (strlen($lens_type) < 1) {
$field_errors['lens_type'] = 'Please specify a valid lens type';
}
// Booking date validation
if (!empty($booking_date)) {
$date_check = DateTime::createFromFormat('Y-m-d', $booking_date);
if (!$date_check || $date_check->format('Y-m-d') !== $booking_date) {
$field_errors['booking_date'] = 'Please enter a valid booking date';
} elseif (strtotime($booking_date) < strtotime('-1 year')) {
$field_errors['booking_date'] = 'Booking date cannot be more than 1 year in the past';
} elseif (strtotime($booking_date) > strtotime('+1 year')) {
$field_errors['booking_date'] = 'Booking date cannot be more than 1 year in the future';
}
}
// Total amount validation
if (empty($_POST['total_amount']) || $_POST['total_amount'] === '') {
$field_errors['total_amount'] = 'Total amount is required';
} elseif (!is_numeric($_POST['total_amount'])) {
$field_errors['total_amount'] = 'Total amount must be a valid number';
} elseif ($total_amount <= 0) {
$field_errors['total_amount'] = 'Total amount must be greater than 0';
} elseif ($total_amount > 999999.99) {
$field_errors['total_amount'] = 'Total amount cannot exceed 999,999.99';
}
// Prescription validation (optional but if provided, must be valid)
if (!empty($_POST['right_eye_sph']) && !is_numeric($_POST['right_eye_sph'])) {
$field_errors['right_eye_sph'] = 'Right eye SPH must be a valid number';
}
if (!empty($_POST['right_eye_cyl']) && !is_numeric($_POST['right_eye_cyl'])) {
$field_errors['right_eye_cyl'] = 'Right eye CYL must be a valid number';
}
if (!empty($_POST['right_eye_axis']) && (!is_numeric($_POST['right_eye_axis']) || $_POST['right_eye_axis'] < 0 || $_POST['right_eye_axis'] > 180)) {
$field_errors['right_eye_axis'] = 'Right eye AXIS must be between 0 and 180';
}
if (!empty($_POST['left_eye_sph']) && !is_numeric($_POST['left_eye_sph'])) {
$field_errors['left_eye_sph'] = 'Left eye SPH must be a valid number';
}
if (!empty($_POST['left_eye_cyl']) && !is_numeric($_POST['left_eye_cyl'])) {
$field_errors['left_eye_cyl'] = 'Left eye CYL must be a valid number';
}
if (!empty($_POST['left_eye_axis']) && (!is_numeric($_POST['left_eye_axis']) || $_POST['left_eye_axis'] < 0 || $_POST['left_eye_axis'] > 180)) {
$field_errors['left_eye_axis'] = 'Left eye AXIS must be between 0 and 180';
}
if (!empty($_POST['add_value']) && !is_numeric($_POST['add_value'])) {
$field_errors['add_value'] = 'ADD value must be a valid number';
}
if (empty($field_errors)) {
// Generate tracking ID
$tracking_id = 'ORD' . date('Ymd') . '_' . str_pad(rand(1, 9999), 4, '0', STR_PAD_LEFT);
// Convert empty booking_date to NULL
$booking_date = empty($booking_date) ? null : $booking_date;
// Check if current user is sub user and get main user ID for order creation
$user_id = $_SESSION['user_id'];
$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
$insert_query = "INSERT INTO add_record (
user_id, tracking_id, patient_name, whatsapp_number, frame_detail,
lens_type, booking_date, total_amount, special_note,
right_eye_sph, right_eye_cyl, right_eye_axis,
left_eye_sph, left_eye_cyl, left_eye_axis, add_value, status
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'Active')";
$stmt = $db->prepare($insert_query);
$result = $stmt->execute([
$order_user_id,
$tracking_id,
$patient_name,
$whatsapp_number,
$frame_detail,
$lens_type,
$booking_date,
$total_amount,
$special_note,
$right_eye_sph,
$right_eye_cyl,
$right_eye_axis,
$left_eye_sph,
$left_eye_cyl,
$left_eye_axis,
$add_value
]);
if ($result) {
// Send SMS notification for new record
try {
require_once 'includes/sms_service.php';
$smsService = new SMSService();
// Get order ID for notification
$order_id = $db->lastInsertId();
// Format amount for SMS
$formatted_amount = number_format($total_amount, 0);
// Send new order notification
$smsService->sendNewOrderNotification(
$order_id,
$patient_name,
$total_amount, // Pass raw amount
$whatsapp_number, // Optional: also notify customer
$user_currency // Pass currency
);
error_log("SMS notification sent for new record: $tracking_id");
} catch (Exception $sms_error) {
// Don't fail record creation if SMS fails
error_log("SMS notification failed for record $tracking_id: " . $sms_error->getMessage());
}
$success_message = "Record added successfully! Tracking ID: " . $tracking_id;
// Clear form data on success
$form_data = [];
} else {
$error_message = "Failed to add record. Please try again.";
}
} else {
$error_message = "Please fix the errors below and try again.";
}
} catch (Exception $e) {
error_log("Add record error: " . $e->getMessage());
// Show the detailed error for debugging
$error_message = "An error occurred: " . $e->getMessage();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Record - 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: 120px;
height: 120px;
object-fit: contain;
filter: brightness(0) saturate(100%);
margin-top:-100px;
}
.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-input:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 3px rgba(22, 157, 83, 0.1);
}
.form-input.error {
border-color: #dc3545 !important;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}
.form-textarea.error {
border-color: #dc3545 !important;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}
.field-error {
color: #dc3545;
font-size: 12px;
margin-top: 5px;
font-weight: 500;
display: block;
}
.field-error {
color: #dc2626;
font-size: 11px;
margin-top: 4px;
margin-left: 18px;
font-weight: 500;
}
.form-input::placeholder {
color: #9ca3af;
opacity: 0.7;
}
.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);
}
/* Form input for Axis - matching new-order.php */
.form-input12 {
width: 100%;
padding: 10px 10px;
border: 2px solid black;
border-radius: 25px;
font-size: 12px;
background: white;
color: black;
font-weight: 600;
min-height: 35px;
transition: all 0.3s ease;
margin-top: 5px;
}
.form-input12:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 3px rgba(22, 157, 83, 0.1);
}
/* Make form-select match form-input12 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);
}
.prescription-section {
margin: 30px 0;
}
.prescription-title {
font-size: 18px;
font-weight: 700;
color: black;
margin-bottom: 20px;
text-align: left;
}
.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-field {
margin-bottom: 15px;
}
.prescription-field:last-child {
margin-bottom: 0;
}
.prescription-label {
display: block;
font-size: 12px;
font-weight: 600;
color: #666;
margin-bottom: 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;
box-shadow: 0 0 0 2px rgba(22, 157, 83, 0.1);
}
/* Make form-select match prescription-input styling */
.prescription-row .form-select,
.prescription-field .form-select {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
text-align: center;
background: #f9fafb;
color: #374151;
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='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
.prescription-row .form-select:focus,
.prescription-field .form-select:focus {
outline: none;
border-color: #169D53;
background: white;
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-power-section {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
border: 1px solid #e5e5e5;
margin-top: 20px;
}
.add-power-header {
background: #169D53;
color: white;
padding: 12px 20px;
border-radius: 12px 12px 0 0;
font-weight: 600;
font-size: 16px;
text-align: center;
}
.add-power-content {
padding: 20px;
}
.add-power-section .prescription-label {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.add-power-section .prescription-input {
border-color: #169D53;
background: white;
}
.add-power-section .form-input {
padding: 15px 20px;
border-radius: 8px;
}
.add-input:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 2px 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;
}
/* Mobile Responsive */
@media (max-width: 1024px) {
.container {
padding: 15px;
}
.form-card {
padding: 25px;
}
.logo-image {
width: 100%;
height: 250px; /* <-- Humne height barha di hai */
object-fit: contain;
filter: brightness(0) saturate(100%);
}
@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;
}
.field-card {
padding: 4px;
margin-bottom: 8px;
}
.prescription-cards-container {
grid-template-columns: 1fr; /* Mobile: 1 column */
}
.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: 2px;
}
.form-card {
padding: 6px;
}
.logo-image {
width: 60px;
height: 60px;
}
.form-input, .form-textarea {
padding: 8px 6px;
min-height: 40px;
font-size: 12px;
border-radius: 16px;
}
.form-label {
font-size: 9px;
padding: 0 2px;
left: 10px;
}
.prescription-input {
width: 60px;
padding: 5px;
font-size: 12px;
border-radius: 4px;
}
.control-btn {
width: 24px;
height: 24px;
font-size: 11px;
border-radius: 4px;
}
.add-input {
width: 80px;
padding: 6px;
font-size: 12px;
border-radius: 4px;
}
.nav-btn {
font-size: 14px;
padding: 10px 20px;
min-width: 160px;
border-radius: 8px;
}
.prescription-title {
font-size: 14px;
}
.eye-title {
font-size: 12px;
}
.prescription-label {
min-width: 30px;
font-size: 11px;
}
}
/* Large Screen Responsive */
@media (min-width: 1400px) {
.main-container {
max-width: 1400px;
padding: 40px;
}
.form-container {
padding: 40px;
}
.prescription-row {
gap: 25px;
margin-bottom: 20px;
}
.prescription-input {
padding: 15px;
font-size: 16px;
}
.prescription-label {
font-size: 14px;
}
}
/* Landscape orientation for mobile */
@media (max-width: 768px) and (orientation: landscape) {
.prescription-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 5px;
}
.prescription-field {
display: block;
text-align: center;
padding: 5px;
}
.prescription-label {
text-align: center;
margin-bottom: 5px;
min-width: auto;
}
.prescription-controls {
justify-content: center;
}
.prescription-input {
width: 60px;
}
}
</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: 4px; 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); ?>
</div>
<?php endif; ?>
<form method="POST" id="addRecordForm">
<!-- 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">Delivery Date</label>
<input type="date" name="delivery_date" class="form-input" value="<?php echo htmlspecialchars($form_data['delivery_date'] ?? ''); ?>">
</div>
</div>
<div class="field-card">
<div class="form-group">
<label class="form-label">Total Amount</label>
<input type="number" name="total_amount" class="form-input<?php echo isset($field_errors['total_amount']) ? ' error' : ''; ?>" placeholder="XXXXX" step="0.01" min="0" value="<?php echo htmlspecialchars($form_data['total_amount'] ?? ''); ?>" required>
<?php if (isset($field_errors['total_amount'])): ?>
<div class="field-error"><?php echo htmlspecialchars($field_errors['total_amount']); ?></div>
<?php endif; ?>
</div>
</div>
<!-- Special Note -->
<div class="field-card">
<div class="form-group">
<label class="form-label">Special Note</label>
<textarea name="special_note" class="form-textarea" placeholder="Type Here..."><?php echo htmlspecialchars($form_data['special_note'] ?? ''); ?></textarea>
</div>
</div>
<!-- Prescription Section -->
<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_eye_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_eye_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_eye_axis" min="1" max="180" placeholder="1 to 180" value="<?php echo htmlspecialchars($form_data['right_eye_axis'] ?? ''); ?>">
</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_eye_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_eye_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_eye_axis" min="1" max="180" placeholder="1 to 180" value="<?php echo htmlspecialchars($form_data['left_eye_axis'] ?? ''); ?>">
</div>
</div>
</div>
</div>
<!-- ADD Section -->
<div class="add-power-section">
<label class="field-label">ADD</label>
<select name="add_value" 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>
<div class="button-group">
<button type="submit" class="nav-btn">Save Record</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;
}
// Form submission enhancement
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('addRecordForm');
form.addEventListener('submit', function(e) {
const submitBtn = form.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.textContent = 'Saving...';
// Re-enable after 3 seconds to prevent permanent disable on error
setTimeout(() => {
submitBtn.disabled = false;
submitBtn.textContent = 'Save Record';
}, 3000);
});
});
</script>
</body>
</html>