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

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apply as Reviewer - IJRISS</title>
    <style>
        .page-wrapper {
            max-width: 1300px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .main-layout {
            display: flex;
            gap: 30px;
            align-items: flex-start;
            margin: 50px 30px;
        }
        
        /* Sidebar */
        .sidebar {
            width: 250px;
            flex-shrink: 0;
        }
        
        /* Right Form Area */
        .main-content {
            flex: 1;
        }
        
        .form-wrapper {
            background: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #003366;
            margin-bottom: 30px;
            font-size: 32px;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .form-row-3 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
        }
        
        .form-row-4 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: #666;
            font-size: 14px;
            font-weight: 500;
        }
        
        label .required {
            color: red;
        }
        
        input[type="text"],
        input[type="email"],
        input[type="number"],
        input[type="tel"],
        textarea,
        select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            font-family: inherit;
            box-sizing: border-box;
        }
        
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="number"]:focus,
        input[type="tel"]:focus,
        textarea:focus,
        select:focus {
            outline: none;
            border-color: #009688;
        }
        
        textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .error-message {
            color: #d32f2f;
            font-size: 12px;
            margin-top: 5px;
            display: block;
        }
        
        .required-field {
            border-color: #d32f2f !important;
        }
        
        .help-text {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        
        .char-counter {
            text-align: right;
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        
        .file-upload {
            position: relative;
        }
        
        .file-upload input[type="file"] {
            display: none;
        }
        
        .file-upload-btn {
            display: inline-block;
            padding: 10px 20px;
            background: #009688;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .file-upload-btn:hover {
            background: #00796b;
        }
        
        .file-name {
            margin-left: 10px;
            color: #666;
        }
        
        .section-title {
            font-size: 20px;
            color: #003366;
            margin: 30px 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #003366;
        }
        
        .section-subtitle {
            font-size: 14px;
            color: #666;
            margin: -10px 0 20px 0;
            font-style: italic;
        }
        
        .checkbox-group {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        
        .checkbox-group input[type="checkbox"] {
            margin-top: 3px;
            width: auto;
        }
        
        .radio-group {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }
        
        .radio-group label {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0;
            font-weight: normal;
        }
        
        .radio-group input[type="radio"] {
            width: auto;
            margin: 0;
        }
        
        .button-group {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        
        button {
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .submit-btn {
            background: #003366;
            color: white;
        }
        
        .submit-btn:hover {
            background: #002244;
        }
        
        .submit-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .success-message {
            background: #4caf50;
            color: white;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .error-alert {
            background: #f44336;
            color: white;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .reference-section {
            margin-bottom: 25px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
        }
        
        .reference-header {
            font-weight: 600;
            color: #003366;
            margin-bottom: 15px;
            font-size: 16px;
        }
        
        @media (max-width: 768px) {
            .form-row,
            .form-row-3,
            .form-row-4 {
                grid-template-columns: 1fr;
            }
            
            .main-layout {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
            }
        }
        
        .main-content {
            width: 100%;
        }
        
        @media (min-width: 1024px) {
            .main-content {
                width: 75%;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

</head>
<body>
    
<!-- Main Content Area -->
<div class="container">
    <div class="main-layout">
        <!-- Left Sidebar -->
                    <!-- Left Sidebar (dynamic) -->
        <?php include __DIR__ . '/include/nsidebar.php'; ?>

        
        <section class="main-content">
            <div class="container">
                <h1>Apply as Reviewer</h1>
                
                <div id="message-container"></div>
                
                <form id="reviewerForm" method="POST" action="process_reviewer_application.php" enctype="multipart/form-data">
                    
                    <!-- Personal Information -->
                    <h2 class="section-title">Personal Information</h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>Salutation <span class="required">*</span></label>
                            <select name="salutation" id="salutation" required>
                                <option value="">Select Salutation</option>
                                <option value="Dr.">Dr.</option>
                                <option value="Mr.">Mr.</option>
                                <option value="Mrs.">Mrs.</option>
                                <option value="Ms.">Ms.</option>
                            </select>
                            <span class="error-message" id="error_salutation"></span>
                        </div>
                        
                        <div class="form-group">
                            <label>Full Name <span class="required">*</span></label>
                            <input type="text" name="full_name" id="full_name" required>
                            <span class="error-message" id="error_full_name"></span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>Gender <span class="required">*</span></label>
                        <div class="radio-group">
                            <label>
                                <input type="radio" name="gender" value="Male" required checked>
                                Male
                            </label>
                            <label>
                                <input type="radio" name="gender" value="Female" required>
                                Female
                            </label>
                            <label>
                                <input type="radio" name="gender" value="Other" required>
                                Other
                            </label>
                        </div>
                        <span class="error-message" id="error_gender"></span>
                    </div>
                    
                    <!-- Professional Information -->
                    <h2 class="section-title">Professional Information</h2>
                    
                    <div class="form-group">
                        <label>Current Employment (College/University/Organization) <span class="required">*</span></label>
                        <input type="text" name="current_employment" id="current_employment" required>
                        <span class="error-message" id="error_current_employment"></span>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>Total Experience (Years) <span class="required">*</span></label>
                            <input type="number" name="total_experience" id="total_experience" min="0" max="50" value="0" required>
                            <span class="error-message" id="error_total_experience"></span>
                        </div>
                        
                        <div class="form-group">
                            <label>Educational Qualifications <span class="required">*</span></label>
                            <input type="text" name="educational_qualifications" id="educational_qualifications" required>
                            <span class="error-message" id="error_educational_qualifications"></span>
                        </div>
                    </div>
                    
                    <!-- Research Areas -->
                    <h2 class="section-title">Research Area</h2>
                    <p class="section-subtitle">You can mention multiple research areas in which you are willing to review the paper</p>
                    
                    <div class="form-row-4">
                        <div class="form-group">
                            <label>Research Area 1 <span class="required">*</span></label>
                            <input type="text" name="research_area_1" id="research_area_1" required>
                            <span class="error-message" id="error_research_area_1"></span>
                        </div>
                        
                        <div class="form-group">
                            <label>Research Area 2 <span class="required">*</span></label>
                            <input type="text" name="research_area_2" id="research_area_2" required>
                            <span class="error-message" id="error_research_area_2"></span>
                        </div>
                        
                        <div class="form-group">
                            <label>Research Area 3 <span class="required">*</span></label>
                            <input type="text" name="research_area_3" id="research_area_3" required>
                            <span class="error-message" id="error_research_area_3"></span>
                        </div>
                        
                        <div class="form-group">
                            <label>Research Area 4 <span class="required">*</span></label>
                            <input type="text" name="research_area_4" id="research_area_4" required>
                            <span class="error-message" id="error_research_area_4"></span>
                        </div>
                    </div>
                    
                    <div class="form-row-4">
                        <div class="form-group">
                            <label>Research Area 5</label>
                            <input type="text" name="research_area_5" id="research_area_5">
                        </div>
                        
                        <div class="form-group">
                            <label>Research Area 6</label>
                            <input type="text" name="research_area_6" id="research_area_6">
                        </div>
                        
                        <div class="form-group">
                            <label>Research Area 7</label>
                            <input type="text" name="research_area_7" id="research_area_7">
                        </div>
                        
                        <div class="form-group">
                            <label>Research Area 8</label>
                            <input type="text" name="research_area_8" id="research_area_8">
                        </div>
                    </div>
                    
                    <!-- Contact Information -->
                    <h2 class="section-title">Contact Information</h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>Institutional/Work Email Id <span class="required">*</span></label>
                            <input type="email" name="institutional_email" id="institutional_email" required>
                            <span class="error-message" id="error_institutional_email"></span>
                        </div>
                        
                        <div class="form-group">
                            <label>Secondary/Personal Email Id <span class="required">*</span></label>
                            <input type="email" name="personal_email" id="personal_email" required>
                            <span class="error-message" id="error_personal_email"></span>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>Mobile No. <span class="required">*</span></label>
                            <input type="tel" name="mobile_no" id="mobile_no" maxlength="15" required>
                            <div class="char-counter">0 / 15</div>
                            <span class="error-message" id="error_mobile_no"></span>
                        </div>
                        
                        <div class="form-group">
                            <label>Whatsapp No. <span class="required">*</span></label>
                            <input type="tel" name="whatsapp_no" id="whatsapp_no" maxlength="15" required>
                            <div class="char-counter">0 / 15</div>
                            <span class="error-message" id="error_whatsapp_no"></span>
                        </div>
                    </div>
                    
                    <!-- Address Information -->
                    <div class="form-row">
                        <div class="form-group">
                            <label>City <span class="required">*</span></label>
                            <input type="text" name="city" id="city" required>
                            <span class="error-message" id="error_city"></span>
                        </div>
                        
                        <div class="form-group">
                            <label>Country <span class="required">*</span></label>
                            <select name="country" id="country" required>
                                <option value="">Select country</option>
                                <option value="Afghanistan">Afghanistan</option>
                                <option value="Albania">Albania</option>
                                <option value="Algeria">Algeria</option>
                                <option value="India">India</option>
                                <option value="USA">United States of America (USA)</option>
                                <option value="UK">United Kingdom</option>
                                <option value="Canada">Canada</option>
                                <option value="Australia">Australia</option>
                                <!-- Add more countries as needed -->
                            </select>
                            <span class="error-message" id="error_country"></span>
                        </div>
                    </div>
                    
                    <!-- Publications -->
                    <div class="form-group">
                        <label>International Publications <span class="required">*</span></label>
                        <input type="number" name="international_publications" id="international_publications" min="0" max="100" value="0" required>
                        <span class="error-message" id="error_international_publications"></span>
                    </div>
                    
                    <!-- How Did You Find Us -->
                    <div class="form-group">
                        <label>How Did You Find Us? <span class="required">*</span></label>
                        <input type="text" name="how_find_us" id="how_find_us" required>
                        <span class="error-message" id="error_how_find_us"></span>
                    </div>
                    
                    <!-- CV Upload -->
                    <div class="form-group">
                        <label>Upload CV <span class="required">*</span></label>
                        <div class="file-upload">
                            <label for="cv_file" class="file-upload-btn">Choose File</label>
                            <input type="file" id="cv_file" name="cv_file" accept=".pdf,.doc,.docx" required>
                            <span class="file-name" id="cv-file-name">No file chosen</span>
                        </div>
                        <div class="help-text">Format Allowed (pdf, doc, docx): Max Size: 5 MB</div>
                        <span class="error-message" id="error_cv_file"></span>
                    </div>
                    
                    <!-- References -->
                    <h2 class="section-title">References</h2>
                    
                    <!-- First Reference -->
                    <div class="reference-section">
                        <div class="reference-header">First Reference</div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>Name <span class="required">*</span></label>
                                <input type="text" name="reference_1_name" id="reference_1_name" required>
                                <span class="error-message" id="error_reference_1_name"></span>
                            </div>
                            
                            <div class="form-group">
                                <label>Email Address <span class="required">*</span></label>
                                <input type="email" name="reference_1_email" id="reference_1_email" required>
                                <span class="error-message" id="error_reference_1_email"></span>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>College/University/Organization <span class="required">*</span></label>
                                <input type="text" name="reference_1_organization" id="reference_1_organization" required>
                                <span class="error-message" id="error_reference_1_organization"></span>
                            </div>
                            
                            <div class="form-group">
                                <label>Mobile No. <span class="required">*</span></label>
                                <input type="tel" name="reference_1_mobile" id="reference_1_mobile" maxlength="15" required>
                                <div class="char-counter">0 / 15</div>
                                <span class="error-message" id="error_reference_1_mobile"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Second Reference -->
                    <div class="reference-section">
                        <div class="reference-header">Second Reference</div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>Name <span class="required">*</span></label>
                                <input type="text" name="reference_2_name" id="reference_2_name" required>
                                <span class="error-message" id="error_reference_2_name"></span>
                            </div>
                            
                            <div class="form-group">
                                <label>Email Address <span class="required">*</span></label>
                                <input type="email" name="reference_2_email" id="reference_2_email" required>
                                <span class="error-message" id="error_reference_2_email"></span>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label>College/University/Organization <span class="required">*</span></label>
                                <input type="text" name="reference_2_organization" id="reference_2_organization" required>
                                <span class="error-message" id="error_reference_2_organization"></span>
                            </div>
                            
                            <div class="form-group">
                                <label>Mobile No. <span class="required">*</span></label>
                                <input type="tel" name="reference_2_mobile" id="reference_2_mobile" maxlength="15" required>
                                <div class="char-counter">0 / 15</div>
                                <span class="error-message" id="error_reference_2_mobile"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Agreement -->
                    <div class="form-group">
                        <div class="checkbox-group">
                            <input type="checkbox" name="agree_terms" id="agree_terms" required>
                            <label for="agree_terms">I Agree with Communeglobal terms and conditions <span class="required">*</span></label>
                        </div>
                        <span class="error-message" id="error_agree_terms"></span>
                    </div>
                    
                    <!-- Submit Button -->
                    <div class="button-group">
                        <button type="submit" class="submit-btn">Submit Application</button>
                    </div>
                </form>
            </div>
        </section>
    </div>
</div>

<script>
    // Character counter for phone fields
    document.querySelectorAll('input[maxlength="15"]').forEach(input => {
        input.addEventListener('input', function() {
            const parent = this.parentElement;
            const counter = parent.querySelector('.char-counter');
            if (counter) {
                counter.textContent = `${this.value.length} / 15`;
            }
        });
    });
    
    // File upload display
    document.getElementById('cv_file').addEventListener('change', function() {
        const fileName = this.files[0] ? this.files[0].name : 'No file chosen';
        document.getElementById('cv-file-name').textContent = fileName;
    });
    
    // Show message
    function showMessage(message, type) {
        const container = document.getElementById('message-container');
        const className = type === 'success' ? 'success-message' : 'error-alert';
        container.innerHTML = `<div class="${className}">${message}</div>`;
        window.scrollTo(0, 0);
        
        // Auto-hide success message after 5 seconds
        if (type === 'success') {
            setTimeout(() => {
                container.innerHTML = '';
            }, 5000);
        }
    }
    
    // Clear all error messages
    function clearErrors() {
        document.querySelectorAll('.error-message').forEach(el => el.textContent = '');
        document.querySelectorAll('.required-field').forEach(el => el.classList.remove('required-field'));
    }
    
    // Form submission via AJAX
    document.getElementById('reviewerForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        clearErrors();
        
        const submitBtn = document.querySelector('.submit-btn');
        submitBtn.disabled = true;
        submitBtn.textContent = 'Submitting...';
        
        try {
            const formData = new FormData(this);
            
            const response = await fetch('process_reviewer_application.php', {
                method: 'POST',
                body: formData
            });
            
            const result = await response.json();
            
            if (result.success) {
                showMessage(result.message, 'success');
                
                // Reset form
                this.reset();
                document.getElementById('cv-file-name').textContent = 'No file chosen';
                
                // Reset character counters
                document.querySelectorAll('.char-counter').forEach(counter => {
                    counter.textContent = '0 / 15';
                });
            } else {
                // Show field-specific errors if available
                if (result.errors) {
                    for (const [field, error] of Object.entries(result.errors)) {
                        const errorEl = document.getElementById('error_' + field);
                        const inputEl = document.getElementById(field);
                        if (errorEl) errorEl.textContent = error;
                        if (inputEl) inputEl.classList.add('required-field');
                    }
                }
                
                showMessage('Error: ' + result.message, 'error');
            }
            
        } catch (error) {
            console.error('Submission error:', error);
            showMessage('Error: ' + error.message, 'error');
        } finally {
            submitBtn.disabled = false;
            submitBtn.textContent = 'Submit Application';
        }
    });
</script>

</body>
</html>

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

?>
