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

<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card shadow-lg border-0 rounded-4">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <h5 class="m-0 fw-bold">Mass Upload APKs</h5>
                    <button type="button" class="btn btn-outline-primary btn-sm fw-bold" id="add-row">
                        <i class="fas fa-plus me-1"></i> Add Row
                    </button>
                </div>
                <div class="card-body p-4">
                    <form action="/admin/apks/mass-upload" method="POST" enctype="multipart/form-data">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="category_id" class="form-label fw-medium">Common Category</label>
                                <select class="form-select" id="category_id" name="category_id">
                                    <option value="">Uncategorized</option>
                                    <?php foreach ($categories as $cat): ?>
                                        <option value="<?php echo $cat['id']; ?>"><?php echo htmlspecialchars($cat['name']); ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="status" class="form-label fw-medium">Common Status</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="published">Published</option>
                                    <option value="draft">Draft</option>
                                </select>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered align-middle" id="mass-upload-table">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 25%;">Title</th>
                                        <th style="width: 15%;">Version</th>
                                        <th style="width: 25%;">Icon File</th>
                                        <th style="width: 30%;">Download URL</th>
                                        <th style="width: 5%;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="text" name="titles[]" class="form-control" required></td>
                                        <td><input type="text" name="versions[]" class="form-control" placeholder="1.0.0"></td>
                                        <td><input type="file" name="icon_files[]" class="form-control" accept="image/*"></td>
                                        <td><input type="url" name="download_urls[]" class="form-control" required placeholder="https://..."></td>
                                        <td><button type="button" class="btn btn-outline-danger btn-sm remove-row"><i class="fas fa-times"></i></button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end border-top pt-4 mt-3">
                            <a href="/admin/apks" class="btn btn-light px-4 fw-bold">Cancel</a>
                            <button type="submit" class="btn btn-primary px-5 fw-bold"><i class="fas fa-upload me-2"></i>Start Mass Upload</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableBody = document.querySelector('#mass-upload-table tbody');
    const addRowBtn = document.querySelector('#add-row');

    addRowBtn.addEventListener('click', function() {
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td><input type="text" name="titles[]" class="form-control" required></td>
            <td><input type="text" name="versions[]" class="form-control" placeholder="1.0.0"></td>
            <td><input type="file" name="icon_files[]" class="form-control" accept="image/*"></td>
            <td><input type="url" name="download_urls[]" class="form-control" required placeholder="https://..."></td>
            <td><button type="button" class="btn btn-outline-danger btn-sm remove-row"><i class="fas fa-times"></i></button></td>
        `;
        tableBody.appendChild(newRow);
    });

    tableBody.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-row') || e.target.parentElement.classList.contains('remove-row')) {
            const row = e.target.closest('tr');
            if (tableBody.querySelectorAll('tr').length > 1) {
                row.remove();
            }
        }
    });
});
</script>

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