<?php include __DIR__ . '/../../layouts/header.php'; ?>
<?php include __DIR__ . '/../../layouts/sidebar.php'; ?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><?= __('vendor_subscriptions') ?></h2>
</div>

<div class="table-container">
    <div class="table-responsive">
        <table class="table align-middle">
            <thead>
                <tr>
                    <th><?= __('id') ?></th>
                    <th><?= __('vendor') ?></th>
                    <th>Plan</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th><?= __('status') ?></th>
                    <th class="text-end"><?= __('actions') ?></th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($subscriptions)): ?>
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted"><?= __('no_data_found') ?></td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($subscriptions as $sub): ?>
                        <tr>
                            <td class="text-secondary fw-semibold">#<?= htmlspecialchars($sub['id']) ?></td>
                            <td>
                                <a href="?page=vendor_documents&vendor_id=<?= $sub['vendor_id'] ?>" class="fw-bold text-dark text-decoration-none hover-primary">
                                    <i class="fas fa-building text-secondary" style="<?= isRTL() ? 'margin-left: 4px;' : 'margin-right: 4px;' ?>"></i> <?= htmlspecialchars($sub['agency_name']) ?>
                                </a>
                            </td>
                            <td>
                                <div class="fw-bold text-dark"><?= htmlspecialchars($sub['plan_name']) ?></div>
                                <div class="text-secondary" style="font-size:12px;"><?= htmlspecialchars($sub['price']) ?> <?= htmlspecialchars($sub['currency']) ?></div>
                            </td>
                            <td class="text-secondary"><?= date('M d, Y', strtotime($sub['start_date'])) ?></td>
                            <td class="text-secondary"><?= date('M d, Y', strtotime($sub['end_date'])) ?></td>
                            <td>
                                <?php if ($sub['status'] === 'active'): ?>
                                    <span class="badge badge-success"><?= __('active') ?></span>
                                <?php elseif ($sub['status'] === 'cancelled'): ?>
                                    <span class="badge badge-danger">Cancelled</span>
                                <?php elseif ($sub['status'] === 'expired'): ?>
                                    <span class="badge badge-danger">Expired</span>
                                <?php else: ?>
                                    <span class="badge badge-warning"><?= htmlspecialchars(ucfirst($sub['status'])) ?></span>
                                <?php endif; ?>
                            </td>
                             <td class="text-end">
                                 <button class="btn btn-light btn-sm text-primary me-1 view-sub-btn"
                                         data-id="<?= htmlspecialchars($sub['id']) ?>"
                                         data-vendor="<?= htmlspecialchars($sub['agency_name']) ?>"
                                         data-plan="<?= htmlspecialchars($sub['plan_name']) ?>"
                                         data-price="<?= htmlspecialchars($sub['price']) ?> <?= htmlspecialchars($sub['currency']) ?>"
                                         data-start="<?= date('M d, Y', strtotime($sub['start_date'])) ?>"
                                         data-end="<?= date('M d, Y', strtotime($sub['end_date'])) ?>"
                                         data-status="<?= htmlspecialchars($sub['status']) ?>"
                                         data-auto-renew="<?= $sub['auto_renew'] ? 'Yes' : 'No' ?>"
                                         data-created="<?= date('M d, Y H:i', strtotime($sub['created_at'])) ?>">
                                     <i class="fas fa-eye"></i>
                                 </button>
                                 <button class="btn btn-light btn-sm text-danger"><i class="fas fa-times"></i></button>
                             </td>
                         </tr>
                     <?php endforeach; ?>
                 <?php endif; ?>
             </tbody>
         </table>
     </div>

     <?php if ($totalPages > 1): ?>
     <div class="d-flex justify-content-end mt-4">
         <ul class="pagination mb-0 gap-2">
             <li class="page-item <?= $page <= 1 ? 'disabled' : '' ?>">
                 <a class="page-link rounded-circle border-0 text-secondary bg-light" href="?page=vendor_subscriptions&p=<?= $page - 1 ?>" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;"><i class="fas <?= isRTL() ? 'fa-chevron-right' : 'fa-chevron-left' ?>"></i></a>
             </li>
             <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                 <li class="page-item <?= $i == $page ? 'active' : '' ?>">
                     <a class="page-link rounded-circle border-0 <?= $i == $page ? 'bg-primary text-white' : 'text-secondary bg-light' ?>" href="?page=vendor_subscriptions&p=<?= $i ?>" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;"><?= $i ?></a>
                 </li>
             <?php endfor; ?>
             <li class="page-item <?= $page >= $totalPages ? 'disabled' : '' ?>">
                 <a class="page-link rounded-circle border-0 text-secondary bg-light" href="?page=vendor_subscriptions&p=<?= $page + 1 ?>" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;"><i class="fas <?= isRTL() ? 'fa-chevron-left' : 'fa-chevron-right' ?>"></i></a>
             </li>
         </ul>
     </div>
     <?php endif; ?>
 </div>

<!-- Subscription Details Modal -->
<div class="modal fade" id="subDetailsModal" tabindex="-1" aria-labelledby="subDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
            <div class="modal-header border-0 bg-light p-4">
                <h5 class="modal-title fw-bold text-dark" id="subDetailsModalLabel">Subscription Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body p-4">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <div>
                        <span class="text-secondary small">Subscription ID</span>
                        <h4 id="modalSubId" class="fw-bold mb-0 text-dark"></h4>
                    </div>
                    <span id="modalSubStatus" class="badge px-3 py-2 rounded-pill fw-bold"></span>
                </div>

                <div class="card bg-light border-0 p-3 rounded-4 mb-4">
                    <h6 class="text-uppercase text-secondary fw-bold mb-3 small">Overview</h6>
                    <div class="d-flex flex-column gap-2.5" style="gap: 10px;">
                        <div class="d-flex justify-content-between">
                            <span class="text-secondary">Vendor / Agency</span>
                            <span id="modalSubVendor" class="fw-bold text-dark text-end"></span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-secondary">Plan Name</span>
                            <span id="modalSubPlan" class="fw-bold text-dark"></span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-secondary">Price</span>
                            <span id="modalSubPrice" class="fw-bold text-dark"></span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-secondary">Auto Renew</span>
                            <span id="modalSubAutoRenew" class="fw-bold text-dark"></span>
                        </div>
                    </div>
                </div>

                <div class="card bg-light border-0 p-3 rounded-4">
                    <h6 class="text-uppercase text-secondary fw-bold mb-3 small">Dates & Timeline</h6>
                    <div class="d-flex flex-column gap-2.5" style="gap: 10px;">
                        <div class="d-flex justify-content-between">
                            <span class="text-secondary">Start Date</span>
                            <span id="modalSubStart" class="fw-bold text-dark"></span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-secondary">End Date</span>
                            <span id="modalSubEnd" class="fw-bold text-dark"></span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-secondary">Created At</span>
                            <span id="modalSubCreated" class="fw-bold text-dark"></span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="modal-footer border-0 p-4 pt-0">
                <button type="button" class="btn btn-secondary w-100 rounded-pill fw-bold py-2.5" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
document.querySelectorAll('.view-sub-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const id = this.getAttribute('data-id');
        const vendor = this.getAttribute('data-vendor');
        const plan = this.getAttribute('data-plan');
        const price = this.getAttribute('data-price');
        const start = this.getAttribute('data-start');
        const end = this.getAttribute('data-end');
        const status = this.getAttribute('data-status');
        const autoRenew = this.getAttribute('data-auto-renew');
        const created = this.getAttribute('data-created');

        // Populate Modal Fields
        document.getElementById('modalSubId').innerText = '#' + id;
        document.getElementById('modalSubVendor').innerText = vendor;
        document.getElementById('modalSubPlan').innerText = plan;
        document.getElementById('modalSubPrice').innerText = price;
        document.getElementById('modalSubStart').innerText = start;
        document.getElementById('modalSubEnd').innerText = end;
        document.getElementById('modalSubAutoRenew').innerText = autoRenew;
        document.getElementById('modalSubCreated').innerText = created;

        // Status Badge Style
        const statusBadge = document.getElementById('modalSubStatus');
        statusBadge.innerText = status.toUpperCase();
        statusBadge.className = 'badge px-3 py-2 rounded-pill fw-bold';
        if (status === 'active') {
            statusBadge.classList.add('bg-success');
        } else if (status === 'cancelled') {
            statusBadge.classList.add('bg-danger');
        } else if (status === 'expired') {
            statusBadge.classList.add('bg-danger');
        } else {
            statusBadge.classList.add('bg-warning', 'text-dark');
        }

        // Show Modal
        const modal = new bootstrap.Modal(document.getElementById('subDetailsModal'));
        modal.show();
    });
});
</script>

<?php include __DIR__ . '/../../layouts/footer.php'; ?>
