<?php
require_once '../config.php';

// التحقق من تسجيل الدخول
requireLogin();

// التحقق من وجود معرف المنخرط
if (!isset($_GET['id']) || empty($_GET['id'])) {
    setAlert('danger', 'معرف المنخرط مطلوب');
    header('Location: ' . SITE_URL . '/members/index.php');
    exit;
}

$memberId = (int)$_GET['id'];

// الحصول على بيانات المنخرط
$query = "SELECT m.*, c.name as category_name 
          FROM members m 
          LEFT JOIN categories c ON m.category_id = c.id 
          WHERE m.id = :id";
$member = fetchOne($query, [':id' => $memberId]);

if (!$member) {
    setAlert('danger', 'المنخرط غير موجود');
    header('Location: ' . SITE_URL . '/members/index.php');
    exit;
}

// الحصول على بيانات الاشتراك
$query = "SELECT * FROM subscriptions WHERE member_id = :member_id ORDER BY end_date DESC LIMIT 1";
$subscription = fetchOne($query, [':member_id' => $memberId]);

// الحصول على إعدادات الجمعية
$settings = getAssociationSettings();

// عنوان الصفحة
$pageTitle = 'بطاقة العضوية - ' . $member['first_name'] . ' ' . $member['last_name'];

// تضمين ملف الهيدر
include '../includes/header.php';
?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0"><i class="fas fa-id-card me-2"></i> بطاقة العضوية</h1>
    <div>
        <a href="<?php echo SITE_URL; ?>/members/index.php" class="btn btn-secondary me-2">
            <i class="fas fa-arrow-right"></i> العودة إلى القائمة
        </a>
      
        <button  id="downloadBtn" class="btn btn-primary">
                <i class="fas fa-download"></i> تحميل البطاقة
            </button>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <!-- بطاقة العضوية -->
                <div id="bbcard" class="member-card">
                    <?php
                    $logoPath = !empty($settings['logo']) 
                        ? SITE_URL . '/uploads/logo/' . $settings['logo'] 
                        : SITE_URL . '/assets/img/default-logo.png';
                    
                    $photoPath = !empty($member['photo']) 
                        ? SITE_URL . '/uploads/members/' . $member['photo'] 
                        : SITE_URL . '/assets/img/default-user.png';
                    
                    $memberNumber = str_pad($member['id'], 5, '0', STR_PAD_LEFT);
                    $memberName = $member['first_name'] . ' ' . $member['last_name'];
                    $expiryDate = $subscription ? formatDate($subscription['end_date']) : 'غير متوفر';
                    ?>
                    
                    <div class="card-header-section">
                        <div class="logo-container">
                            <img src="<?php echo $logoPath; ?>" alt="شعار الجمعية" class="logo">
                        </div>
                        <div class="association-name"><?php echo $settings['name'] ?? SITE_NAME; ?></div>
                    </div>
                    
                    <div class="card-content">
                        <div class="member-info">
                            <h2 class="member-name"><?php echo $memberName; ?></h2>
                            <div class="info-grid">
                                <div class="info-row">
                                    <div class="info-label">الفئة:</div>
                                    <div class="info-value"><?php echo $member['category_name']; ?></div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">تاريخ الازدياد:</div>
                                    <div class="info-value"><?php echo formatDate($member['birth_date']); ?></div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">تاريخ الانتهاء:</div>
                                    <div class="info-value"><?php echo $expiryDate; ?></div>
                                </div>
                                <div class="info-row">
                                    <div class="info-label">رقم العضوية:</div>
                                    <div class="info-value member-id"><?php echo $memberNumber; ?></div>
                                </div>
                            </div>
                        </div>
                        <div class="photo-container">
                            <div class="photo-frame">
                                <img src="<?php echo $photoPath; ?>" alt="صورة المنخرط" class="member-photo">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="contact-info">
                            <?php if (!empty($settings['phone'])): ?>
                                <span><i class="fas fa-phone"></i> <?php echo $settings['phone']; ?></span>
                            <?php endif; ?>
                            
                            <?php if (!empty($settings['email'])): ?>
                                <span><i class="fas fa-envelope"></i> <?php echo $settings['email']; ?></span>
                            <?php endif; ?>
                            
                            <?php if (!empty($settings['address'])): ?>
                                <span><i class="fas fa-map-marker-alt"></i> <?php echo $settings['address']; ?></span>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-4 no-print">
                    <p class="text-muted">يمكنك طباعة البطاقة بالضغط على زر "طباعة البطاقة" أعلاه.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
    document.getElementById("downloadBtn").addEventListener("click", function() {
        let element = document.getElementById("bbcard");
        
        html2canvas(element).then(canvas => {
            let link = document.createElement("a");
            link.href = canvas.toDataURL("image/png");
            link.download = "membership_card_<?php echo $memberNumber; ?>.png";
            link.click();
        });
    });
</script>

<style>
/* تنسيقات البطاقة المحسنة */
.member-card {
    width: 85.6mm;
    height: 53.98mm;
    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px auto;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    direction: rtl;
    display: flex;
    flex-direction: column;
}

.card-header-section {
    background: linear-gradient(to left, #0d6efd, #0a58ca);
    color: white;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    border-bottom: 2px solid #0a58ca;
}

.logo-container {
    background-color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    text-align: center;
    align-items: center;
}

.association-name {
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.card-content {
    display: flex;
    flex: 1;
    padding: 8px;
    background-color: white;
}

.member-info {
    flex: 1;
    padding-left: 8px;
}

.member-name {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 8px 0;
    color: #0d6efd;
    text-align: right;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 4px;
}

.info-grid {
    display: grid;
    grid-gap: 4px;
}

.info-row {
    display: flex;
    align-items: center;
}

.info-label {
    font-weight: bold;
    color: #495057;
    width: 75px;
    text-align: right;
    font-size: 10px;
    padding-left: 5px;
}

.info-value {
    color: #212529;
    text-align: right;
    font-size: 10px;
}

.member-id {
    font-weight: bold;
    color: #0d6efd;
}

.photo-container {
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.photo-frame {
    border: 2px solid #dee2e6;
    border-radius: 4px;
    padding: 2px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.member-photo {
    width: 60px;
    height: 70px;
    object-fit: cover;
    border-radius: 2px;
}

.card-footer {
    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
    border-top: 1px solid #dee2e6;
    padding: 4px 6px;
    font-size: 8px;
    color: #6c757d;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-info {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.contact-info span {
    margin: 0 5px;
    display: flex;
    align-items: center;
}

.contact-info i {
    margin-left: 3px;
    color: #0d6efd;
}

/* تنسيقات الطباعة */
@media print {
    body * {
        visibility: hidden;
    }
    
    #bbcard, #bbcard * {
        visibility: visible;
    }
    
    #bbcard {
        position: absolute;
        left: 0;
        top: 0;
        width: 85.6mm;
        height: 53.98mm;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }
    
    .no-print {
        display: none !important;
    }
    
    .navbar, .footer, .btn, header, footer {
        display: none !important;
    }
}
</style>

<?php
// تضمين ملف الفوتر
include '../includes/footer.php';
?>
