@extends('layouts.master')

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

@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;--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:26px 32px;color:#fff;box-shadow:0 10px 28px rgba(14,165,233,.2);margin-bottom:20px}
.mt-hero h1{margin:0;font-family:var(--fd);font-size:32px}
.mt-hero p{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.85)}
.mt-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.mt-tab{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);cursor:pointer}
.mt-tab.active{border-color:var(--sky-border);color:var(--sky-deep);background:var(--surface)}
.mt-panel{display:none;background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 6px 18px rgba(14,165,233,.08)}
.mt-panel.active{display:block}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.kv{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--off)}
.kv .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.kv .v{font-size:14px;color:var(--ink);font-weight:600;margin-top:4px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--sky-border);text-decoration:none;font-size:12px;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)}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.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)}
.section-title{font-family:var(--fd);font-size:20px;margin-bottom:10px;color:var(--ink)}
</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>
        <a href="{{ route('modules.edit.matters.all') }}" style="color:var(--ink-soft);text-decoration:none;">All Matters</a>
        <span>›</span>
        <span style="color:var(--sky-deep);">Matter View</span>
    </nav>

    @php
        $primaryClient = $matter->clients?->firstWhere('pivot.is_primary_client', true);
        $primaryClientName = $primaryClient ? trim(($primaryClient->first_name ?? '') . ' ' . ($primaryClient->last_name ?? '')) : null;
        $lawyerNames = $matter->lawyers?->pluck('name')->filter()->values()->all() ?? [];
    @endphp
    <div class="mt-hero">
        <h1>{{ $matter->matter_title ?? 'Matter Overview' }}</h1>
        <p>{{ $matter->matter_number ?? 'MAT-0000-0000' }} · {{ $matter->status?->name ?? 'Open' }} · {{ $matter->type?->name ?? 'Matter' }}</p>
    </div>

    <div class="mt-tabs" id="mtTabs">
        <button class="mt-tab active" data-target="overview">Overview</button>
        <button class="mt-tab" data-target="clients" id="clients">Clients</button>
        <button class="mt-tab" data-target="lawyers" id="lawyers">Lawyers</button>
        <button class="mt-tab" data-target="documents">Documents</button>
        <button class="mt-tab" data-target="notes">Notes</button>
        <button class="mt-tab" data-target="timeline">Timeline</button>
        <button class="mt-tab" data-target="case">Case Details</button>
        <button class="mt-tab" data-target="conflict">Conflict Check</button>
    </div>

    <div class="mt-panel active" id="overview">
        <div class="section-title">Overview</div>
        <div class="kv-grid">
            <div class="kv"><div class="k">Matter Number</div><div class="v">{{ $matter->matter_number ?? '—' }}</div></div>
            <div class="kv"><div class="k">Matter Title</div><div class="v">{{ $matter->matter_title ?? '—' }}</div></div>
            <div class="kv"><div class="k">Status</div><div class="v">{{ $matter->status?->name ?? '—' }}</div></div>
            <div class="kv"><div class="k">Type</div><div class="v">{{ $matter->type?->name ?? '—' }}</div></div>
            <div class="kv"><div class="k">Category</div><div class="v">{{ $matter->category?->name ?? '—' }}</div></div>
            <div class="kv"><div class="k">Priority</div><div class="v">{{ $matter->priority?->name ?? '—' }}</div></div>
            <div class="kv"><div class="k">Conflict Status</div><div class="v">{{ $matter->conflict_status ?? 'Cleared' }}</div></div>
            <div class="kv"><div class="k">Opened Date</div><div class="v">{{ $matter->opened_date ? \Illuminate\Support\Carbon::parse($matter->opened_date)->format('M d, Y') : '—' }}</div></div>
            <div class="kv"><div class="k">Primary Client</div><div class="v">{{ $primaryClientName ?? '—' }}</div></div>
            <div class="kv"><div class="k">Assigned Lawyers</div><div class="v">{{ count($lawyerNames) ? implode(', ', $lawyerNames) : '—' }}</div></div>
        </div>
        <div class="actions">
            <a class="btn" href="#clients">Add Client</a>
            <a class="btn" href="#lawyers">Assign Lawyer</a>
            <a class="btn" href="#notes">Add Note</a>
            <a class="btn" href="#documents">Upload Document</a>
            <a class="btn primary" href="#">Close Matter</a>
        </div>
    </div>

    <div class="mt-panel" id="clients">
        <div class="section-title">Clients</div>
        <table class="table">
            <thead>
                <tr>
                    <th>Client Name</th>
                    <th>Role</th>
                    <th>Primary</th>
                    <th>Date Added</th>
                </tr>
            </thead>
            <tbody>
                @forelse($matter->clients ?? [] as $client)
                    @php
                        $clientName = trim(($client->first_name ?? '') . ' ' . ($client->last_name ?? ''));
                        $primaryFlag = $client->pivot?->is_primary_client ? 'Yes' : 'No';
                    @endphp
                    <tr>
                        <td>{{ $clientName !== '' ? $clientName : ('Client #' . $client->id) }}</td>
                        <td>{{ $client->pivot?->role_id ?? '—' }}</td>
                        <td>{{ $primaryFlag }}</td>
                        <td>{{ $client->pivot?->created_at ? \Illuminate\Support\Carbon::parse($client->pivot->created_at)->format('M d, Y') : '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="4">No clients assigned.</td></tr>
                @endforelse
            </tbody>
        </table>
        <div class="actions">
            <a class="btn" href="#">Add Client</a>
            <a class="btn" href="#">Remove Client</a>
            <a class="btn" href="#">Change Role</a>
        </div>
    </div>

    <div class="mt-panel" id="lawyers">
        <div class="section-title">Lawyers</div>
        <table class="table">
            <thead>
                <tr>
                    <th>Lawyer Name</th>
                    <th>Role</th>
                    <th>Lead</th>
                    <th>Assigned Date</th>
                </tr>
            </thead>
            <tbody>
                @forelse($matter->lawyers ?? [] as $lawyer)
                    <tr>
                        <td>{{ $lawyer->name ?? $lawyer->full_name ?? ('Lawyer #' . ($lawyer->id ?? '—')) }}</td>
                        <td>{{ $lawyer->pivot?->role_id ?? '—' }}</td>
                        <td>{{ $lawyer->pivot?->is_lead_lawyer ? 'Yes' : 'No' }}</td>
                        <td>{{ $lawyer->pivot?->created_at ? \Illuminate\Support\Carbon::parse($lawyer->pivot->created_at)->format('M d, Y') : '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="4">No lawyers assigned.</td></tr>
                @endforelse
            </tbody>
        </table>
        <div class="actions">
            <a class="btn" href="#">Assign Lawyer</a>
            <a class="btn" href="#">Remove Lawyer</a>
        </div>
    </div>

    <div class="mt-panel" id="notes">
        <div class="section-title">Notes</div>
        <div class="kv">Latest note: Client approved revised strategy on Mar 15, 2026.</div>
    </div>

    <div class="mt-panel" id="documents">
        <div class="section-title">Documents</div>
        <div class="kv">No documents uploaded yet.</div>
    </div>

    <div class="mt-panel" id="timeline">
        <div class="section-title">Timeline</div>
        <div class="kv">Matter opened on Mar 16, 2026. Conflict cleared.</div>
    </div>

    <div class="mt-panel" id="case">
        <div class="section-title">Case Details (Litigation Only)</div>
        <div class="kv-grid">
            <div class="kv"><div class="k">Court Information</div><div class="v">High Court · Johannesburg</div></div>
            <div class="kv"><div class="k">Case Number</div><div class="v">HC-2026-0091</div></div>
            <div class="kv"><div class="k">Filing Date</div><div class="v">Mar 10, 2026</div></div>
            <div class="kv"><div class="k">Litigation Stage</div><div class="v">Discovery</div></div>
        </div>
        <div class="section-title" style="margin-top:16px;">Upcoming Events</div>
        <div class="kv">Next Hearing Date: Apr 05, 2026</div>
    </div>

    <div class="mt-panel" id="conflict">
        <div class="section-title">Conflict Check</div>
        <div class="kv-grid">
            <div class="kv"><div class="k">Status</div><div class="v">Cleared</div></div>
            <div class="kv"><div class="k">Severity</div><div class="v">Low</div></div>
            <div class="kv"><div class="k">Last Run</div><div class="v">Mar 16, 2026</div></div>
            <div class="kv"><div class="k">Resolution</div><div class="v">Approved</div></div>
        </div>
        <div class="section-title" style="margin-top:16px;">Search Terms</div>
        <table class="table">
            <thead>
                <tr>
                    <th>Term</th>
                    <th>Entity Type</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Alpine Holdings</td>
                    <td>Client</td>
                </tr>
                <tr>
                    <td>Delta Manufacturing</td>
                    <td>Opposing Party</td>
                </tr>
            </tbody>
        </table>
        <div class="section-title" style="margin-top:16px;">Matched Entities</div>
        <table class="table">
            <thead>
                <tr>
                    <th>Matched Name</th>
                    <th>Match Source</th>
                    <th>Conflict Severity</th>
                    <th>Resolution</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Delta Manufacturing</td>
                    <td>Matter</td>
                    <td>Medium</td>
                    <td>Escalated</td>
                </tr>
            </tbody>
        </table>
        <div class="actions">
            <a class="btn" href="#">Re-run Conflict Check</a>
            <a class="btn" href="#">Mark as Cleared</a>
            <a class="btn primary" href="#">Escalate for Review</a>
        </div>
    </div>
</div>

<script>
(() => {
    const tabs = Array.from(document.querySelectorAll('.mt-tab'));
    const panels = Array.from(document.querySelectorAll('.mt-panel'));

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            panels.forEach(p => p.classList.remove('active'));
            tab.classList.add('active');
            const target = document.getElementById(tab.dataset.target);
            if (target) target.classList.add('active');
        });
    });
})();
</script>
@endsection