<div class="row g-4">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body text-center">
                <?php if ($card['member_photo']): ?>
                    <img src="/uploads/<?= e($card['member_photo']) ?>" alt="Photo" class="rounded-circle mb-3" style="width:120px;height:120px;object-fit:cover;">
                <?php else: ?>
                    <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width:120px;height:120px;">
                        <i class="fas fa-id-card fa-3x text-muted"></i>
                    </div>
                <?php endif; ?>

                <h5><?= e($card['card_number']) ?></h5>
                <p class="text-muted mb-1"><?= e($card['type_name_en']) ?> / <?= e($card['type_name_ar']) ?></p>
                <div class="mb-3"><?= status_badge($card['status']) ?></div>

                <table class="table table-sm text-start">
                    <tr><th><?= lang('cards.member') ?></th><td><a href="/members/show/<?= $card['member_id'] ?>"><?= e($card['member_name_en']) ?></a><br><small><?= e($card['membership_number']) ?></small></td></tr>
                    <?php if ($card['dep_name_en']): ?>
                    <tr><th>Dependent</th><td><?= e($card['dep_name_en']) ?></td></tr>
                    <?php endif; ?>
                    <tr><th><?= lang('cards.issue_date') ?></th><td><?= e($card['issue_date']) ?></td></tr>
                    <tr><th><?= lang('cards.expiry_date') ?></th><td><?= e($card['expiry_date'] ?? 'N/A') ?></td></tr>
                    <tr><th>Barcode</th><td><code><?= e($card['barcode'] ?? '-') ?></code></td></tr>
                    <tr><th>Print Count</th><td><?= (int)$card['print_count'] ?></td></tr>
                </table>

                <?php if ($card['status'] === 'active'): ?>
                <div class="mt-3">
                    <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#invalidateModal"><i class="fas fa-ban me-1"></i><?= lang('cards.invalidate') ?></button>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <ul class="nav nav-tabs mb-3" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-access"><?= lang('cards.recent_access') ?></a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-history"><?= lang('cards.replacement_history') ?></a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="tab-access">
                <div class="card">
                    <div class="card-body">
                        <?php if (empty($accessLog)): ?>
                            <p class="text-muted text-center py-3"><i class="fas fa-info-circle me-1"></i>No access records</p>
                        <?php else: ?>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead><tr><th>Time</th><th>Direction</th><th>Point</th><th>Method</th><th>Granted</th></tr></thead>
                                <tbody>
                                <?php foreach ($accessLog as $log): ?>
                                <tr>
                                    <td><?= e($log['access_time']) ?></td>
                                    <td><?= $log['direction'] === 'entry' ? '<span class="text-success"><i class="fas fa-sign-in-alt"></i> Entry</span>' : '<span class="text-info"><i class="fas fa-sign-out-alt"></i> Exit</span>' ?></td>
                                    <td><?= e($log['point_name_en']) ?></td>
                                    <td><span class="badge bg-secondary"><?= e($log['access_method']) ?></span></td>
                                    <td><?= $log['granted'] ? '<span class="text-success"><i class="fas fa-check"></i></span>' : '<span class="text-danger"><i class="fas fa-times"></i> ' . e($log['denial_reason']) . '</span>' ?></td>
                                </tr>
                                <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="tab-history">
                <div class="card">
                    <div class="card-body">
                        <?php if (empty($history)): ?>
                            <p class="text-muted text-center py-3">No replacement history</p>
                        <?php else: ?>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead><tr><th>Card #</th><th>Status</th><th>Issue Date</th><th>Reason</th></tr></thead>
                                <tbody>
                                <?php foreach ($history as $h): ?>
                                <tr>
                                    <td><a href="/cards/show/<?= $h['id'] ?>"><?= e($h['card_number']) ?></a></td>
                                    <td><?= status_badge($h['status']) ?></td>
                                    <td><?= e($h['issue_date']) ?></td>
                                    <td><?= e($h['status_reason'] ?? '-') ?></td>
                                </tr>
                                <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php if ($card['status'] === 'active'): ?>
<div class="modal fade" id="invalidateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="invalidateForm" data-ajax="true">
                <?= csrf_field() ?>
                <div class="modal-header">
                    <h5 class="modal-title"><?= lang('cards.invalidate') ?></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">New Status <span class="text-danger">*</span></label>
                        <select name="new_status" class="form-select" required>
                            <option value="lost">Lost</option>
                            <option value="stolen">Stolen</option>
                            <option value="damaged">Damaged</option>
                            <option value="cancelled">Cancelled</option>
                            <option value="suspended">Suspended</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Reason <span class="text-danger">*</span></label>
                        <textarea name="reason" class="form-control" rows="3" required></textarea>
                        <div class="invalid-feedback" data-field="reason"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?= lang('common.cancel') ?></button>
                    <button type="submit" class="btn btn-danger"><i class="fas fa-ban me-1"></i><?= lang('cards.invalidate') ?></button>
                </div>
            </form>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$('#invalidateForm').on('submit', function(e){
    e.preventDefault();
    const form = $(this);
    $.ajax({
        url: '/cards/<?= $card['id'] ?>/invalidate',
        method: 'POST',
        data: form.serialize(),
        success: function(res){
            if(res.success){
                Swal.fire({icon:'success',title:res.message,timer:1500,showConfirmButton:false}).then(()=>location.reload());
            } else {
                Swal.fire({icon:'error',title:'Error',text:res.message});
            }
        }
    });
});
</script>
<?php $__view->endPush() ?>
<?php endif; ?>