/home/awneajlw/public_html/codestechvista.com/search.php
<?php
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
require_once 'config/database.php';
require_once 'includes/auth.php';

// Check if user is logged in
if (!isLoggedIn()) {
    header('Location: welcome.php');
    exit();
}

// Handle search functionality
$search_results = [];
$search_performed = false;

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['search'])) {
    $search_term = trim($_POST['search_term']);
    $search_performed = true;
    
    if (!empty($search_term)) {
        // Here you would implement actual search logic
        // For now, we'll show placeholder results
        $search_results = [
            [
                'patient_name' => 'Ahmad Ali',
                'whatsapp' => '+923001234567',
                'frame_detail' => 'Ray-Ban Aviator',
                'lens_type' => 'Progressive',
                'booking_date' => '2024-01-15',
                'total_amount' => 'PKR 15,000',
                'special_note' => 'Customer prefers anti-glare coating and blue light filter for extended computer use.',
                'prescription' => [
                    'right_eye' => ['sph' => '-2.50', 'cyl' => '-0.75', 'axis' => '90'],
                    'left_eye' => ['sph' => '-2.25', 'cyl' => '-0.50', 'axis' => '85'],
                    'add' => '+1.25'
                ]
            ],
            [
                'patient_name' => 'Fatima Khan',
                'whatsapp' => '+923007654321',
                'frame_detail' => 'Oakley Holbrook',
                'lens_type' => 'Bifocal',
                'booking_date' => '2024-01-14',
                'total_amount' => 'PKR 12,500',
                'special_note' => 'Patient has astigmatism and requires photochromic lenses for outdoor activities.',
                'prescription' => [
                    'right_eye' => ['sph' => '+1.50', 'cyl' => '-1.25', 'axis' => '180'],
                    'left_eye' => ['sph' => '+1.75', 'cyl' => '-1.00', 'axis' => '175'],
                    'add' => '+2.00'
                ]
            ]
        ];
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search - 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">
    <link href="assets/css/style.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }
        
        .search-container {
            max-width: 100%;
            margin: 0;
            padding: 20px;
        }
        
        .search-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .back-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .back-btn:hover {
            background: #059669;
            transform: translateY(-2px);
        }
        
        .search-title {
            color: white;
            font-size: 28px;
            font-weight: bold;
            margin: 0;
        }
        
        .opti-slip-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .opti-logo-container {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .opti-logo {
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .opti-logo.qr {
            background: #f3f4f6;
        }
        
        .opti-logo.doc {
            background: #e5e7eb;
        }
        
        .glasses-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #10b981;
            font-size: 20px;
            z-index: 2;
        }
        
        .qr-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                #d1d5db 0px,
                #d1d5db 2px,
                transparent 2px,
                transparent 4px
            ),
            repeating-linear-gradient(
                90deg,
                #d1d5db 0px,
                #d1d5db 2px,
                transparent 2px,
                transparent 4px
            );
        }
        
        .doc-lines {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 20px;
            border-top: 2px solid #9ca3af;
            border-bottom: 2px solid #9ca3af;
        }
        
        .opti-title {
            color: white;
            font-size: 24px;
            font-weight: bold;
            margin: 0;
        }
        
        .search-form-container {
            background: white;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid #e5e7eb;
        }
        
        .search-form {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .search-input-group {
            flex: 1;
            min-width: 250px;
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 15px 20px 15px 50px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #6b7280;
            font-size: 18px;
        }
        
        .search-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        
        .search-btn:hover {
            background: #059669;
            transform: translateY(-2px);
        }
        
        .opti-slip-card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid #e5e7eb;
        }
        
        .patient-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .detail-label {
            color: #374151;
            font-weight: 600;
        }
        
        .detail-value {
            color: #1f2937;
            font-weight: 500;
        }
        
        .special-note {
            margin-bottom: 25px;
        }
        
        .section-title {
            color: #1f2937;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .note-content {
            color: #6b7280;
            line-height: 1.6;
            background: #f9fafb;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #10b981;
        }
        
        .prescription-section {
            margin-bottom: 25px;
        }
        
        .prescription-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .prescription-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .prescription-label {
            color: #374151;
            font-weight: 600;
            min-width: 80px;
        }
        
        .prescription-values {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .prescription-value {
            color: #1f2937;
            font-weight: 500;
            background: #f3f4f6;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .action-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .action-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .action-btn:hover {
            background: #059669;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
        }
        
        .no-results {
            text-align: center;
            padding: 50px 20px;
            color: #6b7280;
        }
        
        .no-results i {
            font-size: 48px;
            margin-bottom: 20px;
            color: #d1d5db;
        }
        
        @media (max-width: 768px) {
            .search-container {
                padding: 15px;
            }
            
            .search-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .search-title {
                font-size: 24px;
            }
            
            .search-form {
                flex-direction: column;
                width: 100%;
            }
            
            .search-input-group {
                width: 100%;
                min-width: auto;
            }
            
            .search-btn {
                width: 100%;
                justify-content: center;
            }
            
            .patient-details {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .prescription-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .prescription-values {
                flex-direction: column;
                gap: 8px;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .action-btn {
                width: 100%;
                justify-content: center;
            }
        }
        
        @media (max-width: 480px) {
            .search-container {
                padding: 10px;
            }
            
            .opti-slip-card,
            .search-form-container {
                padding: 20px;
                border-radius: 15px;
            }
            
            .search-title {
                font-size: 20px;
            }
            
            .opti-title {
                font-size: 20px;
            }
            
            .opti-logo {
                width: 40px;
                height: 40px;
            }
            
            .glasses-icon {
                font-size: 16px;
            }
        }

        /* Calculator Styles */
        .calculator-section {
            width: 100%;
        }

        .calculator-title {
            color: #1f2937;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
            text-align: center;
        }

        .calculator-form {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .prescription-inputs {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .eye-section, .near-add-section, .required-for-section, .dominant-eye-section {
            background: #f9fafb;
            padding: 20px;
            border-radius: 12px;
            border: 2px solid #e5e7eb;
        }

        .eye-title {
            color: #1f2937;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
        }

        .input-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .input-group label {
            color: #374151;
            font-weight: 600;
            font-size: 14px;
        }

        .prescription-select {
            padding: 12px 15px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 16px;
            background: white;
            color: #1f2937;
            transition: all 0.3s ease;
        }

        .prescription-select:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }

        .radio-group {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            color: #374151;
            font-weight: 500;
        }

        .radio-option input[type="radio"] {
            display: none;
        }

        .radio-custom {
            width: 20px;
            height: 20px;
            border: 2px solid #d1d5db;
            border-radius: 50%;
            position: relative;
            transition: all 0.3s ease;
        }

        .radio-option input[type="radio"]:checked + .radio-custom {
            border-color: #10b981;
            background: #10b981;
        }

        .radio-option input[type="radio"]:checked + .radio-custom::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
        }

        .calculate-btn {
            background: #10b981;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 12px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 20px auto;
            display: block;
        }

        .calculate-btn:hover {
            background: #059669;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
        }

        .calculation-result {
            background: #f0fdf4;
            border: 2px solid #10b981;
            border-radius: 12px;
            padding: 25px;
            margin-top: 20px;
            text-align: center;
        }

        .calculation-result h3 {
            color: #1f2937;
            font-size: 20px;
            margin-bottom: 15px;
        }

        .result-display {
            background: white;
            border: 2px solid #10b981;
            border-radius: 8px;
            padding: 20px;
            margin: 15px 0;
            font-size: 24px;
            font-weight: bold;
            color: #10b981;
        }

        .recalculate-btn {
            background: #6b7280;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .recalculate-btn:hover {
            background: #4b5563;
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .input-row {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            
            .radio-group {
                flex-direction: column;
                gap: 15px;
            }
            
            .eye-section, .near-add-section, .required-for-section, .dominant-eye-section {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="search-container">
        <!-- Search Header -->
        <div class="search-header">
            <button class="back-btn" onclick="goBack()">
                <i class="fas fa-arrow-left"></i>
                Back
            </button>
            <h1 class="search-title">search</h1>
        </div>
        
        <!-- Opti Slip Header -->
        <div class="opti-slip-header">
            <div class="opti-logo-container">
                <div class="opti-logo qr">
                    <div class="qr-pattern"></div>
                    <i class="fas fa-glasses glasses-icon"></i>
                </div>
                <div class="opti-logo doc">
                    <div class="doc-lines"></div>
                    <i class="fas fa-glasses glasses-icon"></i>
                </div>
            </div>
            <h2 class="opti-title">OPTI SLIP</h2>
        </div>
        
        <!-- Search Form -->
        <div class="search-form-container">
            <form class="search-form" method="POST">
                <div class="search-input-group">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" name="search_term" class="search-input" 
                           placeholder="Search by patient name, phone, or order ID..." 
                           value="<?php echo isset($_POST['search_term']) ? htmlspecialchars($_POST['search_term']) : ''; ?>">
                </div>
                <button type="submit" name="search" class="search-btn">
                    <i class="fas fa-search"></i>
                    Search
                </button>
            </form>
        </div>
        
        <!-- Search Results -->
        <?php if ($search_performed): ?>
            <?php if (!empty($search_results)): ?>
                <?php foreach ($search_results as $result): ?>
                <div class="opti-slip-card">
                    <!-- Patient Details -->
                    <div class="patient-details">
                        <div class="detail-row">
                            <span class="detail-label">Patient Name:</span>
                            <span class="detail-value"><?php echo htmlspecialchars($result['patient_name']); ?></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">WhatsApp Number:</span>
                            <span class="detail-value"><?php echo htmlspecialchars($result['whatsapp']); ?></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Frame Detail:</span>
                            <span class="detail-value"><?php echo htmlspecialchars($result['frame_detail']); ?></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Lens Type:</span>
                            <span class="detail-value"><?php echo htmlspecialchars($result['lens_type']); ?></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Booking Date:</span>
                            <span class="detail-value"><?php echo htmlspecialchars($result['booking_date']); ?></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Total Amount:</span>
                            <span class="detail-value"><?php echo htmlspecialchars($result['total_amount']); ?></span>
                        </div>
                    </div>
                    
                    <!-- Special Note -->
                    <div class="special-note">
                        <h3 class="section-title">Special Note</h3>
                        <div class="note-content">
                            <?php echo htmlspecialchars($result['special_note']); ?>
                        </div>
                    </div>
                    
                    <!-- Prescription -->
                    <div class="prescription-section">
                        <h3 class="section-title">Prescription</h3>
                        <div class="prescription-grid">
                            <div class="prescription-item">
                                <span class="prescription-label">Right Eye:</span>
                                <div class="prescription-values">
                                    <span class="prescription-value">SPH: <?php echo $result['prescription']['right_eye']['sph']; ?></span>
                                    <span class="prescription-value">CYL: <?php echo $result['prescription']['right_eye']['cyl']; ?></span>
                                    <span class="prescription-value">AXIS: <?php echo $result['prescription']['right_eye']['axis']; ?></span>
                                </div>
                            </div>
                            <div class="prescription-item">
                                <span class="prescription-label">Left Eye:</span>
                                <div class="prescription-values">
                                    <span class="prescription-value">SPH: <?php echo $result['prescription']['left_eye']['sph']; ?></span>
                                    <span class="prescription-value">CYL: <?php echo $result['prescription']['left_eye']['cyl']; ?></span>
                                    <span class="prescription-value">AXIS: <?php echo $result['prescription']['left_eye']['axis']; ?></span>
                                </div>
                            </div>
                            <div class="prescription-item">
                                <span class="prescription-label">Add:</span>
                                <div class="prescription-values">
                                    <span class="prescription-value"><?php echo $result['prescription']['add']; ?></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="action-buttons">
                        <button class="action-btn" onclick="shareSlip('<?php echo $result['patient_name']; ?>')">
                            <i class="fas fa-share"></i>
                            Share
                        </button>
                        <button class="action-btn" onclick="printSlip('<?php echo $result['patient_name']; ?>')">
                            <i class="fas fa-print"></i>
                            Print
                        </button>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="opti-slip-card">
                    <div class="no-results">
                        <i class="fas fa-search"></i>
                        <h3>No Results Found</h3>
                        <p>No records found for your search term. Please try a different search.</p>
                    </div>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function goBack() {
            window.history.back();
        }
        
        function shareSlip(patientName) {
            if (navigator.share) {
                navigator.share({
                    title: 'Opti Slip - ' + patientName,
                    text: 'Patient prescription slip from OPTI SLIP',
                    url: window.location.href
                });
            } else {
                // Fallback for browsers that don't support Web Share API
                const url = window.location.href;
                navigator.clipboard.writeText(url).then(() => {
                    alert('Link copied to clipboard!');
                });
            }
        }
        
        function printSlip(patientName) {
            window.print();
        }
        
        // Auto-focus search input
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.querySelector('.search-input');
            if (searchInput && !searchInput.value) {
                searchInput.focus();
            }
        });
    </script>
</body>
</html>
Path: home/awneajlw/public_html/codestechvista.com