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

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form class="form-horizontal custom-validation" 
                      action="{{ $form_action }}" 
                      method="POST" 
                      id="sms-template-form">
                    @csrf
                    @if($isEdit)
                        @method('PATCH')
                    @endif

                    @if($show_tenant_dropdown ?? false)
                        <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 ? $data->tenant_id : '') == $id ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tenant_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    @else
                        <input type="hidden" name="tenant_id" value="{{ $tenant_id }}">
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="title" class="form-label">Template Title <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('title') is-invalid @enderror" 
                                       id="title" 
                                       name="title" 
                                       value="{{ old('title', $isEdit ? $data->title : '') }}" 
                                       maxlength="255"
                                       placeholder="e.g., Appointment Confirmation, Payment Reminder"
                                       required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Enter a descriptive title for the SMS template (max 255 characters)</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="event_key" class="form-label">Event Key</label>
                                <select class="form-select select2 @error('event_key') is-invalid @enderror" id="event_key" name="event_key">
                                    <option value="">Select Event Key (Optional)</option>
                                    @foreach($event_keys ?? [] as $key => $label)
                                        <option value="{{ $key }}" {{ old('event_key', $isEdit ? $data->event_key : '') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('event_key')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Associate this template with a specific event for automated sending</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</label>
                                <select class="form-select select2 @error('master_language_id') is-invalid @enderror" 
                                        id="master_language_id" 
                                        name="master_language_id">
                                    <option value="">Select Language (Optional)</option>
                                    @foreach($languages ?? [] as $language)
                                        <option value="{{ $language->id }}" 
                                            {{ old('master_language_id', $isEdit ? $data->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 SMS template</div>
                                @error('master_language_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="body" class="form-label">SMS Content <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('body') is-invalid @enderror" 
                                          id="body" 
                                          name="body" 
                                          rows="8" 
                                          maxlength="1600"
                                          placeholder="Enter your SMS message content here. Use placeholders like {customer_name}, {appointment_date}, etc."
                                          required>{{ old('body', $isEdit ? $data->body : '') }}</textarea>
                                <div class="d-flex justify-content-between">
                                    <div class="form-text">You can use placeholders like {customer_name}, {appointment_date}, {service_name}, etc.</div>
                                    <div class="form-text" id="char-count">
                                        <span id="current-length">{{ strlen(old('body', $isEdit ? $data->body : '')) }}</span>/1600 characters
                                    </div>
                                </div>
                                @error('body')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <!-- Hidden field to ensure is_enabled is always submitted -->
                                    <input type="hidden" name="is_enabled" value="0">
                                    <input class="form-check-input" type="checkbox" id="is_enabled" name="is_enabled" value="1" 
                                           {{ old('is_enabled', $isEdit ? $data->is_enabled : true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_enabled">
                                        Active
                                    </label>
                                </div>
                                <div class="form-text">Active templates are available for use in SMS sending</div>
                            </div>
                        </div>
                    </div>

                    <!-- Available Placeholders -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card bg-light">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-info-circle"></i> Available Placeholders
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <h6 class="text-primary">Customer Information:</h6>
                                            <ul class="list-unstyled small">
                                                <li><code>@{{customer_name}}</code> - Customer full name</li>
                                                <li><code>@{{customer_first_name}}</code> - Customer first name</li>
                                                <li><code>@{{customer_email}}</code> - Customer email</li>
                                                <li><code>@{{customer_phone}}</code> - Customer phone</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-4">
                                            <h6 class="text-primary">Appointment Details:</h6>
                                            <ul class="list-unstyled small">
                                                <li><code>@{{appointment_date}}</code> - Appointment date</li>
                                                <li><code>@{{appointment_time}}</code> - Appointment time</li>
                                                <li><code>@{{service_name}}</code> - Service type</li>
                                                <li><code>@{{property_address}}</code> - Property address</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-4">
                                            <h6 class="text-primary">Company & System:</h6>
                                            <ul class="list-unstyled small">
                                                <li><code>@{{company_name}}</code> - Company name</li>
                                                <li><code>@{{inspector_name}}</code> - Inspector name</li>
                                                <li><code>@{{report_link}}</code> - Report download link</li>
                                                <li><code>@{{payment_amount}}</code> - Payment amount</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

@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>
$(document).ready(function() {
    // Character count for SMS body
    $('#body').on('input', function() {
        const currentLength = $(this).val().length;
        $('#current-length').text(currentLength);
        
        // Change color based on character limit
        const $charCount = $('#char-count');
        if (currentLength > 1400) {
            $charCount.addClass('text-warning').removeClass('text-muted text-danger');
        } else if (currentLength > 1600) {
            $charCount.addClass('text-danger').removeClass('text-muted text-warning');
        } else {
            $charCount.addClass('text-muted').removeClass('text-warning text-danger');
        }
    });

    // Form validation - following Tax module pattern
    if (!$('#sms-template-form').data('parsley')) {
        $('#sms-template-form').parsley({
            errorClass: 'is-invalid',
            successClass: 'is-valid',
            errorsWrapper: '<div class="invalid-feedback"></div>',
            errorTemplate: '<span></span>'
        });
    }

    // Custom validation for SMS body length
    $('#body').on('blur', function() {
        const bodyLength = $(this).val().length;
        
        if (bodyLength > 1600) {
            $(this).addClass('is-invalid');
            if (!$(this).next('.invalid-feedback').length) {
                $(this).after('<div class="invalid-feedback">SMS content cannot exceed 1600 characters</div>');
            }
        } else if (bodyLength === 0) {
            $(this).addClass('is-invalid');
            if (!$(this).next('.invalid-feedback').length) {
                $(this).after('<div class="invalid-feedback">SMS content is required</div>');
            }
        } else {
            $(this).removeClass('is-invalid');
            $(this).next('.invalid-feedback').remove();
        }
    });

    // Initialize select2 for better dropdown experience (following Tax module pattern)
    if (typeof $.fn.select2 !== 'undefined') {
        $('#event_key').select2({
            placeholder: 'Select an option',
            allowClear: true
        });

        @if($show_tenant_dropdown ?? false)
            $('#tenant_id').select2({
                placeholder: 'Select Tenant',
                allowClear: false
            });
        @endif
    }

    // Placeholder insertion helper
    $('.card-body code').click(function() {
        const placeholder = $(this).text();
        const $textarea = $('#body');
        const currentValue = $textarea.val();
        const cursorPos = $textarea[0].selectionStart;
        
        const newValue = currentValue.slice(0, cursorPos) + placeholder + currentValue.slice(cursorPos);
        $textarea.val(newValue);
        
        // Update character count
        $('#current-length').text(newValue.length);
        
        // Set focus back to textarea
        $textarea.focus();
        $textarea[0].setSelectionRange(cursorPos + placeholder.length, cursorPos + placeholder.length);
    });

    // Add hover effect to placeholders
    $('.card-body code').css('cursor', 'pointer').hover(
        function() {
            $(this).addClass('bg-primary text-white');
        },
        function() {
            $(this).removeClass('bg-primary text-white');
        }
    );

    // Initialize character count on page load
    $('#body').trigger('input');
});
</script>
@endpush