@php
    $isEdit = isset($department) && $department->exists;
    $action = $isEdit ? route('applications.departments.update', $department->id) : route('applications.departments.store');
    $memberExts = collect($members ?? [])->pluck('extension')->all();
    // Build lookup: ext => name
    $extMap = collect($allExtensions)->keyBy('id');
@endphp

<form method="POST" action="{{ $action }}" id="deptForm">
    @csrf
    @if($isEdit) @method('PUT') @endif

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-body">
                    <h6 class="mb-3">General</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Name *</label>
                            <input type="text" name="name" class="form-control" required value="{{ old('name', $department->name) }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Feature Code</label>
                            <input type="text" name="code" class="form-control" placeholder="e.g. *D10"
                                   value="{{ old('code', $department->code ?? ($suggestedCode ?? '')) }}">
                            <small class="text-secondary">Dial this code to ring the department.</small>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Color</label>
                            <input type="color" name="color" class="form-control form-control-color" style="height:38px;width:100%"
                                   value="{{ old('color', $department->color ?: '#6366f1') }}">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Description</label>
                            <input type="text" name="description" class="form-control" value="{{ old('description', $department->description) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Manager Extension</label>
                            <input type="text" name="manager_extension" class="form-control" placeholder="e.g. 1000"
                                   value="{{ old('manager_extension', $department->manager_extension) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">CallerID Prefix</label>
                            <input type="text" name="callerid_prefix" class="form-control" placeholder="e.g. [Sales]"
                                   value="{{ old('callerid_prefix', $department->callerid_prefix) }}">
                            <small class="text-secondary">Prepended to caller name when ringing department members.</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <h6 class="mb-3">Routing</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Ring Strategy</label>
                            <select name="strategy" class="form-select">
                                @foreach($strategies as $k => $v)
                                    <option value="{{ $k }}" @selected(old('strategy', $department->strategy ?? 'ringall') === $k)>{{ $v }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Timeout (sec)</label>
                            <input type="number" name="timeout" min="5" max="600" class="form-control"
                                   value="{{ old('timeout', $department->timeout ?: 30) }}">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="force_recording" value="1" id="recSwitch"
                                       @checked(old('force_recording', $department->force_recording))>
                                <label class="form-check-label" for="recSwitch">Force recording</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Members: dual-panel transfer list --}}
            <div class="card mb-3">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Members</h6>
                        <span class="badge bg-primary" id="memberCount">{{ count($memberExts) }} selected</span>
                    </div>

                    <div class="row g-0 border rounded overflow-hidden" style="min-height:360px;">
                        {{-- Left: Available --}}
                        <div class="col-md-6 border-end d-flex flex-column" style="background:#fcfcfd;">
                            <div class="px-3 py-2 border-bottom" style="background:#f8f9fa;">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="fw-semibold small text-secondary">Available Extensions</span>
                                    <button type="button" class="btn btn-link btn-sm p-0 text-primary" id="addAllBtn" title="Add all">Add All</button>
                                </div>
                                <input type="text" class="form-control form-control-sm" id="availSearch" placeholder="Search by number or name...">
                            </div>
                            <div id="availList" class="flex-grow-1" style="overflow-y:auto;max-height:290px;">
                                {{-- Populated by JS --}}
                            </div>
                        </div>
                        {{-- Right: Selected --}}
                        <div class="col-md-6 d-flex flex-column">
                            <div class="px-3 py-2 border-bottom" style="background:#f8f9fa;">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="fw-semibold small text-secondary">Selected Members</span>
                                    <button type="button" class="btn btn-link btn-sm p-0 text-danger" id="removeAllBtn" title="Remove all">Remove All</button>
                                </div>
                                <small class="text-muted" style="font-size:.72rem;">Drag to reorder priority (hunt/memory strategies).</small>
                            </div>
                            <div id="selectedList" class="flex-grow-1" style="overflow-y:auto;max-height:290px;">
                                {{-- Populated by JS --}}
                            </div>
                            <div id="emptySelected" class="text-center text-secondary small py-5" style="display:none;">
                                <i data-feather="users" style="width:24px;height:24px;" class="mb-2 d-block mx-auto opacity-50"></i>
                                No members yet — click extensions to add them.
                            </div>
                        </div>
                    </div>
                    {{-- Hidden inputs container --}}
                    <div id="memberInputs"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-body">
                    <h6 class="mb-3">Status</h6>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" name="enabled" value="1" id="enSwitch"
                               @checked(old('enabled', $department->enabled ?? true))>
                        <label class="form-check-label" for="enSwitch">Enabled</label>
                    </div>
                    <small class="text-secondary d-block">Disabling removes the dialplan code without losing config.</small>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <h6>Tips</h6>
                    <ul class="small text-secondary ps-3 mb-0">
                        <li><strong>Ring all</strong> rings every member at once.</li>
                        <li><strong>Hunt</strong> tries members one after another in order.</li>
                        <li><strong>Memory</strong> = like hunt but starts from last.</li>
                        <li><strong>Random</strong> picks one member per call.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary">{{ $isEdit ? 'Save Changes' : 'Create Department' }}</button>
        <a href="{{ route('applications.departments.index') }}" class="btn btn-outline-secondary">Cancel</a>
    </div>
</form>

<style>
.tp-ext-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background .12s;
    user-select: none;
}
.tp-ext-row:hover { background: #f0f4ff; }
.tp-ext-row .ext-num {
    font-weight: 600; font-size: .82rem; min-width: 52px;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.tp-ext-row .ext-name { font-size: .78rem; color: #6b7280; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-ext-row .tp-action { opacity: 0; transition: opacity .12s; }
.tp-ext-row:hover .tp-action { opacity: 1; }
.tp-ext-row.selected-row { background: #fff; }
.tp-ext-row.selected-row .tp-action { opacity: .5; }
.tp-ext-row.selected-row:hover .tp-action { opacity: 1; }
.tp-ext-row.drag-over { border-top: 2px solid #6366f1; }
.tp-ext-row .drag-handle { cursor: grab; color: #ccc; font-size: .72rem; }
.tp-ext-row .drag-handle:active { cursor: grabbing; }
.tp-ext-row .priority-badge { font-size: .65rem; background: #e0e7ff; color: #4338ca; border-radius: 8px; padding: 1px 6px; font-weight: 600; min-width: 18px; text-align: center; }
</style>

@push('plugin-scripts')
<script>
(function () {
    // Extension data from server
    const allExts = @json(collect($allExtensions)->values());
    const initialSelected = @json($memberExts);

    // State: ordered array of selected ext ids
    let selected = [...initialSelected];

    // Build name lookup
    const nameMap = {};
    allExts.forEach(e => { nameMap[e.id] = e.name || ''; });

    const availList = document.getElementById('availList');
    const selectedList = document.getElementById('selectedList');
    const availSearch = document.getElementById('availSearch');
    const memberInputs = document.getElementById('memberInputs');
    const memberCount = document.getElementById('memberCount');
    const emptySelected = document.getElementById('emptySelected');

    function render() {
        renderAvail();
        renderSelected();
        syncInputs();
    }

    function renderAvail() {
        const q = (availSearch?.value || '').toLowerCase().trim();
        const available = allExts.filter(e => !selected.includes(e.id));
        const filtered = q === '' ? available : available.filter(e =>
            e.id.toLowerCase().includes(q) || (e.name || '').toLowerCase().includes(q)
        );

        if (filtered.length === 0) {
            availList.innerHTML = '<div class="text-center text-secondary small py-4">' +
                (q ? 'No matches' : 'All extensions assigned') + '</div>';
            return;
        }

        availList.innerHTML = filtered.map(e =>
            '<div class="tp-ext-row" data-ext="' + e.id + '">' +
                '<span class="ext-num">' + e.id + '</span>' +
                '<span class="ext-name">' + (e.name || '<span class=&quot;text-muted fst-italic&quot;>No name</span>') + '</span>' +
                '<span class="tp-action text-success" title="Add"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>' +
            '</div>'
        ).join('');

        availList.querySelectorAll('.tp-ext-row').forEach(row => {
            row.addEventListener('click', () => addMember(row.dataset.ext));
        });
    }

    function renderSelected() {
        emptySelected.style.display = selected.length === 0 ? '' : 'none';
        selectedList.style.display = selected.length === 0 ? 'none' : '';

        if (selected.length === 0) {
            selectedList.innerHTML = '';
            memberCount.textContent = '0 selected';
            return;
        }

        memberCount.textContent = selected.length + ' selected';

        selectedList.innerHTML = selected.map((ext, i) =>
            '<div class="tp-ext-row selected-row" data-ext="' + ext + '" draggable="true">' +
                '<span class="drag-handle" title="Drag to reorder">☰</span>' +
                '<span class="priority-badge">' + (i + 1) + '</span>' +
                '<span class="ext-num">' + ext + '</span>' +
                '<span class="ext-name">' + (nameMap[ext] || '') + '</span>' +
                '<span class="tp-action text-danger" title="Remove"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>' +
            '</div>'
        ).join('');

        // Click to remove
        selectedList.querySelectorAll('.tp-ext-row').forEach(row => {
            row.querySelector('.tp-action').addEventListener('click', (e) => {
                e.stopPropagation();
                removeMember(row.dataset.ext);
            });
        });

        // Drag-and-drop reorder
        initDragReorder();
    }

    function addMember(ext) {
        if (!selected.includes(ext)) {
            selected.push(ext);
            render();
        }
    }

    function removeMember(ext) {
        selected = selected.filter(e => e !== ext);
        render();
    }

    function syncInputs() {
        memberInputs.innerHTML = selected.map(ext =>
            '<input type="hidden" name="members[]" value="' + ext + '">'
        ).join('');
    }

    // Drag reorder
    function initDragReorder() {
        let dragIdx = null;

        selectedList.querySelectorAll('.tp-ext-row').forEach((row, i) => {
            row.addEventListener('dragstart', (e) => {
                dragIdx = i;
                row.style.opacity = '0.4';
                e.dataTransfer.effectAllowed = 'move';
            });
            row.addEventListener('dragend', () => {
                row.style.opacity = '';
                selectedList.querySelectorAll('.tp-ext-row').forEach(r => r.classList.remove('drag-over'));
            });
            row.addEventListener('dragover', (e) => {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
                selectedList.querySelectorAll('.tp-ext-row').forEach(r => r.classList.remove('drag-over'));
                row.classList.add('drag-over');
            });
            row.addEventListener('drop', (e) => {
                e.preventDefault();
                if (dragIdx === null || dragIdx === i) return;
                const moved = selected.splice(dragIdx, 1)[0];
                selected.splice(i, 0, moved);
                dragIdx = null;
                render();
            });
        });
    }

    // Search
    if (availSearch) {
        availSearch.addEventListener('input', renderAvail);
    }

    // Add all / Remove all
    document.getElementById('addAllBtn')?.addEventListener('click', () => {
        const q = (availSearch?.value || '').toLowerCase().trim();
        const toAdd = allExts.filter(e => !selected.includes(e.id))
            .filter(e => q === '' || e.id.toLowerCase().includes(q) || (e.name || '').toLowerCase().includes(q));
        toAdd.forEach(e => { if (!selected.includes(e.id)) selected.push(e.id); });
        render();
    });

    document.getElementById('removeAllBtn')?.addEventListener('click', () => {
        if (selected.length > 0 && confirm('Remove all ' + selected.length + ' members?')) {
            selected = [];
            render();
        }
    });

    // Initial render
    render();
})();
</script>
@endpush