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

<style>
    .collapse-toggle[aria-expanded="true"] .collapse-icon {
        transform: rotate(180deg);
    }
    .collapse-icon {
        transition: transform 0.2s ease-in-out;
    }
</style>

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

<?php if (isset($_GET['success'])): ?>
    <div class="alert alert-success border-0 shadow-sm mb-4 rounded-4" role="alert">
        <i class="fas fa-check-circle me-2"></i> <?= htmlspecialchars($_GET['success']) ?>
    </div>
<?php endif; ?>

<?php if (isset($_GET['vendor_id']) && $_GET['vendor_id'] !== ''): ?>
    <div class="mb-4">
        <a href="?page=vendor_documents" class="btn btn-outline-secondary rounded-pill px-4">
            <i class="fas fa-arrow-left me-1"></i> View All Vendors
        </a>
    </div>
<?php endif; ?>

<?php if (empty($vendors)): ?>
    <div class="card border-0 shadow-sm rounded-4 p-5 text-center">
        <div class="text-muted mb-3"><i class="fas fa-folder-open fa-3x"></i></div>
        <h5 class="text-secondary"><?= __('no_data_found') ?></h5>
    </div>
<?php else: ?>
    <?php 
    $vendorParam = isset($_GET['vendor_id']) && $_GET['vendor_id'] !== '' ? '&vendor_id=' . urlencode($_GET['vendor_id']) : '';
    ?>
    <?php foreach ($vendors as $vendor): ?>
        <?php 
        $isExpanded = (count($vendors) === 1 || (isset($_GET['vendor_id']) && $_GET['vendor_id'] == $vendor['id']));
        ?>
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-header bg-white border-0 py-3 px-4 d-flex justify-content-between align-items-center flex-wrap gap-2 collapse-toggle" 
                 style="cursor: pointer;" 
                 data-bs-toggle="collapse" 
                 data-bs-target="#vendorDocs-<?= $vendor['id'] ?>" 
                 aria-expanded="<?= $isExpanded ? 'true' : 'false' ?>">
                <div class="d-flex align-items-center gap-3">
                    <div class="bg-light rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                        <i class="fas fa-building text-primary fa-lg"></i>
                    </div>
                    <div>
                        <h4 class="mb-0 fw-bold text-dark"><?= htmlspecialchars($vendor['agency_name']) ?></h4>
                        <span class="text-muted small"><?= htmlspecialchars($vendor['email']) ?></span>
                    </div>
                    <i class="fas fa-chevron-down text-muted ms-2 collapse-icon"></i>
                </div>
                <div>
                    <?php if ($vendor['has_pending']): ?>
                        <span class="badge bg-warning text-dark px-3 py-2 rounded-pill fw-bold">
                            <i class="fas fa-exclamation-circle me-1"></i> Needs Approval
                        </span>
                    <?php else: ?>
                        <span class="badge bg-success text-white px-3 py-2 rounded-pill fw-bold">
                            <i class="fas fa-check-circle me-1"></i> Approved
                        </span>
                    <?php endif; ?>
                </div>
            </div>
            <div id="vendorDocs-<?= $vendor['id'] ?>" class="collapse <?= $isExpanded ? 'show' : '' ?>">
                <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4">Document Type</th>
                                <th>File</th>
                                <th>Expiry Date</th>
                                <th>Submitted Date</th>
                                <th>Status</th>
                                <th class="text-end pe-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($vendor['documents'])): ?>
                                <tr>
                                    <td colspan="6" class="text-center py-4 text-muted">
                                        <i class="fas fa-info-circle me-1"></i> No documents uploaded yet.
                                    </td>
                                </tr>
                            <?php else: ?>
                                <?php foreach ($vendor['documents'] as $doc): ?>
                                    <tr>
                                        <td class="ps-4">
                                            <span class="fw-semibold text-dark"><?= htmlspecialchars($doc['document_type_name']) ?></span>
                                        </td>
                                        <td>
                                            <a href="<?= htmlspecialchars($doc['file_path']) ?>" target="_blank" class="btn btn-sm btn-outline-primary px-3 rounded-pill">
                                                <i class="fas fa-external-link-alt me-1"></i> View File
                                            </a>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="text-secondary small">
                                                    <?= $doc['expiry_date'] ? date('M d, Y', strtotime($doc['expiry_date'])) : 'N/A' ?>
                                                </span>
                                                <button type="button" class="btn btn-link btn-sm p-0 text-primary" onclick="openExpiryModal(<?= $doc['id'] ?>, '<?= htmlspecialchars($doc['expiry_date'] ?? '') ?>')" title="Edit Expiry Date">
                                                    <i class="fas fa-edit" style="font-size: 12px;"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-secondary small">
                                                <?= date('M d, Y', strtotime($doc['created_at'])) ?>
                                            </span>
                                        </td>
                                        <td>
                                            <?php if ($doc['status'] === 'approved'): ?>
                                                <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1 rounded">Approved</span>
                                            <?php elseif ($doc['status'] === 'rejected'): ?>
                                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1 rounded">Rejected</span>
                                                <?php if (!empty($doc['admin_note'])): ?>
                                                    <div class="small text-muted mt-1" style="font-size: 11px; max-width: 200px;"><?= htmlspecialchars($doc['admin_note']) ?></div>
                                                <?php endif; ?>
                                            <?php elseif ($doc['status'] === 'expired'): ?>
                                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1 rounded">Expired</span>
                                            <?php else: ?>
                                                <span class="badge bg-warning-subtle text-warning border border-warning-subtle px-2 py-1 rounded">Pending</span>
                                            <?php endif; ?>
                                        </td>
                                        <td class="text-end pe-4">
                                            <?php if ($doc['status'] === 'pending'): ?>
                                                <a href="?page=vendor_documents&action=approve&id=<?= $doc['id'] ?>" class="btn btn-sm btn-success rounded-pill px-3 me-1" onclick="return confirm('Approve this document?')">
                                                    <i class="fas fa-check me-1"></i> Approve
                                                </a>
                                                <button class="btn btn-sm btn-danger rounded-pill px-3" onclick="openRejectModal(<?= $doc['id'] ?>)">
                                                    <i class="fas fa-times me-1"></i> Reject
                                                </button>
                                            <?php else: ?>
                                                <span class="text-muted small"><i class="fas fa-lock me-1"></i> Reviewed</span>
                                            <?php endif; ?>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
            </div> <!-- collapse end -->
        </div>
    <?php endforeach; ?>

    <?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_documents&p=<?= $page - 1 ?><?= $vendorParam ?>" 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_documents&p=<?= $i ?><?= $vendorParam ?>" 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_documents&p=<?= $page + 1 ?><?= $vendorParam ?>" 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; ?>
<?php endif; ?>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 px-4 pt-4">
                <h5 class="modal-title fw-bold">Reject Document</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=vendor_documents&action=reject" method="POST">
                <input type="hidden" name="id" id="reject_doc_id">
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Rejection Reason (Admin Note)</label>
                        <textarea name="admin_note" class="form-control" rows="3" placeholder="Explain why the document was rejected..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger rounded-pill px-4">Reject Document</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Expiry Date Modal -->
<div class="modal fade" id="expiryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 px-4 pt-4">
                <h5 class="modal-title fw-bold">Edit Expiry Date</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=vendor_documents&action=update_expiry" method="POST">
                <input type="hidden" name="id" id="expiry_doc_id">
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Expiry Date</label>
                        <input type="date" name="expiry_date" id="expiry_date_input" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openRejectModal(id) {
    document.getElementById('reject_doc_id').value = id;
    new bootstrap.Modal(document.getElementById('rejectModal')).show();
}

function openExpiryModal(id, expiryDate) {
    document.getElementById('expiry_doc_id').value = id;
    document.getElementById('expiry_date_input').value = expiryDate || '';
    new bootstrap.Modal(document.getElementById('expiryModal')).show();
}
</script>

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