@extends('layouts.admin')

@section('content')
    <!-- Bootstrap Links -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Custom CSS -->
    <style>
        .plan-form-container {
            background-color: #f8fafc;
            padding: 30px 0;
        }
        
        .plan-form-card {
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: none;
            overflow: hidden;
        }
        
        .section-header {
            padding: 15px 20px;
            background: linear-gradient(to right, #f1f5f9, #ffffff);
            border-left: 4px solid #3b82f6;
            margin-bottom: 25px;
            border-radius: 6px;
        }
        
        .section-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 10px;
            color: #3b82f6;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            font-weight: 500;
            color: #334155;
            margin-bottom: 8px;
            display: block;
        }
        
        .form-control {
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            padding: 10px 15px;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
        }
        
        .form-select {
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            padding: 10px 15px;
            transition: all 0.3s ease;
        }
        
        .form-select:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
        }
        
        .form-check-input {
            width: 18px;
            height: 18px;
            margin-top: 0.25rem;
        }
        
        .form-check-input:checked {
            background-color: #3b82f6;
            border-color: #3b82f6;
        }
        
        .form-check-label {
            margin-left: 8px;
            font-weight: 400;
        }
        
        .form-text {
            color: #64748b;
            font-size: 0.85rem;
            margin-top: 5px;
        }
        
        .form-buttons {
            padding-top: 20px;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }
        
        .btn-cancel {
            background-color: #f1f5f9;
            color: #334155;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-cancel:hover {
            background-color: #e2e8f0;
        }
        
        .btn-submit {
            background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 25px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-submit:hover {
            background: linear-gradient(135deg, #4338ca 0%, #2563eb 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        .form-divider {
            height: 1px;
            background-color: #e2e8f0;
            margin: 30px 0;
        }
        
        .number-input-group {
            position: relative;
        }
        
        .number-input-group .form-control {
            padding-right: 80px;
        }
        
        .number-controls {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 5px;
        }
        
        .number-control-btn {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            cursor: pointer;
            color: #64748b;
            transition: all 0.2s ease;
        }
        
        .number-control-btn:hover {
            background-color: #e2e8f0;
            color: #334155;
        }
        
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e2e8f0;
            transition: .4s;
            border-radius: 24px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .toggle-slider {
            background-color: #3b82f6;
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }
        
        .toggle-label {
            font-weight: 500;
            margin-left: 60px;
            color: #334155;
        }
        
        .tooltip-icon {
            color: #94a3b8;
            cursor: pointer;
            margin-left: 5px;
            font-size: 0.9rem;
        }
        
        .error-feedback {
            color: #dc2626;
            font-size: 0.85rem;
            margin-top: 5px;
        }
        
        .textarea-counter {
            font-size: 0.8rem;
            color: #64748b;
            text-align: right;
            margin-top: 5px;
        }
        
        .pricing-preview {
            padding: 15px;
            background-color: #f8fafc;
            border-radius: 8px;
            margin-top: 10px;
            font-weight: 600;
            color: #0f172a;
            text-align: center;
            border: 1px dashed #cbd5e1;
        }
        
        /* Card display toggle styles */
        .card-view-toggle {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .preview-panel {
            background-color: #f8fafc;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #e2e8f0;
            margin-top: 20px;
            display: none;
        }
        
        .plan-card-preview {
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            background-color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            max-width: 300px;
            margin: 0 auto;
        }
        
        .plan-card-header {
            background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .plan-card-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin: 0;
        }
        
        .plan-card-price {
            font-size: 2.2rem;
            font-weight: 700;
            margin: 15px 0 5px;
        }
        
        .plan-card-billing {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        .plan-card-body {
            padding: 20px;
        }
        
        .plan-card-features {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .plan-card-features li {
            padding: 8px 0;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f1f5f9;
        }
        
        .plan-card-features li i {
            color: #3b82f6;
            margin-right: 10px;
        }
        
        .plan-card-footer {
            padding: 15px 20px;
            background-color: #f8fafc;
            text-align: center;
        }
    </style>

    <div class="plan-form-container py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="plan-form-card bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">
                            <i class="fas fa-plus-circle me-2 text-blue-500"></i>Create New Plan
                        </h2>
                        <p class="text-gray-600 mt-2">Define the details and features of your new pricing plan.</p>
                    </div>

                    <form method="POST" action="{{ route('admin.plans.store') }}" id="plan-form">
                        @csrf

                        <!-- Basic Information -->
                        <div class="section-header">
                            <h3 class="section-title">
                                <i class="fas fa-info-circle"></i>Basic Information
                            </h3>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="name" class="form-label">Plan Name <span class="text-danger">*</span></label>
                                    <input id="name" name="name" type="text" class="form-control"
                                        value="{{ old('name') }}" required autofocus />
                                    @error('name')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text">Choose a clear and descriptive name for your plan.</small>
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="price" class="form-label">Price ($) <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
                                        <input id="price" name="price" type="number" step="0.01" min="0"
                                            class="form-control" value="{{ old('price') }}" required />
                                    </div>
                                    @error('price')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="pricing-preview mt-2" id="price-preview">$0.00 / month</div>
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="billing_cycle" class="form-label">Billing Cycle <span class="text-danger">*</span></label>
                                    <select id="billing_cycle" name="billing_cycle" class="form-select">
                                        <option value="monthly" {{ old('billing_cycle') == 'monthly' ? 'selected' : '' }}>
                                            Monthly</option>
                                        <option value="quarterly" {{ old('billing_cycle') == 'quarterly' ? 'selected' : '' }}>
                                            Quarterly</option>
                                        <option value="yearly" {{ old('billing_cycle') == 'yearly' ? 'selected' : '' }}>
                                            Yearly</option>
                                    </select>
                                    @error('billing_cycle')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label class="form-label d-block">Status</label>
                                    <div class="form-check form-switch">
                                        <label class="toggle-switch">
                                            <input type="checkbox" name="is_active" value="1" {{ old('is_active') ? 'checked' : '' }}>
                                            <span class="toggle-slider"></span>
                                        </label>
                                        <span class="toggle-label" id="status-label">Inactive</span>
                                    </div>
                                    @error('is_active')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text">Enable this plan to make it available for new subscriptions.</small>
                                </div>
                            </div>

                            <div class="col-12 mb-4">
                                <div class="form-group">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea id="description" name="description" rows="3" class="form-control"
                                        maxlength="500">{{ old('description') }}</textarea>
                                    <div class="textarea-counter"><span id="char-count">0</span>/500 characters</div>
                                    @error('description')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text">Provide a brief description of what this plan offers.</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-divider"></div>

                        <!-- Monitor Limits -->
                        <div class="section-header">
                            <h3 class="section-title">
                                <i class="fas fa-chart-line"></i>Monitor Limits
                            </h3>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="max_monitors" class="form-label">Maximum Total Monitors <span class="text-danger">*</span></label>
                                    <div class="number-input-group">
                                        <input id="max_monitors" name="max_monitors" type="number" min="1"
                                            class="form-control" value="{{ old('max_monitors', 5) }}" required />
                                        <div class="number-controls">
                                            <div class="number-control-btn decrease-btn" data-input="max_monitors"><i class="fas fa-minus"></i></div>
                                            <div class="number-control-btn increase-btn" data-input="max_monitors"><i class="fas fa-plus"></i></div>
                                        </div>
                                    </div>
                                    @error('max_monitors')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="max_full_page_monitors" class="form-label">Maximum Full Page Monitors <span class="text-danger">*</span></label>
                                    <div class="number-input-group">
                                        <input id="max_full_page_monitors" name="max_full_page_monitors" type="number" min="0"
                                            class="form-control" value="{{ old('max_full_page_monitors', 5) }}" required />
                                        <div class="number-controls">
                                            <div class="number-control-btn decrease-btn" data-input="max_full_page_monitors"><i class="fas fa-minus"></i></div>
                                            <div class="number-control-btn increase-btn" data-input="max_full_page_monitors"><i class="fas fa-plus"></i></div>
                                        </div>
                                    </div>
                                    @error('max_full_page_monitors')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="max_keyword_monitors" class="form-label">Maximum Keyword Monitors <span class="text-danger">*</span></label>
                                    <div class="number-input-group">
                                        <input id="max_keyword_monitors" name="max_keyword_monitors" type="number" min="0"
                                            class="form-control" value="{{ old('max_keyword_monitors', 3) }}" required />
                                        <div class="number-controls">
                                            <div class="number-control-btn decrease-btn" data-input="max_keyword_monitors"><i class="fas fa-minus"></i></div>
                                            <div class="number-control-btn increase-btn" data-input="max_keyword_monitors"><i class="fas fa-plus"></i></div>
                                        </div>
                                    </div>
                                    @error('max_keyword_monitors')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="max_element_monitors" class="form-label">Maximum Element Monitors <span class="text-danger">*</span></label>
                                    <div class="number-input-group">
                                        <input id="max_element_monitors" name="max_element_monitors" type="number" min="0"
                                            class="form-control" value="{{ old('max_element_monitors', 3) }}" required />
                                        <div class="number-controls">
                                            <div class="number-control-btn decrease-btn" data-input="max_element_monitors"><i class="fas fa-minus"></i></div>
                                            <div class="number-control-btn increase-btn" data-input="max_element_monitors"><i class="fas fa-plus"></i></div>
                                        </div>
                                    </div>
                                    @error('max_element_monitors')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="max_server_monitors" class="form-label">Maximum Server Monitors <span class="text-danger">*</span></label>
                                    <div class="number-input-group">
                                        <input id="max_server_monitors" name="max_server_monitors" type="number" min="0"
                                            class="form-control" value="{{ old('max_server_monitors', 3) }}" required />
                                        <div class="number-controls">
                                            <div class="number-control-btn decrease-btn" data-input="max_server_monitors"><i class="fas fa-minus"></i></div>
                                            <div class="number-control-btn increase-btn" data-input="max_server_monitors"><i class="fas fa-plus"></i></div>
                                        </div>
                                    </div>
                                    @error('max_server_monitors')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="max_ssl_monitors" class="form-label">Maximum SSL Monitors <span class="text-danger">*</span></label>
                                    <div class="number-input-group">
                                        <input id="max_ssl_monitors" name="max_ssl_monitors" type="number" min="0"
                                            class="form-control" value="{{ old('max_ssl_monitors', 3) }}" required />
                                        <div class="number-controls">
                                            <div class="number-control-btn decrease-btn" data-input="max_ssl_monitors"><i class="fas fa-minus"></i></div>
                                            <div class="number-control-btn increase-btn" data-input="max_ssl_monitors"><i class="fas fa-plus"></i></div>
                                        </div>
                                    </div>
                                    @error('max_ssl_monitors')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="max_email_health_monitors" class="form-label">Maximum Email Health Monitors <span class="text-danger">*</span></label>
                                    <div class="number-input-group">
                                        <input id="max_email_health_monitors" name="max_email_health_monitors" type="number" min="0"
                                            class="form-control" value="{{ old('max_email_health_monitors', 1) }}" required />
                                        <div class="number-controls">
                                            <div class="number-control-btn decrease-btn" data-input="max_email_health_monitors"><i class="fas fa-minus"></i></div>
                                            <div class="number-control-btn increase-btn" data-input="max_email_health_monitors"><i class="fas fa-plus"></i></div>
                                        </div>
                                    </div>
                                    @error('max_email_health_monitors')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label for="monitoring_frequency_mins" class="form-label">Minimum Monitoring Interval (minutes) <span class="text-danger">*</span></label>
                                    <div class="number-input-group">
                                        <input id="monitoring_frequency_mins" name="monitoring_frequency_mins" type="number" min="1"
                                            class="form-control" value="{{ old('monitoring_frequency_mins', 60) }}" required />
                                        <div class="number-controls">
                                            <div class="number-control-btn decrease-btn" data-input="monitoring_frequency_mins"><i class="fas fa-minus"></i></div>
                                            <div class="number-control-btn increase-btn" data-input="monitoring_frequency_mins"><i class="fas fa-plus"></i></div>
                                        </div>
                                    </div>
                                    @error('monitoring_frequency_mins')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text">How often monitors will check for changes (in minutes).</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-divider"></div>

                        <!-- Features -->
                        <div class="section-header">
                            <h3 class="section-title">
                                <i class="fas fa-stars"></i>Additional Features
                            </h3>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="form-group">
                                    <label class="form-label d-block">Broken Link Checking</label>
                                    <div class="form-check form-switch">
                                        <label class="toggle-switch">
                                            <input type="checkbox" name="allow_broken_link_check" value="1" 
                                                {{ old('allow_broken_link_check') ? 'checked' : '' }}>
                                            <span class="toggle-slider"></span>
                                        </label>
                                        <span class="toggle-label feature-label">Not Included</span>
                                    </div>
                                    @error('allow_broken_link_check')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text">Allow users to scan and detect broken links on their websites.</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-buttons mt-5">
                            <button type="button" class="btn btn-cancel" onclick="window.history.back()">
                                <i class="fas fa-times me-2"></i>Cancel
                            </button>
                            <button type="submit" class="btn btn-submit">
                                <i class="fas fa-save me-2"></i>Create Plan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

<!-- jQuery Script -->
<script>
    $(document).ready(function(){
        // Character counter for description
        $('#description').on('input', function() {
            var characterCount = $(this).val().length;
            $('#char-count').text(characterCount);
            
            if (characterCount > 500) {
                $('#char-count').addClass('text-danger');
            } else {
                $('#char-count').removeClass('text-danger');
            }
        });
        
        // Trigger the input event to initialize character count
        $('#description').trigger('input');
        
        // Number input controls
        $('.increase-btn').on('click', function() {
            var inputId = $(this).data('input');
            var $input = $('#' + inputId);
            var value = parseInt($input.val());
            
            $input.val(value + 1).trigger('change');
        });
        
        $('.decrease-btn').on('click', function() {
            var inputId = $(this).data('input');
            var $input = $('#' + inputId);
            var value = parseInt($input.val());
            
            if (value > 0) {
                $input.val(value - 1).trigger('change');
            }
        });
        
        // Prevent negative numbers and ensure minimum value
        $('input[type="number"]').on('input', function() {
            var min = parseInt($(this).attr('min'));
            var value = parseInt($(this).val());
            
            if (isNaN(value) || value < min) {
                $(this).val(min);
            }
        });
        
        // Status toggle label update
        $('input[name="is_active"]').on('change', function() {
            $('#status-label').text($(this).is(':checked') ? 'Active' : 'Inactive');
            updatePreview();
        });
        
        // Feature toggle label update
        $('input[name="allow_broken_link_check"]').on('change', function() {
            $(this).closest('.form-group').find('.feature-label')
                .text($(this).is(':checked') ? 'Included' : 'Not Included');
            updatePreview();
        });
        
        $('input[name="allow_ai_features"]').on('change', function() {
            $(this).closest('.form-group').find('.feature-label')
                .text($(this).is(':checked') ? 'Included' : 'Not Included');
            updatePreview();
        });
        
        // Initialize toggle labels
        $('input[name="is_active"]').trigger('change');
        $('input[name="allow_broken_link_check"]').trigger('change');
        $('input[name="allow_ai_features"]').trigger('change');
        
        // Price preview update
        function updatePricePreview() {
            var price = parseFloat($('#price').val()) || 0;
            var billingCycle = $('#billing_cycle').val();
            var billingText = '';
            
            switch(billingCycle) {
                case 'monthly':
                    billingText = 'month';
                    break;
                case 'quarterly':
                    billingText = 'quarter';
                    break;
                case 'yearly':
                    billingText = 'year';
                    break;
            }
            
            $('#price-preview').text('$' + price.toFixed(2) + ' / ' + billingText);
        }
        
        $('#price, #billing_cycle').on('input change', updatePricePreview);
        updatePricePreview();
        
        // Preview panel toggle
        $('#preview-button').on('click', function() {
            $('#preview-panel').slideToggle(300);
            updatePreview();
        });
        
        // Update plan card preview
        function updatePreview() {
            var name = $('#name').val() || 'Basic Plan';
            var price = parseFloat($('#price').val()) || 0;
            var billingCycle = $('#billing_cycle').val();
            var maxMonitors = parseInt($('#max_monitors').val()) || 5;
            var monitoringFrequency = parseInt($('#monitoring_frequency_mins').val()) || 60;
            var isActive = $('input[name="is_active"]').is(':checked');
            var brokenLinkCheck = $('input[name="allow_broken_link_check"]').is(':checked');
            var aiFeatures = $('input[name="allow_ai_features"]').is(':checked');
            
            $('#preview-title').text(name);
            $('#preview-price').text('$' + price.toFixed(2));
            $('#preview-billing').text('per ' + (billingCycle === 'monthly' ? 'month' : 
                                              billingCycle === 'quarterly' ? 'quarter' : 'year'));
            $('#preview-monitors').text(maxMonitors);
            $('#preview-interval').text(monitoringFrequency);
            $('#preview-feature1').text('Broken Link Checking' + (brokenLinkCheck ? '' : ' (Not Included)'));
            $('#preview-feature2').text('AI Features' + (aiFeatures ? '' : ' (Not Included)'));
            $('#preview-status').text(isActive ? 'Active' : 'Inactive')
                .removeClass('bg-success bg-secondary')
                .addClass(isActive ? 'bg-success' : 'bg-secondary');
        }
        
        // Update preview on input change
        $('#name, #price, #billing_cycle, #max_monitors, #monitoring_frequency_mins').on('input change', updatePreview);
        
        // Initialize preview
        updatePreview();
        
        // Form validation before submission
        $('#plan-form').on('submit', function(e) {
            var isValid = true;
            var $requiredFields = $(this).find('[required]');
            
            $requiredFields.each(function() {
                if (!$(this).val()) {
                    isValid = false;
                    $(this).addClass('is-invalid');
                    $(this).siblings('.error-feedback').text('This field is required.');
                } else {
                    $(this).removeClass('is-invalid');
                    $(this).siblings('.error-feedback').text('');
                }
            });
            
            // Ensure max_full_page_monitors <= max_monitors
            var maxMonitors = parseInt($('#max_monitors').val()) || 0;
            var maxFullPageMonitors = parseInt($('#max_full_page_monitors').val()) || 0;
            
            if (maxFullPageMonitors > maxMonitors) {
                isValid = false;
                $('#max_full_page_monitors').addClass('is-invalid');
                $('#max_full_page_monitors').siblings('.error-feedback')
                    .text('Full page monitors cannot exceed total monitors.');
            }
            
            if (!isValid) {
                e.preventDefault();
                $('html, body').animate({
                    scrollTop: $(this).find('.is-invalid').first().offset().top - 100
                }, 300);
            }
        });
        
        // Remove invalid class on input
        $('input, select, textarea').on('input change', function() {
            if ($(this).hasClass('is-invalid') && $(this).val()) {
                $(this).removeClass('is-invalid');
                $(this).siblings('.error-feedback').text('');
            }
        });
    });
</script>

@endsection