```php
@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-edit me-2 text-blue-500"></i>Edit Plan
                        </h2>
                        <p class="text-gray-600 mt-2">Update the details and features of your pricing plan.</p>
                    </div>

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

                        <!-- 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', $plan->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', $plan->price) }}" required />
                                    </div>
                                    @error('price')
                                        <div class="error-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="pricing-preview mt-2" id="price-preview">${{ number_format($plan->price, 2) }} / 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', $plan->billing_cycle) == 'monthly' ? 'selected' : '' }}>
                                            Monthly</option>
                                        <option value="quarterly" {{ old('billing_cycle', $plan->billing_cycle) == 'quarterly' ? 'selected' : '' }}>
                                            Quarterly</option>
                                        <option value="yearly" {{ old('billing_cycle', $plan->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', $plan->is_active) ? 'checked' : '' }}>
                                            <span class="toggle-slider"></span>
                                        </label>
                                        <span class="toggle-label" id="status-label">{{ $plan->is_active ? 'Active' : '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', $plan->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', $plan->max_monitors) }}" 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', $plan->max_full_page_monitors) }}" 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', $plan->max_keyword_monitors) }}" 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', $plan->max_element_monitors) }}" 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', $plan->max_server_monitors) }}" 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', $plan->max_ssl_monitors) }}" 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', $plan->max_email_health_monitors) }}" 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', $plan->monitoring_frequency_mins) }}" 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', $plan->allow_broken_link_check) ? 'checked' : '' }}>
                                            <span class="toggle-slider"></span>
                                        </label>
                                        <span class="toggle-label feature-label">{{ $plan->allow_broken_link_check ? 'Included' : '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>


                        <!-- Preview panel -->
                        <div class="preview-panel" id="preview-panel">
                            <div class="text-center mb-3">
                                <h4>Plan Card Preview</h4>
                                <p class="text-muted small">This is how your plan will appear to customers</p>
                            </div>

                            <div class="plan-card-preview">
                                <div class="plan-card-header">
                                    <h3 class="plan-card-title" id="preview-title">{{ $plan->name }}</h3>
                                    <div class="plan-card-price" id="preview-price">${{ number_format($plan->price, 2) }}</div>
                                    <div class="plan-card-billing" id="preview-billing">per {{ $plan->billing_cycle }}</div>
                                </div>
                                <div class="plan-card-body">
                                    <ul class="plan-card-features">
                                        <li><i class="fas fa-check-circle"></i> <span id="preview-monitors">{{ $plan->max_monitors }}</span> Total Monitors</li>
                                        <li><i class="fas fa-check-circle"></i> <span id="preview-interval">{{ $plan->monitoring_frequency_mins }}</span> min Monitoring Interval</li>
                                        <li><i class="fas fa-check-circle"></i> <span id="preview-feature1">Broken Link Checking{{ $plan->allow_broken_link_check ? '' : ' (Not Included)' }}</span></li>
                                        <li><i class="fas fa-check-circle"></i> <span id="preview-feature2">AI Features{{ $plan->allow_ai_features ? '' : ' (Not Included)' }}</span></li>
                                    </ul>
                                </div>
                                <div class="plan-card-footer">
                                    <span id="preview-status" class="badge {{ $plan->is_active ? 'bg-success' : 'bg-secondary' }}">{{ $plan->is_active ? 'Active' : 'Inactive' }}</span>
                                </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>Update 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
```