@extends('layouts.admin')

@section('title', 'Editar Template de Contrato')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            Editar Template de Contrato -
            @if($contract->label == 'seller')
                Contrato de Vendedor
            @elseif($contract->label == 'engineer')
                Contrato de Engenheiro
            @else
                {{ $contract->label }}
            @endif
        </h1>
    </div>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Editar Template</h6>
        </div>
        <div class="card-body">
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i> <strong>Atenção!</strong> Não edite os valores que estiverem entre @@valor@@, pois eles são variáveis que serão substituídas automaticamente.
            </div>

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

                <div class="form-group">
                    <label for="version">Versão</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="version" name="version" step="0.1" value="{{ $contract->version }}" required>
                        <div class="input-group-append">
                            <span class="input-group-text">Versão atual: {{ $contract->version }}</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="text">Texto do Contrato</label>
                    <textarea class="form-control" id="text" name="text" rows="20" required>{{ $contract->text }}</textarea>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Salvar Alterações</button>
                    <a href="{{ route('admin.juridical_contract_templates.index') }}" class="btn btn-secondary">Cancelar</a>
                </div>
            </form>
        </div>
    </div>

    </div>
@endsection

@section('scripts')
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#text',
        height: 500,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
        setup: function(editor) {
            editor.on('change', function() {
                // Destaca as variáveis no editor
                let content = editor.getContent();
                const regex = /@@([^@]+)@@/g;
                let matches;

                while ((matches = regex.exec(content)) !== null) {
                    const variableName = matches[1];
                    const variablePattern = '@@' + variableName + '@@';
                    content = content.replace(
                        variablePattern,
                        '<span style="background-color: #ffff00; font-weight: bold;">' + variablePattern + '</span>'
                    );
                }

                editor.setContent(content);
            });
        }
    });

    // Alerta ao tentar remover variáveis
    document.querySelector('form').addEventListener('submit', function(e) {
        const content = tinymce.get('text').getContent();
        const regex = /@@([^@]+)@@/g;
        const variables = [];
        let match;

        while ((match = regex.exec(content)) !== null) {
            variables.push(match[1]);
        }

        // Verificar variáveis específicas com base no tipo de contrato
        let requiredVariables = ['data', 'nome_completo'];

        @if($contract->label == 'seller')
            requiredVariables = requiredVariables.concat(['propriedade', 'valor', 'cpf']);
        @elseif($contract->label == 'engineer')
            requiredVariables = requiredVariables.concat(['crea', 'propriedade']);
        @endif

        const missingVariables = requiredVariables.filter(v => !variables.includes(v));

        if (missingVariables.length > 0) {
            e.preventDefault();
            alert('Atenção! O contrato está faltando as seguintes variáveis obrigatórias: ' + missingVariables.join(', '));
        }
    });
</script>
@endsection