<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Management Committee Information</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            padding: 20px;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e0e0e0;
        }

        .header h1 {
            color: #2c3e50;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .header p {
            color: #7f8c8d;
            font-size: 16px;
        }

        .form-section {
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
        }

        .required::after {
            content: " *";
            color: #e74c3c;
        }

        input[type="text"],
        select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.3s ease;
        }

        input[type="text"]:focus,
        select:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        select {
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 12px;
            padding-right: 40px;
            appearance: none;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        @media (max-width: 768px) {
            .form-row {
                grid-template-columns: 1fr;
            }
        }

        .smc-form {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 25px;
            margin-top: 15px;
            border-left: 4px solid #3498db;
        }

        .no-smc-form {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 25px;
            margin-top: 15px;
            border-left: 4px solid #e74c3c;
        }

        .bank-details {
            background: #e8f4fc;
            border-radius: 6px;
            padding: 20px;
            margin-top: 15px;
            border: 1px solid #b3e0ff;
            display: none;
        }

        .bank-details.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        table td {
            padding: 15px;
            border: 1px solid #e0e0e0;
        }

        table tr:first-child td {
            background-color: #f8f9fa;
        }

        .info-box {
            background: #e8f6f3;
            border-left: 4px solid #2ecc71;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .info-box h4 {
            color: #27ae60;
            margin-bottom: 8px;
            font-size: 16px;
        }

        .info-box p {
            color: #555;
            font-size: 14px;
        }

        .helper-text {
            font-size: 12px;
            color: #7f8c8d;
            margin-top: 5px;
            display: block;
        }

        .submit-btn {
            display: block;
            width: 200px;
            margin: 30px auto 0;
            padding: 15px 30px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3);
            background: linear-gradient(135deg, #2980b9, #1f6399);
        }

        .section-title {
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-title i {
            color: #3498db;
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            .header h1 {
                font-size: 24px;
            }
            
            .smc-form,
            .no-smc-form {
                padding: 20px;
            }
        }

        .input-icon {
            position: relative;
        }

        .input-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #7f8c8d;
        }

        .input-icon input,
        .input-icon select {
            padding-left: 40px;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-users"></i> School Management Committee</h1>
            <p>Provide information about the School Management Committee (SMC)</p>
        </div>

        <form id="smcForm">
            <div class="form-section">
                <div class="info-box">
                    <h4><i class="fas fa-info-circle"></i> About SMC</h4>
                    <p>The School Management Committee (SMC) plays a vital role in school governance, involving parents, teachers, and community members in decision-making processes.</p>
                </div>

               

                <div class="form-group">
                    <label for="smc_select" class="required">Does the school have an SMC?</label>
                    <div class="input-icon">
                        <i class="fas fa-question-circle"></i>
                        <select id="smc_select" name="smc_select" required onchange="toggleSMCForm(this.value)">
                            <option value="">Select Yes/No...</option>
                            <option value="yes">Yes, we have an SMC</option>
                            <option value="no">No, we don't have an SMC</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- SMC Details Form (Shown when "Yes" is selected) -->
            <div id="smcDetailsForm" class="smc-form" style="display: none;">
                <h3 class="section-title"><i class="fas fa-clipboard-list"></i> SMC Details</h3>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="smcactive">Is the SMC active?</label>
                        <select id="smcactive" name="smcactive">
                            <option value="">Select Yes/No...</option>
                            <option value="Yes">Yes, active</option>
                            <option value="No">No, not active</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="smctraining">Has SMC received training?</label>
                        <select id="smctraining" name="smctraining">
                            <option value="">Select Yes/No...</option>
                            <option value="Yes">Yes, received training</option>
                            <option value="No">No training received</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="smcp">SMC President Name</label>
                        <div class="input-icon">
                            <i class="fas fa-user"></i>
                            <input id="smcp" name="smcp" type="text" 
                                   placeholder="Enter president's full name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="smcpc">President Contact Number</label>
                        <div class="input-icon">
                            <i class="fas fa-phone"></i>
                            <input id="smcpc" name="smcpc" type="text" 
                                   placeholder="+92 300 1234567">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="smcbankaccount">Does SMC have a bank account?</label>
                    <select id="smcbankaccount" name="smcbankaccount" onchange="toggleBankDetails(this.value)">
                        <option value="">Select Yes/No...</option>
                        <option value="Yes">Yes, has bank account</option>
                        <option value="No">No bank account</option>
                    </select>
                </div>

                <!-- Bank Details (Hidden by default) -->
                <div id="bankDetails" class="bank-details">
                    <h4><i class="fas fa-university"></i> Bank Account Details</h4>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="smcbankname">Bank Name</label>
                            <div class="input-icon">
                                <i class="fas fa-landmark"></i>
                                <input id="smcbankname" name="smcbankname" type="text" 
                                       placeholder="e.g., National Bank of Pakistan">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="smcbac">Account Number</label>
                            <div class="input-icon">
                                <i class="fas fa-credit-card"></i>
                                <input id="smcbac" name="smcbac" type="text" 
                                       placeholder="Enter account number">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="smcamount">Amount Received This Year (PKR)</label>
                        <div class="input-icon">
                            <i class="fas fa-money-bill-wave"></i>
                            <input id="smcamount" name="smcamount" type="text" 
                                   placeholder="Enter amount in Pakistani Rupees">
                        </div>
                        <span class="helper-text">Total funds received by SMC in current fiscal year</span>
                    </div>
                </div>
            </div>

            <!-- No SMC Form (Shown when "No" is selected) -->
            <div id="noSMCForm" class="no-smc-form" style="display: none;">
                <h3 class="section-title"><i class="fas fa-exclamation-circle"></i> Reason for No SMC</h3>
                
                <div class="form-group">
                    <label for="nosmc">Please explain why the school doesn't have an SMC</label>
                    <textarea id="nosmc" name="nosmc" rows="4" 
                              placeholder="Explain the reason in detail (e.g., School is new, awaiting formation, etc.)"
                              style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-family: inherit; resize: vertical;"></textarea>
                    <span class="helper-text">Provide detailed explanation for not having an SMC</span>
                </div>
            </div>

            <button type="submit" class="submit-btn">
                <i class="fas fa-save"></i> Save SMC Information
            </button>
        </form>
    </div>

    <script>
        function toggleSMCForm(value) {
            const smcDetailsForm = document.getElementById('smcDetailsForm');
            const noSMCForm = document.getElementById('noSMCForm');
            
            // Hide all forms first
            smcDetailsForm.style.display = 'none';
            noSMCForm.style.display = 'none';
            
            // Clear forms when switching
            if (value === 'yes') {
                // Clear the "No SMC" form
                document.getElementById('nosmc').value = '';
                // Show SMC details form
                smcDetailsForm.style.display = 'block';
            } else if (value === 'no') {
                // Clear the SMC details form
                clearSMCForm();
                // Show No SMC form
                noSMCForm.style.display = 'block';
            }
        }

        function toggleBankDetails(value) {
            const bankDetails = document.getElementById('bankDetails');
            
            if (value === 'Yes') {
                bankDetails.classList.add('show');
            } else {
                bankDetails.classList.remove('show');
                // Clear bank details when "No" is selected
                document.getElementById('smcbankname').value = '';
                document.getElementById('smcbac').value = '';
                document.getElementById('smcamount').value = '';
            }
        }

        function clearSMCForm() {
            // Clear all SMC form fields
            document.getElementById('smcactive').value = '';
            document.getElementById('smctraining').value = '';
            document.getElementById('smcp').value = '';
            document.getElementById('smcpc').value = '';
            document.getElementById('smcbankaccount').value = '';
            document.getElementById('smcbankname').value = '';
            document.getElementById('smcbac').value = '';
            document.getElementById('smcamount').value = '';
            
            // Hide bank details
            document.getElementById('bankDetails').classList.remove('show');
        }

        // Form submission handler
        document.getElementById('smcForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const emisCode = document.getElementById('emis_code').value;
            const hasSMC = document.getElementById('smc_select').value;
            
            // Basic validation
            if (!emisCode) {
                alert('Please enter EMIS Code');
                return;
            }
            
            if (!hasSMC) {
                alert('Please select whether the school has an SMC or not');
                return;
            }
            
            if (hasSMC === 'yes') {
                const smcActive = document.getElementById('smcactive').value;
                const smcTraining = document.getElementById('smctraining').value;
                const hasBankAccount = document.getElementById('smcbankaccount').value;
                
                if (!smcActive || !smcTraining || !hasBankAccount) {
                    alert('Please fill all required fields in SMC details');
                    return;
                }
                
                if (hasBankAccount === 'Yes') {
                    const bankName = document.getElementById('smcbankname').value;
                    const accountNo = document.getElementById('smcbac').value;
                    
                    if (!bankName || !accountNo) {
                        alert('Please fill all bank account details');
                        return;
                    }
                }
            } else if (hasSMC === 'no') {
                const reason = document.getElementById('nosmc').value;
                if (!reason.trim()) {
                    alert('Please explain why the school doesn\'t have an SMC');
                    return;
                }
            }
            
            // If all validations pass, show success message
            alert('SMC information saved successfully!');
            // In a real application, you would submit the form to server here
            // this.submit();
        });

        // Phone number formatting
        document.getElementById('smcpc').addEventListener('input', function(e) {
            let phone = this.value.replace(/\D/g, '');
            if (phone.length > 0 && !phone.startsWith('+')) {
                if (phone.length <= 10) {
                    phone = '+92' + phone;
                }
            }
            this.value = phone;
        });

        // Amount formatting
        document.getElementById('smcamount').addEventListener('input', function(e) {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
    </script>
</body>
</html>