@extends('adminlte::page')

@section('title', $pageTitle)

@section('content_header')
<div class="d-flex justify-content-between align-items-center">
    <div>
        <h1 class="m-0">{{ $pageTitle }}</h1>
        <ol class="breadcrumb mt-1 p-0 bg-transparent">
            <li class="breadcrumb-item"><a href="{{ url('admin') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.forms.index') }}">Forms</a></li>
            <li class="breadcrumb-item">
                <a href="{{ route('admin.forms.sections.index', $form) }}">{{ Str::before($form->title, ' (') }}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('admin.sections.questions.index', $section) }}">{{ $section->title }}</a>
            </li>
            <li class="breadcrumb-item active">{{ $pageTitle }}</li>
        </ol>
    </div>
</div>
@endsection

@section('content')

@php
    $q        = $question;
    $isCreate = is_null($q);
    $optHasTypes = ['radio', 'dropdown', 'multi_select'];
    $allQJson = $allQuestions->map(fn($aq) => [
        'field_key' => $aq->field_key,
        'label'     => $aq->label_en,
        'options'   => $aq->options ?? [],
        'section'   => $aq->section?->title ?? '',
    ])->values()->toJson();
@endphp

<div class="card card-outline card-primary">
    <div class="card-body">
        <form action="{{ $formAction }}" method="POST">
            @csrf
            @if($formMethod !== 'POST') @method($formMethod) @endif

            <div class="row">

                {{-- Field key --}}
                <div class="form-group col-md-3">
                    <label>Field key *
                        @if(!$isCreate)<span class="text-muted small">(locked)</span>@endif
                    </label>
                    @if($isCreate)
                        <input type="text" name="field_key"
                               value="{{ old('field_key') }}"
                               class="form-control @error('field_key') is-invalid @enderror"
                               placeholder="e.g. A-050" required>
                        <small class="text-muted">Letters, numbers, dash, underscore, dot only. Cannot be changed after creation.</small>
                        @error('field_key')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    @else
                        <input type="text" class="form-control" value="{{ $q->field_key }}" disabled>
                        <small class="text-muted">Locked — this key ties to historic submission data.</small>
                    @endif
                </div>

                {{-- Type --}}
                <div class="form-group col-md-3">
                    <label>Type *</label>
                    <select name="type" id="field-type"
                            class="form-control @error('type') is-invalid @enderror" required>
                        @foreach ($types as $t)
                            <option value="{{ $t }}" @selected(old('type', $q?->type) === $t)>{{ $t }}</option>
                        @endforeach
                    </select>
                    @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- Sort order --}}
                <div class="form-group col-md-2">
                    <label>Sort order *</label>
                    <input type="number" name="sort_order" min="0"
                           value="{{ old('sort_order', $q?->sort_order ?? 0) }}"
                           class="form-control @error('sort_order') is-invalid @enderror" required>
                    @error('sort_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- Asked to --}}
                <div class="form-group col-md-2">
                    <label>Asked to</label>
                    <input type="text" name="asked_to"
                           value="{{ old('asked_to', $q?->asked_to) }}"
                           class="form-control form-control-sm"
                           placeholder="Retailer / DSR / Self">
                </div>

                {{-- is_indent --}}
                <div class="form-group col-md-2 d-flex align-items-end pb-1">
                    <div class="icheck-primary">
                        <input type="checkbox" id="is_indent" name="is_indent" value="1"
                               @checked(old('is_indent', $q?->is_indent))>
                        <label for="is_indent">Indent (↳ follow-up)</label>
                    </div>
                </div>

                {{-- Label EN --}}
                <div class="form-group col-md-8">
                    <label>Label (English) *</label>
                    <input type="text" name="label_en"
                           value="{{ old('label_en', $q?->label_en) }}"
                           class="form-control @error('label_en') is-invalid @enderror" required>
                    @error('label_en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- Label BN --}}
                <div class="form-group col-md-4">
                    <label>Label (Bengali)</label>
                    <input type="text" name="label_bn"
                           value="{{ old('label_bn', $q?->label_bn) }}"
                           class="form-control">
                </div>

                {{-- Options (radio/dropdown/multi_select) --}}
                <div class="form-group col-12" id="section-options" style="display:none;">
                    <label>Options</label>
                    <div id="options-list">
                        @php $oldOptions = old('options', $q?->options ?? []); @endphp
                        @foreach ($oldOptions as $opt)
                        <div class="input-group mb-1 option-row">
                            <input type="text" name="options[]" value="{{ $opt }}"
                                   class="form-control form-control-sm" placeholder="Option text">
                            <div class="input-group-append">
                                <button type="button" class="btn btn-sm btn-danger btn-remove-opt">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <button type="button" id="btn-add-opt" class="btn btn-sm btn-outline-secondary mt-1">
                        <i class="fas fa-plus mr-1"></i>Add option
                    </button>
                </div>

                {{-- Number min/max/unit --}}
                <div class="form-group col-12" id="section-number" style="display:none;">
                    <div class="row">
                        <div class="col-md-3">
                            <label>Min</label>
                            <input type="number" name="min" value="{{ old('min', $q?->min) }}" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-3">
                            <label>Max</label>
                            <input type="number" name="max" value="{{ old('max', $q?->max) }}" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-3">
                            <label>Unit</label>
                            <input type="text" name="unit" value="{{ old('unit', $q?->unit) }}"
                                   class="form-control form-control-sm" placeholder="BDT / days / months">
                        </div>
                    </div>
                </div>

                {{-- Required type --}}
                <div class="form-group col-md-4">
                    <label>Required *</label>
                    <select name="required_type" id="required-type"
                            class="form-control @error('required_type') is-invalid @enderror" required>
                        <option value="no" @selected(old('required_type', $q?->required_type ?? 'no') === 'no')>No (optional)</option>
                        <option value="yes" @selected(old('required_type', $q?->required_type) === 'yes')>Yes (always required)</option>
                        <option value="conditional" @selected(old('required_type', $q?->required_type) === 'conditional')>Conditional</option>
                    </select>
                    @error('required_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- Depends on (conditional) --}}
                <div class="col-12" id="section-depends" style="display:none;">
                    <div class="card bg-light mb-3">
                        <div class="card-body pb-2">
                            <h6>Depends on</h6>
                            <div class="row">
                                <div class="form-group col-md-5">
                                    <label>Controlling field</label>
                                    <select name="depends_on[field]" id="dep-field" class="form-control form-control-sm">
                                        <option value="">— pick a field —</option>
                                        @foreach ($allQuestions->groupBy(fn($aq) => $aq->section?->title ?? 'Other') as $sTitle => $sQuestions)
                                        <optgroup label="{{ $sTitle }}">
                                            @foreach ($sQuestions as $aq)
                                            <option value="{{ $aq->field_key }}"
                                                @selected(old('depends_on.field', $q?->depends_on['field'] ?? '') === $aq->field_key)>
                                                {{ $aq->field_key }} — {{ Str::limit($aq->label_en, 40) }}
                                            </option>
                                            @endforeach
                                        </optgroup>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-7">
                                    <label>Trigger values <small class="text-muted">(hold Ctrl/Cmd for multi)</small></label>
                                    <select name="depends_on[values][]" id="dep-values"
                                            multiple class="form-control form-control-sm" size="4">
                                        {{-- Populated by JS based on selected field's options --}}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save mr-1"></i>Save
            </button>
            <a href="{{ route('admin.sections.questions.index', $section) }}" class="btn btn-default ml-2">Cancel</a>
        </form>
    </div>
</div>

@endsection

@section('js')
<script>
(function ($) {
    'use strict';

    var allQuestions = {!! $allQJson !!};
    var savedDepField  = '{{ old('depends_on.field', $q?->depends_on['field'] ?? '') }}';
    var savedDepValues = {!! json_encode(old('depends_on.values', $q?->depends_on['values'] ?? [])) !!};
    var optHasTypes    = ['radio', 'dropdown', 'multi_select'];

    function updateVisibility() {
        var type = $('#field-type').val();
        var req  = $('#required-type').val();
        $('#section-options').toggle(optHasTypes.includes(type));
        $('#section-number').toggle(type === 'number');
        $('#section-depends').toggle(req === 'conditional');
    }

    function populateDepValues() {
        var fieldKey = $('#dep-field').val();
        var $sel     = $('#dep-values').empty();
        var found    = allQuestions.find(function (q) { return q.field_key === fieldKey; });
        if (found && found.options.length) {
            found.options.forEach(function (opt) {
                var selected = savedDepValues.includes(opt) ? ' selected' : '';
                $sel.append('<option value="' + $('<div>').text(opt).html() + '"' + selected + '>'
                    + $('<div>').text(opt).html() + '</option>');
            });
        }
    }

    // Init
    updateVisibility();
    if (savedDepField) {
        $('#dep-field').val(savedDepField);
        populateDepValues();
    }

    $('#field-type').on('change', updateVisibility);
    $('#required-type').on('change', updateVisibility);
    $('#dep-field').on('change', function () { savedDepValues = []; populateDepValues(); });

    // Options repeater
    function addOptionRow(val) {
        $('#options-list').append(
            '<div class="input-group mb-1 option-row">'
            + '<input type="text" name="options[]" value="' + (val||'') + '" class="form-control form-control-sm" placeholder="Option text">'
            + '<div class="input-group-append"><button type="button" class="btn btn-sm btn-danger btn-remove-opt"><i class="fas fa-times"></i></button></div>'
            + '</div>'
        );
    }
    $('#btn-add-opt').on('click', function () { addOptionRow(''); });
    $(document).on('click', '.btn-remove-opt', function () { $(this).closest('.option-row').remove(); });

}(jQuery));
</script>
@endsection