@php
    $coAuthors = $coAuthors ?? [];
    $principalPhone = $principalPhone ?? auth()->user()->phone_number;
    $principalAffiliation = $principalAffiliation ?? auth()->user()->affiliation;
@endphp

<div class="content-card p-4 mb-4 border border-success">
    <h6 class="mb-3">Principal Author (You)</h6>
    <div class="row g-3">
        <div class="col-md-3">
            <label class="form-label">First Name</label>
            <input class="form-control" value="{{ auth()->user()->first_name }}" readonly>
        </div>
        <div class="col-md-3">
            <label class="form-label">Other Name</label>
            <input class="form-control" value="{{ auth()->user()->other_name }}" readonly>
        </div>
        <div class="col-md-3">
            <label class="form-label">Last Name</label>
            <input class="form-control" value="{{ auth()->user()->last_name }}" readonly>
        </div>
        <div class="col-md-3">
            <label class="form-label">Formatted Name</label>
            <input class="form-control" value="{{ \App\Services\AuthorNameFormatter::fromUser(auth()->user()) }}" readonly>
        </div>
        <div class="col-md-4">
            <label class="form-label">Email</label>
            <input class="form-control" value="{{ auth()->user()->email }}" readonly>
        </div>
        <div class="col-md-4">
            <label class="form-label">Phone *</label>
            <input name="principal_phone" class="form-control" value="{{ old('principal_phone', $principalPhone) }}" required>
        </div>
        <div class="col-md-4">
            <label class="form-label">Affiliation</label>
            <input name="principal_affiliation" class="form-control" value="{{ old('principal_affiliation', $principalAffiliation) }}">
        </div>
    </div>
</div>

<div class="content-card p-4 mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h6 class="mb-1">Co-Authors</h6>
            <small class="text-muted">Add other authors. Names will appear as initials + surname (e.g. M. A. Tarkada).</small>
        </div>
        <button type="button" class="btn btn-outline-success btn-sm" id="add-coauthor-btn"><i class="fas fa-plus me-1"></i>Add Author</button>
    </div>
    <div id="coauthors-list"></div>
</div>

<template id="coauthor-template">
    <div class="border rounded p-3 mb-3 coauthor-row">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <strong class="coauthor-label">Co-Author</strong>
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-light move-up-btn" title="Move up"><i class="fas fa-arrow-up"></i></button>
                <button type="button" class="btn btn-light move-down-btn" title="Move down"><i class="fas fa-arrow-down"></i></button>
                <button type="button" class="btn btn-outline-danger remove-coauthor-btn" title="Remove"><i class="fas fa-trash"></i></button>
            </div>
        </div>
        <div class="row g-2">
            <div class="col-md-3"><input name="authors[__INDEX__][first_name]" class="form-control" placeholder="First name *"></div>
            <div class="col-md-3"><input name="authors[__INDEX__][other_name]" class="form-control" placeholder="Other name"></div>
            <div class="col-md-3"><input name="authors[__INDEX__][last_name]" class="form-control" placeholder="Last name *"></div>
            <div class="col-md-3"><input name="authors[__INDEX__][email]" type="email" class="form-control" placeholder="Email"></div>
            <div class="col-md-4"><input name="authors[__INDEX__][phone]" class="form-control" placeholder="Phone (optional)"></div>
            <div class="col-md-8"><input name="authors[__INDEX__][affiliation]" class="form-control" placeholder="Affiliation"></div>
        </div>
    </div>
</template>

@push('scripts')
<script>
(function () {
    const list = document.getElementById('coauthors-list');
    const template = document.getElementById('coauthor-template');
    const initialAuthors = @json(old('authors', $coAuthors ?? []));

    function reindexRows() {
        [...list.querySelectorAll('.coauthor-row')].forEach((row, index) => {
            row.querySelector('.coauthor-label').textContent = 'Co-Author #' + (index + 2);
            row.querySelectorAll('input').forEach((input) => {
                input.name = input.name.replace(/authors\[\d+\]/, 'authors[' + index + ']');
            });
        });
    }

    function addRow(data = {}) {
        const index = list.querySelectorAll('.coauthor-row').length;
        const html = template.innerHTML.replaceAll('__INDEX__', index);
        const wrapper = document.createElement('div');
        wrapper.innerHTML = html;
        const row = wrapper.firstElementChild;
        row.querySelector('[name$="[first_name]"]').value = data.first_name || '';
        row.querySelector('[name$="[other_name]"]').value = data.other_name || '';
        row.querySelector('[name$="[last_name]"]').value = data.last_name || '';
        row.querySelector('[name$="[email]"]').value = data.email || '';
        row.querySelector('[name$="[phone]"]').value = data.phone || '';
        row.querySelector('[name$="[affiliation]"]').value = data.affiliation || '';
        list.appendChild(row);
        reindexRows();
    }

    list?.addEventListener('click', function (event) {
        const row = event.target.closest('.coauthor-row');
        if (!row) return;
        if (event.target.closest('.remove-coauthor-btn')) {
            row.remove();
            reindexRows();
        }
        if (event.target.closest('.move-up-btn')) {
            const prev = row.previousElementSibling;
            if (prev) list.insertBefore(row, prev);
            reindexRows();
        }
        if (event.target.closest('.move-down-btn')) {
            const next = row.nextElementSibling;
            if (next) list.insertBefore(next, row);
            reindexRows();
        }
    });

    document.getElementById('add-coauthor-btn')?.addEventListener('click', () => addRow());

    if (initialAuthors.length) {
        initialAuthors.forEach((author) => addRow(author));
    }
})();
</script>
@endpush