/home/awneajlw/.trash/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

/**
 * 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();
        
        // Create orders table if it doesn't exist
        $create_table_sql = "CREATE TABLE IF NOT EXISTS orders (
            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,
            total_amount DECIMAL(10,2) DEFAULT 0,
            advance DECIMAL(10,2) DEFAULT 0,
            balance DECIMAL(10,2) DEFAULT 0,
            delivery_date DATE DEFAULT NULL,
            booking_date DATE DEFAULT NULL,
            right_sph VARCHAR(10) DEFAULT NULL,
            right_cyl VARCHAR(10) DEFAULT NULL,
            right_axis VARCHAR(10) DEFAULT NULL,
            left_sph VARCHAR(10) DEFAULT NULL,
            left_cyl VARCHAR(10) DEFAULT NULL,
            left_axis VARCHAR(10) DEFAULT NULL,
            add_power VARCHAR(10) DEFAULT NULL,
            important_note TEXT DEFAULT NULL,
            description TEXT DEFAULT NULL,
            status VARCHAR(20) DEFAULT 'Pending',
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
            INDEX idx_user_id (user_id),
            INDEX idx_tracking_id (tracking_id),
            INDEX idx_patient_name (patient_name),
            INDEX idx_created_at (created_at)
        )";
        
        $db->exec($create_table_sql);
        
        // Add booking_date column if it doesn't exist
        try {
            $db->exec("ALTER TABLE orders ADD COLUMN booking_date DATE DEFAULT NULL");
        } catch (PDOException $e) {
            // Column already exists, ignore error
        }
        
        // Get form data
        $patient_name = trim($_POST['patient_name'] ?? '');
        $whatsapp_number = trim($_POST['whatsapp_number'] ?? '');
        $frame_detail = trim($_POST['frame_detail'] ?? '');
        $lens_type = trim($_POST['lens_type'] ?? '');
        $booking_date = trim($_POST['booking_date'] ?? '');
        if (empty($booking_date)) {
            $booking_date = null;
        }
        $total_amount = floatval($_POST['total_amount'] ?? 0);
        $special_note = trim($_POST['special_note'] ?? '');
        $right_sph = trim($_POST['right_sph'] ?? '');
        $right_cyl = trim($_POST['right_cyl'] ?? '');
        $right_axis = trim($_POST['right_axis'] ?? '');
        $left_sph = trim($_POST['left_sph'] ?? '');
        $left_cyl = trim($_POST['left_cyl'] ?? '');
        $left_axis = trim($_POST['left_axis'] ?? '');
        $add_power = trim($_POST['add_power'] ?? '');
        
        // Generate tracking ID
        $user_id = $_SESSION['user_id'];
        $count_query = "SELECT COUNT(*) as count FROM orders WHERE user_id = ?";
        $count_stmt = $db->prepare($count_query);
        $count_stmt->execute([$user_id]);
        $count_result = $count_stmt->fetch(PDO::FETCH_ASSOC);
        $order_count = $count_result['count'] + 1;
        $tracking_id = 'T' . str_pad($order_count, 4, '0', STR_PAD_LEFT);
        
        // Insert record
        $insert_query = "INSERT INTO orders (
            user_id, tracking_id, patient_name, whatsapp_number, frame_detail, lens_type, 
            total_amount, important_note, right_sph, right_cyl, right_axis, 
            left_sph, left_cyl, left_axis, add_power, booking_date, status
        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'Pending')";
        
        $stmt = $db->prepare($insert_query);
        $stmt->execute([
            $user_id, $tracking_id, $patient_name, $whatsapp_number, $frame_detail, $lens_type,
            $total_amount, $special_note, $right_sph, $right_cyl, $right_axis,
            $left_sph, $left_cyl, $left_axis, $add_power, $booking_date
        ]);
        
        $success_message = 'Record saved successfully! Tracking ID: ' . $tracking_id;
        
    } catch (Exception $e) {
        $error_message = 'Error saving record: ' . $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: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            gap: 15px;
        }
        
        .back-btn {
            background: #10b981;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            font-weight: 500;
        }
        
        .back-btn:hover {
            background: #059669;
            transform: scale(1.05);
            color: white;
        }
        
        .page-title {
            color: white;
            font-size: 24px;
            font-weight: 600;
        }
        
        .logo-section {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .logo-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        
        .logo-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
            position: relative;
        }
        
        .logo-icon::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            width: 20px;
            height: 20px;
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
        }
        
        .logo-icon::after {
            content: '';
            position: absolute;
            top: 8px;
            right: 8px;
            width: 20px;
            height: 20px;
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
        }
        
        .logo-text {
            font-size: 20px;
            font-weight: 700;
            color: #1e3a8a;
        }
        
        .form-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .form-section {
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e5e7eb;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .form-label {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
        }
        
        .form-input {
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: #f9fafb;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #10b981;
            background: white;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }
        
        .form-input::placeholder {
            color: #9ca3af;
        }
        
        .textarea-input {
            min-height: 100px;
            resize: vertical;
        }
        
        .prescription-section {
            background: #f8fafc;
            border-radius: 15px;
            padding: 25px;
            border: 1px solid #e2e8f0;
        }
        
        .prescription-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        .eye-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .eye-title {
            font-size: 16px;
            font-weight: 600;
            color: #374151;
            text-align: center;
            padding: 10px;
            background: #10b981;
            color: white;
            border-radius: 8px;
        }
        
        .prescription-input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .prescription-label {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
        }
        
        .prescription-input-container {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .prescription-input {
            width: 100%;
            padding: 12px 50px 12px 50px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 16px;
            text-align: center;
            background: white;
            transition: all 0.3s ease;
        }
        
        .prescription-input:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }
        
        .input-controls {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            pointer-events: none;
        }
        
        .left-controls {
            display: flex;
            gap: 5px;
            margin-left: 5px;
        }
        
        .right-controls {
            display: flex;
            gap: 5px;
            margin-right: 5px;
        }
        
        .control-btn {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 6px;
            background: #10b981;
            color: white;
            font-weight: bold;
            cursor: pointer;
            pointer-events: all;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        .control-btn:hover {
            background: #059669;
            transform: scale(1.05);
        }
        
        .dropdown-btn {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 6px;
            background: #6b7280;
            color: white;
            cursor: pointer;
            pointer-events: all;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
        .dropdown-btn:hover {
            background: #4b5563;
            transform: scale(1.05);
        }
        
        .add-power-section {
            grid-column: 1 / -1;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .add-power-group {
            width: 200px;
        }
        
        .save-btn {
            width: 100%;
            padding: 15px 30px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 30px;
        }
        
        .save-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .alert-success {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #166534;
        }
        
        .alert-danger {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #dc2626;
        }
        
        @media (max-width: 768px) {
            .form-card {
                padding: 20px;
                margin: 0 10px;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .prescription-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .logo-icon {
                width: 50px;
                height: 50px;
                font-size: 24px;
            }
        }
        
        @media (max-width: 480px) {
            .prescription-input {
                padding: 10px 40px 10px 40px;
                font-size: 14px;
            }
            
            .control-btn,
            .dropdown-btn {
                width: 25px;
                height: 25px;
                font-size: 12px;
            }
            
            .add-power-group {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <a href="home.php" class="back-btn">
                <i class="fas fa-arrow-left"></i>
                Back
            </a>
            <h1 class="page-title">Add Record</h1>
        </div>
        
        <!-- Logo Section -->
        <div class="logo-section">
            <div class="logo-container">
                <div class="logo-icon">
                    <i class="fas fa-glasses"></i>
                </div>
                <div class="logo-text">OPTI SLIP</div>
            </div>
        </div>
        
        <!-- Form Card -->
        <div class="form-card">
            <?php if (!empty($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 (!empty($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" action="">
                <!-- Patient Details -->
                <div class="form-section">
                    <h3 class="section-title">Patient Details</h3>
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">Patient Name</label>
                            <input type="text" name="patient_name" class="form-input" placeholder="XXXXXXXXXX" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">WhatsApp Number</label>
                            <input type="text" name="whatsapp_number" class="form-input" placeholder="XXXXXXXXXX" required>
                        </div>
                    </div>
                </div>
                
                <!-- Order Details -->
                <div class="form-section">
                    <h3 class="section-title">Order Details</h3>
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">Frame Detail</label>
                            <input type="text" name="frame_detail" class="form-input" placeholder="XXXXXXXXXX">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Lens Type</label>
                            <input type="text" name="lens_type" class="form-input" placeholder="XXXXXXXXXX">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Booking Date</label>
                            <input type="date" name="booking_date" class="form-input" placeholder="XXXXXX">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Total Amount</label>
                            <input type="number" name="total_amount" class="form-input" placeholder="XXXXX" step="0.01">
                        </div>
                    </div>
                </div>
                
                <!-- Special Note -->
                <div class="form-section">
                    <h3 class="section-title">Special Note</h3>
                    <div class="form-group">
                        <textarea name="special_note" class="form-input textarea-input" placeholder="Type Here...."></textarea>
                    </div>
                </div>
                
                <!-- Prescription Section -->
                <div class="form-section">
                    <h3 class="section-title">Prescription</h3>
                    <div class="prescription-section">
                        <div class="prescription-grid">
                            <!-- Right Eye -->
                            <div class="eye-section">
                                <div class="eye-title">Right Eye</div>
                                
                                <div class="prescription-input-group">
                                    <label class="prescription-label">SPH (Sphere)</label>
                                    <div class="prescription-input-container">
                                        <input type="text" name="right_sph" class="prescription-input" value="0.00" id="rightSph">
                                        <div class="input-controls">
                                            <div class="left-controls">
                                                <button type="button" class="control-btn" onclick="adjustValue('rightSph', -0.25)">-</button>
                                                <button type="button" class="dropdown-btn" onclick="showDropdown('rightSph')">▼</button>
                                            </div>
                                            <div class="right-controls">
                                                <button type="button" class="control-btn" onclick="adjustValue('rightSph', 0.25)">+</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="prescription-input-group">
                                    <label class="prescription-label">CYL (Cylinder)</label>
                                    <div class="prescription-input-container">
                                        <input type="text" name="right_cyl" class="prescription-input" value="1.00" id="rightCyl">
                                        <div class="input-controls">
                                            <div class="left-controls">
                                                <button type="button" class="control-btn" onclick="adjustValue('rightCyl', -0.25)">-</button>
                                                <button type="button" class="dropdown-btn" onclick="showDropdown('rightCyl')">▼</button>
                                            </div>
                                            <div class="right-controls">
                                                <button type="button" class="control-btn" onclick="adjustValue('rightCyl', 0.25)">+</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="prescription-input-group">
                                    <label class="prescription-label">AXIS</label>
                                    <div class="prescription-input-container">
                                        <input type="text" name="right_axis" class="prescription-input" value="0" id="rightAxis">
                                        <div class="input-controls">
                                            <div class="right-controls">
                                                <button type="button" class="dropdown-btn" onclick="showDropdown('rightAxis')">▼</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Left Eye -->
                            <div class="eye-section">
                                <div class="eye-title">Left Eye</div>
                                
                                <div class="prescription-input-group">
                                    <label class="prescription-label">SPH (Sphere)</label>
                                    <div class="prescription-input-container">
                                        <input type="text" name="left_sph" class="prescription-input" value="0.00" id="leftSph">
                                        <div class="input-controls">
                                            <div class="left-controls">
                                                <button type="button" class="control-btn" onclick="adjustValue('leftSph', -0.25)">-</button>
                                                <button type="button" class="dropdown-btn" onclick="showDropdown('leftSph')">▼</button>
                                            </div>
                                            <div class="right-controls">
                                                <button type="button" class="control-btn" onclick="adjustValue('leftSph', 0.25)">+</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="prescription-input-group">
                                    <label class="prescription-label">CYL (Cylinder)</label>
                                    <div class="prescription-input-container">
                                        <input type="text" name="left_cyl" class="prescription-input" value="1.00" id="leftCyl">
                                        <div class="input-controls">
                                            <div class="left-controls">
                                                <button type="button" class="control-btn" onclick="adjustValue('leftCyl', -0.25)">-</button>
                                                <button type="button" class="dropdown-btn" onclick="showDropdown('leftCyl')">▼</button>
                                            </div>
                                            <div class="right-controls">
                                                <button type="button" class="control-btn" onclick="adjustValue('leftCyl', 0.25)">+</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="prescription-input-group">
                                    <label class="prescription-label">AXIS</label>
                                    <div class="prescription-input-container">
                                        <input type="text" name="left_axis" class="prescription-input" value="0" id="leftAxis">
                                        <div class="input-controls">
                                            <div class="right-controls">
                                                <button type="button" class="dropdown-btn" onclick="showDropdown('leftAxis')">▼</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- ADD Power -->
                        <div class="add-power-section">
                            <div class="add-power-group">
                                <div class="prescription-input-group">
                                    <label class="prescription-label">ADD</label>
                                    <input type="text" name="add_power" class="form-input" placeholder="XXXXXXXXXX">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Save Button -->
                <button type="submit" class="save-btn">
                    <i class="fas fa-save me-2"></i>
                    Save Record
                </button>
            </form>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function adjustValue(fieldId, increment) {
            const field = document.getElementById(fieldId);
            let currentValue = parseFloat(field.value) || 0;
            let newValue = currentValue + increment;
            
            // Round to 2 decimal places
            newValue = Math.round(newValue * 100) / 100;
            
            // Format the value
            if (fieldId.includes('Axis')) {
                field.value = Math.round(newValue);
            } else {
                field.value = newValue.toFixed(2);
            }
        }
        
        function showDropdown(fieldId) {
            // Placeholder for dropdown functionality
            alert('Dropdown functionality will be implemented');
        }
        
        // Form validation
        document.querySelector('form').addEventListener('submit', function(e) {
            const requiredFields = ['patient_name', 'whatsapp_number'];
            let isValid = true;
            
            requiredFields.forEach(fieldName => {
                const field = document.querySelector(`[name="${fieldName}"]`);
                if (!field.value.trim()) {
                    field.style.borderColor = '#ef4444';
                    isValid = false;
                } else {
                    field.style.borderColor = '#e5e7eb';
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                alert('Please fill in all required fields');
            }
        });
    </script>
</body>
</html>
Path: home/awneajlw/.trash