tinyqc/app/Views/report/index.php

<?= $this->extend("layout/main_layout"); ?>
<?= $this->section("content") ?>
<main x-data="reportIndex()">
    <div class="max-w-2xl mx-auto">
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-6">
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-slate-800">Generate Report</h1>
                <p class="text-sm text-slate-500 mt-1">Select parameters to generate QC report</p>
            </div>

            <div x-show="error" x-transition class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
                <div class="flex items-center gap-2">
                    <i class="fa-solid fa-circle-exclamation"></i>
                    <span x-text="error"></span>
                </div>
            </div>

            <form @submit.prevent="generateReport()">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Month <span class="text-red-500">*</span></label>
                        <input type="month" name="dates" x-model="dates" :class="errors.dates ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" required>
                        <p x-show="errors.dates" x-text="errors.dates" class="text-red-500 text-xs mt-1"></p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Test <span class="text-red-500">*</span></label>
                        <select name="test" x-model="test" :class="errors.test ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" required>
                            <option value="">Select Test</option>
                            <?php if (isset($tests)): ?>
                            <?php foreach ($tests as $t): ?>
                            <option value="<?= $t['test_id'] ?>"><?= $t['name'] ?></option>
                            <?php endforeach; ?>
                            <?php endif; ?>
                        </select>
                        <p x-show="errors.test" x-text="errors.test" class="text-red-500 text-xs mt-1"></p>
                    </div>

                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Control 1 <span class="text-red-500">*</span></label>
                            <select name="control1" x-model="control1" :class="errors.control1 ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" required>
                                <option value="">Select Control</option>
                                <?php if (isset($controls)): ?>
                                <?php foreach ($controls as $c): ?>
                                <option value="<?= $c['control_id'] ?>"><?= $c['name'] ?> (<?= $c['lot'] ?? 'N/A' ?>)</option>
                                <?php endforeach; ?>
                                <?php endif; ?>
                            </select>
                            <p x-show="errors.control1" x-text="errors.control1" class="text-red-500 text-xs mt-1"></p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Control 2</label>
                            <select name="control2" x-model="control2" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
                                <option value="">Optional</option>
                                <?php if (isset($controls)): ?>
                                <?php foreach ($controls as $c): ?>
                                <option value="<?= $c['control_id'] ?>"><?= $c['name'] ?> (<?= $c['lot'] ?? 'N/A' ?>)</option>
                                <?php endforeach; ?>
                                <?php endif; ?>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Control 3</label>
                            <select name="control3" x-model="control3" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
                                <option value="">Optional</option>
                                <?php if (isset($controls)): ?>
                                <?php foreach ($controls as $c): ?>
                                <option value="<?= $c['control_id'] ?>"><?= $c['name'] ?> (<?= $c['lot'] ?? 'N/A' ?>)</option>
                                <?php endforeach; ?>
                                <?php endif; ?>
                            </select>
                        </div>
                    </div>

                    <div class="flex justify-end pt-4">
                        <button type="submit" :disabled="loading" class="btn btn-primary">
                            <template x-if="!loading">
                                <span class="flex items-center">
                                    <i class="fa-solid fa-chart-column mr-2"></i>
                                    Generate Report
                                </span>
                            </template>
                            <template x-if="loading">
                                <span class="flex items-center">
                                    <i class="fa-solid fa-spinner fa-spin mr-2"></i>
                                    Generating...
                                </span>
                            </template>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</main>
<?= $this->endSection(); ?>

<?= $this->section("script") ?>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data("reportIndex", () => ({
        loading: false,
        error: '',
        dates: '<?= date('Y-m') ?>',
        test: '',
        control1: '',
        control2: '',
        control3: '',
        errors: {},

        validate() {
            this.errors = {};
            if (!this.dates) this.errors.dates = 'Month is required';
            if (!this.test) this.errors.test = 'Test is required';
            if (!this.control1) this.errors.control1 = 'Control 1 is required';
            return Object.keys(this.errors).length === 0;
        },

        generateReport() {
            if (!this.validate()) {
                App.showToast('Please fill all required fields', 'error');
                return;
            }

            const params = new URLSearchParams({
                dates: this.dates,
                test: this.test,
                control1: this.control1
            });

            if (this.control2) params.append('control2', this.control2);
            if (this.control3) params.append('control3', this.control3);

            window.location.href = `${window.BASEURL}/report/view?${params.toString()}`;
        }
    }));
});
</script>
<?= $this->endSection(); ?>