@extends('layouts.master')

@section('title', 'New Matter')

@section('content')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
:root{--sky:#0ea5e9;--sky-deep:#0369a1;--sky-light:#38bdf8;--sky-ghost:rgba(14,165,233,.07);--sky-border:rgba(14,165,233,.2);--ink:#0f172a;--ink-mid:#475569;--ink-soft:#94a3b8;--white:#fff;--off:#f7fbff;--surface:#eef6fd;--border:#daeaf8;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--fd:'Cormorant Garamond',Georgia,serif;--fb:'DM Sans',system-ui,sans-serif}
.main-content{background:var(--off);font-family:var(--fb)}
.mt-page{max-width:1100px;margin:0 auto;padding:40px 24px 64px}
.mt-hero{background:linear-gradient(135deg,var(--sky-deep),var(--sky));border-radius:22px;padding:28px 34px;color:#fff;box-shadow:0 10px 28px rgba(14,165,233,.2);margin-bottom:22px}
.mt-hero h1{margin:0;font-family:var(--fd);font-size:36px}
.mt-hero p{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.85)}
.stepper{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:20px 0}
.step{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:600}
.step.active{border-color:var(--sky-border);color:var(--sky-deep);background:var(--surface)}
.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;margin-bottom:16px;box-shadow:0 6px 20px rgba(14,165,233,.08)}
.card h2{font-family:var(--fd);font-size:22px;margin:0 0 12px;color:var(--ink)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:6px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:13px}
textarea{min-height:90px;resize:vertical}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--sky-border);background:var(--sky-ghost);font-size:12px;color:var(--sky-deep)}
.badge.success{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.1);color:#0f766e}
.badge.warning{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.1);color:#92400e}
.badge.danger{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.1);color:#991b1b}
.table{width:100%;border-collapse:collapse;margin-top:8px}
.table th{background:var(--surface);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);padding:10px;border-bottom:1px solid var(--border)}
.table td{padding:10px;border-bottom:1px solid var(--border);font-size:13px;color:var(--ink-mid)}
.actions{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:10px;border:1px solid var(--sky-border);text-decoration:none;font-size:13px;font-weight:600;background:#fff;color:var(--sky-deep)}
.btn.primary{background:linear-gradient(135deg,var(--sky-deep),var(--sky));color:#fff;border-color:var(--sky-deep)}
.btn.ghost{color:var(--ink-mid)}
.hidden{display:none}
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:2000;padding:20px}
.conflict-modal{background:#fff;border-radius:18px;max-width:720px;width:100%;box-shadow:0 20px 50px rgba(2,132,199,.25);border:1px solid var(--border);padding:22px}
.conflict-modal h3{margin:0 0 6px;font-family:var(--fd);color:var(--sky-deep);font-size:22px}
.conflict-modal p{margin:0 0 14px;color:var(--ink-mid);font-size:13px}
.conflict-modal table{width:100%;border-collapse:collapse}
.conflict-modal th{background:var(--surface);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);padding:10px;border-bottom:1px solid var(--border)}
.conflict-modal td{padding:10px;border-bottom:1px solid var(--border);font-size:13px;color:var(--ink-mid)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.badge.running{border-color:rgba(56,189,248,.3);background:rgba(56,189,248,.12);color:#0369a1}
.alert{border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:16px}
.alert.error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#991b1b}
.alert.success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:#0f766e}
.search-results{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 24px rgba(15,23,42,.12);z-index:50;max-height:200px;overflow:auto}
.search-results button{width:100%;text-align:left;padding:8px 10px;border:0;background:#fff;font-size:12px;color:var(--ink-mid);cursor:pointer}
.search-results button:hover{background:var(--surface)}
@media (max-width: 768px){
    .mt-page{padding:24px 14px 40px}
}
</style>

<div class="mt-page">
    <nav style="font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:14px;">
        <a href="{{ route('modules.edit') }}" style="color:var(--ink-soft);text-decoration:none;">Edit Menu</a>
        <span>›</span>
        <a href="{{ route('modules.edit.matters') }}" style="color:var(--ink-soft);text-decoration:none;">Matters</a>
        <span>›</span>
        <span style="color:var(--sky-deep);">New Matter</span>
    </nav>

    <div class="mt-hero">
        <h1>Create Matter</h1>
        <p>Guided setup with conflict validation and litigation-only steps.</p>
    </div>

    @if ($errors->any())
        <div class="alert error">
            {{ $errors->first() }}
        </div>
    @endif
    @if (session('status'))
        <div class="alert success">
            {{ session('status') }}
        </div>
    @endif

    <div class="stepper">
        <div class="step active">Step 1 · Conflict Check</div>
        <div class="step active">Step 2 · Matter Details</div>
        <div class="step active">Step 3 · Add Clients</div>
        <div class="step active">Step 4 · Assign Lawyers</div>
        <div class="step active">Step 5 · Case Details</div>
    </div>

    <form method="POST" action="{{ route('modules.edit.matters.store') }}">
        @csrf
        <input type="hidden" id="conflictStatusInput" name="conflict_status" value="Pending">
        <input type="hidden" id="conflictCheckIdInput" name="conflict_check_id" value="">
        <div class="card">
            <h2>Step 1 · Conflict Check</h2>
            <div class="form-grid">
                <div>
                    <label>Client Names</label>
                    <input id="conflictClientNames" name="client_names" type="text" placeholder="Add client names">
                </div>
                <div>
                    <label>Opposing Parties</label>
                    <input id="conflictOpposingParties" name="opposing_parties" type="text" placeholder="Add opposing parties">
                </div>
                <div>
                    <label>Company Names</label>
                    <input id="conflictCompanyNames" name="company_names" type="text" placeholder="Add organizations">
                </div>
            </div>
            <div style="margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
                <span id="conflictStatusBadge" class="badge">Status: Pending</span>
                <button id="runConflictCheckBtn" type="button" class="btn">Run Conflict Search</button>
                <span style="font-size:12px;color:var(--ink-soft)">Cleared → proceed | Pending Review → draft only | Conflict Found → block or override.</span>
            </div>
        </div>

        <div class="card">
            <h2>Step 2 · Matter Details</h2>
            <div class="form-grid">
                <div>
                    <label>Matter Title</label>
                    <input name="matter_title" type="text" placeholder="Enter matter title" required>
                </div>
                <div>
                    <label>Matter Type</label>
                    <select id="matterType" name="type_id">
                        <option value="">Select type</option>
                        @foreach(($types ?? []) as $type)
                            <option value="{{ $type->id }}">{{ $type->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Matter Category</label>
                    <select name="category_id">
                        <option value="">Select category</option>
                        @foreach(($categories ?? []) as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Priority</label>
                    <select name="priority_id">
                        <option value="">Select priority</option>
                        @foreach(($priorities ?? []) as $priority)
                            <option value="{{ $priority->id }}">{{ $priority->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Status</label>
                    <select name="status_id">
                        <option value="">Select status</option>
                        @foreach(($statuses ?? []) as $status)
                            <option value="{{ $status->id }}">{{ $status->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Opened Date</label>
                    <input name="opened_date" type="date">
                </div>
                <div>
                    <label>Auto Matter Number</label>
                    <input type="text" value="{{ \App\Support\DocumentNumberHelper::nextMatterNumber() }}" readonly>
                </div>
                <div style="grid-column:1/-1;">
                    <label>Description</label>
                    <textarea name="description" placeholder="Summarize the matter scope"></textarea>
                </div>
            </div>
        </div>

        <div class="card">
            <h2>Step 3 · Add Clients</h2>
            <div class="form-grid">
                <div style="position:relative;">
                    <label>Client Search</label>
                    <input id="clientNameInput" type="text" placeholder="Search clients">
                    <div id="clientSearchResults" class="search-results hidden"></div>
                </div>
                <div>
                    <label>Client Role</label>
                    <select id="clientRoleInput">
                        <option>Primary Client</option>
                        <option>Billing Contact</option>
                        <option>Beneficiary</option>
                    </select>
                </div>
                <div>
                    <label>Primary Client Flag</label>
                    <select id="clientPrimaryInput">
                        <option>Yes</option>
                        <option>No</option>
                    </select>
                </div>
                <div style="display:flex;align-items:flex-end;">
                    <button type="button" class="btn primary" id="addClientBtn">Add Client</button>
                </div>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>Client Name</th>
                        <th>Role</th>
                        <th>Primary</th>
                        <th>Date Added</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="clientsTableBody"></tbody>
            </table>
        </div>

        <div class="card">
            <h2>Step 4 · Assign Lawyers</h2>
            <div class="form-grid">
                <div style="position:relative;">
                    <label>Lawyer</label>
                    <input id="lawyerNameInput" type="text" placeholder="Search lawyers">
                    <div id="lawyerSearchResults" class="search-results hidden"></div>
                </div>
                <div>
                    <label>Role</label>
                    <select id="lawyerRoleInput">
                        <option>Lead Lawyer</option>
                        <option>Supporting Lawyer</option>
                    </select>
                </div>
                <div>
                    <label>Lead Lawyer Flag</label>
                    <select id="lawyerLeadInput">
                        <option>Yes</option>
                        <option>No</option>
                    </select>
                </div>
                <div style="display:flex;align-items:flex-end;">
                    <button type="button" class="btn primary" id="addLawyerBtn">Assign Lawyer</button>
                </div>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>Lawyer Name</th>
                        <th>Role</th>
                        <th>Lead</th>
                        <th>Assigned Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="lawyersTableBody"></tbody>
            </table>
        </div>

        <div class="card" id="litigationStep">
            <h2>Step 5 · Case Details (Litigation Only)</h2>
            <div class="form-grid">
                <div>
                    <label>Court</label>
                    <input type="text" placeholder="High Court">
                </div>
                <div>
                    <label>Court Case Number</label>
                    <input type="text" placeholder="HC-2026-0091">
                </div>
                <div>
                    <label>Filing Date</label>
                    <input type="date">
                </div>
                <div>
                    <label>Incident Date</label>
                    <input type="date">
                </div>
                <div>
                    <label>Litigation Stage</label>
                    <select>
                        <option>Pleadings</option>
                        <option>Discovery</option>
                        <option>Trial Preparation</option>
                    </select>
                </div>
                <div>
                    <label>Next Hearing Date</label>
                    <input type="date">
                </div>
            </div>
        </div>

        <div class="actions">
            <a href="{{ route('modules.edit.matters.all') }}" class="btn ghost">Cancel</a>
            <div>
                <button type="button" class="btn">Save Draft</button>
                <button type="submit" class="btn primary">Create Matter</button>
            </div>
        </div>
    </form>
</div>

<div id="conflictModal" class="modal-overlay" aria-hidden="true">
    <div class="conflict-modal" role="dialog" aria-modal="true" aria-labelledby="conflictModalTitle">
        <h3 id="conflictModalTitle">Conflict Check Results</h3>
        <p id="conflictModalSummary">Review the matches found during the conflict search.</p>
        <div id="conflictResultsWrap"></div>
        <div class="modal-actions">
            <button type="button" class="btn ghost" id="conflictModalClose">Close</button>
        </div>
    </div>
</div>

<script>
(() => {
    const typeSelect = document.getElementById('matterType');
    const litigationStep = document.getElementById('litigationStep');

    function toggleLitigation() {
        const isLitigation = typeSelect.value.toLowerCase() === 'litigation';
        litigationStep.style.display = isLitigation ? 'block' : 'none';
    }

    typeSelect.addEventListener('change', toggleLitigation);
    toggleLitigation();
})();

(() => {
    const runBtn = document.getElementById('runConflictCheckBtn');
    const badge = document.getElementById('conflictStatusBadge');
    const modal = document.getElementById('conflictModal');
    const modalClose = document.getElementById('conflictModalClose');
    const resultsWrap = document.getElementById('conflictResultsWrap');
    const summary = document.getElementById('conflictModalSummary');
    const statusInput = document.getElementById('conflictStatusInput');
    const checkIdInput = document.getElementById('conflictCheckIdInput');

    const clientInput = document.getElementById('conflictClientNames');
    const opposingInput = document.getElementById('conflictOpposingParties');
    const companyInput = document.getElementById('conflictCompanyNames');

    function setBadge(status, running = false) {
        badge.classList.remove('success', 'warning', 'danger', 'running');
        if (running) {
            badge.classList.add('running');
        } else if (status === 'Cleared') {
            badge.classList.add('success');
        } else if (status === 'Conflict Found') {
            badge.classList.add('danger');
        } else {
            badge.classList.add('warning');
        }
        badge.textContent = `Status: ${status}`;
        if (statusInput) {
            statusInput.value = status;
        }
    }

    function openModal() {
        modal.style.display = 'flex';
        modal.setAttribute('aria-hidden', 'false');
    }

    function closeModal() {
        modal.style.display = 'none';
        modal.setAttribute('aria-hidden', 'true');
    }

    function renderResults(results, status) {
        resultsWrap.innerHTML = '';

        if (!results.length) {
            const empty = document.createElement('div');
            empty.textContent = 'No conflicts found for the provided names.';
            empty.style.fontSize = '13px';
            empty.style.color = 'var(--ink-mid)';
            resultsWrap.appendChild(empty);
            summary.textContent = `Status: ${status}. No matching clients or matters were found.`;
            return;
        }

        summary.textContent = `Status: ${status}. ${results.length} potential conflict(s) detected.`;

        const table = document.createElement('table');
        const thead = document.createElement('thead');
        const headRow = document.createElement('tr');
        ['Match Type', 'Matched Name', 'Entity', 'Search Term', 'Context'].forEach((label) => {
            const th = document.createElement('th');
            th.textContent = label;
            headRow.appendChild(th);
        });
        thead.appendChild(headRow);
        table.appendChild(thead);

        const tbody = document.createElement('tbody');
        results.forEach((row) => {
            const tr = document.createElement('tr');
            const matchType = document.createElement('td');
            matchType.textContent = row.match_type || 'match';
            const matchedName = document.createElement('td');
            matchedName.textContent = row.matched_name || '—';
            const entity = document.createElement('td');
            entity.textContent = row.matched_entity_type || '—';
            const term = document.createElement('td');
            term.textContent = row.search_term || '—';
            const context = document.createElement('td');
            const details = Array.isArray(row.details) ? row.details : [];
            if (!details.length) {
                context.textContent = 'No related matter/case found.';
            } else {
                const lines = details.map((detail) => {
                    const parts = [];
                    if (detail.context_ref || detail.context_name) {
                        parts.push(`${detail.context_ref || '—'} · ${detail.context_name || '—'}`);
                    }
                    if (detail.party_name || detail.party_role) {
                        parts.push(`${detail.party_role || 'Party'}: ${detail.party_name || '—'}`);
                    }
                    if (detail.represented_by && detail.represented_by.length) {
                        parts.push(`Represented by: ${detail.represented_by.join(', ')}`);
                    }
                    if (detail.represented_on) {
                        parts.push(`Last activity: ${detail.represented_on}`);
                    }
                    return parts.filter(Boolean).join(' | ');
                });
                context.innerHTML = lines.map((line) => `<div style="margin-bottom:6px;">${line}</div>`).join('');
            }
            tr.appendChild(matchType);
            tr.appendChild(matchedName);
            tr.appendChild(entity);
            tr.appendChild(term);
            tr.appendChild(context);
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);
        resultsWrap.appendChild(table);
    }

    runBtn.addEventListener('click', async () => {
        setBadge('Running', true);
        runBtn.disabled = true;

        const payload = {
            client_names: clientInput.value || '',
            opposing_parties: opposingInput.value || '',
            company_names: companyInput.value || '',
        };

        try {
            const response = await fetch("{{ route('modules.edit.conflicts.run') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').content,
                },
                body: JSON.stringify(payload),
            });

            if (!response.ok) {
                throw new Error(`Conflict check failed with status ${response.status}`);
            }

            const data = await response.json();
            const status = data.status || 'Pending';
            setBadge(status);
            if (checkIdInput) {
                checkIdInput.value = data.check_id || '';
            }
            renderResults(data.results || [], status);
            openModal();
        } catch (error) {
            setBadge('Pending');
            if (checkIdInput) {
                checkIdInput.value = '';
            }
            resultsWrap.innerHTML = '';
            summary.textContent = 'Conflict check failed. Please try again.';
            openModal();
        } finally {
            runBtn.disabled = false;
        }
    });

    modalClose.addEventListener('click', closeModal);
    modal.addEventListener('click', (event) => {
        if (event.target === modal) {
            closeModal();
        }
    });
})();

(() => {
    const clientNameInput = document.getElementById('clientNameInput');
    const clientRoleInput = document.getElementById('clientRoleInput');
    const clientPrimaryInput = document.getElementById('clientPrimaryInput');
    const addClientBtn = document.getElementById('addClientBtn');
    const clientsTableBody = document.getElementById('clientsTableBody');
    const clientSearchResults = document.getElementById('clientSearchResults');

    const lawyerNameInput = document.getElementById('lawyerNameInput');
    const lawyerRoleInput = document.getElementById('lawyerRoleInput');
    const lawyerLeadInput = document.getElementById('lawyerLeadInput');
    const addLawyerBtn = document.getElementById('addLawyerBtn');
    const lawyersTableBody = document.getElementById('lawyersTableBody');
    const lawyerSearchResults = document.getElementById('lawyerSearchResults');

    let selectedClient = null;
    let selectedLawyer = null;
    let clientTimer = null;
    let lawyerTimer = null;

    function todayLabel() {
        return new Date().toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' });
    }

    function createHiddenInput(name, value) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = name;
        input.value = value;
        return input;
    }

    function addClientRow() {
        if (!selectedClient) {
            clientNameInput.focus();
            return;
        }
        const name = selectedClient.full_name;
        const role = clientRoleInput.value;
        const primary = clientPrimaryInput.value;

        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${name}</td>
            <td>${role}</td>
            <td>${primary}</td>
            <td>${todayLabel()}</td>
            <td><button type="button" class="btn ghost">Remove</button></td>
        `;

        tr.appendChild(createHiddenInput('clients[][client_id]', selectedClient.client_id));
        tr.appendChild(createHiddenInput('clients[][name]', name));
        tr.appendChild(createHiddenInput('clients[][role]', role));
        tr.appendChild(createHiddenInput('clients[][primary]', primary === 'Yes' ? '1' : '0'));

        tr.querySelector('button')?.addEventListener('click', () => tr.remove());
        clientsTableBody.appendChild(tr);

        clientNameInput.value = '';
        selectedClient = null;
        clientPrimaryInput.value = 'Yes';
        clientNameInput.focus();
    }

    function addLawyerRow() {
        if (!selectedLawyer) {
            lawyerNameInput.focus();
            return;
        }
        const name = selectedLawyer.full_name;
        const role = lawyerRoleInput.value;
        const lead = lawyerLeadInput.value;

        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${name}</td>
            <td>${role}</td>
            <td>${lead}</td>
            <td>${todayLabel()}</td>
            <td><button type="button" class="btn ghost">Remove</button></td>
        `;

        tr.appendChild(createHiddenInput('lawyers[][lawyer_id]', selectedLawyer.lawyer_id));
        tr.appendChild(createHiddenInput('lawyers[][name]', name));
        tr.appendChild(createHiddenInput('lawyers[][role]', role));
        tr.appendChild(createHiddenInput('lawyers[][lead]', lead === 'Yes' ? '1' : '0'));

        tr.querySelector('button')?.addEventListener('click', () => tr.remove());
        lawyersTableBody.appendChild(tr);

        lawyerNameInput.value = '';
        selectedLawyer = null;
        lawyerLeadInput.value = 'Yes';
        lawyerNameInput.focus();
    }

    addClientBtn?.addEventListener('click', addClientRow);
    addLawyerBtn?.addEventListener('click', addLawyerRow);

    function renderSearchResults(container, items, onSelect) {
        container.innerHTML = '';
        if (!items.length) {
            container.classList.add('hidden');
            return;
        }
        items.forEach((item) => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.textContent = item.full_name;
            btn.addEventListener('click', () => onSelect(item));
            container.appendChild(btn);
        });
        container.classList.remove('hidden');
    }

    function searchClients() {
        const q = (clientNameInput.value || '').trim();
        if (q.length < 2) {
            clientSearchResults.classList.add('hidden');
            return;
        }
        fetch(`{{ route('api.clients.search') }}?q=${encodeURIComponent(q)}`)
            .then((r) => r.json())
            .then((items) => renderSearchResults(clientSearchResults, items || [], (item) => {
                selectedClient = item;
                clientNameInput.value = item.full_name;
                clientSearchResults.classList.add('hidden');
            }))
            .catch(() => clientSearchResults.classList.add('hidden'));
    }

    function searchLawyers() {
        const q = (lawyerNameInput.value || '').trim();
        if (q.length < 2) {
            lawyerSearchResults.classList.add('hidden');
            return;
        }
        fetch(`{{ route('api.lawyers.search') }}?q=${encodeURIComponent(q)}`)
            .then((r) => r.json())
            .then((items) => renderSearchResults(lawyerSearchResults, items || [], (item) => {
                selectedLawyer = item;
                lawyerNameInput.value = item.full_name;
                lawyerSearchResults.classList.add('hidden');
            }))
            .catch(() => lawyerSearchResults.classList.add('hidden'));
    }

    clientNameInput?.addEventListener('input', () => {
        selectedClient = null;
        clearTimeout(clientTimer);
        clientTimer = setTimeout(searchClients, 250);
    });

    lawyerNameInput?.addEventListener('input', () => {
        selectedLawyer = null;
        clearTimeout(lawyerTimer);
        lawyerTimer = setTimeout(searchLawyers, 250);
    });

    document.addEventListener('click', (event) => {
        if (!clientSearchResults.contains(event.target) && event.target !== clientNameInput) {
            clientSearchResults.classList.add('hidden');
        }
        if (!lawyerSearchResults.contains(event.target) && event.target !== lawyerNameInput) {
            lawyerSearchResults.classList.add('hidden');
        }
    });

    clientNameInput?.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            event.preventDefault();
            addClientRow();
        }
    });

    lawyerNameInput?.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            event.preventDefault();
            addLawyerRow();
        }
    });
})();
</script>
@endsection