<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <h4 class="page-title mb-0">
        <i class="bi bi-person-badge me-2 text-primary"></i><?= lang('Admin.view_user') ?>
    </h4>
    <div class="d-flex gap-2">
        <a href="<?= site_url('admin/users/edit/'.$profile['id']) ?>" class="btn btn-primary btn-sm">
            <i class="bi bi-pencil me-1"></i><?= lang('Admin.edit') ?>
        </a>
        <a href="<?= site_url('admin/qrcode') ?>" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-qr-code me-1"></i>QR Code
        </a>
        <a href="<?= site_url('admin/users') ?>" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i>Back
        </a>
    </div>
</div>

<div class="row g-4">
    <!-- Profile card -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm text-center mb-4">
            <div class="card-body py-4">
                <img src="<?= profile_photo_url($profile['profile_photo']) ?>"
                     class="rounded-circle shadow-sm mb-3" width="130" height="130"
                     style="object-fit:cover" alt="">
                <h5 class="fw-bold unicode-text mb-1"><?= esc($profile['name']) ?></h5>
                <div class="text-muted small unicode-text mb-1"><?= esc($profile['designation'] ?? '') ?></div>

                <?php if (!empty($profile['company_logo'])): ?>
                <!-- Company logo + name -->
                <div class="d-flex align-items-center justify-content-center gap-2 mt-2 mb-1">
                    <img src="<?= company_logo_url($profile['company_logo']) ?>"
                         style="height:30px;max-width:90px;object-fit:contain" alt="Company Logo">
                    <?php if (!empty($profile['company_name'])): ?>
                    <span class="small fw-medium unicode-text text-dark"><?= esc($profile['company_name']) ?></span>
                    <?php endif; ?>
                </div>
                <?php else: ?>
                <div class="text-muted small unicode-text mb-1"><?= esc($profile['company_name'] ?? '') ?></div>
                <?php endif; ?>

                <div class="mt-2">
                    <span class="badge <?= $profile['is_active'] ? 'bg-success' : 'bg-secondary' ?>">
                        <?= $profile['is_active'] ? lang('Admin.active') : lang('Admin.inactive') ?>
                    </span>
                </div>
            </div>
            <!-- Social Links -->
            <?php $socials = ['linkedin'=>['bi-linkedin','text-primary'],'instagram'=>['bi-instagram','text-danger'],'facebook'=>['bi-facebook','text-primary'],'twitter'=>['bi-twitter-x','text-dark'],'youtube'=>['bi-youtube','text-danger']]; ?>
            <?php $hasSocial = false; foreach ($socials as $k => $v) { if (!empty($profile[$k])) $hasSocial = true; } ?>
            <?php if ($hasSocial): ?>
            <div class="card-footer bg-white border-top py-3 d-flex justify-content-center gap-3">
                <?php foreach ($socials as $key => [$icon, $color]): ?>
                <?php if (!empty($profile[$key])): ?>
                <a href="<?= esc($profile[$key]) ?>" target="_blank" class="<?= $color ?> fs-5 text-decoration-none" title="<?= ucfirst($key) ?>">
                    <i class="bi <?= $icon ?>"></i>
                </a>
                <?php endif; ?>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>

        <!-- QR Code Preview -->
        <?php if ($qr && ! empty($qr['file_path'])): ?>
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold"><i class="bi bi-qr-code me-2"></i>QR Code</h6>
            </div>
            <div class="card-body text-center">
                <?php
                    $qrDisk2 = FCPATH . 'uploads/' . $qr['file_path'];
                    $qrTs2   = file_exists($qrDisk2) ? filemtime($qrDisk2) : time();
                ?>
                <img src="<?= base_url('uploads/' . $qr['file_path']) ?>?v=<?= $qrTs2 ?>"
                     alt="QR Code"
                     style="width:260px;height:260px;object-fit:contain;border-radius:0;
                            image-rendering:crisp-edges;image-rendering:pixelated;
                            display:block;margin:0 auto;">
                <div class="mt-3 d-flex gap-2 justify-content-center flex-wrap">
                    <a href="<?= site_url('admin/qrcode/download/'.$profile['id']) ?>"
                       class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-download me-1"></i><?= lang('Admin.download_qr') ?>
                    </a>
                    <a href="<?= base_url('uploads/' . $qr['file_path']) ?>?v=<?= $qrTs2 ?>"
                       target="_blank" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-box-arrow-up-right me-1"></i>Full size
                    </a>
                </div>
                <div class="form-text mt-1">
                    <i class="bi bi-link me-1"></i><span class="text-truncate d-inline-block" style="max-width:200px"><?= esc($qr['qr_url']) ?></span>
                </div>
            </div>
        </div>
        <?php else: ?>
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body text-center py-4">
                <i class="bi bi-qr-code display-4 text-muted opacity-50"></i>
                <p class="text-muted small mt-2">No QR code generated yet.</p>
                <a href="<?= site_url('admin/qrcode') ?>" class="btn btn-sm btn-outline-primary">
                    <i class="bi bi-plus me-1"></i><?= lang('Admin.generate_qr') ?>
                </a>
            </div>
        </div>
        <?php endif; ?>
    </div>

    <!-- Details -->
    <div class="col-lg-8">
        <!-- Contact Info -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold"><i class="bi bi-info-circle me-2"></i>Contact Information</h6>
            </div>
            <div class="card-body">
                <?php
                $encBadge = '<span class="badge bg-success-subtle text-success border border-success-subtle ms-1" style="font-size:.58rem">🔒 Encrypted</span>';
                $mobileDisplay = '';
                if (!empty($profile['mobile'])) {
                    $code = $profile['mobile_country_code'] ?? '';
                    $mobileDisplay = trim($code . ' ' . $profile['mobile']);
                }
                ?>
                <div class="row g-3">
                    <?php if (!empty($profile['email'])): ?>
                    <div class="col-md-6">
                        <div class="d-flex gap-2 align-items-start">
                            <i class="bi bi-envelope text-muted mt-1 flex-shrink-0"></i>
                            <div>
                                <div class="text-muted d-flex align-items-center" style="font-size:0.75rem">
                                    <?= lang('Admin.email') ?><?= $encBadge ?>
                                </div>
                                <a href="mailto:<?= esc($profile['email']) ?>" class="unicode-text small"><?= esc($profile['email']) ?></a>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if (!empty($profile['mobile'])): ?>
                    <div class="col-md-6">
                        <div class="d-flex gap-2 align-items-start">
                            <i class="bi bi-telephone text-muted mt-1 flex-shrink-0"></i>
                            <div>
                                <div class="text-muted d-flex align-items-center" style="font-size:0.75rem">
                                    <?= lang('Admin.mobile') ?><?= $encBadge ?>
                                </div>
                                <a href="tel:<?= esc($mobileDisplay) ?>" class="small"><?= esc($mobileDisplay) ?></a>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if (!empty($profile['address'])): ?>
                    <div class="col-12">
                        <div class="d-flex gap-2 align-items-start">
                            <i class="bi bi-geo-alt text-muted mt-1 flex-shrink-0"></i>
                            <div>
                                <div class="text-muted d-flex align-items-center" style="font-size:0.75rem">
                                    <?= lang('Admin.address') ?><?= $encBadge ?>
                                </div>
                                <div class="unicode-text small"><?= esc($profile['address']) ?></div>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if ($profile['latitude'] && $profile['longitude']): ?>
                    <div class="col-md-6">
                        <div class="d-flex gap-2 align-items-start">
                            <i class="bi bi-pin-map text-muted mt-1 flex-shrink-0"></i>
                            <div>
                                <div class="text-muted" style="font-size:0.75rem"><?= lang('Admin.map_location') ?></div>
                                <a href="https://maps.google.com/?q=<?= $profile['latitude'] ?>,<?= $profile['longitude'] ?>"
                                   target="_blank" class="small">
                                    <?= $profile['latitude'] ?>, <?= $profile['longitude'] ?>
                                    <i class="bi bi-box-arrow-up-right ms-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- About Us -->
        <?php if (!empty($profile['about_us'])): ?>
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold"><i class="bi bi-card-text me-2"></i><?= lang('Admin.about_us') ?></h6>
            </div>
            <div class="card-body unicode-text prose-content">
                <?= $profile['about_us'] /* Rich text — already sanitised on input */ ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- Videos -->
        <?php if (! empty($videos)): ?>
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold"><i class="bi bi-play-circle me-2"></i><?= lang('Admin.videos') ?></h6>
            </div>
            <div class="list-group list-group-flush">
                <?php foreach ($videos as $v): ?>
                <div class="list-group-item d-flex align-items-center gap-2 py-2">
                    <i class="bi bi-play-circle-fill text-danger"></i>
                    <?php if ($v['url']): ?>
                    <a href="<?= esc($v['url']) ?>" target="_blank" class="small text-truncate">
                        <?= esc(truncate_text($v['url'], 60)) ?>
                    </a>
                    <?php else: ?>
                    <span class="small"><?= esc($v['original_name'] ?? basename($v['file_path'])) ?></span>
                    <?php if ($v['file_size']): ?>
                    <span class="badge bg-light text-muted border ms-auto"><?= human_filesize($v['file_size']) ?></span>
                    <?php endif; ?>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- Documents -->
        <?php if (! empty($docs)): ?>
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold"><i class="bi bi-file-earmark-text me-2"></i><?= lang('Admin.documents') ?></h6>
            </div>
            <div class="list-group list-group-flush">
                <?php foreach ($docs as $d): ?>
                <div class="list-group-item d-flex align-items-center gap-2 py-2">
                    <i class="bi bi-file-earmark-pdf-fill text-primary"></i>
                    <span class="small"><?= esc($d['original_name'] ?? basename($d['file_path'])) ?></span>
                    <?php if ($d['file_size']): ?>
                    <span class="badge bg-light text-muted border ms-auto"><?= human_filesize($d['file_size']) ?></span>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- Gallery -->
        <?php if (! empty($gallery)): ?>
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold">
                    <i class="bi bi-images me-2 text-success"></i>Photo Gallery
                    <span class="badge bg-success-subtle text-success ms-2"><?= count($gallery) ?> images</span>
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-2">
                    <?php foreach ($gallery as $img): ?>
                    <div class="col-4 col-sm-3">
                        <a href="<?= base_url('uploads/'.esc($img['file_path'])) ?>" target="_blank">
                            <img src="<?= base_url('uploads/'.esc($img['file_path'])) ?>"
                                 class="img-fluid rounded" loading="lazy"
                                 style="height:80px;width:100%;object-fit:cover;border:1px solid #eee"
                                 title="<?= esc($img['original_name'] ?? '') ?>">
                        </a>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>

<?= $this->endSection() ?>
