<?php
/**
 * EMAIL LAYOUT TEMPLATE
 * File: templates/email/layout.php
 * Base template for all email communications
 */

// $logo_url = defined('APP_URL') ? APP_URL . '/assets/images/logo.png' : '/assets/images/logo.png';
$logo_url = "https://rentolony.ng/demo" . '/assets/images/logo.png';
$primary_color = '#fafafa'; //'#05472A';
$secondary_color = '#fafafa'; //#A9CF46';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'rentidium' ?></title>
    <style>
        /* Email-specific styles */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', 'Helvetica', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        
        .email-header {
            background: linear-gradient(135deg, <?= $primary_color ?> 0%, <?= $secondary_color ?> 100%);
            padding: 30px 40px;
            text-align: center;
        }
        
        .email-logo {
            max-height: 60px;
            width: auto;
        }
        
        .email-content {
            padding: 40px;
        }
        
        .email-footer {
            background-color: #f8f9fa;
            padding: 30px 40px;
            border-top: 1px solid #e9ecef;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background: linear-gradient(135deg, <?= $primary_color ?> 0%, <?= $secondary_color ?> 100%);
            color: #ffffff;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            margin: 10px 0;
        }
        
        .btn-secondary {
            background: #6c757d;
            color: #ffffff;
        }
        
        .text-center {
            text-align: center;
        }
        
        .text-muted {
            color: #6c757d;
        }
        
        .mb-4 {
            margin-bottom: 24px;
        }
        
        .mb-3 {
            margin-bottom: 16px;
        }
        
        .mb-2 {
            margin-bottom: 12px;
        }
        
        .mt-4 {
            margin-top: 24px;
        }
        
        .alert {
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
        }
        
        .alert-info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        
        .alert-success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .alert-warning {
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
            color: #856404;
        }
        
        .alert-danger {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .table th,
        .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }
        
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        
        .order-summary {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 6px;
            margin: 20px 0;
        }
        
        .order-summary h3 {
            margin-top: 0;
            color: <?= $primary_color ?>;
        }
        
        .divider {
            height: 1px;
            background-color: #e9ecef;
            margin: 20px 0;
        }
        
        .social-links {
            text-align: center;
            margin: 20px 0;
        }
        
        .social-links a {
            display: inline-block;
            margin: 0 8px;
            color: #6c757d;
            text-decoration: none;
        }
        
        .signature {
            border-top: 1px solid #e9ecef;
            padding-top: 20px;
            margin-top: 20px;
            color: #6c757d;
            font-size: 14px;
        }
        
        /* Mobile responsive */
        @media only screen and (max-width: 600px) {
            .email-container {
                width: 100% !important;
            }
            
            .email-header,
            .email-content,
            .email-footer {
                padding: 20px !important;
            }
            
            .btn {
                display: block !important;
                width: 100% !important;
                text-align: center !important;
                margin: 10px 0 !important;
            }
        }
    </style>
</head>
<body>
    <div class="email-container">
        <!-- Header -->
        <div class="email-header">
            <img src="<?= $logo_url ?>" alt="<?= APP_NAME ?>" class="email-logo">
        </div>
        
        <!-- Content -->
        <div class="email-content">
            <?php if (isset($alert_type) && isset($alert_message)): ?>
                <div class="alert alert-<?= $alert_type ?>">
                    <?= $alert_message ?>
                </div>
            <?php endif; ?>
            
            <?php if (isset($greeting)): ?>
                <p class="mb-4"><?= $greeting ?></p>
            <?php endif; ?>
            
            <?php if (isset($title)): ?>
                <h2><?= $title ?></h2>
            <?php endif; ?>
            
            <?php if (isset($content)): ?>
                <?= $content ?>
            <?php endif; ?>
            
            <?php if (isset($action_url) && isset($action_text)): ?>
                <div class="text-center mt-4">
                    <a href="<?= $action_url ?>" class="btn"><?= $action_text ?></a>
                </div>
            <?php endif; ?>
            
            <?php if (isset($secondary_action_url) && isset($secondary_action_text)): ?>
                <div class="text-center mt-2">
                    <a href="<?= $secondary_action_url ?>" class="btn btn-secondary"><?= $secondary_action_text ?></a>
                </div>
            <?php endif; ?>
            
            <?php if (isset($footer_note)): ?>
                <p class="text-muted mt-4"><?= $footer_note ?></p>
            <?php endif; ?>
        </div>
        
        <!-- Footer -->
        <div class="email-footer">
            <div class="text-center">
                <p class="mb-2">
                    <strong><?= APP_NAME ?></strong><br>
                    <span class="text-muted"><?= APP_SLOGAN ?></span>
                </p>
                
                <p class="text-muted mb-2">
                    <a href="<?= APP_URL ?>/index.php" style="color: #05472A; text-decoration: none;">Visit the Website</a> |
                    <a href="<?= APP_URL ?>/contact-us.php" style="color: #05472A; text-decoration: none;">Contact Support</a>
                </p>
                
                <div class="social-links">
                    <a href="https://facebook.com/rentidium" aria-label="Facebook">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </a>
                    <a href="https://x.com/rentidium" aria-label="Twitter">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                        </svg>
                    </a>
                    <a href="https://instagram.com/rentidium" aria-label="Instagram">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987s11.987-5.367 11.987-11.987C24.014 5.367 18.647.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.328-1.297L3.766 17.046c.857 1.297 2.447 2.135 4.066 2.135h1.435c1.297 0 2.448-.49 3.328-1.297l1.355-1.355c-.857-1.297-2.447-2.135-4.066-2.135H8.449zm7.619 0c-1.297 0-2.448-.49-3.328-1.297L11.385 15.691c.857 1.297 2.447 2.135 4.066 2.135h1.435c1.297 0 2.448-.49 3.328-1.297l1.355-1.355c-.857-1.297-2.447-2.135-4.066-2.135h-1.435z"/>
                        </svg>
                    </a>
                    <a href="https://linkedin.com/company/rentidium" aria-label="LinkedIn">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                        </svg>
                    </a>
                </div>
                
                <p class="text-muted" style="font-size: 12px; margin-top: 20px;">
                    If you no longer wish to receive these emails, you can 
                    <a href="#" style="color: <?= $primary_color ?>; text-decoration: none;">unsubscribe here</a>.
                </p>
                
                <?php if (isset($signature)): ?>
                    <div class="signature">
                        <?= $signature ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</body>
</html>