@extends('layouts.app')
@section('title', $customer->display_name)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $customer->display_name }}</h1>
            <p>
                <span class="mono">{{ $customer->customer_number }}</span>
                &middot; <span class="badge {{ status_color($customer->status) }}"><span class="dot"></span>{{ $customer->status }}</span>
                &middot; <span class="badge muted">{{ title_case_words($customer->segment) }}</span>
                @if ($customer->kyc_status === 'verified')
                    &middot; <span class="badge success">KYC verified</span>
                @else
                    &middot; <span class="badge warning">KYC {{ $customer->kyc_status }}</span>
                @endif
            </p>
        </div>
        <div class="page-actions">
            <a href="{{ route('customers.statement', $customer) }}" class="btn secondary">Statement</a>
            <a href="{{ route('payments.create', ['customer' => $customer->id]) }}" class="btn secondary">Take payment</a>
            <a href="{{ route('services.create', ['customer' => $customer->id]) }}" class="btn secondary">+ Add service</a>
            <a href="{{ route('customers.edit', $customer) }}" class="btn">Edit</a>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Account balance', 'value' => money($customer->account_balance, $customer->currency),
            'variant' => $customer->account_balance > 0 ? 'warn' : 'good', 'href' => route('customers.statement', $customer)])
        @include('components.kpi', ['label' => 'Monthly recurring', 'value' => money($customer->mrr, $customer->currency),
            'variant' => 'good', 'href' => '#services'])
        @include('components.kpi', ['label' => 'Active services', 'value' => $customer->services()->where('status','active')->count(),
            'href' => '#services'])
        @include('components.kpi', ['label' => 'Open tickets', 'value' => $customer->tickets()->open()->count(),
            'variant' => $customer->tickets()->open()->count() > 0 ? 'warn' : '', 'href' => '#tickets'])
        @include('components.kpi', ['label' => 'Outstanding', 'value' => money($customer->outstanding, $customer->currency),
            'variant' => $customer->is_overdue ? 'bad' : 'good', 'href' => '#invoices'])
        @include('components.kpi', ['label' => 'Customer since', 'value' => $customer->joined_at?->format('M Y') ?? '—', 'href' => '#'])
    </div>

    @if ($customer->is_overdue)
        <div class="alert warning">
            <span>&#9888;</span>
            <div class="grow">
                This account has invoices past their due date totalling
                <strong>{{ money($customer->outstanding, $customer->currency) }}</strong>.
            </div>
            <a href="{{ route('payments.create', ['customer' => $customer->id]) }}" class="btn sm warning">Collect now</a>
        </div>
    @endif

    <div class="tabs" id="profile-tabs">
        <a href="#services" class="active" data-tab>Services ({{ $services->total() }})</a>
        <a href="#invoices" data-tab>Invoices ({{ $invoices->total() }})</a>
        <a href="#payments" data-tab>Payments ({{ $payments->total() }})</a>
        <a href="#tickets" data-tab>Tickets ({{ $tickets->count() }})</a>
        <a href="#details" data-tab>Details</a>
    </div>

    {{-- ============ SERVICES ============ --}}
    <div id="services" class="tab-pane">
        <div class="card">
            <div class="card-head">
                <h3>Subscriptions</h3>
                <a href="{{ route('services.create', ['customer' => $customer->id]) }}" class="btn sm">+ Provision service</a>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead>
                        <tr>
                            <th>Service</th><th>Plan</th><th>RADIUS user</th><th>Speed</th>
                            <th class="num">Price</th><th>Status</th><th>Next bill</th><th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($services as $service)
                            <tr>
                                <td>
                                    <a href="{{ route('services.show', $service) }}" class="mono strong">{{ $service->service_number }}</a>
                                    <div class="tiny muted truncate" style="max-width:220px;">{{ $service->installation_address }}</div>
                                </td>
                                <td class="small">{{ $service->plan?->name }}</td>
                                <td class="mono tiny">{{ $service->username }}</td>
                                <td class="small">{{ $service->download_kbps ? round($service->download_kbps/1024).' / '.round($service->upload_kbps/1024).' Mbps' : ($service->plan?->speed_label ?? '—') }}</td>
                                <td class="num strong">{{ money($service->effective_price, $customer->currency) }}</td>
                                <td><span class="badge {{ status_color($service->status) }}"><span class="dot"></span>{{ $service->status }}</span></td>
                                <td class="small nowrap">{{ $service->next_billing_date?->format('d M Y') ?: '—' }}</td>
                                <td class="right"><a href="{{ route('services.show', $service) }}" class="btn xs secondary">Open</a></td>
                            </tr>
                        @empty
                            <tr><td colspan="8">
                                @include('components.empty-state', ['icon' => '&#8644;', 'title' => 'No services yet',
                                    'message' => 'Provision a subscription to start billing this customer.',
                                    'action' => '<a href="'.route('services.create', ['customer' => $customer->id]).'" class="btn sm">+ Provision service</a>'])
                            </td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if ($services->hasPages())<div class="card-foot">{{ $services->links('partials.pagination') }}</div>@endif
        </div>
    </div>

    {{-- ============ INVOICES ============ --}}
    <div id="invoices" class="tab-pane">
        <div class="card">
            <div class="card-head">
                <h3>Invoices</h3>
                <span class="sub">Outstanding: <strong>{{ money($customer->outstanding, $customer->currency) }}</strong></span>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead>
                        <tr><th>Invoice</th><th>Issued</th><th>Due</th><th class="num">Total</th>
                            <th class="num">Paid</th><th class="num">Balance</th><th>Status</th><th></th></tr>
                        </thead>
                        <tbody>
                        @forelse ($invoices as $invoice)
                            <tr>
                                <td class="mono"><a href="{{ route('invoices.show', $invoice) }}">{{ $invoice->invoice_number }}</a></td>
                                <td class="small nowrap">{{ $invoice->issue_date->format('d M Y') }}</td>
                                <td class="small nowrap">{{ $invoice->due_date->format('d M Y') }}</td>
                                <td class="num">{{ money($invoice->total, $invoice->currency) }}</td>
                                <td class="num">{{ money($invoice->amount_paid, $invoice->currency) }}</td>
                                <td class="num strong">{{ money($invoice->balance, $invoice->currency) }}</td>
                                <td><span class="badge {{ status_color($invoice->status) }}">{{ $invoice->status }}</span></td>
                                <td class="right"><a href="{{ route('invoices.print', $invoice) }}" class="btn xs secondary" target="_blank">View</a></td>
                            </tr>
                        @empty
                            <tr><td colspan="8">@include('components.empty-state', ['icon' => '&#128196;', 'title' => 'No invoices yet'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if ($invoices->hasPages())<div class="card-foot">{{ $invoices->links('partials.pagination') }}</div>@endif
        </div>
    </div>

    {{-- ============ PAYMENTS ============ --}}
    <div id="payments" class="tab-pane">
        <div class="card">
            <div class="card-head"><h3>Payment history</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Reference</th><th>Date</th><th>Method</th><th class="num">Amount</th><th>Status</th><th>Collected by</th></tr></thead>
                        <tbody>
                        @forelse ($payments as $payment)
                            <tr>
                                <td class="mono"><a href="{{ route('payments.show', $payment) }}">{{ $payment->reference }}</a></td>
                                <td class="small nowrap">{{ $payment->paid_at?->format('d M Y H:i') ?: '—' }}</td>
                                <td><span class="badge muted">{{ title_case_words($payment->method) }}</span></td>
                                <td class="num strong">{{ money($payment->amount, $payment->currency) }}</td>
                                <td><span class="badge {{ status_color($payment->status === 'success' ? 'paid' : $payment->status) }}">{{ $payment->status }}</span></td>
                                <td class="small">{{ $payment->collector?->name ?: 'Gateway' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="6">@include('components.empty-state', ['icon' => '&#128179;', 'title' => 'No payments recorded'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if ($payments->hasPages())<div class="card-foot">{{ $payments->links('partials.pagination') }}</div>@endif
        </div>
    </div>

    {{-- ============ TICKETS ============ --}}
    <div id="tickets" class="tab-pane">
        <div class="card">
            <div class="card-head">
                <h3>Support tickets</h3>
                <a href="{{ route('tickets.create', ['customer' => $customer->id]) }}" class="btn sm">+ Raise ticket</a>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Ticket</th><th>Subject</th><th>Priority</th><th>Status</th><th>Owner</th><th>Opened</th></tr></thead>
                        <tbody>
                        @forelse ($tickets as $ticket)
                            <tr>
                                <td class="mono"><a href="{{ route('tickets.show', $ticket) }}">{{ $ticket->ticket_number }}</a></td>
                                <td class="truncate" style="max-width:280px;">{{ $ticket->subject }}</td>
                                <td><span class="badge {{ $ticket->priority === 'urgent' ? 'danger' : 'muted' }}">{{ $ticket->priority }}</span></td>
                                <td><span class="badge {{ status_color($ticket->status) }}">{{ title_case_words($ticket->status) }}</span></td>
                                <td class="small">{{ $ticket->assignee?->name ?: 'Unassigned' }}</td>
                                <td class="small" data-time-ago="{{ $ticket->created_at->toIso8601String() }}"></td>
                            </tr>
                        @empty
                            <tr><td colspan="6">@include('components.empty-state', ['icon' => '&#9993;', 'title' => 'No tickets raised'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- ============ DETAILS ============ --}}
    <div id="details" class="tab-pane">
        <div class="grid grid-2">
            <div class="card">
                <div class="card-head"><h3>Contact &amp; identity</h3></div>
                <div class="card-body">
                    <dl class="dl">
                        <dt>Account type</dt><dd>{{ title_case_words($customer->type) }}</dd>
                        <dt>Full name</dt><dd>{{ trim("{$customer->first_name} {$customer->last_name}") ?: '—' }}</dd>
                        <dt>Company</dt><dd>{{ $customer->company_name ?: '—' }}</dd>
                        <dt>Primary phone</dt><dd class="mono">{{ $customer->phone }}</dd>
                        <dt>Alternate</dt><dd class="mono">{{ $customer->alt_phone ?: '—' }}</dd>
                        <dt>Email</dt><dd>{{ $customer->email ?: '—' }}</dd>
                        <dt>Billing email</dt><dd>{{ $customer->billing_email ?: '—' }}</dd>
                        <dt>ID document</dt><dd>{{ $customer->id_type ? title_case_words($customer->id_type).': '.$customer->id_number : 'Not provided' }}</dd>
                        <dt>KYC verified</dt><dd>{{ $customer->kyc_verified_at?->format('d M Y H:i') ?: 'Not verified' }}</dd>
                        <dt>Branch</dt><dd>{{ $customer->branch?->name ?: 'Head office' }}</dd>
                        <dt>Sales agent</dt><dd>{{ $customer->salesAgent?->name ?: '—' }}</dd>
                    </dl>
                </div>
            </div>

            <div class="card">
                <div class="card-head"><h3>Billing configuration</h3></div>
                <div class="card-body">
                    <dl class="dl">
                        <dt>Payment terms</dt><dd>{{ title_case_words($customer->payment_terms) }}</dd>
                        <dt>Currency</dt><dd>{{ $customer->currency }}</dd>
                        <dt>Tax treatment</dt><dd>{{ title_case_words($customer->tax_exempt) }}</dd>
                        <dt>Credit limit</dt><dd>{{ money($customer->credit_limit, $customer->currency) }}</dd>
                        <dt>Auto invoicing</dt><dd>{{ $customer->auto_invoice ? 'Enabled' : 'Disabled' }}</dd>
                        <dt>Auto suspension</dt><dd>{{ $customer->auto_suspend ? 'Enabled' : 'Disabled' }}</dd>
                        <dt>Language</dt><dd>{{ strtoupper($customer->language) }}</dd>
                        <dt>Timezone</dt><dd>{{ $customer->timezone }}</dd>
                    </dl>
                    <hr style="border:none;border-top:1px solid var(--ink-200);margin:.9rem 0;">
                    <dl class="dl">
                        <dt>Address</dt><dd>{{ $customer->billing_address ?: '—' }}</dd>
                        <dt>City</dt><dd>{{ $customer->city ?: '—' }}</dd>
                        <dt>Region</dt><dd>{{ $customer->region ?: '—' }}</dd>
                        <dt>Country</dt><dd>{{ $customer->country }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        @if ($credits->isNotEmpty())
            <div class="card">
                <div class="card-head"><h3>Credit &amp; deposit movements</h3></div>
                <div class="card-body tight">
                    <div class="table-wrap">
                        <table class="data">
                            <thead><tr><th>Date</th><th>Type</th><th>Description</th><th class="num">Amount</th><th class="num">Balance</th></tr></thead>
                            <tbody>
                            @foreach ($credits as $credit)
                                <tr>
                                    <td class="small nowrap">{{ $credit->created_at->format('d M Y') }}</td>
                                    <td><span class="badge {{ $credit->type === 'credit' ? 'success' : 'warning' }}">{{ $credit->type }}</span></td>
                                    <td>{{ $credit->description }}</td>
                                    <td class="num">{{ money($credit->amount, $customer->currency) }}</td>
                                    <td class="num">{{ money($credit->balance, $customer->currency) }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif

        @if ($contracts->isNotEmpty())
            <div class="card">
                <div class="card-head"><h3>Contracts</h3></div>
                <div class="card-body tight">
                    <div class="table-wrap">
                        <table class="data">
                            <thead><tr><th>Contract</th><th>Title</th><th>Term</th><th class="num">Monthly</th><th>Status</th></tr></thead>
                            <tbody>
                            @foreach ($contracts as $contract)
                                <tr>
                                    <td class="mono">{{ $contract->contract_number }}</td>
                                    <td>{{ $contract->title }}</td>
                                    <td class="small">{{ $contract->starts_on->format('M Y') }} – {{ $contract->ends_on->format('M Y') }} ({{ $contract->term_months }} mo)</td>
                                    <td class="num">{{ money($contract->monthly_value, $customer->currency) }}</td>
                                    <td><span class="badge {{ status_color($contract->status) }}">{{ $contract->status }}</span></td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif

        @if ($customer->notes)
            <div class="card">
                <div class="card-head"><h3>Internal notes</h3></div>
                <div class="card-body"><p class="mb-0" style="white-space:pre-wrap;">{{ $customer->notes }}</p></div>
            </div>
        @endif

        <div class="grid grid-2">
            <div class="card">
                <div class="card-head">
                    <h3>People on this account</h3>
                    <span class="badge muted">{{ $customer->contacts->count() }}</span>
                </div>
                <div class="card-body" style="padding:0;">
                    @if ($customer->contacts->isEmpty())
                        <div class="card-body">
                            <p class="small muted">No named contacts yet — who should be called about a bill, and
                                who about an outage?</p>
                        </div>
                    @else
                        <table class="data">
                            <thead>
                            <tr><th>Name</th><th>Role</th><th>Contact</th><th></th></tr>
                            </thead>
                            <tbody>
                            @foreach ($customer->contacts as $contact)
                                <tr>
                                    <td>
                                        {{ $contact->name }}
                                        @if ($contact->is_primary)<span class="badge success">primary</span>@endif
                                        @if ($contact->position)<div class="tiny muted">{{ $contact->position }}</div>@endif
                                    </td>
                                    <td><span class="badge muted">{{ title_case_words($contact->type) }}</span></td>
                                    <td class="small mono">
                                        {{ $contact->phone }}
                                        @if ($contact->email)<div class="tiny">{{ $contact->email }}</div>@endif
                                    </td>
                                    <td class="right nowrap">
                                        <form method="POST" action="{{ route('customers.contacts.destroy', $contact) }}"
                                              data-confirm="Remove {{ $contact->name }}?">
                                            @csrf @method('DELETE')
                                            <button class="btn xs danger" type="submit">Remove</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
                <div class="card-foot">
                    <form method="POST" action="{{ route('customers.contacts.store', $customer) }}" class="inline-form">
                        @csrf
                        <input type="text" name="name" maxlength="120" required placeholder="Full name" style="min-width:130px;">
                        <input type="text" name="phone" maxlength="40" required placeholder="Phone" class="mono" style="width:120px;">
                        <select name="type">
                            @foreach (['billing', 'technical', 'signatory', 'emergency', 'other'] as $t)
                                <option value="{{ $t }}">{{ title_case_words($t) }}</option>
                            @endforeach
                        </select>
                        <label class="check" style="margin:0;">
                            <input type="checkbox" name="is_primary" value="1">
                            <span>Primary</span>
                        </label>
                        <button class="btn xs" type="submit">Add</button>
                    </form>
                </div>
            </div>

            <div class="card">
                <div class="card-head">
                    <h3>Documents</h3>
                    <div class="page-actions">
                        <form method="POST" action="{{ route('customers.documents.refresh', $customer) }}">
                            @csrf
                            <button class="btn xs secondary" type="submit"
                                    title="Mark anything past its expiry date as expired">Check expiry</button>
                        </form>
                    </div>
                </div>
                <div class="card-body" style="padding:0;">
                    @if ($customer->documents->isEmpty())
                        <div class="card-body">
                            <p class="small muted mb-0">No identity or contract documents on file.</p>
                        </div>
                    @else
                        <table class="data">
                            <thead>
                            <tr><th>Title</th><th>Type</th><th>Expires</th><th>Status</th><th></th></tr>
                            </thead>
                            <tbody>
                            @foreach ($customer->documents as $doc)
                                <tr>
                                    <td>{{ $doc->title }}
                                        <div class="tiny muted">{{ $doc->size_bytes
                                            ? number_format($doc->size_bytes / 1024, 1).' KB' : 'reference only' }}</div></td>
                                    <td><span class="badge muted">{{ title_case_words($doc->type) }}</span></td>
                                    <td class="small nowrap">
                                        {{ $doc->expires_on?->format('d M Y') ?: '—' }}
                                        @if ($doc->expires_on && $doc->expires_on->lt(now()) && $doc->status === 'valid')
                                            <span class="badge danger">lapsed</span>
                                        @endif
                                    </td>
                                    <td><span class="badge {{ status_color($doc->status === 'valid' ? 'active' : $doc->status) }}">
                                        <span class="dot"></span>{{ title_case_words($doc->status) }}</span></td>
                                    <td class="right nowrap">
                                        <a href="{{ route('customers.documents.download', $doc) }}" class="btn xs secondary">Get</a>
                                        <form method="POST" action="{{ route('customers.documents.destroy', $doc) }}"
                                              data-confirm="Delete {{ $doc->title }}?" style="display:inline;">
                                            @csrf @method('DELETE')
                                            <button class="btn xs danger" type="submit">Del</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
                <div class="card-foot">
                    <form method="POST" action="{{ route('customers.documents.reference', $customer) }}" class="inline-form">
                        @csrf
                        <input type="text" name="title" maxlength="180" required placeholder="Document title" style="min-width:150px;">
                        <input type="text" name="file_path" maxlength="255" required placeholder="Path or reference" class="mono" style="min-width:150px;">
                        <select name="type">
                            @foreach (['national_id', 'passport', 'business_registration', 'contract',
                                       'proof_of_address', 'tax_certificate', 'authorisation_letter', 'other'] as $t)
                                <option value="{{ $t }}">{{ title_case_words($t) }}</option>
                            @endforeach
                        </select>
                        <select name="status">
                            @foreach (['valid', 'pending', 'expired', 'rejected'] as $s)
                                <option value="{{ $s }}">{{ title_case_words($s) }}</option>
                            @endforeach
                        </select>
                        <button class="btn xs" type="submit">Record</button>
                    </form>
                    <p class="tiny muted mb-0 mt-1">Records a document held elsewhere. Use the upload endpoint for a
                        file stored on this server.</p>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3 class="muted" style="color:var(--danger);">Danger zone</h3></div>
            <div class="card-body flex-between">
                <div>
                    <strong>Delete this customer</strong>
                    <p class="small muted mb-0">Only possible when no services remain attached. This action cannot be undone.</p>
                </div>
                <form method="POST" action="{{ route('customers.destroy', $customer) }}"
                      data-confirm="Permanently delete {{ $customer->display_name }}? This cannot be undone.">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn danger">Delete customer</button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    var tabs = document.querySelectorAll('#profile-tabs a[data-tab]');
    var panes = document.querySelectorAll('.tab-pane');

    function activate(hash) {
        tabs.forEach(function (t) { t.classList.toggle('active', t.getAttribute('href') === hash); });
        panes.forEach(function (p) { p.style.display = ('#' + p.id) === hash ? '' : 'none'; });
    }

    tabs.forEach(function (t) {
        t.addEventListener('click', function (e) {
            e.preventDefault();
            history.replaceState(null, '', t.getAttribute('href'));
            activate(t.getAttribute('href'));
        });
    });

    activate(location.hash && document.querySelector(location.hash + '.tab-pane') ? location.hash : '#services');
})();
</script>
@endpush