<?php
ob_start();
include('connect.php'); 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Care | Client Portal Login</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #1a70b8 0%, #60e438 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: pulse 20s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.1) rotate(180deg); }
        }
        
        .login-container {
            background: white;
            border-radius: 24px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            max-width: 1100px;
            width: 100%;
            display: flex;
            min-height: 650px;
            position: relative;
            z-index: 1;
        }
        
        .login-left {
            flex: 1;
            background: linear-gradient(135deg, #1a70b8 0%, #1557a0 100%);
            padding: 60px 50px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .login-left::before {
            content: '';
            position: absolute;
            top: -30%;
            left: -30%;
            width: 150%;
            height: 150%;
            background: radial-gradient(circle, rgba(96,228,56,0.15) 0%, transparent 70%);
            animation: float 15s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(30px, 30px); }
        }
        
        .login-left-content {
            position: relative;
            z-index: 1;
        }
        
        .logo-left {
            width: 180px;
            height: auto;
            margin-bottom: 40px;
            filter: brightness(0) invert(1);
        }
        
        .login-left h1 {
            font-size: 38px;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .login-left p {
            font-size: 18px;
            opacity: 0.95;
            line-height: 1.7;
            margin-bottom: 40px;
        }
        
        .feature-list {
            list-style: none;
        }
        
        .feature-list li {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            font-size: 16px;
            opacity: 0.95;
        }
        
        .feature-list li i {
            background: rgba(96,228,56,0.2);
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            font-size: 20px;
            color: #60e438;
        }
        
        .login-right {
            flex: 1;
            padding: 60px 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }
        
        .logo-container {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .logo-container img {
            max-width: 200px;
            height: auto;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .login-header h2 {
            font-size: 32px;
            font-weight: 700;
            color: #1a202c;
            margin-bottom: 12px;
        }
        
        .login-header p {
            color: #718096;
            font-size: 16px;
        }
        
        .form-group {
            margin-bottom: 28px;
        }
        
        .form-group label {
            display: block;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 10px;
            font-size: 15px;
        }
        
        .input-wrapper {
            position: relative;
        }
        
        .input-wrapper i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #1a70b8;
            font-size: 18px;
        }
        
        .form-control {
            width: 100%;
            padding: 16px 18px 16px 52px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
            font-family: 'Inter', sans-serif;
            background: #f8fafc;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #1a70b8;
            background: white;
            box-shadow: 0 0 0 4px rgba(26, 112, 184, 0.1);
        }
        
        .btn-primary {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #1a70b8 0%, #60e438 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 12px;
            box-shadow: 0 4px 15px rgba(26, 112, 184, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(26, 112, 184, 0.4);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        .alert {
            padding: 14px 18px;
            border-radius: 12px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            font-size: 15px;
            animation: slideDown 0.3s ease;
        }
        
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .alert-danger {
            background: #fee;
            color: #c53030;
            border: 1px solid #fc8181;
        }
        
        .alert i {
            margin-right: 12px;
            font-size: 18px;
        }
        
        .otp-input {
            text-align: center;
            font-size: 28px;
            letter-spacing: 12px;
            font-weight: 700;
            color: #1a70b8;
        }
        
        .back-link {
            text-align: center;
            margin-top: 24px;
        }
        
        .back-link a {
            color: #1a70b8;
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
        }
        
        .back-link a:hover {
            color: #60e438;
        }
        
        .back-link a i {
            margin-right: 8px;
        }
        
        .security-note {
            background: #f0f9ff;
            padding: 18px;
            border-radius: 12px;
            margin-top: 32px;
            text-align: center;
            border: 1px solid #bae6fd;
        }
        
        .security-note i {
            color: #60e438;
            margin-right: 10px;
            font-size: 16px;
        }
        
        .security-note p {
            color: #1a70b8;
            font-size: 14px;
            margin: 0;
            font-weight: 500;
        }
        
        @media (max-width: 968px) {
            .login-container {
                flex-direction: column;
                max-width: 500px;
            }
            
            .login-left {
                padding: 40px 30px;
                min-height: 350px;
            }
            
            .login-left h1 {
                font-size: 28px;
            }
            
            .feature-list {
                display: none;
            }
            
            .login-right {
                padding: 40px 30px;
            }
        }
    </style>
</head>
<?php
$flag = 0;

if(isset($_POST['sendOtp'])) {
    $email = $_POST['email'];
    
    $stmt = $pdo->prepare("SELECT * FROM tblclient WHERE email=? AND isActive='Y'");
    $stmt->execute([$email]); 
    $clientDetails = $stmt->fetch();
    
    if ($clientDetails) {
        $clientName = $clientDetails['clientName'];
        $clientId = $clientDetails['clientId'];
        $otpURL = 'login.php?otp='.$clientId;
        
        $otp = generateNumericOTP(6);
        
        $sql = "INSERT INTO tblclientotp (clientId, otp) VALUES (?,?)";
        $stmt = $pdo->prepare($sql);
        $stmt->execute([$clientId, $otp]);
        
        $to = $email;
        $subject = "Verification Code - My Care Client Portal";
        
        $headers = 'From: My Care Support <admin@rxconnections.ca>'."\r\n";
        $headers .= "MIME-Version: 1.0"."\r\n";
        $headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";

        // $ms = "<html>
        //         <body style='font-family: Arial, sans-serif; padding: 20px; background: #f7fafc;'>
        //             <div style='max-width: 600px; margin: 0 auto; background: white; border-radius: 16px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);'>
        //                 <div style='text-align: center; margin-bottom: 30px;'>
        //                     <h1 style='color: #1a70b8; margin: 0;'>My Care</h1>
        //                 </div>
        //                 <h2 style='color: #2d3748; margin-bottom: 20px;'>Hello $clientName,</h2>
        //                 <p style='color: #4a5568; font-size: 16px; line-height: 1.6;'>Your verification code for the Client Portal is:</p>
        //                 <div style='background: linear-gradient(135deg, #1a70b8 0%, #60e438 100%); color: white; padding: 30px; border-radius: 12px; text-align: center; margin: 30px 0;'>
        //                     <h1 style='margin: 0; font-size: 42px; letter-spacing: 10px;color: #1a70b8;'>$otp</h1>
        //                 </div>
        //                 <p style='color: #4a5568; font-size: 14px; line-height: 1.6;'>This code will expire in 15 minutes. If you didn't request this code, please ignore this email.</p>
        //                 <div style='margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0; text-align: center;'>
        //                     <p style='color: #a0aec0; font-size: 12px; margin: 0;'>© 2026 My Care. All rights reserved.</p>
        //                 </div>
        //             </div>
        //         </body>
        //     </html>";
        
        $ms = "<html>
                <body style='font-family: Arial, sans-serif; padding: 20px; background: #f7fafc;'>
                    <div style='max-width: 600px; margin: 0 auto; background: white; border-radius: 16px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);'>
                        <div style='text-align: center; margin-bottom: 30px;'>
                            <h1 style='color: #1a70b8; margin: 0;'><img width='150px' src='https://client.rxconnections.ca/images/logo.png' alt='My Care'></h1>
                        </div>
                        <h2 style='color: #2d3748; margin-bottom: 20px;'>Hello $clientName,</h2>
                        <p style='color: #4a5568; font-size: 16px; line-height: 1.6;'>Your verification code for the Client Portal is:</p>
                        <div style='background: linear-gradient(135deg, #1a70b8 0%, #60e438 100%); color: white; padding: 30px; border-radius: 12px; text-align: center; margin: 30px 0;'>
                            <h1 style='margin: 0; font-size: 42px; letter-spacing: 10px;color: #1a70b8;'>$otp</h1>
                        </div>
                        <p style='color: #4a5568; font-size: 14px; line-height: 1.6;'>This code will expire in 15 minutes. If you didn't request this code, please ignore this email.</p>
                        <div style='margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0; text-align: center;'>
                            <p style='color: #a0aec0; font-size: 12px; margin: 0;'>&copy; 2026 My Care. All rights reserved.</p>
                        </div>
                    </div>
                </body>
            </html>";
            
        mail($to, $subject, $ms, $headers);
        header('Location: '.$otpURL);
    } else {
        $flag = 2;
    } 
}

if(isset($_POST['btnSubmit'])) {
    $enteredOtp = $_POST['txtOtp'];
    $clientId = $_POST['clientId'];

    $stmt1 = $pdo->prepare("SELECT * FROM tblclientotp WHERE clientId=? AND otp=? AND otpFlag=?");
    $stmt1->execute([$clientId, $enteredOtp, 0]); 
    $otpDetails = $stmt1->fetch();
    
    if($otpDetails) {
        $sql = "UPDATE tblclientotp SET otpFlag=? WHERE clientId=? AND otpId=?";
        $stmt = $pdo->prepare($sql);
        $stmt->execute([1, $clientId, $otpDetails['otpId']]);

        $stmt = $pdo->prepare("SELECT * FROM tblclient WHERE clientId=?");
        $stmt->execute([$clientId]); 
        $client = $stmt->fetch();

        session_start();
        $_SESSION["clientId"] = $clientId;
        $_SESSION["clientName"] = $client["clientName"];
        $_SESSION["clientType"] = 'CLIENT';
        $_SESSION["pspId"] = $client["pspId"];
        
        setcookie("clientId", $clientId, time() + (86400 * 30), "/");
        setcookie("clientName", $client["clientName"], time() + (86400 * 30), "/");
        
        header("location:dashboard.php");
    } else {
        $flag = 1;
    }
}
?>
<body>
    <?php if(empty($_GET)){ ?>
        <div class="login-container">
            <div class="login-left">
                <div class="login-left-content">
                    <img src="../images/logo.png" alt="My Care" class="logo-left">
                    <h1>Welcome to My Care Client Portal</h1>
                    <p>Streamline your patient management with our comprehensive platform for enrollments, welcome calls, and reimbursements.</p>
                    
                    <ul class="feature-list">
                        <li>
                            <i class="fas fa-user-plus"></i>
                            <span>Efficient Patient Enrollment</span>
                        </li>
                        <li>
                            <i class="fas fa-phone-alt"></i>
                            <span>Welcome Call Tracking</span>
                        </li>
                        <li>
                            <i class="fas fa-dollar-sign"></i>
                            <span>Reimbursement Management</span>
                        </li>
                        <li>
                            <i class="fas fa-shield-alt"></i>
                            <span>Secure & HIPAA Compliant</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="login-right">
                <div class="logo-container">
                    <img src="../images/logo.png" alt="My Care">
                </div>
                
                <div class="login-header">
                    <h2>Sign In</h2>
                    <p>Enter your email to receive a verification code</p>
                </div>
                
                <?php if($flag == 2): ?>
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i>
                        <span>Client not found or inactive. Please contact support.</span>
                    </div>
                <?php endif; ?>
                
                <form method="POST">
                    <div class="form-group">
                        <label>Email Address</label>
                        <div class="input-wrapper">
                            <i class="fas fa-envelope"></i>
                            <input type="email" name="email" class="form-control" placeholder="your.email@example.com" required autofocus>
                        </div>
                    </div>
                    
                    <button type="submit" name="sendOtp" class="btn-primary">
                        Send Verification Code
                    </button>
                </form>
                
                <div class="security-note">
                    <i class="fas fa-lock"></i>
                    <p>Your connection is secure and encrypted</p>
                </div>
            </div>
        </div>
    <?php } ?>

    <?php if((!empty($_GET)) && ($_GET['otp'] >= 1)){ ?>
        <div class="login-container">
            <div class="login-left">
                <div class="login-left-content">
                    <img src="../images/logo.png" alt="My Care" class="logo-left">
                    <h1>Check Your Email</h1>
                    <p>We've sent a 6-digit verification code to your email address. Please enter it to continue securely.</p>
                    
                    <div style="margin-top: 50px; padding: 24px; background: rgba(255,255,255,0.1); border-radius: 12px; border: 1px solid rgba(255,255,255,0.2);">
                        <p style="font-size: 15px; margin-bottom: 12px; font-weight: 600;"><i class="fas fa-info-circle"></i> Didn't receive the code?</p>
                        <ul style="font-size: 14px; line-height: 2; padding-left: 24px; opacity: 0.95;">
                            <li>Check your spam or junk folder</li>
                            <li>Wait a few moments for delivery</li>
                            <li>Request a new code if needed</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="login-right">
                <div class="logo-container">
                    <img src="../images/logo.png" alt="My Care">
                </div>
                
                <div class="login-header">
                    <h2>Enter Verification Code</h2>
                    <p>Please enter the 6-digit code sent to your email</p>
                </div>
                
                <?php if($flag == 1): ?>
                    <div class="alert alert-danger">
                        <i class="fas fa-times-circle"></i>
                        <span>Invalid verification code. Please try again.</span>
                    </div>
                <?php endif; ?>
                
                <form method="POST">
                    <div class="form-group">
                        <label>Verification Code</label>
                        <div class="input-wrapper">
                            <i class="fas fa-key"></i>
                            <input type="text" name="txtOtp" class="form-control otp-input" placeholder="000000" maxlength="6" pattern="[0-9]{6}" required autofocus>
                        </div>
                    </div>
                    
                    <input type="hidden" name="clientId" value="<?php echo $_GET['otp']?>">
                    
                    <button type="submit" name="btnSubmit" class="btn-primary">
                        Verify & Sign In
                    </button>
                </form>
                
                <div class="back-link">
                    <a href="login.php"><i class="fas fa-arrow-left"></i> Back to login</a>
                </div>
                
                <div class="security-note">
                    <i class="fas fa-clock"></i>
                    <p>Code expires in 15 minutes</p>
                </div>
            </div>
        </div>
    <?php } ?>
</body>
</html>
<?php ob_end_flush(); ?>
