@extends('layouts.performance')

@php
  $isEdit = !empty($template);
  $logoUrl = null;
  foreach (['assets/logo.jpg', 'assets/logo.jpeg', 'assets/logo.png'] as $candidate) {
    if (file_exists(public_path($candidate))) {
      $logoUrl = asset($candidate);
      break;
    }
  }
@endphp

@section('title', $isEdit ? 'Form Şablon Düzenle' : 'Yeni Form Şablon')

@push('styles')
  <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
@endpush

@section('perf-content')
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
    <div>
      <h1 class="h4 mb-1">{{ $isEdit ? 'Form Şablon Düzenle' : 'Yeni Form Şablon' }}</h1>
      <p class="text-muted mb-0">JSON form tanımı ile şablon oluşturun.</p>
    </div>
    <a class="btn btn-outline-secondary" href="{{ route('admin.form-templates.index') }}">Geri Dön</a>
  </div>

  @php
    $errorMsg = null;
    if (isset($errors)) {
      if (is_object($errors) && method_exists($errors, 'any') && $errors->any()) {
        $errorMsg = $errors->first();
      } elseif (is_array($errors) && count($errors) > 0) {
        $errorMsg = reset($errors);
      }
    }
  @endphp

  @if ($errorMsg)
    <div class="alert alert-danger">{{ $errorMsg }}</div>
  @endif

  <form id="form-template-form" method="post"
    action="{{ $isEdit ? route('admin.form-templates.update', ['id' => $template->id]) : route('admin.form-templates.store') }}">
    @csrf
    <div class="card">
      <div class="card-body">
        <div class="row g-3">
          <div class="col-12 col-md-6">
            <label class="form-label">Ad</label>
            <input type="text" name="name" class="form-control" value="{{ old('name', $template?->name ?? '') }}" required>
          </div>
          <div class="col-12 col-md-3">
            <label class="form-label">Durum</label>
            <select name="status" class="form-select">
              @php
                $status = old('status', $template?->status ?? 'draft');
              @endphp
              <option value="draft" {{ $status === 'draft' ? 'selected' : '' }}>draft</option>
              <option value="active" {{ $status === 'active' ? 'selected' : '' }}>active</option>
              <option value="archived" {{ $status === 'archived' ? 'selected' : '' }}>archived</option>
            </select>
          </div>
          <div class="col-12 col-md-3">
            <label class="form-label">Görev Ataması</label>
            <select name="is_task_assignable" class="form-select">
              @php
                $assignable = (int) old('is_task_assignable', $template?->is_task_assignable ?? 1);
              @endphp
              <option value="1" {{ $assignable === 1 ? 'selected' : '' }}>Görevde Kullan</option>
              <option value="0" {{ $assignable === 0 ? 'selected' : '' }}>Sabit Form</option>
            </select>
          </div>
          <div class="col-12 col-md-3">
            <label class="form-label">Sayfa Boyutu</label>
            @php
              $paperSize = strtoupper(trim((string) old('paper_size', $template?->paper_size ?? 'A4')));
              if (!in_array($paperSize, ['A3', 'A4', 'A5'], true)) {
                $paperSize = 'A4';
              }
            @endphp
            <select name="paper_size" class="form-select">
              <option value="A3" {{ $paperSize === 'A3' ? 'selected' : '' }}>A3</option>
              <option value="A4" {{ $paperSize === 'A4' ? 'selected' : '' }}>A4</option>
              <option value="A5" {{ $paperSize === 'A5' ? 'selected' : '' }}>A5</option>
            </select>
          </div>

                <div class="col-12 bg-light p-3 rounded">
                    <h5 class="h6 mb-3">Workflow Entegrasyonu</h5>
                    <div class="row g-3 align-items-center">
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="camunda_enabled" name="camunda_enabled" value="1" 
                                    {{ old('camunda_enabled', $template?->camunda_enabled ?? false) ? 'checked' : '' }}>
                                <label class="form-check-label" for="camunda_enabled">Camunda Workflow Aktif</label>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <select name="camunda_process_key" id="camunda_process_key" class="form-select" {{ old('camunda_enabled', $template?->camunda_enabled ?? false) ? '' : 'disabled' }}>
                                <option value="">Bir Süreç Seçin (Process Key)</option>
                                @if(isset($definitions) && count($definitions) > 0)
                                    @foreach($definitions as $def)
                                        <option value="{{ $def['key'] }}" 
                                            {{ old('camunda_process_key', $template?->camunda_process_key ?? '') == $def['key'] ? 'selected' : '' }}>
                                            {{ $def['name'] ?? $def['key'] }} ({{ $def['key'] }})
                                        </option>
                                    @endforeach
                                @elseif(!empty($template?->camunda_process_key))
                                    <option value="{{ $template->camunda_process_key }}" selected>{{ $template->camunda_process_key }}</option>
                                @endif
                            </select>
                        </div>
                    </div>
                    
                    <div id="workflow_config_area" class="mt-4" style="display: {{ old('camunda_enabled', $template?->camunda_enabled ?? false) ? 'block' : 'none' }}">
                        <h6 class="border-bottom pb-2 mb-3">Adım Bazlı Onaylayıcı Atamaları</h6>
                        <div id="workflow_steps_container" class="row g-3">
                            <!-- JS will populate this -->
                            <div class="col-12 text-muted small italic">Lütfen süreç seçin...</div>
                        </div>
                        <input type="hidden" name="workflow_config" id="workflow_config_input" value="{{ is_array(data_get($template ?? null, 'workflow_config')) ? json_encode(data_get($template ?? null, 'workflow_config')) : (data_get($template ?? null, 'workflow_config') ?? '[]') }}">
                    </div>
                </div>

          <script>
            const availableRoles = @json($roles);
            const templateId = {{ $template?->id ?? 'null' }};
            const currentConfig = {!! is_array(data_get($template ?? null, 'workflow_config')) ? json_encode(data_get($template ?? null, 'workflow_config')) : (data_get($template ?? null, 'workflow_config') ?? '{}') !!};
            const workflowConfig = (() => {
                if (currentConfig && typeof currentConfig === 'object') {
                    return currentConfig;
                }
                if (typeof currentConfig === 'string') {
                    try {
                        const parsed = JSON.parse(currentConfig);
                        return parsed && typeof parsed === 'object' ? parsed : {};
                    } catch (e) {
                        return {};
                    }
                }
                return {};
            })();

            const camundaEnabled = document.getElementById('camunda_enabled');
            const processKeySelect = document.getElementById('camunda_process_key');
            const stepsContainer = document.getElementById('workflow_steps_container');
            const configInput = document.getElementById('workflow_config_input');
            const configArea = document.getElementById('workflow_config_area');
            const templateForm = document.getElementById('form-template-form');

            camundaEnabled.addEventListener('change', function() {
                const disabled = !this.checked;
                processKeySelect.disabled = disabled;
                configArea.style.display = disabled ? 'none' : 'block';
                if (!disabled && processKeySelect.value) {
                    loadWorkflowSteps(processKeySelect.value);
                }
            });

            processKeySelect.addEventListener('change', function() {
                if (this.value) {
                    loadWorkflowSteps(this.value);
                } else {
                    stepsContainer.innerHTML = '<div class="col-12 text-muted small italic">Lütfen süreç seçin...</div>';
                    configInput.value = '{}';
                }
            });

            async function loadWorkflowSteps(processKey) {
                stepsContainer.innerHTML = '<div class="col-12 text-center py-3"><div class="spinner-border spinner-border-sm text-primary"></div><div class="small mt-1">Adımlar yükleniyor...</div></div>';

                try {
                    const response = await fetch(`{{ route('admin.form-templates.process-steps') }}?process_key=${processKey}`);
                    const steps = await response.json();

                    if (steps.length === 0) {
                        stepsContainer.innerHTML = '<div class="col-12 text-warning small italic">Bu süreçte yapılandırılabilir User Task/Timer bulunamadı.</div>';
                        configInput.value = '{}';
                        return;
                    }

                    renderSteps(steps);
                } catch (err) {
                    console.error('Error fetching steps:', err);
                    stepsContainer.innerHTML = '<div class="col-12 text-danger small">Hata: Adımlar yüklenemedi.</div>';
                }
            }

            function sanitizeVariableName(value) {
                return String(value || '').replace(/[^A-Za-z0-9_]/g, '_');
            }

            function parseIsoDurationForUi(value) {
                const raw = String(value || '').trim().toUpperCase();
                let match = raw.match(/^PT(\d+)M$/);
                if (match) {
                    return { amount: parseInt(match[1], 10), unit: 'minutes' };
                }

                match = raw.match(/^PT(\d+)H$/);
                if (match) {
                    return { amount: parseInt(match[1], 10), unit: 'hours' };
                }

                match = raw.match(/^P(\d+)D$/);
                if (match) {
                    return { amount: parseInt(match[1], 10), unit: 'days' };
                }

                match = raw.match(/^P(\d+)W$/);
                if (match) {
                    return { amount: parseInt(match[1], 10), unit: 'weeks' };
                }

                match = raw.match(/^P(\d+)M$/);
                if (match) {
                    return { amount: parseInt(match[1], 10), unit: 'months' };
                }

                return { amount: 1, unit: 'minutes' };
            }

            function toIsoDuration(amount, unit) {
                const val = parseInt(String(amount || ''), 10);
                if (!Number.isFinite(val) || val <= 0) {
                    return '';
                }

                if (unit === 'hours') {
                    return `PT${val}H`;
                }
                if (unit === 'days') {
                    return `P${val}D`;
                }
                if (unit === 'weeks') {
                    return `P${val}W`;
                }
                if (unit === 'months') {
                    return `P${val}M`;
                }
                return `PT${val}M`;
            }

            function getDefaultTimerValue(step, stepConfig, timerType) {
                const configured = String(stepConfig.timer_value || '').trim();
                if (configured !== '') {
                    return configured;
                }

                const fromBpmn = String(step.default_value || '').trim();
                if (fromBpmn !== '') {
                    return fromBpmn;
                }

                if (timerType === 'timeDuration') {
                    return 'PT1M';
                }

                return '';
            }

            function renderSteps(steps) {
                stepsContainer.innerHTML = '';

                steps.forEach(step => {
                    const stepType = String(step.element_type || 'userTask');
                    const stepConfig = workflowConfig[step.id] || {};

                    if (stepType === 'timer') {
                        renderTimerStep(step, stepConfig);
                        return;
                    }

                    renderUserTaskStep(step, stepConfig);
                });

                updateConfig();
            }

            function renderUserTaskStep(step, stepConfig) {
                const roles = String(stepConfig.role || '').split(',').map(v => v.trim()).filter(v => v !== '');
                const userIds = String(stepConfig.user_id || '').split(',');

                const stepRow = document.createElement('div');
                stepRow.className = 'col-12 border-start border-primary border-4 ps-3 py-3 bg-white shadow-sm rounded mb-3';
                stepRow.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="small fw-bold text-primary text-uppercase mb-0">Onay Bekleniyor</label>
                        <span class="badge bg-light text-dark border small">${step.id}</span>
                    </div>
                    <div class="roles-repeater" id="repeater-${step.id}">
                    </div>
                    <button type="button" class="btn btn-link btn-sm p-0 mt-1 text-decoration-none add-role-btn" data-step="${step.id}">
                        <i class="bi bi-plus-circle me-1"></i> Başka Rol/Kişi Ekle
                    </button>
                `;
                stepsContainer.appendChild(stepRow);

                const repeater = stepRow.querySelector('.roles-repeater');
                if (roles.length === 0) {
                    addRoleRow(step.id, repeater, '', '');
                } else {
                    roles.forEach((role, idx) => {
                        addRoleRow(step.id, repeater, role, userIds[idx] || '');
                    });
                }

                stepRow.querySelector('.add-role-btn').addEventListener('click', () => {
                    addRoleRow(step.id, repeater, '', '');
                });
            }

            function renderTimerStep(step, stepConfig) {
                const timerType = String(step.timer_definition_type || 'timeDuration');
                const timerVariable = sanitizeVariableName(
                    stepConfig.timer_variable || step.timer_variable || `${step.id}_${timerType}`
                );
                const timerValue = getDefaultTimerValue(step, stepConfig, timerType);
                const parsedDuration = parseIsoDurationForUi(timerValue);

                const stepRow = document.createElement('div');
                stepRow.className = 'col-12 border-start border-warning border-4 ps-3 py-3 bg-white shadow-sm rounded mb-3';
                stepRow.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="small fw-bold text-warning text-uppercase mb-0">${step.name || step.id}</label>
                        <span class="badge bg-light text-dark border small">${step.id}</span>
                    </div>
                    <div class="timer-config-row row g-2 align-items-center" data-step="${step.id}" data-timer-type="${timerType}" data-timer-variable="${timerVariable}">
                        <div class="col-md-12">
                            <label class="form-label form-label-sm small mb-1">Timeout</label>
                            <div class="row g-2">
                                <div class="col-5">
                                    <input type="number" min="1" step="1" class="form-control form-control-sm timer-amount" value="${parsedDuration.amount}">
                                </div>
                                <div class="col-4">
                                    <select class="form-select form-select-sm timer-unit">
                                        <option value="minutes" ${parsedDuration.unit === 'minutes' ? 'selected' : ''}>Dakika</option>
                                        <option value="hours" ${parsedDuration.unit === 'hours' ? 'selected' : ''}>Saat</option>
                                        <option value="days" ${parsedDuration.unit === 'days' ? 'selected' : ''}>Gün</option>
                                        <option value="weeks" ${parsedDuration.unit === 'weeks' ? 'selected' : ''}>Hafta</option>
                                        <option value="months" ${parsedDuration.unit === 'months' ? 'selected' : ''}>Ay</option>
                                    </select>
                                </div>
                            </div>
                            <div class="small text-muted mt-1">Seçilen süre BPMN formatına otomatik çevrilir.</div>
                        </div>
                    </div>
                `;
                stepsContainer.appendChild(stepRow);

                const amountInput = stepRow.querySelector('.timer-amount');
                const unitSelect = stepRow.querySelector('.timer-unit');

                amountInput.addEventListener('input', updateConfig);
                amountInput.addEventListener('change', updateConfig);
                unitSelect.addEventListener('change', updateConfig);
            }

            function addRoleRow(stepId, container, selectedRole, selectedUserId) {
                const row = document.createElement('div');
                row.className = 'role-row row g-2 mb-2 align-items-center';
                row.innerHTML = `
                    <div class="col-md-5">
                        <select class="form-select form-select-sm step-role" data-step="${stepId}">
                            <option value="">Grup/Rol Seçin</option>
                            ${availableRoles.map(r => `<option value="${r.name}" ${selectedRole === r.name ? 'selected' : ''}>${r.display_name || r.name}</option>`).join('')}
                        </select>
                    </div>
                    <div class="col-md-5">
                        <select class="form-select form-select-sm step-user" data-step="${stepId}">
                            <option value="">Tüm Grup Üyeleri</option>
                        </select>
                    </div>
                    <div class="col-md-2 text-end">
                        ${container.children.length > 0 ? `
                        <button type="button" class="btn btn-outline-danger btn-sm remove-role-btn">
                            <i class="bi bi-trash"></i>
                        </button>` : '<div style="width: 32px"></div>'}
                    </div>
                `;
                container.appendChild(row);

                const roleSelect = row.querySelector('.step-role');
                const userSelect = row.querySelector('.step-user');

                roleSelect.addEventListener('change', () => {
                    updateUsersForRow(stepId, roleSelect.value, userSelect, '');
                    updateConfig();
                });

                userSelect.addEventListener('change', updateConfig);

                const removeBtn = row.querySelector('.remove-role-btn');
                if (removeBtn) {
                    removeBtn.addEventListener('click', () => {
                        row.remove();
                        updateConfig();
                    });
                }

                if (selectedRole) {
                    updateUsersForRow(stepId, selectedRole, userSelect, selectedUserId);
                }
            }

            async function updateUsersForRow(stepId, roleName, userSelect, selectedUserId) {
                if (!roleName) {
                    userSelect.innerHTML = '<option value="">Önce Rol Seçin</option>';
                    return;
                }

                userSelect.innerHTML = '<option value="">Yükleniyor...</option>';
                try {
                    const response = await fetch(`{{ route('admin.form-templates.users-by-role') }}?role=${roleName}`);
                    const users = await response.json();

                    userSelect.innerHTML = '<option value="">Tüm Grup Üyeleri</option>';
                    users.forEach(u => {
                        userSelect.innerHTML += `<option value="${u.id}" ${selectedUserId == u.id ? 'selected' : ''}>${u.name}</option>`;
                    });
                } catch (err) {
                    console.error('Error fetching users:', err);
                    userSelect.innerHTML = '<option value="">Hata</option>';
                }
            }

            function updateConfig() {
                const config = {};
                const steps = document.querySelectorAll('.roles-repeater');

                steps.forEach(repeater => {
                    const stepId = repeater.id.replace('repeater-', '');
                    const roles = [];
                    const userIds = [];

                    repeater.querySelectorAll('.role-row').forEach(row => {
                        const role = row.querySelector('.step-role').value;
                        const user = row.querySelector('.step-user').value;
                        if (role) {
                            roles.push(role);
                            userIds.push(user || '');
                        }
                    });

                    if (roles.length > 0) {
                        config[stepId] = {
                            role: roles.join(','),
                            user_id: userIds.join(',')
                        };
                    }
                });

                document.querySelectorAll('.timer-config-row').forEach(row => {
                    const stepId = row.dataset.step || '';
                    const timerType = row.dataset.timerType || 'timeDuration';
                    const timerVariable = sanitizeVariableName(row.dataset.timerVariable || '');
                    const unit = row.querySelector('.timer-unit')?.value || 'minutes';
                    const amount = row.querySelector('.timer-amount')?.value || '';
                    const timerValue = toIsoDuration(amount, unit);

                    if (stepId !== '' && timerVariable !== '' && timerValue !== '') {
                        config[stepId] = {
                            type: 'timer',
                            timer_definition_type: timerType,
                            timer_variable: timerVariable,
                            timer_value: timerValue
                        };
                    }
                });

                configInput.value = JSON.stringify(config);
            }

            if (camundaEnabled.checked && processKeySelect.value) {
                loadWorkflowSteps(processKeySelect.value);
            }

            if (templateForm) {
                templateForm.addEventListener('submit', () => {
                    updateConfig();
                });
            }
          </script>
          <div class="col-12">
            <label class="form-label">Form Builder</label>
            <div id="formio_builder" class="border rounded p-3"></div>
            <div class="text-muted small mt-1">Şablonu drag-drop ile düzenleyin.</div>
          </div>
          <div class="col-12">
            <div class="d-flex align-items-center justify-content-between">
              <label class="form-label mb-0">Schema JSON</label>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="schemaToggle">Göster</button>
            </div>
            <div id="schemaWrapper" class="d-none mt-2">
              <textarea name="schema_json" id="schema_json" rows="16" class="form-control"
                readonly>{{ old('schema_json', $template?->schema_json ?? '') }}</textarea>
              <div class="text-muted small mt-1">Bu alan otomatik güncellenir.</div>
            </div>
          </div>
        </div>
        <div class="d-flex justify-content-end gap-2 mt-4">
          <button type="submit" class="btn btn-primary">{{ $isEdit ? 'Güncelle' : 'Kaydet' }}</button>
        </div>
      </div>
    </div>
  </form>
@endsection

@push('scripts')
  <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
  <script>
    (() => {
      const builderEl = document.getElementById('formio_builder');
      const schemaInput = document.getElementById('schema_json');
      const schemaWrapper = document.getElementById('schemaWrapper');
      const schemaToggle = document.getElementById('schemaToggle');
      if (!builderEl || !schemaInput || !window.Formio) {
        return;
      }
      if (schemaWrapper && schemaToggle) {
        schemaToggle.addEventListener('click', () => {
          const hidden = schemaWrapper.classList.contains('d-none');
          schemaWrapper.classList.toggle('d-none');
          schemaToggle.textContent = hidden ? 'Gizle' : 'G\u{00f6}ster';
        });
      }

      if (typeof window.Formio.getProjectSettings === 'function') {
        window.Formio.getProjectSettings = () => Promise.resolve({});
      }

      const findComponent = (components, predicate) => {
        if (!Array.isArray(components)) {
          return null;
        }
        for (const component of components) {
          if (!component || typeof component !== 'object') {
            continue;
          }
          if (predicate(component)) {
            return component;
          }
          const nested = [];
          if (Array.isArray(component.components)) {
            nested.push(component.components);
          }
          if (Array.isArray(component.columns)) {
            component.columns.forEach((col) => {
              if (col && Array.isArray(col.components)) {
                nested.push(col.components);
              }
            });
          }
          if (Array.isArray(component.rows)) {
            component.rows.forEach((row) => {
              if (!Array.isArray(row)) {
                return;
              }
              row.forEach((cell) => {
                if (cell && Array.isArray(cell.components)) {
                  nested.push(cell.components);
                }
              });
            });
          }
          for (const group of nested) {
            const found = findComponent(group, predicate);
            if (found) {
              return found;
            }
          }
        }
        return null;
      };

      const getLayoutContainer = (form) => {
        const tabs = findComponent(form.components || [], (entry) => entry.type === 'tabs' && Array.isArray(entry.components));
        if (tabs && Array.isArray(tabs.components)) {
          let layoutTab = tabs.components.find((entry) =>
            entry.key === 'layout' || String(entry.label || '').toLowerCase() === 'layout'
          );
          if (!layoutTab) {
            layoutTab = {
              key: 'layout',
              label: 'Layout',
              title: 'Layout',
              type: 'panel',
              components: []
            };
            tabs.components.push(layoutTab);
          }
          if (!Array.isArray(layoutTab.components)) {
            layoutTab.components = [];
          }
          return layoutTab;
        }
        if (!Array.isArray(form.components)) {
          form.components = [];
        }
        return form;
      };

      const extendTableEditForm = () => {
        if (!window.Formio || !window.Formio.Components || !window.Formio.Components.components) {
          return;
        }
        const tableComponent = window.Formio.Components.components.table;
        if (!tableComponent || typeof tableComponent.editForm !== 'function') {
          return;
        }
        if (tableComponent.__yoretechPatched) {
          return;
        }
        const originalEditForm = tableComponent.editForm;
        tableComponent.editForm = function (...args) {
          const form = originalEditForm.apply(this, args);
          const layoutTab = getLayoutContainer(form);
          if (layoutTab && Array.isArray(layoutTab.components)) {
            const hasWidth = layoutTab.components.some((entry) => entry.key === 'tableCellWidth');
            if (!hasWidth) {
              layoutTab.components.push({
                type: 'number',
                input: true,
                key: 'tableCellWidth',
                label: 'H\u{00fc}cre Geni\u{015f}li\u{011f}i (px)',
                placeholder: '\u{00d6}rn: 160',
                suffix: 'px',
                tooltip: 'Tablodaki t\u{00fc}m h\u{00fc}crelere minimum geni\u{015f}lik uygular.'
              });
            }
            const hasHeight = layoutTab.components.some((entry) => entry.key === 'tableCellHeight');
            if (!hasHeight) {
              layoutTab.components.push({
                type: 'number',
                input: true,
                key: 'tableCellHeight',
                label: 'H\u{00fc}cre Y\u{00fc}ksekli\u{011f}i (px)',
                placeholder: '\u{00d6}rn: 60',
                suffix: 'px',
                tooltip: 'Tablodaki t\u{00fc}m h\u{00fc}crelere minimum y\u{00fc}kseklik uygular.'
              });
            }

            const hasCellSizes = layoutTab.components.some((entry) => entry.key === 'cellSizes');
            if (!hasCellSizes) {
              layoutTab.components.push({
                type: 'datagrid',
                input: true,
                key: 'cellSizes',
                label: 'H\u{00fc}cre \u{00d6}l\u{00e7}\u{00fc}leri',
                tooltip: 'Sat\u{0131}r ve s\u{00fc}tun numaras\u{0131}na g\u{00f6}re tek tek h\u{00fc}cre geni\u{015f}lik/y\u{00fc}kseklik belirler.',
                reorder: false,
                addAnother: 'H\u{00fc}cre Ekle',
                components: [
                  {
                    type: 'number',
                    input: true,
                    key: 'row',
                    label: 'Sat\u{0131}r',
                    placeholder: '1',
                    validate: { min: 1 }
                  },
                  {
                    type: 'number',
                    input: true,
                    key: 'col',
                    label: 'S\u{00fc}tun',
                    placeholder: '1',
                    validate: { min: 1 }
                  },
                  {
                    type: 'number',
                    input: true,
                    key: 'width',
                    label: 'Geni\u{015f}lik (px)',
                    placeholder: '160',
                    validate: { min: 0 }
                  },
                  {
                    type: 'number',
                    input: true,
                    key: 'height',
                    label: 'Y\u{00fc}kseklik (px)',
                    placeholder: '60',
                    validate: { min: 0 }
                  }
                ]
              });
            }
          }
          return form;
        };
        tableComponent.__yoretechPatched = true;
      };

      extendTableEditForm();

      const extendBaseEditForm = () => {
        if (!window.Formio || !window.Formio.Components || typeof window.Formio.Components.baseEditForm !== 'function') {
          return;
        }
        if (window.Formio.Components.__yoretechBaseEditPatched) {
          return;
        }
        const originalBaseEditForm = window.Formio.Components.baseEditForm;
        window.Formio.Components.baseEditForm = function (...args) {
          const form = originalBaseEditForm.apply(this, args);
          const layoutTab = getLayoutContainer(form);
          if (layoutTab && Array.isArray(layoutTab.components)) {
            const hasWidth = layoutTab.components.some((entry) => entry.key === 'inputWidth');
            if (!hasWidth) {
              layoutTab.components.push({
                type: 'number',
                input: true,
                key: 'inputWidth',
                label: 'Alan Geni\u{015f}li\u{011f}i (px)',
                placeholder: '\u{00d6}rn: 260',
                suffix: 'px',
                tooltip: 'Alan geni\u{015f}li\u{011f}ini piksel olarak ayarlar.'
              });
            }
            const hasHeight = layoutTab.components.some((entry) => entry.key === 'inputHeight');
            if (!hasHeight) {
              layoutTab.components.push({
                type: 'number',
                input: true,
                key: 'inputHeight',
                label: 'Alan Y\u{00fc}ksekli\u{011f}i (px)',
                placeholder: '\u{00d6}rn: 40',
                suffix: 'px',
                tooltip: 'Alan y\u{00fc}ksekli\u{011f}ini piksel olarak ayarlar.'
              });
            }
          }
          return form;
        };
        window.Formio.Components.__yoretechBaseEditPatched = true;
      };

      extendBaseEditForm();

      const extendInputSizingEditForm = () => {
        if (!window.Formio || !window.Formio.Components || !window.Formio.Components.components) {
          return;
        }
        const components = window.Formio.Components.components;
        Object.keys(components).forEach((key) => {
          const component = components[key];
          if (!component || typeof component.editForm !== 'function') {
            return;
          }
          if (component.__yoretechSizePatched) {
            return;
          }
          if (key === 'table') {
            return;
          }
          const originalEditForm = component.editForm;
          component.editForm = function (...args) {
            const form = originalEditForm.apply(this, args);
            const layoutTab = getLayoutContainer(form);
            if (layoutTab && Array.isArray(layoutTab.components)) {
              const hasWidth = layoutTab.components.some((entry) => entry.key === 'inputWidth');
              if (!hasWidth) {
                layoutTab.components.push({
                  type: 'number',
                  input: true,
                  key: 'inputWidth',
                  label: 'Alan Geni\u{015f}li\u{011f}i (px)',
                  placeholder: '\u{00d6}rn: 260',
                  suffix: 'px',
                  tooltip: 'Alan geni\u{015f}li\u{011f}ini piksel olarak ayarlar.'
                });
              }
              const hasHeight = layoutTab.components.some((entry) => entry.key === 'inputHeight');
              if (!hasHeight) {
                layoutTab.components.push({
                  type: 'number',
                  input: true,
                  key: 'inputHeight',
                  label: 'Alan Y\u{00fc}ksekli\u{011f}i (px)',
                  placeholder: '\u{00d6}rn: 40',
                  suffix: 'px',
                  tooltip: 'Alan y\u{00fc}ksekli\u{011f}ini piksel olarak ayarlar.'
                });
              }
            }
            return form;
          };
          component.__yoretechSizePatched = true;
        });
      };

      extendInputSizingEditForm();

      const employeeEndpoint = "{{ route('admin.assignments.employees') }}";
      const titleEndpoint = "{{ route('admin.assignments.employee-titles') }}";
      const centerEndpoint = "{{ route('admin.assignments.responsibility-centers') }}";
      const logoUrl = @json($logoUrl);
      const logoHtml = logoUrl
        ? `<div class="form-logo text-center mb-3"><img src="${logoUrl}" alt="Logo" style="max-height:80px;max-width:240px;"></div>`
        : '<div class="form-logo text-center mb-3 text-muted">Logo</div>';
      const builderOptions = {
        builder: {
          custom: {
            title: 'Kurumsal',
            weight: 0,
            default: true,
            components: {
              logoBlock: {
                title: 'Logo',
                key: 'logoBlock',
                icon: 'image',
                schema: {
                  label: 'Logo',
                  type: 'content',
                  key: 'logo_block',
                  html: logoHtml
                }
              },
              labelBlock: {
                title: 'Label',
                key: 'labelBlock',
                icon: 'tag',
                schema: {
                  label: 'Label',
                  type: 'content',
                  key: 'label_block',
                  html: '<div class="form-label">Etiket</div>'
                }
              },
              employeeSelect: {
                title: 'Personel Listesi',
                key: 'employeeSelect',
                icon: 'user',
                schema: {
                  label: 'Personel',
                  type: 'select',
                  key: 'employee_id',
                  dataSrc: 'url',
                  data: { url: employeeEndpoint },
                  selectValues: 'data',
                  valueProperty: 'id',
                  template: '@{{ item.name }} (@{{ item.dept_name || "-" }})',
                  searchEnabled: true,
                  clearOnHide: true
                }
              },
              titleSelect: {
                title: '\u{00dc}nvan',
                key: 'titleSelect',
                icon: 'badge',
                schema: {
                  label: '\u{00dc}nvan',
                  type: 'select',
                  key: 'title_name',
                  dataSrc: 'url',
                  data: { url: titleEndpoint },
                  selectValues: 'data',
                  valueProperty: 'value',
                  template: '@{{ item.label }}',
                  searchEnabled: true,
                  clearOnHide: true
                }
              },
              centerSelect: {
                title: 'Sorumluluk Merkezi',
                key: 'centerSelect',
                icon: 'geo-alt',
                schema: {
                  label: 'Sorumluluk Merkezi',
                  type: 'select',
                  key: 'responsibility_center_id',
                  dataSrc: 'url',
                  data: { url: centerEndpoint },
                  selectValues: 'data',
                  valueProperty: 'value',
                  template: '@{{ item.label }}',
                  searchEnabled: true,
                  clearOnHide: true
                }
              }
            }
          }
        }
      };

      let schema = {};
      try {
        schema = JSON.parse(schemaInput.value || '{}');
      } catch (error) {
        schema = {};
      }

      window.Formio.builder(builderEl, schema, builderOptions).then((builder) => {
        extendBaseEditForm();
        extendTableEditForm();
        extendInputSizingEditForm();
        const updateSchema = () => {
          schemaInput.value = JSON.stringify(builder.schema || {}, null, 2);
        };
        builder.on('change', updateSchema);
        updateSchema();
      }).catch(() => {
        // ignore
      });
    })();
  </script>
@endpush