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

<!-- Normal Sub Header -->
<?php include 'template-parts/sub-header-trainer.php'; ?>

<div class="uk-container">
    <div class="uk-grid uk-grid-medium" uk-grid>

        <!-- Sidebar Area -->
        <div class="uk-width-2-6@m uk-visible@m">
            <div class="sidebar-sticky" uk-sticky="offset: 20; bottom: true">
                <?php include 'trainer-sidebar.php'; ?>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="uk-width-expand@m">

            <div class="profile-container">

                <!-- Banking Information Header -->
                <div class="profile-header">
                    <h2 class="uk-heading-divider">Banking Information</h2>
                </div>

                <!-- Important Notice -->
                <div class="uk-alret uk-alert-primary uk-padding-small br-8 uk-margin-medium">
                    <h3 class="uk-margin-small-bottom uk-card-title">Important</h3>
                    <p class="uk-margin-remove">This information is used for payment processing. Ensure all details are accurate to avoid payment delays.</p>
                </div>

                <!-- Banking Form -->
                <form id="bankingForm">
                    <div class="uk-grid uk-grid-medium" uk-grid>

                        <!-- Bank Name -->
                        <div class="uk-width-1-2@s">
                            <div class="form-group">
                                <label class="form-label" for="bankName">Bank Name</label>
                                <select class="uk-select" id="bankName" required>
                                    <option value="Al Rajhi Bank" selected>Al Rajhi Bank</option>
                                    <option value="Saudi National Bank">Saudi National Bank</option>
                                    <option value="Riyad Bank">Riyad Bank</option>
                                    <option value="Banque Saudi Fransi">Banque Saudi Fransi</option>
                                    <option value="Arab National Bank">Arab National Bank</option>
                                    <option value="Samba Financial Group">Samba Financial Group</option>
                                    <option value="Alinma Bank">Alinma Bank</option>
                                    <option value="Bank AlJazira">Bank AlJazira</option>
                                    <option value="Saudi Investment Bank">Saudi Investment Bank</option>
                                    <option value="Bank Albilad">Bank Albilad</option>
                                </select>
                            </div>
                        </div>

                        <!-- Account Holder Name -->
                        <div class="uk-width-1-2@s">
                            <div class="form-group">
                                <label class="form-label" for="accountHolderName">Account Holder Name</label>
                                <input type="text" class="uk-input" id="accountHolderName" value="Noor Abdullah" required>
                            </div>
                        </div>

                        <!-- IBAN -->
                        <div class="uk-width-1-2@s">
                            <div class="form-group">
                                <label class="form-label" for="iban">IBAN</label>
                                <input type="text" class="uk-input" id="iban" value="SA44 2000 0001 2345 6789 1234" placeholder="SA44 2000 0001 2345 6789 1234" required>
                                <small class="uk-text-muted">24-character IBAN starting with SA</small>
                            </div>
                        </div>

                        <!-- Account Number -->
                        <div class="uk-width-1-2@s">
                            <div class="form-group">
                                <label class="form-label" for="accountNumber">Account Number</label>
                                <input type="text" class="uk-input" id="accountNumber" value="1234567890" required>
                            </div>
                        </div>

                    </div>
                </form>

                <!-- Payment Information Section -->
                <div class="uk-margin-medium-top">
                    <div class="uk-alret uk-alert-warning uk-padding-small br-8 uk-margin-medium">
                        <h3 class="uk-text-primary uk-card-title">Payment Information</h3>
                        <ul class="uk-list uk-margin-remove">
                            <li>Payments are processed weekly every Friday</li>
                            <li>Minimum withdrawal amount: 100 SAR</li>
                            <li>Processing time: 1-3 business days</li>
                            <li>You'll receive a confirmation email for each payment</li>
                        </ul>
                    </div>
                </div>

                <!-- Save Button -->
                <div class="uk-margin-medium-top">
                    <button type="submit" class="uk-button uk-button-primary" id="saveBankingBtn">
                        Save Changes
                    </button>
                </div>

            </div>

        </div>

    </div><!-- .uk-grid -->
</div><!-- .uk-container -->


<script>
    // Handle save button click with UIKit notification
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('saveBankingBtn').addEventListener('click', function(e) {
            e.preventDefault();

            // Show loading notification
            UIkit.notification({
                message: 'Saving your banking information...',
                status: 'primary',
                pos: 'top-center',
                timeout: 2000
            });

            // Get banking data
            const bankingData = {
                bankName: document.getElementById('bankName').value,
                accountHolderName: document.getElementById('accountHolderName').value,
                iban: document.getElementById('iban').value,
                accountNumber: document.getElementById('accountNumber').value
            };

            // Simulate API call (replace with your actual API endpoint)
            setTimeout(() => {
                UIkit.notification({
                    message: 'Banking information updated successfully!',
                    status: 'success',
                    pos: 'top-center',
                    timeout: 4000
                });

                console.log('Banking data:', bankingData);
            }, 1500);

        });
    });
</script>

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