<?php require 'config.php';
require 'header.php';
session_start();
?>
<div class="container mt-5 animate__animated animate__fadeIn">
    <div class="card shadow-lg">
        <div class="card-header text-white text-center py-4" id="dynamic-header">
            <h2 class="animate__animated animate__bounceInDown">Participant Registration Form</h2>
            <p class="mb-0 animate__animated animate__fadeIn">Please fill out the form below to submit your participation request</p>
        </div>
        <script>
            function changeBackgroundColor() {
                const header = document.getElementById('dynamic-header');
                let isLightening = true;
                let lightness = 30;

                setInterval(() => {
                    header.style.backgroundColor = `hsl(220, 85%, ${lightness}%)`;

                    if (isLightening) {
                        lightness += 1;
                        if (lightness >= 60) {
                            isLightening = false;
                        }
                    } else {
                        lightness -= 1;
                        if (lightness <= 30) {
                            isLightening = true;
                        }
                    }
                }, 50);
            }

            document.addEventListener('DOMContentLoaded', changeBackgroundColor);
        </script>
        <div class="card-body p-5">
            <?php
            if (empty($_SESSION['csrf_token'])) {
                $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
            }
            ?>
            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
            <form action="submit.php" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
                <!-- Name field -->
                <div class="mb-4">
                    <label for="researcher_name" class="form-label">Name</label>
                    <input type="text" class="form-control" id="researcher_name" name="researcher_name" required>
                    <div class="invalid-feedback">
                        Please enter your name.
                    </div>
                </div>
                <div class="mb-4">
                    <label for="research_name" class="form-label">research name</label>
                    <input type="text" class="form-control" id="research_name" name="research_name" required>
                    <div class="invalid-feedback">
                        Please enter research name
                    </div>
                </div>
                <!-- Title field -->
                <div class="mb-4">
                    <label for="title" class="form-label">Academic Title</label>
                    <select class="form-select" id="title" name="title" required>
                        <option value="">Select title...</option>
                        <option value="Prof.">Prof.</option>
                        <option value="Assit Prof.">Assit Prof.</option>
                        <option value="Lecturer">Lecturer</option>
                        <option value="Assit Lecturer">Assit Lecturer</option>
                    </select>
                    <div class="invalid-feedback">
                        Please select an academic title.
                    </div>
                </div>

                <!-- Degree field -->
                <div class="mb-4">
                    <label for="degree" class="form-label">Academic Degree</label>
                    <select class="form-select" id="degree" name="degree" required>
                        <option value="">Select degree...</option>
                        <option value="PhD">PhD</option>
                        <option value="MSc">MSc</option>
                        <option value="BSc">BSc</option>
                    </select>
                    <div class="invalid-feedback">
                        Please select an academic degree.
                    </div>
                </div>

                <!-- Specialization field -->
                <div class="mb-4">
                    <label for="specialization" class="form-label">Specialization</label>
                    <input type="text" class="form-control" id="specialization" name="specialization" required>
                    <div class="invalid-feedback">
                        Please enter your specialization.
                    </div>
                </div>

                <!-- Email field -->
                <div class="mb-4">
                    <label for="institutional_email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="institutional_email" name="institutional_email" required>
                    <div class="invalid-feedback">
                        Please enter a valid email address.
                    </div>
                </div>

                <!-- Mobile field -->
                <div class="mb-4">
                    <label for="mobile_number" class="form-label">Mobile Number</label>
                    <input type="text" class="form-control" id="mobile_number" name="mobile_number" required>
                    <div class="invalid-feedback">
                        Please enter your mobile number.
                    </div>
                </div>

                <!-- Affiliation field -->
                <div class="mb-4">
                    <label for="affiliation" class="form-label">Affiliation</label>
                    <input type="text" class="form-control" id="affiliation" name="affiliation" required>
                    <div class="invalid-feedback">
                        Please enter your affiliation.
                    </div>
                </div>

                <!-- Area of Interest field -->
                <div class="mb-4">
                    <label for="area_of_interest" class="form-label">Area of Interest</label>
                    <input type="text" class="form-control" id="area_of_interest" name="area_of_interest" required>
                    <div class="invalid-feedback">
                        Please enter your area of interest.
                    </div>
                </div>

                <!-- Journal Selection field -->
                <div class="mb-4">
                    <label for="journal_selection" class="form-label">Journal Selection</label>
                    <select class="form-select" id="journal_selection" name="journal_selection" required>
                        <option value="">Select classification...</option>
                        <option value="Q1; 1795$">Q1; 1795$</option>
                        <option value="Q3; 800$">Q3; 800$</option>
                        <option value="Q4; 500$">Q4; 500$</option>
                        <option value="Q3; 450$">Q3; 450$</option>
                        <option value="National Journal; 100$">National Journal; 100$</option>
                        <option value="Participation fees only 50$">Participation fees only 50$</option>
                    </select>
                    <div class="invalid-feedback">
                        Please select a journal classification.
                    </div>
                </div>

                <!-- Research File field -->
                <div class="mb-4">
                    <label for="search_file" class="form-label">Research File (PDF or Word)</label>
                    <input type="file" class="form-control" id="search_file" name="search_file" accept=".pdf,.doc,.docx">
                    <div class="invalid-feedback">
                        Please upload your research file.
                    </div>
                </div>

                <div class="mb-4 text-center">
                    <div class="g-recaptcha" data-sitekey="<?php echo RECAPTCHA_SITE_KEY; ?>" style="display: inline-block;"></div>
                </div>

                <!-- Submit button -->
                <div class="text-center">
                    <button type="submit" class="btn btn-primary btn-lg animate__animated animate__pulse">
                        <i class="fas fa-paper-plane me-2"></i> Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    (function() {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms).forEach(function(form) {
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
    })()
</script>

<?php require 'footer.php'; ?>