@php
    $isEdit = isset($agreement) && $agreement->exists;
    $tenant_id = session('tenant_id');
@endphp

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                @if(session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <form class="form-horizontal custom-validation" 
                      action="{{ $isEdit ? route('agreements.update', $agreement->id) : route('agreements.store') }}" 
                      method="POST" 
                      id="agreement-form"
                      enctype="multipart/form-data">
                    @csrf
                    @if($isEdit)
                        @method('PATCH')
                    @endif

                    @if($tenant_id)
                        <input type="hidden" name="tenant_id" value="{{ $tenant_id }}">
                    @endif

                    <div class="row">
                        <div class="col-md-8">
                            <!-- Agreement Details Section -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">Agreement Details</h5>
                                </div>
                                <div class="card-body">
                                    @if(!$tenant_id)
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="tenant_id" class="form-label">Tenant <span class="text-danger">*</span></label>
                                                    <select class="form-select select2 @error('tenant_id') is-invalid @enderror" id="tenant_id" name="tenant_id" required>
                                                        <option value="">Select Tenant</option>
                                                        @foreach($tenant_list as $id => $name)
                                                            <option value="{{ $id }}" {{ old('tenant_id', $isEdit ? $agreement->tenant_id : '') == $id ? 'selected' : '' }}>
                                                                {{ $name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('tenant_id')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <div class="form-text">Select the tenant for which this agreement applies</div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Agreement Name <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                                       id="name" name="name" 
                                                       value="{{ old('name', $isEdit ? $agreement->name : '') }}" required>
                                                @error('name')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="state" class="form-label">State <span class="text-danger">*</span></label>
                                                <select class="form-select select2 @error('state') is-invalid @enderror" id="state" name="state" required>
                                                    <option value="">Select State</option>
                                                    @foreach($states as $key => $value)
                                                        <option value="{{ $key }}" {{ old('state', $isEdit ? $agreement->state : '') == $key ? 'selected' : '' }}>
                                                            {{ $value }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('state')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="form-text">Select the state where this agreement will be used</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="master_language_id" class="form-label">Language <span class="text-danger">*</span></label>
                                                <select class="form-select select2 @error('master_language_id') is-invalid @enderror" 
                                                        id="master_language_id" 
                                                        name="master_language_id" required>
                                                    <option value="">Select Language</option>
                                                    @foreach($languages ?? [] as $language)
                                                        <option value="{{ $language->id }}" 
                                                            {{ old('master_language_id', $isEdit ? $agreement->master_language_id : '') == $language->id ? 'selected' : '' }}>
                                                            {{ $language->name }}
                                                            @if($language->native_name && $language->native_name !== $language->name)
                                                                ({{ $language->native_name }})
                                                            @endif
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <div class="form-text">Select the language for this agreement</div>
                                                @error('master_language_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="service_id" class="form-label">Select Service <span class="text-danger">*</span></label>
                                                <select class="form-select select2 @error('service_id') is-invalid @enderror" id="service_id" name="service_id" required {{ !$tenant_id ? 'disabled' : '' }}>
                                                    <option value="">{{ !$tenant_id ? 'Select Tenant First' : 'Select Service' }}</option>
                                                    @if($tenant_id)
                                                        @foreach($services as $service)
                                                            <option value="{{ $service->id }}" {{ old('service_id', $isEdit ? $agreement->service_id : '') == $service->id ? 'selected' : '' }}>
                                                                {{ $service->service_name }}
                                                            </option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                                @error('service_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="form-text">Select the service type for which this agreement applies</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                                                <textarea class="form-control richtext" 
                                                          id="description" name="description_html" rows="3">{{ old('description_html', $isEdit ? $agreement->description_html : '') }}</textarea>
                                                @error('description_html')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="inspector_sign_required" 
                                                           name="inspector_sign_required" value="1" {{ old('inspector_sign_required', $isEdit ? $agreement->inspector_sign_required : false) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="inspector_sign_required">
                                                        Inspector Sign Required?
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="is_change_order" 
                                                           name="is_change_order" value="1" {{ old('is_change_order', $isEdit ? $agreement->is_change_order : false) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="is_change_order">
                                                        Is This Change Order?
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle"></i>
                                        <strong>Tip:</strong> Use $VARIABLES$ to make your agreements dynamic. Read more about $VARIABLES$ in HELP section.
                                    </div>
                                </div>
                            </div>

            <!-- Rich Text Editor Section -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Agreement Content <span class="text-danger">*</span></h5>
                </div>
                <div class="card-body">
                    <!-- Variable Dropdowns for Agreement Content -->
                    <div class="mb-3">
                        <div class="d-flex align-items-center gap-2">
                            <select class="form-select" id="content_variable_dropdown" style="width: auto;">
                                <option value="">Insert Variable</option>
                                <option value="@{{InspectorName}}">Inspector Name</option>
                                <option value="@{{InspectionDateTime}}">Inspection Date Time</option>
                                <option value="@{{ClientName}}">Client Name</option>
                                <option value="@{{TODAYS_DATE}}">Today's Date</option>
                                <option value="@{{THIS_YEAR}}">This Year</option>
                                <option value="@{{INSPECTION_DATE}}">Inspection Date</option>
                                <option value="@{{INSPECTION_START_TIME}}">Inspection Start Time</option>
                                <option value="@{{INSPECTION_END_TIME}}">Inspection End Time</option>
                                <option value="@{{INSPECTION_FULL_TIME}}">Inspection Full Time</option>
                                <option value="@{{PROPERTY_FULL_ADDRESS}}">Property Full Address</option>
                                <option value="@{{PROPERTY_ADDRESS_LINE1}}">Property Address Line 1</option>
                                <option value="@{{PROPERTY_ADDRESS_LINE2}}">Property Address Line 2</option>
                                <option value="@{{PROPERTY_CITY}}">Property City</option>
                                <option value="@{{PROPERTY_STATE}}">Property State</option>
                                <option value="@{{PROPERTY_ZIP}}">Property ZIP</option>
                                <option value="@{{PROPERTY_COUNTRY}}">Property Country</option>
                                <option value="@{{INSPECTION_ID}}">Inspection ID</option>
                                <option value="@{{YEAR_BUILT}}">Year Built</option>
                                <option value="@{{PROPERTY_AGE}}">Property Age</option>
                                <option value="@{{SQUARE_FOOTAGE}}">Square Footage</option>
                                <option value="@{{INSPECTION_SUBTOTAL}}">Inspection Subtotal</option>
                                <option value="@{{INSPECTION_TAX}}">Inspection Tax</option>
                                <option value="@{{INSPECTION_TOTAL}}">Inspection Total</option>
                                <option value="@{{CUSTOMER_FULLNAME}}">Customer Full Name</option>
                                <option value="@{{CUSTOMER_FIRSTNAME}}">Customer First Name</option>
                                <option value="@{{CUSTOMER_LASTNAME}}">Customer Last Name</option>
                                <option value="@{{CUSTOMER_EMAIL}}">Customer Email</option>
                                <option value="@{{CUSTOMER_PHONE}}">Customer Phone</option>
                                <option value="@{{CUSTOMER_FULL_ADDRESS}}">Customer Full Address</option>
                                <option value="@{{CUSTOMER_ADDRESS_STREET}}">Customer Address Street</option>
                                <option value="@{{CUSTOMER_ADDRESS_STATE}}">Customer Address State</option>
                                <option value="@{{CUSTOMER_ADDRESS_CITY}}">Customer Address City</option>
                                <option value="@{{CUSTOMER_USERNAME}}">Customer Username</option>
                                <option value="@{{COMPANY_NAME}}">Company Name</option>
                                <option value="@{{AGENT_FULLNAME}}">Agent Full Name</option>
                            </select>
                            <select class="form-select" id="content_question_dropdown" style="width: auto;">
                                <option value="">Insert Question</option>
                                <option value="@{{ENTERED_BY}}">Entered by:</option>
                                <option value="@{{INSPECTION_TYPE}}">Inspection type:</option>
                                <option value="@{{HOW_DID_YOU_HEAR_ABOUT_US}}">How did you hear about us?</option>
                                <option value="@{{TYPE_OF_FOUNDATION}}">Type of foundation:</option>
                                <option value="@{{CLIENT_PREFERRED_LANGUAGE}}">Client's preferred language:</option>
                                <option value="@{{IS_HOME_OCCUPIED}}">Is this home occupied?</option>
                                <option value="@{{ARE_UTILITIES_ON}}">Are the utilities on?</option>
                            </select>
                        </div>
                    </div>
                    
                    <textarea id="content-editor" name="content_description_html" class="form-control richtext" rows="15">{{ old('content_description_html', $isEdit ? (($agreement->latestVersion) ? $agreement->latestVersion->description_html : '') : '') }}</textarea>
                    @error('content_description_html')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>                            <!-- Version History Section (Edit Mode Only) -->
                            @if($isEdit && $agreement->versions->count() > 0)
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h5 class="mb-0">Version History</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Version</th>
                                                    <th>Modified By</th>
                                                    <th>Date</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($agreement->versions->sortByDesc('version_no') as $version)
                                                <tr>
                                                    <td><span class="badge bg-secondary">v{{ $version->version_no }}</span></td>
                                                    <td>{{ $version->editor ? $version->editor->name : 'Unknown' }}</td>
                                                    <td>{{ \App\Helpers\Helper::showdate($version->created_at) }}</td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-outline-info view-version" 
                                                                data-version="{{ $version->id }}" data-content="{{ $version->description_html }}">
                                                            <i class="fas fa-eye"></i> View
                                                        </button>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>

                        <div class="col-md-4">
                            <!-- Banner Image Section -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">Banner Image</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="banner_image" class="form-label">Choose banner image for agreement</label>
                                        <div class="banner-upload-area @error('banner_image') is-invalid @enderror" id="banner-upload-area">
                                            @if($isEdit && $agreement->banner_pic_image)
                                                <img id="banner-preview" class="banner-preview" src="{{ $agreement->banner_pic_image['original'] }}" alt="Current Banner">
                                                <div class="banner-placeholder" style="display: none;">
                                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted"></i>
                                                    <p class="mt-2 mb-0">Browse</p>
                                                    <small class="text-muted">Click to upload new banner image</small>
                                                </div>
                                            @else
                                                <div class="banner-placeholder">
                                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted"></i>
                                                    <p class="mt-2 mb-0">Browse</p>
                                                    <small class="text-muted">Click to upload banner image</small>
                                                </div>
                                                <img id="banner-preview" class="banner-preview" style="display: none;" alt="Banner Preview">
                                            @endif
                                            <!-- File input positioned over upload area to prevent event conflicts -->
                                            <input type="file" id="banner_image" name="banner_image" accept="image/*" 
                                                   style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10;">
                                        </div>
                                        @error('banner_image')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">
                                            <strong>Required banner image size:</strong> Minimum 1920px W × 250px H (larger dimensions allowed)
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-end mt-3">
                        <a href="{{ route('agreements.index') }}" class="btn btn-dark waves-effect me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">{{ $isEdit ? 'Update' : 'Add' }} Agreement</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Version View Modal (Edit Mode Only) -->
@if($isEdit)
<div class="modal fade" id="versionModal" tabindex="-1" aria-labelledby="versionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="versionModalLabel">Version Content</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="version-content"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endif

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Select2 for better dropdown experience
    if (typeof $.fn.select2 !== 'undefined') {
        $('#tenant_id').select2({
            placeholder: 'Select Tenant',
            allowClear: false
        });

        $('#state').select2({
            placeholder: 'Select State',
            allowClear: false
        });

        $('#service_id').select2({
            placeholder: 'Select Service',
            allowClear: false
        });
    }

    // Initialize TinyMCE
    tinymce.init({
        selector: 'textarea.richtext',
        menubar: false,
        height: 400,
        plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'help', 'wordcount'
        ],
        toolbar1: 'undo redo | styles | fontfamily fontsize | forecolor backcolor | removeformat',
        toolbar2: 'alignleft aligncenter alignright alignjustify | bullist numlist | blockquote | link image | table | code fullscreen help',
        toolbar_mode: 'wrap',
        
        // Add font family options
        font_family_formats: 'Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats',
        
        // Add font size options
        fontsize_formats: '8pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 30pt 32pt 34pt 36pt 38pt 40pt 42pt 44pt 46pt 48pt 50pt 52pt 54pt 56pt 58pt 60pt 62pt 64pt 66pt 68pt 70pt 72pt',
        
        // Add style formats (replaces formatselect)
        style_formats: [
            {
                title: 'Headings', items: [
                    {title: 'Heading 1', format: 'h1'},
                    {title: 'Heading 2', format: 'h2'},
                    {title: 'Heading 3', format: 'h3'},
                    {title: 'Heading 4', format: 'h4'},
                    {title: 'Heading 5', format: 'h5'},
                    {title: 'Heading 6', format: 'h6'}
                ]
            },
            {
                title: 'Blocks', items: [
                    {title: 'Paragraph', format: 'p'},
                    {title: 'Blockquote', format: 'blockquote'},
                    {title: 'Div', format: 'div'},
                    {title: 'Pre', format: 'pre'}
                ]
            },
            {
                title: 'Inline', items: [
                    {title: 'Bold', inline: 'strong'},
                    {title: 'Italic', inline: 'em'},
                    {title: 'Underline', inline: 'u'},
                    {title: 'Strikethrough', inline: 'del'},
                    {title: 'Superscript', inline: 'sup'},
                    {title: 'Subscript', inline: 'sub'},
                    {title: 'Code', inline: 'code'}
                ]
            }
        ],
        
        content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; }',
        setup: function(editor) {
            // Store editor instance for later use
            if (editor.id === 'content-editor') {
                window.contentEditor = editor;
            }
            
            // Add custom buttons for variables and questions
            editor.ui.registry.addButton('insertvariable', {
                text: 'Insert Variable',
                onAction: function() {
                    editor.insertContent('$VARIABLE$');
                }
            });
            
            editor.ui.registry.addButton('insertquestion', {
                text: 'Insert Question',
                onAction: function() {
                    editor.insertContent('$QUESTION$');
                }
            });
        }
    });

    // Handle variable dropdown for content editor
    $('#content_variable_dropdown').on('change', function() {
        const selectedVariable = $(this).val();
        if (selectedVariable && window.contentEditor) {
            // Insert variable at cursor position in TinyMCE editor
            window.contentEditor.insertContent(selectedVariable);
            // Reset dropdown
            $(this).val('');
        }
    });

    // Handle question dropdown for content editor
    $('#content_question_dropdown').on('change', function() {
        const selectedQuestion = $(this).val();
        if (selectedQuestion && window.contentEditor) {
            // Insert question at cursor position in TinyMCE editor
            window.contentEditor.insertContent(selectedQuestion);
            // Reset dropdown
            $(this).val('');
        }
    });

    // Banner image upload handling - File input is now directly clickable
    // No click handler needed - file input covers the entire upload area
    console.log('Image upload area ready - file input is directly clickable');

    // Tenant-dependent Service dropdown functionality
    if ($('#tenant_id').length) {
        $('#tenant_id').on('change', function() {
            var selectedTenantId = $(this).val();
            var $serviceSelect = $('#service_id');
            
            if (selectedTenantId) {
                // Enable service select and load services for the selected tenant
                $serviceSelect.prop('disabled', false);
                loadServices(selectedTenantId);
            } else {
                // Disable service select and clear options
                $serviceSelect.prop('disabled', true)
                    .html('<option value="">Select Tenant First</option>')
                    .trigger('change');
            }
        });
    }

    // Function to load services for a given tenant
    function loadServices(tenantId) {
        if (!tenantId) {
            $('#service_id').html('<option value="">Select Tenant First</option>').trigger('change');
            return;
        }

        var $serviceSelect = $('#service_id');
        
        // Show loading state
        $serviceSelect.prop('disabled', true)
            .html('<option value="">Loading services...</option>')
            .trigger('change');

        $.ajax({
            url: '{{ route("agreements.get-services-by-tenant") }}',
            type: 'GET',
            data: { tenant_id: tenantId },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                let options = '<option value="">Select Service</option>';
                if (response && typeof response === 'object') {
                    $.each(response, function(id, name) {
                        let selected = '{{ old("service_id", $isEdit ? ($agreement->service_id ?? "") : "") }}' == id ? 'selected' : '';
                        options += `<option value="${id}" ${selected}>${name}</option>`;
                    });
                    $serviceSelect
                        .prop('disabled', false)
                        .html(options)
                        .trigger('change');
                    
                    // Reinitialize Select2 after loading new options
                    if (typeof $.fn.select2 !== 'undefined') {
                        $serviceSelect.select2({
                            placeholder: 'Select Service',
                            allowClear: false
                        });
                    }
                } else {
                    $serviceSelect
                        .prop('disabled', false)
                        .html('<option value="">No services found</option>')
                        .trigger('change');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error loading services:', error);
                $serviceSelect
                    .prop('disabled', false)
                    .html('<option value="">Error loading services</option>')
                    .trigger('change');
            }
        });
    }

    // Load services on page load if tenant is already selected
    @if(!$tenant_id && (old('tenant_id') || ($isEdit && $agreement->tenant_id)))
        loadServices('{{ old("tenant_id", $isEdit ? $agreement->tenant_id : "") }}');
    @endif

    // Image upload handling - Clean and reliable implementation
    // This handler is now consolidated above to prevent duplicate bindings

    // Handle file selection
    $('#banner_image').on('change', function() {
        const file = this.files[0];
        if (file) {
            // Validate file type
            if (!file.type.startsWith('image/')) {
                showNotification('error','Please select a valid image file.');
                return;
            }
            
            // Validate file size (20MB max)
            if (file.size > 20 * 1024 * 1024) {
                showNotification('error','Image size must be less than 20MB.');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#banner-preview').attr('src', e.target.result).show();
                $('.banner-placeholder').hide();
                $('#banner-upload-area').addClass('has-image');
            };
            reader.readAsDataURL(file);
        }
    });

    // Version view functionality (Edit Mode Only)
    var isEditMode = {{ $isEdit ? 'true' : 'false' }};
    if (isEditMode) {
        $('.view-version').click(function() {
            const content = $(this).data('content');
            $('#version-content').html(content);
            $('#versionModal').modal('show');
        });
    }

    // Form validation - Now handled by Parsley
    // The custom-validation class will automatically initialize Parsley validation
});
</script>
@endpush