@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<style>
.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    padding: 1.5rem;
}

.variables-box {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.variable-item {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.variable-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.variable-code {
    font-family: 'Courier New', monospace;
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    color: #d63384;
    font-weight: 600;
}

.template-info-box {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-left: 4px solid #17a2b8;
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
}

.note-editor .note-editable {
    min-height: 400px;
}
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Editar Plantilla de Email</h4>
            <div class="page-title-right">
                <a href="{{ route('email-templates.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('email-templates.update', $emailTemplate->id) }}" method="post" id="emailTemplateForm" name="emailTemplateForm">
            @csrf
            @method('PUT')

            <div class="row">
                <!-- Formulario Principal -->
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">

                            <div class="template-info-box">
                                <h5 class="mb-2">
                                    <i class="ri-information-line"></i> <strong>{{ $emailTemplate->et_name }}</strong>
                                </h5>
                                @if($emailTemplate->description)
                                    <p class="mb-0">{{ $emailTemplate->description }}</p>
                                @endif
                            </div>

                            <!-- Asunto del Email -->
                            <h5 class="form-section-title">
                                <i class="ri-mail-line text-primary"></i>
                                Asunto del Email
                            </h5>

                            <div class="mb-4">
                                <label for="et_subject" class="form-label">
                                    Asunto <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="et_subject" id="et_subject" class="form-control"
                                       value="{{ $emailTemplate->et_subject }}"
                                       placeholder="Ej: Confirmación de Pedido #@{{order_id}}">
                                <p></p>
                                <small class="help-text">
                                    <i class="ri-lightbulb-line"></i>
                                    Puedes usar variables en el asunto. Ejemplo: <code>@{{customer_name}}</code>
                                </small>
                            </div>

                            <!-- Contenido HTML -->
                            <h5 class="form-section-title">
                                <i class="ri-code-line text-success"></i>
                                Contenido HTML del Email
                            </h5>

                            <div class="mb-4">
                                <label for="et_content" class="form-label">
                                    Contenido <span class="text-danger">*</span>
                                </label>
                                <textarea name="et_content" id="et_content" class="form-control summernote">{{ $emailTemplate->et_content }}</textarea>
                                <p></p>
                                <small class="help-text">
                                    <i class="ri-palette-line"></i>
                                    Diseña el email usando el editor visual. Arrastra variables desde la barra lateral.
                                </small>
                            </div>

                            <!-- Estado -->
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="is_active"
                                           id="is_active" {{ $emailTemplate->is_active ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        <strong>Template Activo</strong>
                                    </label>
                                </div>
                                <small class="help-text">
                                    <i class="ri-toggle-line"></i>
                                    Si está inactivo, no se enviará este email aunque sea requerido
                                </small>
                            </div>

                            <!-- Actions -->
                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="ri-save-line"></i> Guardar Cambios
                                </button>
                                <a href="{{ route('email-templates.index') }}" class="btn btn-outline-dark btn-lg ms-3">
                                    <i class="ri-close-line"></i> Cancelar
                                </a>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Variables Disponibles -->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header bg-info">
                            <h3 class="card-title text-white">
                                <i class="ri-price-tag-lines"></i> Variables Disponibles
                            </h3>
                        </div>
                        <div class="card-body p-2">
                            <div class="variables-box">
                                <p class="text-muted mb-3">
                                    <small>
                                        <i class="ri-cursor-line"></i>
                                        Haz clic en una variable para copiarla
                                    </small>
                                </p>

                                @if($emailTemplate->available_variables && count($emailTemplate->available_variables) > 0)
                                    @foreach($emailTemplate->available_variables as $key => $description)
                                        @php
                                            $variableText = '{{' . $key . '}}';
                                        @endphp
                                        <div class="variable-item" onclick="copyVariable('{{ $variableText }}')" title="Clic para copiar">
                                            <div>
                                                <span class="variable-code">{{ $variableText }}</span>
                                            </div>
                                            <div>
                                                <small class="text-muted">{{ $description }}</small>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <p class="text-muted text-center py-3">
                                        No hay variables definidas para este template
                                    </p>
                                @endif
                            </div>

                            <div class="alert alert-warning mt-3 mb-0">
                                <small>
                                    <strong><i class="ri-error-warning-line"></i> Importante:</strong><br>
                                    Las variables se reemplazan automáticamente al enviar el email.
                                    No cambies el formato <code>@{{variable}}</code>
                                </small>
                            </div>
                        </div>
                    </div>

                    <!-- Preview Info -->
                    <div class="card mt-3">
                        <div class="card-header bg-secondary">
                            <h3 class="card-title text-white">
                                <i class="ri-eye-line"></i> Vista Previa
                            </h3>
                        </div>
                        <div class="card-body">
                            <p class="mb-2">
                                <strong>Slug:</strong><br>
                                <code>{{ $emailTemplate->slug }}</code>
                            </p>
                            <p class="mb-0">
                                <small class="text-muted">
                                    El slug identifica este template en el código y no debe modificarse.
                                </small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </form>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
@endpush

@section('customJs')
<script>
$(document).ready(function() {
    // Inicializar Summernote
    $('.summernote').summernote({
        height: 400,
        minHeight: 400,
        maxHeight: 600,
        focus: false,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'italic', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
        callbacks: {
            onChange: function(contents, $editable) {
                $('#et_content').val(contents);
            }
        }
    });

    // Sincronizar Summernote al hacer blur o change
    $('.summernote').on('summernote.blur summernote.change', function() {
        var content = $(this).summernote('code');
        $('#et_content').val(content);
    });

    // Sincronizar antes de enviar el form
    $('#emailTemplateForm').on('submit', function() {
        var summernoteContent = $('.summernote').summernote('code');
        $('#et_content').val(summernoteContent);
    });
});

// Copiar variable al clipboard
function copyVariable(variable) {
    const tempInput = document.createElement('input');
    tempInput.value = variable;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);

    Swal.fire({
        icon: 'success',
        title: 'Variable Copiada',
        text: variable,
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 2000
    });
}
</script>
@endsection