INSERT INTO `email_templates` (`id`, `name`, `subject`, `description`, `created_at`, `updated_at`) VALUES
(1, 'otpTemplate', 'OTP Verification', '<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Your OTP Code</title>\n    <style>\n        body, html {\n            margin: 0;\n            padding: 0;\n            font-family: \'Inter\', sans-serif;\n            line-height: 1.6;\n            background-color: #f7f7f7;\n            color: #333;\n        }\n        .container {\n            max-width: 600px;\n            margin: 20px auto;\n            background-color: #ffffff;\n            border-radius: 8px; \n            overflow: hidden;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n        }\n        .header {\n            background-color: #3b82f6; \n            color: #ffffff;\n            padding: 20px;\n            text-align: center;\n            border-top-left-radius: 8px;\n            border-top-right-radius: 8px;\n        }\n        .content {\n            padding: 30px;\n            text-align: center;\n        }\n        .otp-code {\n            display: inline-block;\n            font-size: 32px;\n            font-weight: bold;\n            color: #1d4ed8;\n            background-color: #e0f2fe; \n            padding: 15px 25px;\n            margin: 20px 0;\n            border-radius: 8px;\n            letter-spacing: 2px;\n            user-select: all;\n        }\n        .footer {\n            background-color: #f0f0f0;\n            color: #777;\n            padding: 20px;\n            text-align: center;\n            font-size: 12px;\n            border-bottom-left-radius: 8px;\n            border-bottom-right-radius: 8px;\n            margin-top: 20px;\n        }\n        .button {\n            display: inline-block;\n            background-color: #2563eb;\n            color: #ffffff;\n            padding: 10px 20px;\n            text-decoration: none;\n            border-radius: 6px;\n            margin-top: 15px;\n        }\n        @media only screen and (max-width: 600px) {\n            .container {\n                width: 95%;\n                margin: 10px auto;\n            }\n            .content {\n                padding: 20px;\n            }\n            .otp-code {\n                font-size: 28px;\n                padding: 12px 20px;\n            }\n        }\n    </style>\n</head>\n<body style=\"background-color: #f7f7f7; padding: 16px;\">\n    <div class=\"container\">\n        <div class=\"header\">\n            <h1 style=\"font-size: 28px; font-weight: bold;\">Verification Code</h1>\n        </div>\n        <div class=\"content\">\n            <p style=\"font-size: 18px;\">Hello,</p>\n            <p style=\"font-size: 16px; margin-top: 8px;\">\n                Your One-Time Password (OTP) for account verification is:\n            </p>\n            <div class=\"otp-code\" style=\"mso-padding-alt:0 0 0 0; display:block;\">\n                <span style=\"font-size: 32px; font-weight: bold; color: #1d4ed8; letter-spacing: 2px;\">{{otp}}</span>\n            </div>\n            <p style=\"font-size: 16px; margin-top: 16px;\">\n                Please enter this code in the required field to complete your action. This code is valid for <strong>5 minutes</strong>.\n            </p>\n            <p style=\"font-size: 16px; margin-top: 16px;\">\n                If you did not request this code, please ignore this email.\n            </p>\n        </div>\n        <div class=\"footer\">\n            <p>&copy; {{date}} {{companyName}}. All rights reserved.</p>\n            <p>This is an automated email, please do not reply.</p>\n        </div>\n    </div>\n</body>\n</html>\n', '2025-08-12 12:57:45', '2025-08-12 12:57:45'),
(2, 'orderPlaced', 'Esim Order', '<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Your eSIM Order Has Been Placed!</title>\n    <style>\n        body, html {\n            margin: 0;\n            padding: 0;\n            font-family: \'Inter\', sans-serif; \n            line-height: 1.6;\n            background-color: #f7f7f7;\n            color: #333;\n        }\n        .container {\n            max-width: 600px;\n            margin: 20px auto;\n            background-color: #ffffff;\n            border-radius: 8px;\n            overflow: hidden;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n        }\n        .header {\n            background-color: #3b82f6;\n            color: #ffffff;\n            padding: 20px;\n            text-align: center;\n            border-top-left-radius: 8px;\n            border-top-right-radius: 8px;\n        }\n        .content {\n            padding: 30px;\n            text-align: center;\n        }\n        .button {\n            display: inline-block;\n            background-color: #2563eb;\n            color: #ffffff;\n            padding: 12px 25px;\n            text-decoration: none; \n            border-radius: 6px;\n            margin-top: 25px;\n            font-weight: bold;\n            transition: background-color 0.3s ease;\n        }\n        .button:hover {\n            background-color: #1e40af;\n        }\n        .footer {\n            background-color: #f0f0f0;\n            color: #777;\n            padding: 20px;\n            text-align: center;\n            font-size: 12px;\n            border-bottom-left-radius: 8px;\n            border-bottom-right-radius: 8px;\n            margin-top: 20px;\n        }\n        @media only screen and (max-width: 600px) {\n            .container {\n                width: 95%;\n                margin: 10px auto;\n            }\n            .content {\n                padding: 20px;\n            }\n            .button {\n                padding: 10px 20px;\n            }\n        }\n        .order-details {\n            background-color: #f9f9f9;\n            border: 1px solid #e0e0e0;\n            padding: 20px;\n            margin: 20px auto;\n            border-radius: 8px;\n            max-width: 400px;\n            text-align: left;\n        }\n        .order-details p {\n            margin-bottom: 8px;\n        }\n        .order-details p:last-child {\n            margin-bottom: 0;\n        }\n        .order-details strong {\n            color: #000;\n        }\n    </style>\n</head>\n<body style=\"background-color: #f7f7f7; padding: 16px;\">\n    <div class=\"container\">\n        <div class=\"header\">\n            <h1 style=\"font-size: 28px; font-weight: bold;\">Your eSIM Order is Confirmed!</h1>\n        </div>\n        <div class=\"content\">\n            <p style=\"font-size: 18px;\">Hello,</p>\n            <p style=\"font-size: 16px; margin-top: 8px;\">\n                Thank you for your recent eSIM order with {{companyName}}!\n            </p>\n            <p style=\"font-size: 16px; margin-top: 16px;\">\n                Your order has been successfully placed and is being processed. Here are your order details:\n            </p>\n\n            <div class=\"order-details\">\n                <p><strong>Order ID:</strong> {{orderId}}</p>\n                <p><strong>Package:</strong> {{packageName}}</p>\n                <p><strong>Amount:</strong> {{orderAmount}}</p>\n                <p><strong>Order Date & Time:</strong> {{orderDate}}</p>\n            </div>\n\n            <p style=\"font-size: 16px; margin-top: 16px; font-weight: 600; color: #4a4a4a;\">\n                You will receive a separate email shortly with your **eSIM QR code** and detailed activation instructions. Please keep an eye on your inbox (and spam/junk folder).\n            </p>\n            <p style=\"font-size: 16px; margin-top: 16px;\">\n                If you have any questions or need assistance, please visit our <a href=\"#\" style=\"color:#2563eb; text-decoration:underline;\">Support Center</a> or contact us directly.\n            </p>\n        </div>\n        <div class=\"footer\">\n            <p>&copy; {{date}} {{companyName}}. All rights reserved.</p>\n            <p>This is an automated email. Please do not reply to this message.</p>\n        </div>\n    </div>\n</body>\n</html>\n', '2025-08-12 13:40:35', '2025-08-12 13:40:35'),
(3, 'activation', 'Esim Activation Details', '&amp;lt;!DOCTYPE html&amp;gt;\r\n&amp;lt;html lang=\"en\"&amp;gt;\r\n&amp;lt;head&amp;gt;\r\n    &amp;lt;meta charset=\"UTF-8\"&amp;gt;\r\n    &amp;lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&amp;gt;\r\n    &amp;lt;title&amp;gt;Your eSIM Details and Activation&amp;lt;/title&amp;gt;\r\n    &amp;lt;style&amp;gt;\r\n        body, html {\r\n            margin: 0;\r\n            padding: 0;\r\n            font-family: \'Inter\', sans-serif;\r\n            line-height: 1.6;\r\n            background-color: #f7f7f7;\r\n            color: #333;\r\n        }\r\n        .container {\r\n            max-width: 600px;\r\n            margin: 20px auto;\r\n            background-color: #ffffff;\r\n            border-radius: 8px;\r\n            overflow: hidden;\r\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n        }\r\n        .header {\r\n            background-color: #3b82f6;\r\n            color: #ffffff;\r\n            padding: 20px;\r\n            text-align: center;\r\n            border-top-left-radius: 8px;\r\n            border-top-right-radius: 8px;\r\n        }\r\n        .content {\r\n            padding: 30px;\r\n            text-align: center;\r\n        }\r\n   \r\n        .qr-code-img {\r\n            max-width: 250px;\r\n            height: auto;\r\n            display: block;\r\n            margin: 25px auto;\r\n            border: 1px solid #e0e0e0;\r\n            border-radius: 4px;\r\n        }\r\n        .activation-steps {\r\n            background-color: #f9f9f9;\r\n            border: 1px solid #e0e0e0;\r\n            padding: 20px;\r\n            margin: 20px auto;\r\n            border-radius: 8px;\r\n            max-width: 500px;\r\n            text-align: left;\r\n        }\r\n        .activation-steps ol {\r\n            padding-left: 20px;\r\n            margin-top: 15px;\r\n        }\r\n        .activation-steps li {\r\n            margin-bottom: 10px;\r\n        }\r\n        .activation-steps li:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n        .esim-details {\r\n            background-color: #f9f9f9;\r\n            border: 1px solid #e0e0e0;\r\n            padding: 20px;\r\n            margin: 20px auto;\r\n            border-radius: 8px;\r\n            max-width: 400px;\r\n            text-align: left;\r\n        }\r\n        .esim-details p {\r\n            margin-bottom: 8px;\r\n        }\r\n        .esim-details p:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n        .esim-details strong {\r\n            color: #000;\r\n        }\r\n        .footer {\r\n            background-color: #f0f0f0;\r\n            color: #777;\r\n            padding: 20px;\r\n            text-align: center;\r\n            font-size: 12px;\r\n            border-bottom-left-radius: 8px;\r\n            border-bottom-right-radius: 8px;\r\n            margin-top: 20px;\r\n        }\r\n        @media only screen and (max-width: 600px) {\r\n            .container {\r\n                width: 95%;\r\n                margin: 10px auto;\r\n            }\r\n            .content {\r\n                padding: 20px;\r\n            }\r\n            .qr-code-img {\r\n                max-width: 200px;\r\n            }\r\n            .activation-steps, .esim-details {\r\n                padding: 15px;\r\n            }\r\n        }\r\n    &amp;lt;/style&amp;gt;\r\n&amp;lt;/head&amp;gt;\r\n&amp;lt;body style=\"background-color: #f7f7f7; padding: 16px;\"&amp;gt;\r\n    &amp;lt;div class=\"container\"&amp;gt;\r\n        &amp;lt;div class=\"header\"&amp;gt;\r\n            &amp;lt;h1 style=\"font-size: 28px; font-weight: bold;\"&amp;gt;Your eSIM is Ready!&amp;lt;/h1&amp;gt;\r\n        &amp;lt;/div&amp;gt;\r\n        &amp;lt;div class=\"content\"&amp;gt;\r\n            &amp;lt;p style=\"font-size: 18px;\"&amp;gt;Hello,&amp;lt;/p&amp;gt;\r\n            &amp;lt;p style=\"font-size: 16px; margin-top: 8px;\"&amp;gt;\r\n                Thank you for your eSIM purchase. Your eSIM is now ready for activation!\r\n            &amp;lt;/p&amp;gt;\r\n\r\n            &amp;lt;p style=\"font-size: 16px; margin-top: 20px; font-weight: 600;\"&amp;gt;\r\n                Scan the QR Code below to activate your eSIM:\r\n            &amp;lt;/p&amp;gt;\r\n            &amp;lt;img src=\"{{qrCode}}\" \r\n                 alt=\"eSIM QR Code\" class=\"qr-code-img\"\r\n                 style=\"max-width: 250px; height: auto; display: block; margin: 25px auto; border: 1px solid #e0e0e0; border-radius: 4px;\"&amp;gt;\r\n            &amp;lt;p style=\"font-size: 14px; color: #777;\"&amp;gt;\r\n                (Make sure you have a Wi-Fi connection when activating)\r\n            &amp;lt;/p&amp;gt;\r\n\r\n            &amp;lt;div class=\"esim-details\"&amp;gt;\r\n                &amp;lt;p style=\"font-size: 17px; font-weight: bold; margin-bottom: 10px;\"&amp;gt;Your eSIM Details:&amp;lt;/p&amp;gt;\r\n                &amp;lt;p style=\"font-size: 16px;\"&amp;gt;&amp;lt;strong&amp;gt;Package:&amp;lt;/strong&amp;gt; {{packageName}}&amp;lt;/p&amp;gt;\r\n                &amp;lt;p style=\"font-size: 16px;\"&amp;gt;&amp;lt;strong&amp;gt;Country/Region:&amp;lt;/strong&amp;gt; {{location}}&amp;lt;/p&amp;gt;\r\n                &amp;lt;p style=\"font-size: 16px;\"&amp;gt;&amp;lt;strong&amp;gt;eSIM Number (ICCID):&amp;lt;/strong&amp;gt; {{iccid}}&amp;lt;/p&amp;gt;\r\n                &amp;lt;p style=\"font-size: 16px;\"&amp;gt;&amp;lt;strong&amp;gt;Activation Url:&amp;lt;/strong&amp;gt; {{activationUrl}} (if required for manual setup)&amp;lt;/p&amp;gt;\r\n            &amp;lt;/div&amp;gt;\r\n\r\n            &amp;lt;p style=\"font-size: 16px; margin-top: 20px;\"&amp;gt;\r\n                If you encounter any issues, please refer to our &amp;lt;a href=\"/\" style=\"color:#2563eb; text-decoration:underline;\"&amp;gt;eSIM Activation Guide&amp;lt;/a&amp;gt; or contact our support team.\r\n            &amp;lt;/p&amp;gt;\r\n        &amp;lt;/div&amp;gt;\r\n        &amp;lt;div class=\"footer\"&amp;gt;\r\n            &amp;lt;p&amp;gt;&amp;amp;copy; {{date}} {{companyName}}. All rights reserved.&amp;lt;/p&amp;gt;\r\n            &amp;lt;p&amp;gt;This is an automated email. Please do not reply to this message.&amp;lt;/p&amp;gt;\r\n        &amp;lt;/div&amp;gt;\r\n    &amp;lt;/div&amp;gt;\r\n&amp;lt;/body&amp;gt;\r\n&amp;lt;/html&amp;gt;', '2025-08-12 16:47:02', '2025-08-29 12:40:05');
