@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.($form ? __('Edit form') : __('New form')))
@section('content')
    @php
        $rows = old('kpis');
        if (! is_array($rows)) {
            $rows = $form
                ? $form->formKpis->map(fn ($fk) => [
                    'kpi_indicator_id' => $fk->kpi_indicator_id,
                    'weightage' => $fk->weightage,
                    'smart_specific' => $fk->smart_specific,
                    'smart_measurable' => $fk->smart_measurable,
                    'smart_achievable' => $fk->smart_achievable,
                    'smart_relevant' => $fk->smart_relevant,
                    'smart_timebound' => $fk->smart_timebound,
                ])->toArray()
                : [];
        }
        if (count($rows) === 0) {
            $rows[] = ['kpi_indicator_id' => '', 'weightage' => '', 'smart_specific' => '', 'smart_measurable' => '', 'smart_achievable' => '', 'smart_relevant' => '', 'smart_timebound' => ''];
        }
        $kpiOptions = $kpisLibrary->map(fn ($lib) => [
            'id' => $lib->id,
            'label' => ($lib->title_bn ? $lib->title_bn.' — ' : '').$lib->title,
        ])->values();
    @endphp
    <div class="row mt-3 mb-3">
        <div class="col-12 col-xl-10 mx-auto">
            <div class="card">
                <div class="card-header"><h5 class="mb-0">{{ $form ? __('Edit evaluation form') : __('New evaluation form') }}</h5></div>
                <div class="card-body">
                    <form method="post" action="{{ $form ? route('pa.forms.update', $form->id) : route('pa.forms.store') }}" id="evaluation-form">
                        @csrf
                        <div class="form-group"><label>{{ __('Title') }}</label><input type="text" name="title" class="form-control" value="{{ old('title', $form->title ?? '') }}" required></div>
                        <div class="form-group"><label>{{ __('Description') }}</label><textarea name="description" class="form-control" rows="2">{{ old('description', $form->description ?? '') }}</textarea></div>
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label>{{ __('Department (optional)') }}</label>
                                <select name="department_id" class="form-control">
                                    <option value="">{{ __('Any') }}</option>
                                    @foreach($departments as $d)
                                        <option value="{{ $d->id }}" @selected((string) old('department_id', $form->department_id ?? '') === (string) $d->id)>{{ $d->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label>{{ __('Designation (optional)') }}</label>
                                <select name="designation_id" class="form-control">
                                    <option value="">{{ __('Any') }}</option>
                                    @foreach($designations as $d)
                                        <option value="{{ $d->id }}" @selected((string) old('designation_id', $form->designation_id ?? '') === (string) $d->id)>{{ $d->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-2">
                                <label>{{ __('Priority') }}</label>
                                <input type="number" name="priority" class="form-control" value="{{ old('priority', $form->priority ?? 0) }}">
                            </div>
                            <div class="form-group col-md-2 d-flex align-items-end">
                                <input type="hidden" name="is_active" value="0">
                                <label class="mb-0"><input type="checkbox" name="is_active" value="1" {{ old('is_active', $form->is_active ?? true) ? 'checked' : '' }}> {{ __('Active') }}</label>
                            </div>
                        </div>

                        <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 mb-2">
                            <h6 class="mb-0">{{ __('KPI lines (SMART + weight; weights must total 100%)') }}</h6>
                            <div>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="btn-add-kpi-row">
                                    <i class="mdi mdi-plus"></i> {{ __('Add KPI row') }}
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-recalc-weights">
                                    {{ __('Recalculate weights') }}
                                </button>
                            </div>
                        </div>
                        @error('kpis')<div class="text-danger small">{{ $message }}</div>@enderror
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered" id="kpi-table">
                                <thead>
                                <tr>
                                    <th style="width:28%">{{ __('KPI') }}</th>
                                    <th style="width:9%">{{ __('Weight %') }}</th>
                                    <th>S</th><th>M</th><th>A</th><th>R</th><th>T</th>
                                    <th style="width:40px"></th>
                                </tr>
                                </thead>
                                <tbody id="kpi-table-body"></tbody>
                            </table>
                        </div>
                        <p class="small mb-1">
                            <strong>{{ __('Weight total') }}:</strong>
                            <span id="kpi-weight-total">0</span>%
                            <span id="kpi-weight-status" class="ml-2"></span>
                        </p>
                        <p class="small text-muted">{{ __('Select KPIs above — weight is split equally among selected rows (e.g. 8 KPIs → 12.5% each). You can adjust manually; use Recalculate to redistribute.') }}</p>
                        <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                        <a href="{{ route('pa.forms.index') }}" class="btn btn-light">{{ __('Back') }}</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <template id="kpi-row-template">
        <tr class="kpi-row">
            <td>
                <select class="form-control form-control-sm kpi-select" data-name="kpi_indicator_id">
                    <option value="">{{ __('—') }}</option>
                </select>
            </td>
            <td><input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm weight-input" data-name="weightage"></td>
            <td><input type="text" class="form-control form-control-sm" data-name="smart_specific"></td>
            <td><input type="text" class="form-control form-control-sm" data-name="smart_measurable"></td>
            <td><input type="text" class="form-control form-control-sm" data-name="smart_achievable"></td>
            <td><input type="text" class="form-control form-control-sm" data-name="smart_relevant"></td>
            <td><input type="text" class="form-control form-control-sm" data-name="smart_timebound"></td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-danger btn-remove-kpi-row" title="{{ __('Remove row') }}">&times;</button>
            </td>
        </tr>
    </template>
@endsection

@section('script')
    <script>
        (function () {
            var kpiOptions = @json($kpiOptions);
            var initialRows = @json($rows);
            var tbody = document.getElementById('kpi-table-body');
            var template = document.getElementById('kpi-row-template');
            var rowIndex = 0;

            function buildKpiSelect(selectEl, selectedId) {
                selectEl.innerHTML = '<option value="">{{ __("—") }}</option>';
                kpiOptions.forEach(function (opt) {
                    var o = document.createElement('option');
                    o.value = String(opt.id);
                    o.textContent = opt.label;
                    if (String(selectedId) === String(opt.id)) {
                        o.selected = true;
                    }
                    selectEl.appendChild(o);
                });
            }

            function applyRowNames(tr, index) {
                tr.querySelectorAll('[data-name]').forEach(function (el) {
                    var field = el.getAttribute('data-name');
                    el.name = 'kpis[' + index + '][' + field + ']';
                });
            }

            function reindexRows() {
                var rows = tbody.querySelectorAll('.kpi-row');
                rows.forEach(function (tr, i) {
                    applyRowNames(tr, i);
                });
                rowIndex = rows.length;
                updateRemoveButtons();
            }

            function updateRemoveButtons() {
                var rows = tbody.querySelectorAll('.kpi-row');
                var disableRemove = rows.length <= 1;
                rows.forEach(function (tr) {
                    var btn = tr.querySelector('.btn-remove-kpi-row');
                    if (btn) {
                        btn.disabled = disableRemove;
                    }
                });
            }

            function getSelectedRows() {
                return Array.prototype.filter.call(tbody.querySelectorAll('.kpi-row'), function (tr) {
                    return tr.querySelector('.kpi-select').value !== '';
                });
            }

            function distributeWeights() {
                var selected = getSelectedRows();
                var n = selected.length;
                if (n === 0) {
                    updateWeightTotal();
                    return;
                }
                var per = Math.floor((100 / n) * 100) / 100;
                var assigned = 0;
                selected.forEach(function (tr, i) {
                    var w = (i === n - 1) ? Math.round((100 - assigned) * 100) / 100 : per;
                    assigned += w;
                    tr.querySelector('.weight-input').value = w;
                });
                tbody.querySelectorAll('.kpi-row').forEach(function (tr) {
                    if (tr.querySelector('.kpi-select').value === '') {
                        tr.querySelector('.weight-input').value = '';
                    }
                });
                updateWeightTotal();
            }

            function updateWeightTotal() {
                var sum = 0;
                getSelectedRows().forEach(function (tr) {
                    var v = parseFloat(tr.querySelector('.weight-input').value);
                    if (!isNaN(v)) {
                        sum += v;
                    }
                });
                sum = Math.round(sum * 100) / 100;
                document.getElementById('kpi-weight-total').textContent = sum.toFixed(2);
                var status = document.getElementById('kpi-weight-status');
                if (getSelectedRows().length === 0) {
                    status.textContent = '';
                    status.className = 'ml-2 text-muted';
                } else if (Math.abs(sum - 100) < 0.06) {
                    status.textContent = '{{ __("OK") }}';
                    status.className = 'ml-2 text-success';
                } else {
                    status.textContent = '{{ __("Must be 100%") }}';
                    status.className = 'ml-2 text-danger';
                }
            }

            function addRow(data) {
                data = data || {};
                var clone = template.content.cloneNode(true);
                var tr = clone.querySelector('tr');
                buildKpiSelect(tr.querySelector('.kpi-select'), data.kpi_indicator_id || '');
                tr.querySelector('.weight-input').value = data.weightage !== undefined && data.weightage !== null ? data.weightage : '';
                ['smart_specific', 'smart_measurable', 'smart_achievable', 'smart_relevant', 'smart_timebound'].forEach(function (f) {
                    tr.querySelector('[data-name="' + f + '"]').value = data[f] || '';
                });
                applyRowNames(tr, rowIndex);
                rowIndex++;
                tbody.appendChild(tr);

                tr.querySelector('.kpi-select').addEventListener('change', function () {
                    distributeWeights();
                });
                tr.querySelector('.weight-input').addEventListener('input', updateWeightTotal);
                tr.querySelector('.btn-remove-kpi-row').addEventListener('click', function () {
                    if (tbody.querySelectorAll('.kpi-row').length <= 1) {
                        return;
                    }
                    tr.remove();
                    reindexRows();
                    distributeWeights();
                });
            }

            document.getElementById('btn-add-kpi-row').addEventListener('click', function () {
                addRow({});
                reindexRows();
                updateRemoveButtons();
            });

            document.getElementById('btn-recalc-weights').addEventListener('click', distributeWeights);

            initialRows.forEach(function (row) {
                addRow(row);
            });
            reindexRows();
            updateWeightTotal();

            document.getElementById('evaluation-form').addEventListener('submit', function (e) {
                distributeWeights();
                var selected = getSelectedRows();
                if (selected.length < 1) {
                    e.preventDefault();
                    alert(@json(__('Select at least one KPI.')));
                    return;
                }
                var sum = 0;
                selected.forEach(function (tr) {
                    sum += parseFloat(tr.querySelector('.weight-input').value) || 0;
                });
                if (Math.abs(sum - 100) > 0.06) {
                    e.preventDefault();
                    alert(@json(__('KPI weightages must sum to 100%.')));
                }
            });
        })();
    </script>
@endsection