<?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">

                <div class="profile-header">
                    <h2 class="uk-heading-divider">Session Pricing</h2>
                </div>

                <div class="profile-sub-header">
                    <h3>Select Price</h3>
                    <p>Set your rates for different session durations. All prices are in <strong>SAR</strong>.</p>
                </div>

                <!-- Error Message for Pricing Inputs -->
                <div id="pricingError" class="pricing-error-message" style="display: none; background: #CE4E50; color: white; padding: 0.8rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9rem;">
                    <span uk-icon="icon: warning; ratio: .8" style="margin-right: 0.5rem;"></span>
                    Please enter numbers only for pricing
                </div>

                <form id="sessionPricingForm">
                    <div class="pricing-grid uk-grid uk-grid-medium uk-child-width-1-1 uk-child-width-1-2@m uk-child-width-1-4@l" uk-grid>

                        <!-- 15 Minutes -->
                        <div>
                            <div class="pricing-card">
                                <div class="pricing-duration">
                                    <span uk-icon="icon: clock; ratio: .7" class="uk-icon duration-icon"></span>
                                    <span class="duration-text">15 Minutes</span>
                                </div>
                                <div class="pricing-input-container">
                                    <input type="number" class="pricing-input" id="price15" placeholder="150" min="0" step="1">
                                    <div class="pricing-label">SAR per session</div>
                                </div>
                            </div>
                        </div>

                        <!-- 30 Minutes -->
                        <div>
                            <div class="pricing-card">
                                <div class="pricing-duration">
                                    <span uk-icon="icon: clock; ratio: .7" class="uk-icon duration-icon"></span>
                                    <span class="duration-text">30 Minutes</span>
                                </div>
                                <div class="pricing-input-container">
                                    <input type="number" class="pricing-input" id="price30" placeholder="280" min="0" step="1">
                                    <div class="pricing-label">SAR per session</div>
                                </div>
                            </div>
                        </div>

                        <!-- 45 Minutes -->
                        <div>
                            <div class="pricing-card">
                                <div class="pricing-duration">
                                    <span uk-icon="icon: clock; ratio: .7" class="uk-icon duration-icon"></span>
                                    <span class="duration-text">45 Minutes</span>
                                </div>
                                <div class="pricing-input-container">
                                    <input type="number" class="pricing-input" id="price45" placeholder="400" min="0" step="1">
                                    <div class="pricing-label">SAR per session</div>
                                </div>
                            </div>
                        </div>

                        <!-- 60 Minutes -->
                        <div>
                            <div class="pricing-card">
                                <div class="pricing-duration">
                                    <span uk-icon="icon: clock; ratio: .7" class="uk-icon duration-icon"></span>
                                    <span class="duration-text">60 Minutes</span>
                                </div>
                                <div class="pricing-input-container">
                                    <input type="number" class="pricing-input" id="price60" placeholder="500" min="0" step="1">
                                    <div class="pricing-label">SAR per session</div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="uk-width-1-1">
                            <div class="pricing-submit">
                                <button type="submit" class="uk-button uk-button-primary">Save Changes</button>
                            </div>
                        </div>

                    </div>

                </form>

            </div>

        </div>

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

<script>
    // Pricing Input Validation
    function setupPricingValidation() {
        const pricingInputs = document.querySelectorAll('.pricing-input');
        const errorMessage = document.getElementById('pricingError');
        let errorTimeout;

        pricingInputs.forEach(input => {
            // Prevent non-numeric characters from being typed
            input.addEventListener('keypress', function(e) {
                // Allow: backspace, delete, tab, escape, enter
                if ([8, 9, 27, 13].indexOf(e.keyCode) !== -1 ||
                    // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
                    (e.keyCode === 65 && e.ctrlKey === true) ||
                    (e.keyCode === 67 && e.ctrlKey === true) ||
                    (e.keyCode === 86 && e.ctrlKey === true) ||
                    (e.keyCode === 88 && e.ctrlKey === true)) {
                    return;
                }

                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                    showPricingError();
                }
            });

            // Additional validation on input event (for pasted content)
            input.addEventListener('input', function(e) {
                const value = this.value;
                const numericValue = value.replace(/[^0-9]/g, '');

                if (value !== numericValue) {
                    this.value = numericValue;
                    showPricingError();
                }

                // Remove error styling when input becomes valid
                if (numericValue === value && value !== '') {
                    hidePricingError();
                }
            });

            // Clear error when input is focused and valid
            input.addEventListener('focus', function() {
                if (this.value && !isNaN(this.value) && this.value > 0) {
                    hidePricingError();
                }
            });

            // Validate minimum value
            input.addEventListener('blur', function() {
                if (this.value && (isNaN(this.value) || parseFloat(this.value) < 0)) {
                    this.value = '';
                    showPricingError();
                }
            });
        });

        function showPricingError() {
            // Add error styling to inputs
            pricingInputs.forEach(input => {
                input.style.borderColor = '#CE4E50';
                input.style.boxShadow = '0 0 0 2px rgba(240, 80, 110, 0.1)';
            });

            // Show error message
            errorMessage.style.display = 'block';

            // Clear previous timeout
            if (errorTimeout) {
                clearTimeout(errorTimeout);
            }

            // Hide error after 4 seconds
            errorTimeout = setTimeout(() => {
                hidePricingError();
            }, 4000);
        }

        function hidePricingError() {
            // Remove error styling
            pricingInputs.forEach(input => {
                input.style.borderColor = '';
                input.style.boxShadow = '';
            });

            // Hide error message
            errorMessage.style.display = 'none';

            // Clear timeout
            if (errorTimeout) {
                clearTimeout(errorTimeout);
            }
        }
    }

    // Initialize pricing validation
    setupPricingValidation();

    // Handle form submission with UIKit notification
    document.getElementById('sessionPricingForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // Validate all pricing inputs before submission
        const pricingInputs = document.querySelectorAll('.pricing-input');
        let hasValidPricing = false;
        let hasInvalidInput = false;

        pricingInputs.forEach(input => {
            const value = input.value.trim();
            if (value && (!isNaN(value) && parseFloat(value) > 0)) {
                hasValidPricing = true;
            }
            if (value && (isNaN(value) || parseFloat(value) < 0)) {
                hasInvalidInput = true;
            }
        });

        // Check if at least one pricing is set
        if (!hasValidPricing) {
            UIkit.notification({
                message: 'Please set at least one session price',
                status: 'warning',
                pos: 'top-center',
                timeout: 4000
            });
            return;
        }

        // Check for invalid inputs
        if (hasInvalidInput) {
            UIkit.notification({
                message: 'Please enter valid prices (numbers only)',
                status: 'danger',
                pos: 'top-center',
                timeout: 4000
            });
            return;
        }

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

        // Get pricing values
        const pricingData = {
            duration_15: document.getElementById('price15').value || null,
            duration_30: document.getElementById('price30').value || null,
            duration_45: document.getElementById('price45').value || null,
            duration_60: document.getElementById('price60').value || null
        };

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

            console.log('Pricing data:', pricingData);

            // Hide any error messages after successful save
            document.getElementById('pricingError').style.display = 'none';

            // Remove error styling from all inputs
            const allInputs = document.querySelectorAll('.pricing-input');
            allInputs.forEach(input => {
                input.style.borderColor = '';
                input.style.boxShadow = '';
            });

        }, 1500);
    });
</script>

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