@extends('layouts.app')
@section('title', 'Add Additional Agenda Item')

@push('stylesheets')
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<style>
    .mws-aa-scheme-wrap .select2-container { width: 100% !important; }
    .mws-participant-select-wrap .select2-container { width: 100% !important; }
    .mws-participant-select-wrap .select2-container .select2-selection--multiple { min-height: 2.65rem; }
</style>
@endpush

@section('contents')
@php
    $existingExclude = $existingCatalogExclude ?? [];
    $guestRows = old('guests', [['label' => '', 'email' => '']]);
    if (! is_array($guestRows) || $guestRows === []) {
        $guestRows = [['label' => '', 'email' => '']];
    }
@endphp
<section class="content">
<div class="container-fluid">
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
        <div>
            <h1 class="h3 mb-1">Add Additional Agenda Item</h1>
            <div class="text-muted">{{ $meeting->reference_id }} · {{ $meeting->title }}</div>
        </div>
        <a href="{{ route('meeting-workspace.meetings.show', $meeting) }}" class="btn btn-default">Back to meeting</a>
    </div>

    @if ($noticeAlreadyIssued ?? false)
        <div class="alert alert-info">
            A meeting notice has already been issued. Adding agenda items will keep the current meeting status and send a revised notice (with PDF) to participants.
        </div>
    @else
        <div class="alert alert-secondary">
            The meeting notice has not been issued yet. New schemes will be added to the agenda only; the first notice version is created when the notice is generated.
        </div>
    @endif

    <form method="post" action="{{ route('meeting-workspace.meetings.additional-agenda.store', $meeting) }}" id="mws-additional-agenda-form">
        @csrf

        <div class="card card-outline card-primary mb-3">
            <div class="card-header"><h3 class="card-title mb-0">Schemes / PCNs</h3></div>
            <div class="card-body">
                <p class="text-muted small mb-3">Select one or more schemes that are not already on this meeting.</p>
                <div id="mws-aa-rows">
                    @php $oldLinks = old('subject_links', [['pc_form_id' => '', 'project_concept_note_id' => '', 'project_id' => '']]); @endphp
                    @foreach ($oldLinks as $idx => $row)
                        <div class="form-group mws-aa-scheme-wrap mb-2" data-aa-row="1">
                            <select class="form-control mws-aa-scheme-select" data-placeholder="Search scheme / PCN…">
                                <option value=""></option>
                            </select>
                            <input type="hidden" name="subject_links[{{ $idx }}][pc_form_id]" class="mws-aa-pc-form-id" value="{{ $row['pc_form_id'] ?? '' }}">
                            <input type="hidden" name="subject_links[{{ $idx }}][project_concept_note_id]" class="mws-aa-pcn-id" value="{{ $row['project_concept_note_id'] ?? '' }}">
                            <input type="hidden" name="subject_links[{{ $idx }}][project_id]" class="mws-aa-project-id" value="{{ $row['project_id'] ?? '' }}">
                        </div>
                    @endforeach
                </div>
                <button type="button" class="btn btn-sm btn-outline-primary" id="mws-aa-add-row">Add another scheme</button>
                @error('subject_links')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="card card-outline card-secondary mb-3">
            <div class="card-header"><h3 class="card-title mb-0">Additional participants (optional)</h3></div>
            <div class="card-body">
                <div class="form-group mws-participant-select-wrap">
                    <label>Internal participants</label>
                    <select
                        name="participant_user_ids[]"
                        id="mws-aa-participant-user-ids"
                        class="form-control"
                        multiple
                        data-placeholder="Search and select participants…"
                    >
                        @foreach ($users as $u)
                            <option value="{{ $u->id }}" @selected(in_array($u->id, old('participant_user_ids', []), false))>
                                {{ ! empty($mwsParticipantNameOnly) ? $u->name : $u->name.' — '.$u->email }}
                            </option>
                        @endforeach
                    </select>
                    <small class="form-text text-muted">Existing participants stay on the meeting. Only new people need to be selected here.</small>
                </div>

                <label class="d-block">External guests (optional)</label>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th style="width:1%;white-space:nowrap;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="mws-aa-guest-tbody">
                            @foreach ($guestRows as $idx => $g)
                                <tr class="mws-aa-guest-row">
                                    <td>
                                        <input type="text" class="form-control" name="guests[{{ $idx }}][label]" value="{{ $g['label'] ?? '' }}" maxlength="255" placeholder="Guest name">
                                    </td>
                                    <td>
                                        <input type="email" class="form-control" name="guests[{{ $idx }}][email]" value="{{ $g['email'] ?? '' }}" maxlength="255" placeholder="email@example.com">
                                    </td>
                                    <td class="text-right text-nowrap">
                                        @if ($idx === 0)
                                            <button type="button" class="btn btn-sm btn-outline-primary mws-aa-guest-add">Add Guest</button>
                                        @else
                                            <button type="button" class="btn btn-sm btn-outline-danger mws-aa-guest-remove">Remove</button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="mb-4">
            <button type="submit" class="btn btn-primary">Save additional agenda item</button>
            <a href="{{ route('meeting-workspace.meetings.show', $meeting) }}" class="btn btn-default">Cancel</a>
        </div>
    </form>
</div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
(function () {
    var catalogUrl = @json(route('meeting-workspace.subject-catalog'));
    var meetingType = @json((string) ($meeting->meeting_type ?? ''));
    var baseExclude = @json($existingExclude);
    var $ = window.jQuery;
    if (!$) return;

    function selectedKeys() {
        var keys = baseExclude.slice();
        document.querySelectorAll('.mws-aa-scheme-wrap').forEach(function (wrap) {
            var fid = wrap.querySelector('.mws-aa-pc-form-id');
            var pcn = wrap.querySelector('.mws-aa-pcn-id');
            var f = fid && fid.value ? parseInt(fid.value, 10) : 0;
            var p = pcn && pcn.value ? parseInt(pcn.value, 10) : 0;
            if (f > 0) keys.push('form:' + f);
            else if (p > 0) keys.push('pcn:' + p);
        });
        return keys;
    }

    function initSchemeSelect(sel) {
        var $sel = $(sel);
        if ($sel.data('select2')) return;
        $sel.select2({
            theme: 'bootstrap4',
            width: '100%',
            allowClear: true,
            placeholder: 'Search scheme / PCN…',
            minimumInputLength: 0,
            ajax: {
                url: catalogUrl,
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term || '',
                        page: params.page || 1,
                        exclude: selectedKeys().join(','),
                        meeting_type: meetingType
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    var excluded = selectedKeys();
                    var results = (data.results || []).filter(function (item) {
                        var key = String((item && (item.catalog_key || item.id)) || '');
                        return key && excluded.indexOf(key) === -1;
                    }).map(function (item) {
                        return {
                            id: item.catalog_key || item.id,
                            text: item.text || item.name || item.label || item.catalog_key,
                            catalog_key: item.catalog_key || item.id,
                            pc_form_id: item.pc_form_id || 0,
                            project_concept_note_id: item.project_concept_note_id || 0,
                            project_id: item.project_id || 0,
                            name: item.name || item.text || ''
                        };
                    });
                    return {
                        results: results,
                        pagination: { more: !!(data.pagination && data.pagination.more) }
                    };
                },
                cache: true
            }
        });

        $sel.on('select2:select', function (e) {
            var data = e.params && e.params.data ? e.params.data : {};
            var wrap = sel.closest('.mws-aa-scheme-wrap');
            if (!wrap) return;
            var key = String(data.catalog_key || data.id || '');
            var fid = parseInt(data.pc_form_id || 0, 10) || 0;
            var pcn = parseInt(data.project_concept_note_id || 0, 10) || 0;
            var pid = parseInt(data.project_id || 0, 10) || 0;
            if (!fid && /^form:(\d+)$/.test(key)) fid = parseInt(RegExp.$1, 10);
            if (!pcn && /^pcn:(\d+)$/.test(key)) pcn = parseInt(RegExp.$1, 10);
            wrap.querySelector('.mws-aa-pc-form-id').value = fid > 0 ? String(fid) : '';
            wrap.querySelector('.mws-aa-pcn-id').value = (fid <= 0 && pcn > 0) ? String(pcn) : '';
            wrap.querySelector('.mws-aa-project-id').value = pid > 0 ? String(pid) : '';
        });
        $sel.on('select2:clear', function () {
            var wrap = sel.closest('.mws-aa-scheme-wrap');
            if (!wrap) return;
            wrap.querySelector('.mws-aa-pc-form-id').value = '';
            wrap.querySelector('.mws-aa-pcn-id').value = '';
            wrap.querySelector('.mws-aa-project-id').value = '';
        });
    }

    function reindexRows() {
        document.querySelectorAll('#mws-aa-rows .mws-aa-scheme-wrap').forEach(function (wrap, idx) {
            wrap.querySelector('.mws-aa-pc-form-id').setAttribute('name', 'subject_links[' + idx + '][pc_form_id]');
            wrap.querySelector('.mws-aa-pcn-id').setAttribute('name', 'subject_links[' + idx + '][project_concept_note_id]');
            wrap.querySelector('.mws-aa-project-id').setAttribute('name', 'subject_links[' + idx + '][project_id]');
        });
    }

    document.querySelectorAll('.mws-aa-scheme-select').forEach(initSchemeSelect);

    var addBtn = document.getElementById('mws-aa-add-row');
    if (addBtn) {
        addBtn.addEventListener('click', function () {
            var wrap = document.createElement('div');
            wrap.className = 'form-group mws-aa-scheme-wrap mb-2';
            wrap.setAttribute('data-aa-row', '1');
            wrap.innerHTML =
                '<select class="form-control mws-aa-scheme-select" data-placeholder="Search scheme / PCN…"><option value=""></option></select>' +
                '<input type="hidden" class="mws-aa-pc-form-id" value="">' +
                '<input type="hidden" class="mws-aa-pcn-id" value="">' +
                '<input type="hidden" class="mws-aa-project-id" value="">';
            document.getElementById('mws-aa-rows').appendChild(wrap);
            reindexRows();
            initSchemeSelect(wrap.querySelector('.mws-aa-scheme-select'));
        });
    }

    $('#mws-aa-participant-user-ids').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: $('#mws-aa-participant-user-ids').data('placeholder') || 'Search…',
        allowClear: true
    });

    var guestTbody = document.getElementById('mws-aa-guest-tbody');
    document.addEventListener('click', function (e) {
        var add = e.target.closest('.mws-aa-guest-add');
        if (add && guestTbody) {
            var idx = guestTbody.querySelectorAll('tr.mws-aa-guest-row').length;
            var tr = document.createElement('tr');
            tr.className = 'mws-aa-guest-row';
            tr.innerHTML =
                '<td><input type="text" class="form-control" name="guests[' + idx + '][label]" maxlength="255" placeholder="Guest name"></td>' +
                '<td><input type="email" class="form-control" name="guests[' + idx + '][email]" maxlength="255" placeholder="email@example.com"></td>' +
                '<td class="text-right text-nowrap"><button type="button" class="btn btn-sm btn-outline-danger mws-aa-guest-remove">Remove</button></td>';
            guestTbody.appendChild(tr);
            return;
        }
        var rem = e.target.closest('.mws-aa-guest-remove');
        if (rem) {
            var row = rem.closest('tr.mws-aa-guest-row');
            if (row) row.remove();
        }
    });

    document.getElementById('mws-additional-agenda-form').addEventListener('submit', function (e) {
        reindexRows();
        var has = false;
        document.querySelectorAll('.mws-aa-scheme-wrap').forEach(function (wrap) {
            var fid = wrap.querySelector('.mws-aa-pc-form-id');
            var pcn = wrap.querySelector('.mws-aa-pcn-id');
            if ((fid && fid.value) || (pcn && pcn.value)) has = true;
        });
        if (!has) {
            e.preventDefault();
            alert('Select at least one scheme or PCN.');
        }
    });
})();
</script>
@endpush