@extends('admin.layouts.layout')

@section('content')
@php
    $isEdit = isset($template) && $template->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="{{ $isEdit ? route('templates.update', $template->id) : route('templates.store') }}" 
                      method="POST" 
                      id="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</label>
                                    <select class="form-select select2 @error('tenant_id') is-invalid @enderror" id="tenant_id" name="tenant_id">
                                        @php
                                            $currentTenantId = old('tenant_id', $isEdit ? $template->tenant_id : 0);
                                        @endphp
                                        <option value="0" {{ $currentTenantId == 0 ? 'selected' : '' }}>No Tenant / Global Template</option>
                                        @foreach($tenant_list ?? [] as $id => $name)
                                            <option value="{{ $id }}" {{ $currentTenantId == $id ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tenant_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    @else
                        @if($isEdit && isset($template->tenant_id))
                            <input type="hidden" name="tenant_id" value="{{ $template->tenant_id }}">
                            <input type="hidden" name="original_tenant_id" value="{{ $template->tenant_id }}">
                        @else
                            <input type="hidden" name="tenant_id" value="{{ $tenant_id ?: 0 }}">
                        @endif
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="template_name" class="form-label">Template Name <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('template_name') is-invalid @enderror" 
                                       id="template_name" 
                                       name="template_name" 
                                       value="{{ old('template_name', $isEdit ? $template->template_name : '') }}" 
                                       required
                                       maxlength="50"
                                       data-parsley-required 
                                       data-parsley-maxlength="50">
                                <div class="form-text">Maximum 50 characters</div>
                                @error('template_name')
                                    <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 status is always submitted -->
                                    <input type="hidden" name="status" value="0">
                                    <input class="form-check-input" type="checkbox" id="status" name="status" value="1" 
                                           {{ old('status', $isEdit ? $template->status : true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="status">
                                        Active
                                    </label>
                                </div>
                                <div class="form-text">Active templates are available for use</div>
                            </div>
                        </div>
                    </div>

                    <!-- Template Type - Hidden as per requirements -->
                    <input type="hidden" name="template_type" value="{{ $isEdit ? $template->template_type : 1 }}">

                    <!-- Email Template Fields (Default) -->
                    <div id="template-type-1" class="template-type-content">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="subject" class="form-label">Email Subject <span class="text-danger">*</span></label>
                                    <input type="text" 
                                           class="form-control @error('subject') is-invalid @enderror" 
                                           id="subject" 
                                           name="subject" 
                                           value="{{ old('subject', $isEdit ? $template->subject : '') }}" 
                                           required
                                           maxlength="255"
                                           data-parsley-required
                                           data-parsley-maxlength="255">
                                    <div class="form-text">Maximum 255 characters</div>
                                    @error('subject')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <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 ? $template->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 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="template_content" class="form-label">Email Body <span class="text-danger">*</span></label>
                                <textarea class="form-control richtext @error('template_content') is-invalid @enderror" 
                                          id="template_content" 
                                          name="template_content" 
                                          rows="15"
                                          required>{{ old('template_content', $isEdit ? $template->template_content : '') }}</textarea>
                                @error('template_content')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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>
                                                <li><code>@{{customer_address}}</code> - Customer address</li>
                                            </ul>
                                        </div>

                                        <div class="col-md-4">
                                            <h6 class="text-primary">Inspection Details:</h6>
                                            <ul class="list-unstyled small">
                                                <li><code>@{{inspection_date}}</code> - Scheduled date</li>
                                                <li><code>@{{inspection_time}}</code> - Scheduled time</li>
                                                <li><code>@{{property_address}}</code> - Property address</li>
                                                <li><code>@{{inspector_name}}</code> - Inspector name</li>
                                                <li><code>@{{inspection_type}}</code> - Type of inspection</li>
                                            </ul>
                                        </div>

                                        <div class="col-md-4">
                                            <h6 class="text-primary">Company Information:</h6>
                                            <ul class="list-unstyled small">
                                                <li><code>@{{company_name}}</code> - Company name</li>
                                                <li><code>@{{company_phone}}</code> - Company phone</li>
                                                <li><code>@{{company_email}}</code> - Company email</li>
                                                <li><code>@{{company_address}}</code> - Company address</li>
                                                <li><code>@{{website_url}}</code> - Website URL</li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <h6 class="text-primary">Report Information:</h6>
                                            <ul class="list-unstyled small">
                                                <li><code>@{{report_link}}</code> - Link to report</li>
                                                <li><code>@{{report_number}}</code> - Report number</li>
                                                <li><code>@{{report_date}}</code> - Report generation date</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-end mt-3">
                        <a href="{{ route('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>
@endsection

@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() {
    // Form validation - following SMS template pattern
    if (!$('#template-form').data('parsley')) {
        $('#template-form').parsley({
            errorClass: 'is-invalid',
            successClass: 'is-valid',
            errorsWrapper: '<div class="invalid-feedback"></div>',
            errorTemplate: '<span></span>'
        });
    }

    // 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'
        ],
        toolbar: 'undo redo | formatselect | bold italic underline strikethrough | ' +
                'alignleft aligncenter alignright alignjustify | ' +
                'bullist numlist | blockquote | link image | ' +
                'table | forecolor backcolor | removeformat | help',
        content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; }',
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });

    // Initialize select2 for tenant dropdown
    if (typeof $.fn.select2 !== 'undefined') {
        $('#tenant_id').select2({
            placeholder: 'Select Tenant',
            allowClear: false
        });
        
        $('#master_language_id').select2({
            placeholder: 'Select Language (Optional)',
            allowClear: true
        });
    }

    // Placeholder insertion helper
    $('.card-body code').click(function() {
        const placeholder = $(this).text();
        const activeEditor = tinymce.activeEditor;
        
        if (activeEditor && activeEditor.id === 'template_content') {
            activeEditor.insertContent(placeholder);
        }
    });

    // 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');
        }
    );

    // Form submission
    $('#template-form').on('submit', function(e) {
        e.preventDefault();
        
        if ($(this).parsley().isValid()) {
            // Update TinyMCE content
            tinymce.triggerSave();
            
            // Show loading state
            const submitBtn = $(this).find('button[type="submit"]');
            const originalText = submitBtn.html();
            submitBtn.html('<i class="fas fa-spinner fa-spin"></i> Processing...').prop('disabled', true);
            
            // Submit form
            setTimeout(() => {
                this.submit();
            }, 500);
        }
    });
});
</script>
@endpush