@extends('layouts.app')

@section('title', 'Settings — Field Templates')
@section('page-title', 'Property Field Templates')

@section('content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="fw-bold mb-0">Property Field Templates</h4>
        <div class="text-muted small">Define custom fields shown on property forms for each property type</div>
    </div>
    @if($activeType)
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
        <i class="bi bi-plus-lg me-1"></i> Add Field
    </button>
    @endif
</div>

{{-- Type selector tabs --}}
<div class="mb-4">
    <ul class="nav nav-pills gap-1 flex-wrap">
        @foreach($propertyTypes as $pt)
        <li class="nav-item">
            <a class="nav-link {{ $activeType === $pt->slug ? 'active' : '' }}"
               href="{{ route('admin.settings.property-field-templates.index', ['type' => $pt->slug]) }}">
                {{ $pt->name }}
            </a>
        </li>
        @endforeach
    </ul>
</div>

@if($activeType)
<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th style="width:36px"></th>
                    <th>Field Label</th>
                    <th>Field Key</th>
                    <th>Type</th>
                    <th class="text-center">Required</th>
                    <th>Condition</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody id="sortable-fields">
                @forelse($templates as $tmpl)
                @php
                    $parentField = $tmpl->depends_on ? $templates->firstWhere('field_key', $tmpl->depends_on) : null;
                    $parentLabel = $parentField ? $parentField->field_label : ($tmpl->depends_on ?: null);
                @endphp
                <tr data-id="{{ $tmpl->id }}">
                    <td class="text-muted" style="cursor:grab"><i class="bi bi-grip-vertical"></i></td>
                    <td class="fw-medium">{{ $tmpl->field_label }}</td>
                    <td><code class="small text-secondary">{{ $tmpl->field_key }}</code></td>
                    <td>
                        <span class="badge bg-light text-dark border">
                            {{ $fieldTypes[$tmpl->field_type] ?? $tmpl->field_type }}
                        </span>
                        @if($tmpl->field_type === 'select' && !empty($tmpl->options))
                            <span class="text-muted small ms-1">({{ count($tmpl->options) }} options)</span>
                        @endif
                    </td>
                    <td class="text-center">
                        @if($tmpl->is_required)
                            <i class="bi bi-check-circle-fill text-success"></i>
                        @else
                            <i class="bi bi-dash text-muted"></i>
                        @endif
                    </td>
                    <td class="small">
                        @if($parentLabel)
                            <span class="badge bg-info bg-opacity-10 text-info">
                                <i class="bi bi-diagram-2 me-1"></i>{{ $parentLabel }} = {{ $tmpl->show_if_value }}
                            </span>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </td>
                    <td class="text-center">
                        <button class="btn btn-sm btn-outline-primary me-1 edit-btn"
                                title="Edit"
                                data-id="{{ $tmpl->id }}"
                                data-label="{{ $tmpl->field_label }}"
                                data-type="{{ $tmpl->field_type }}"
                                data-required="{{ $tmpl->is_required ? '1' : '0' }}"
                                data-options="{{ implode("\n", $tmpl->options ?? []) }}"
                                data-depends-on="{{ $tmpl->depends_on ?? '' }}"
                                data-show-if-value="{{ $tmpl->show_if_value ?? '' }}"
                                data-bs-toggle="modal"
                                data-bs-target="#editModal">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <form action="{{ route('admin.settings.property-field-templates.destroy', $tmpl) }}" method="POST"
                              class="d-inline"
                              data-confirm="Delete field &quot;{{ $tmpl->field_label }}&quot;?">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center text-muted py-4">
                        No fields defined for this property type yet.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endif

<!-- Add Field Modal -->
<div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">Add Field</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.settings.property-field-templates.store') }}" method="POST">
                @csrf
                <input type="hidden" name="property_type" value="{{ $activeType }}">
                <div class="modal-body pt-3">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Field Label <span class="text-danger">*</span></label>
                        <input type="text" name="field_label" class="form-control @error('field_label') is-invalid @enderror"
                               value="{{ old('field_label') }}" placeholder="e.g. Number of Bedrooms" required maxlength="150">
                        @error('field_label')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Field Type <span class="text-danger">*</span></label>
                        <select name="field_type" id="add-field-type" class="form-select @error('field_type') is-invalid @enderror" required>
                            @foreach($fieldTypes as $val => $label)
                                <option value="{{ $val }}" {{ old('field_type') === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('field_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3" id="add-options-group" style="{{ old('field_type') === 'select' ? '' : 'display:none' }}">
                        <label class="form-label fw-medium">Options <span class="text-danger">*</span></label>
                        <textarea name="options" class="form-control" rows="4"
                                  placeholder="One option per line&#10;e.g.&#10;North&#10;South&#10;East">{{ old('options') }}</textarea>
                        <div class="form-text">Enter one option per line.</div>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="is_required" id="add-required" value="1"
                               {{ old('is_required') ? 'checked' : '' }}>
                        <label class="form-check-label" for="add-required">Required field</label>
                    </div>

                    <hr class="my-3">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Depends On <span class="text-muted fw-normal">(optional)</span></label>
                        <select name="depends_on" id="add-depends-on" class="form-select form-select-sm">
                            <option value="">None — always shown</option>
                            @foreach($templates as $t)
                                <option value="{{ $t->field_key }}"
                                        data-type="{{ $t->field_type }}"
                                        data-options="{{ implode(',', $t->options ?? []) }}"
                                        {{ old('depends_on') === $t->field_key ? 'selected' : '' }}>
                                    {{ $t->field_label }}
                                </option>
                            @endforeach
                        </select>
                        <div class="form-text">Show this field only when another field has a specific value.</div>
                    </div>
                    <div class="mb-3" id="add-show-if-group" style="display:none">
                        <label class="form-label fw-medium">Show When Value Is <span class="text-danger">*</span></label>
                        <div id="add-show-if-input-wrap"></div>
                        <input type="hidden" name="show_if_value" id="add-show-if-value" value="{{ old('show_if_value') }}">
                        <div class="form-text" id="add-show-if-hint"></div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Field</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Field Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">Edit Field</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editForm" action="" method="POST">
                @csrf @method('PATCH')
                <div class="modal-body pt-3">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Field Label <span class="text-danger">*</span></label>
                        <input type="text" name="field_label" id="edit-label" class="form-control" required maxlength="150">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Field Type <span class="text-danger">*</span></label>
                        <select name="field_type" id="edit-field-type" class="form-select" required>
                            @foreach($fieldTypes as $val => $label)
                                <option value="{{ $val }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3" id="edit-options-group" style="display:none">
                        <label class="form-label fw-medium">Options</label>
                        <textarea name="options" id="edit-options" class="form-control" rows="4"
                                  placeholder="One option per line"></textarea>
                        <div class="form-text">Enter one option per line.</div>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="is_required" id="edit-required" value="1">
                        <label class="form-check-label" for="edit-required">Required field</label>
                    </div>

                    <hr class="my-3">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Depends On <span class="text-muted fw-normal">(optional)</span></label>
                        <select name="depends_on" id="edit-depends-on" class="form-select form-select-sm">
                            <option value="">None — always shown</option>
                            @foreach($templates as $t)
                                <option value="{{ $t->field_key }}"
                                        data-type="{{ $t->field_type }}"
                                        data-options="{{ implode(',', $t->options ?? []) }}">
                                    {{ $t->field_label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3" id="edit-show-if-group" style="display:none">
                        <label class="form-label fw-medium">Show When Value Is <span class="text-danger">*</span></label>
                        <div id="edit-show-if-input-wrap"></div>
                        <input type="hidden" name="show_if_value" id="edit-show-if-value">
                        <div class="form-text" id="edit-show-if-hint"></div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var baseUrl = '{{ url("admin/settings/property-field-templates") }}';

    // ── Options group toggle ──────────────────────────────────────────────────
    function toggleOptionsGroup(selectEl, groupId) {
        var group = document.getElementById(groupId);
        if (group) group.style.display = selectEl.value === 'select' ? '' : 'none';
    }

    var addType = document.getElementById('add-field-type');
    if (addType) {
        addType.addEventListener('change', function () { toggleOptionsGroup(this, 'add-options-group'); });
        toggleOptionsGroup(addType, 'add-options-group');
    }

    var editType = document.getElementById('edit-field-type');
    if (editType) {
        editType.addEventListener('change', function () { toggleOptionsGroup(this, 'edit-options-group'); });
    }

    // ── Depends-On UI helper ──────────────────────────────────────────────────
    /**
     * Renders the appropriate "show when" control based on parent field type.
     * - boolean  → two radio buttons (Yes / No)
     * - select   → a <select> with the parent's options
     * - text/num → a plain text input
     * Syncs the chosen value into the hidden <input> with the given hiddenId.
     */
    function buildShowIfControl(parentFieldType, parentOptions, groupId, wrapId, hiddenId, hintId, currentValue) {
        var group  = document.getElementById(groupId);
        var wrap   = document.getElementById(wrapId);
        var hidden = document.getElementById(hiddenId);
        var hint   = document.getElementById(hintId);

        if (!group || !wrap || !hidden) return;

        wrap.innerHTML = '';

        if (!parentFieldType) {
            group.style.display = 'none';
            return;
        }

        group.style.display = '';

        if (parentFieldType === 'boolean') {
            hint.textContent = 'Field will appear when the parent toggle is set to Yes.';
            // Auto-set value to "1" (Yes) — no UI needed, just show info
            wrap.innerHTML = '<span class="badge bg-success bg-opacity-10 text-success"><i class="bi bi-toggle-on me-1"></i>Shows when parent is Yes (value = 1)</span>';
            hidden.value = '1';

        } else if (parentFieldType === 'select' && parentOptions) {
            hint.textContent = 'Select which option value triggers this field to appear.';
            var opts = parentOptions.split(',').filter(function (o) { return o.trim(); });
            var sel  = document.createElement('select');
            sel.className = 'form-select form-select-sm';
            opts.forEach(function (o) {
                var opt = document.createElement('option');
                opt.value = o.trim();
                opt.textContent = o.trim();
                if (currentValue === o.trim()) opt.selected = true;
                sel.appendChild(opt);
            });
            sel.addEventListener('change', function () { hidden.value = this.value; });
            wrap.appendChild(sel);
            hidden.value = sel.value;

        } else {
            hint.textContent = 'Enter the exact value that triggers this field to appear.';
            var inp = document.createElement('input');
            inp.type = 'text';
            inp.className = 'form-control form-control-sm';
            inp.placeholder = 'e.g. Yes, 1, North';
            inp.value = currentValue || '';
            inp.addEventListener('input', function () { hidden.value = this.value; });
            wrap.appendChild(inp);
            hidden.value = inp.value;
        }
    }

    function onDependsOnChange(selectEl, groupId, wrapId, hiddenId, hintId, currentValue) {
        var opt = selectEl.options[selectEl.selectedIndex];
        if (!selectEl.value) {
            var group = document.getElementById(groupId);
            if (group) group.style.display = 'none';
            return;
        }
        buildShowIfControl(opt.dataset.type, opt.dataset.options, groupId, wrapId, hiddenId, hintId, currentValue);
    }

    // Add modal depends-on
    var addDepends = document.getElementById('add-depends-on');
    if (addDepends) {
        addDepends.addEventListener('change', function () {
            onDependsOnChange(this, 'add-show-if-group', 'add-show-if-input-wrap', 'add-show-if-value', 'add-show-if-hint', '');
        });
        // Restore on page load (validation error)
        if (addDepends.value) {
            onDependsOnChange(addDepends, 'add-show-if-group', 'add-show-if-input-wrap', 'add-show-if-value', 'add-show-if-hint', '{{ old('show_if_value', '') }}');
        }
    }

    // Edit modal depends-on
    var editDepends = document.getElementById('edit-depends-on');
    if (editDepends) {
        editDepends.addEventListener('change', function () {
            onDependsOnChange(this, 'edit-show-if-group', 'edit-show-if-input-wrap', 'edit-show-if-value', 'edit-show-if-hint', '');
        });
    }

    // ── Edit button populates modal ───────────────────────────────────────────
    document.querySelectorAll('.edit-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.getElementById('editForm').action        = baseUrl + '/' + btn.dataset.id;
            document.getElementById('edit-label').value       = btn.dataset.label;
            document.getElementById('edit-field-type').value  = btn.dataset.type;
            document.getElementById('edit-required').checked  = btn.dataset.required === '1';
            document.getElementById('edit-options').value     = btn.dataset.options || '';
            toggleOptionsGroup(document.getElementById('edit-field-type'), 'edit-options-group');

            var dependsOn   = btn.dataset.dependsOn   || '';
            var showIfValue = btn.dataset.showIfValue  || '';
            document.getElementById('edit-depends-on').value = dependsOn;

            if (dependsOn) {
                var parentOpt = document.querySelector('#edit-depends-on option[value="' + dependsOn + '"]');
                if (parentOpt) {
                    buildShowIfControl(
                        parentOpt.dataset.type,
                        parentOpt.dataset.options,
                        'edit-show-if-group',
                        'edit-show-if-input-wrap',
                        'edit-show-if-value',
                        'edit-show-if-hint',
                        showIfValue
                    );
                }
            } else {
                var g = document.getElementById('edit-show-if-group');
                if (g) g.style.display = 'none';
            }
        });
    });

    @if($errors->any())
        (new bootstrap.Modal(document.getElementById('addModal'))).show();
    @endif

    // ── Drag-to-reorder ───────────────────────────────────────────────────────
    var tbody    = document.getElementById('sortable-fields');
    var dragging = null;

    if (tbody) {
        tbody.querySelectorAll('tr').forEach(function (r) { r.setAttribute('draggable', 'true'); });
        tbody.addEventListener('dragstart', function (e) {
            dragging = e.target.closest('tr');
            if (dragging) dragging.style.opacity = '0.5';
        });
        tbody.addEventListener('dragover', function (e) {
            e.preventDefault();
            var target = e.target.closest('tr');
            if (target && target !== dragging) {
                var mid = target.getBoundingClientRect().top + target.getBoundingClientRect().height / 2;
                tbody.insertBefore(dragging, e.clientY < mid ? target : target.nextSibling);
            }
        });
        tbody.addEventListener('dragend', function () {
            if (dragging) dragging.style.opacity = '';
            dragging = null;
            var ids = Array.from(tbody.querySelectorAll('tr')).map(function (r) { return r.dataset.id; });
            fetch('{{ route("admin.settings.property-field-templates.reorder") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
                body: JSON.stringify({ ids: ids }),
            });
        });
    }
}());
</script>
@endpush
@endsection