@extends('layouts.app')
@section('title',$invoice->invoice_number)
@section('heading','Invoice details')
@section('content')
<div class="breadcrumb-line"><a href="{{ route('invoices.index') }}">Invoices</a><i class="bi bi-chevron-right"></i><span>{{ $invoice->invoice_number }}</span></div>
<div class="detail-hero invoice-hero"><div><div class="d-flex align-items-center flex-wrap gap-2 mb-2"><h2>{{ $invoice->invoice_number }}</h2><span class="status-chip status-{{ $invoice->status->value }}">{{ $invoice->status->label() }}</span>@if($invoice->is_overdue)<span class="priority high"><i class="bi bi-exclamation-circle-fill"></i>Overdue</span>@endif</div><p><a href="{{ route('customers.show',$invoice->customer) }}">{{ $invoice->customer->company_name }}</a> &middot; {{ $invoice->description }}</p></div><div class="detail-actions">@can('update',$invoice)<a class="btn btn-outline-primary" href="{{ route('invoices.edit',$invoice) }}"><i class="bi bi-pencil me-2"></i>Edit</a>@endcan @can('addFollowup',$invoice)<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#followupModal"><i class="bi bi-chat-left-text me-2"></i>Add follow-up</button>@endcan @can('recordPayment',$invoice)<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#paymentModal" @disabled($invoice->outstanding_amount <= 0)><i class="bi bi-cash-coin me-2"></i>Record payment</button>@endcan</div></div>

<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3"><div class="summary-tile"><span>Total amount</span><strong>{{ $invoice->currency }} {{ number_format($invoice->total_amount,2) }}</strong><small>Subtotal {{ number_format($invoice->subtotal,2) }} + tax {{ number_format($invoice->tax_amount,2) }}</small></div></div>
    <div class="col-sm-6 col-xl-3"><div class="summary-tile success"><span>Paid amount</span><strong>{{ $invoice->currency }} {{ number_format($invoice->paid_amount,2) }}</strong><small>{{ $invoice->total_amount > 0 ? number_format(($invoice->paid_amount/$invoice->total_amount)*100,1) : 0 }}% collected</small></div></div>
    <div class="col-sm-6 col-xl-3"><div class="summary-tile {{ $invoice->is_overdue ? 'danger':'' }}"><span>Outstanding</span><strong>{{ $invoice->currency }} {{ number_format($invoice->outstanding_amount,2) }}</strong><small>{{ $invoice->is_overdue ? 'Payment is overdue':'Remaining balance' }}</small></div></div>
    <div class="col-sm-6 col-xl-3"><div class="summary-tile"><span>Invoice age</span><strong>{{ (int)$invoice->invoice_date->diffInDays(today()) }} days</strong><small>{{ $invoice->ageing_bucket }} ageing bucket</small></div></div>
</div>

<div class="row g-4"><div class="col-xl-8">
    <div class="data-card mb-4"><div class="data-card-header"><div><h2>Collection timeline</h2><p>Follow-ups and customer responses, newest first</p></div></div><div class="timeline-list">
    @forelse($invoice->followups as $followup)<article class="timeline-item"><span class="timeline-marker"><i class="bi bi-chat-left-text"></i></span><div class="timeline-content"><div class="timeline-head"><div><strong>{{ $followup->contact_method->name }}</strong><span>by {{ $followup->creator->name }}</span></div><time>{{ $followup->followup_date->format('d M Y, h:i A') }}</time></div>@if($followup->customer_response)<div class="response-box"><small>Customer response</small><p>{{ $followup->customer_response }}</p></div>@endif @if($followup->internal_notes)<p class="timeline-note"><i class="bi bi-sticky"></i>{{ $followup->internal_notes }}</p>@endif<div class="timeline-meta">@if($followup->next_followup_date)<span><i class="bi bi-calendar-event"></i>Next: {{ $followup->next_followup_date->format('d M Y') }}</span>@endif @if($followup->promised_payment_date)<span><i class="bi bi-calendar-check"></i>Promised: {{ $followup->promised_payment_date->format('d M Y') }}</span>@endif</div></div></article>
    @empty<div class="empty-state"><span><i class="bi bi-chat-square-text"></i></span><h3>No follow-ups recorded</h3><p>Add the first customer interaction to begin the timeline.</p></div>@endforelse
    </div></div>
    <div class="data-card"><div class="data-card-header"><div><h2>Payment history</h2><p>Payments recorded against this invoice</p></div></div><div class="table-responsive"><table class="table module-table align-middle mb-0"><thead><tr><th>Date</th><th>Amount</th><th>Method</th><th>Reference</th><th>Recorded by</th></tr></thead><tbody>@forelse($invoice->payments->sortByDesc('payment_date') as $payment)<tr><td>{{ $payment->payment_date->format('d M Y') }}</td><td><strong class="text-success">{{ $invoice->currency }} {{ number_format($payment->amount,2) }}</strong></td><td>{{ $payment->payment_method }}</td><td>{{ $payment->payment_reference ?: '—' }}</td><td>{{ $payment->recorder->name }}</td></tr>@empty<tr><td colspan="5" class="text-center text-secondary py-5">No payments recorded yet.</td></tr>@endforelse</tbody></table></div></div>
</div>
<aside class="col-xl-4">
    <div class="info-card mb-3"><h3>Invoice information</h3><dl><dt>Invoice date</dt><dd>{{ $invoice->invoice_date->format('d M Y') }}</dd><dt>Expiry date</dt><dd>{{ $invoice->expiry_date?->format('d M Y') ?? 'Not set' }}</dd><dt>Expected payment</dt><dd class="{{ $invoice->is_overdue ? 'text-danger fw-bold':'' }}">{{ $invoice->expected_payment_date?->format('d M Y') ?? 'Not set' }}</dd><dt>Promised payment</dt><dd>{{ $invoice->promised_payment_date?->format('d M Y') ?? 'Not set' }}</dd><dt>Next follow-up</dt><dd>{{ $invoice->next_followup_date?->format('d M Y') ?? 'Not scheduled' }}</dd><dt>Tax invoice reference</dt><dd>{{ $invoice->tax_invoice_reference ?: 'Not provided' }}</dd></dl></div>
    <div class="info-card mb-3"><h3>Ownership</h3><div class="person-row"><span class="avatar">{{ strtoupper(substr($invoice->assignee->name,0,1)) }}</span><div><strong>{{ $invoice->assignee->name }}</strong><small>Assigned employee</small></div></div><hr><small class="text-secondary">Created by {{ $invoice->creator->name }} on {{ $invoice->created_at->format('d M Y') }}</small></div>
    <div class="info-card mb-3"><div class="d-flex justify-content-between align-items-center"><h3 class="mb-0">Private documents</h3>@if(!auth()->user()->hasRole('management'))<button class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#attachmentModal"><i class="bi bi-upload me-1"></i>Upload</button>@endif</div><div class="attachment-list">@forelse($invoice->attachments as $attachment)<a href="{{ route('attachments.download',$attachment) }}"><i class="bi {{ str_contains($attachment->mime_type,'pdf') ? 'bi-file-earmark-pdf':'bi-file-earmark' }}"></i><span><strong>{{ $attachment->original_name }}</strong><small>{{ number_format($attachment->size/1024,1) }} KB</small></span><i class="bi bi-download ms-auto"></i></a>@empty<p class="text-secondary small mb-0 mt-3">No documents uploaded.</p>@endforelse</div></div>
    @if($invoice->internal_notes)<div class="info-card mb-3"><h3>Internal notes</h3><p class="text-secondary mb-0">{{ $invoice->internal_notes }}</p></div>@endif
    <div class="info-card"><h3>Status history</h3><div class="compact-history">@foreach($invoice->statusHistories as $history)<div><i class="bi bi-circle-fill"></i><span><strong>{{ $history->to_status->label() }}</strong><small>{{ $history->created_at->format('d M Y, h:i A') }} @if($history->changer)by {{ $history->changer->name }}@endif</small></span></div>@endforeach</div></div>
</aside></div>

@can('addFollowup',$invoice)<div class="modal fade" id="followupModal" tabindex="-1" aria-labelledby="followupTitle" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered"><form class="modal-content" method="POST" action="{{ route('invoices.followups.store',$invoice) }}">@csrf<div class="modal-header"><div><h2 class="modal-title" id="followupTitle">Record customer follow-up</h2><small class="text-secondary">{{ $invoice->invoice_number }} &middot; {{ $invoice->customer->company_name }}</small></div><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="row g-3">
<div class="col-md-6"><label class="form-label">Follow-up date *</label><input class="form-control" type="datetime-local" name="followup_date" value="{{ now()->format('Y-m-d\TH:i') }}" required></div><div class="col-md-6"><label class="form-label">Contact method *</label><select class="form-select" name="contact_method">@foreach(App\Enums\ContactMethod::cases() as $method)<option value="{{ $method->value }}">{{ $method->name }}</option>@endforeach</select></div><div class="col-12"><label class="form-label">Customer response</label><textarea class="form-control" name="customer_response" rows="3" placeholder="What did the customer say?"></textarea></div><div class="col-12"><label class="form-label">Internal notes</label><textarea class="form-control" name="internal_notes" rows="2"></textarea></div><div class="col-md-4"><label class="form-label">Next follow-up</label><input class="form-control" type="date" name="next_followup_date"></div><div class="col-md-4"><label class="form-label">Expected payment</label><input class="form-control" type="date" name="updated_expected_payment_date" value="{{ $invoice->expected_payment_date?->format('Y-m-d') }}"></div><div class="col-md-4"><label class="form-label">Promised payment</label><input class="form-control" type="date" name="promised_payment_date" value="{{ $invoice->promised_payment_date?->format('Y-m-d') }}"></div><div class="col-12"><label class="form-label">Updated status</label><select class="form-select" name="updated_status"><option value="">Keep current status</option>@foreach($statuses as $status)<option value="{{ $status->value }}">{{ $status->label() }}</option>@endforeach</select></div>
</div></div><div class="modal-footer"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary"><i class="bi bi-check2 me-2"></i>Save follow-up</button></div></form></div></div>@endcan

@can('recordPayment',$invoice)<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><form class="modal-content" method="POST" action="{{ route('invoices.payments.store',$invoice) }}">@csrf<div class="modal-header"><div><h2 class="modal-title" id="paymentTitle">Record payment</h2><small class="text-secondary">Outstanding: {{ $invoice->currency }} {{ number_format($invoice->outstanding_amount,2) }}</small></div><button class="btn-close" type="button" data-bs-dismiss="modal"></button></div><div class="modal-body"><div class="row g-3"><div class="col-6"><label class="form-label">Payment date *</label><input class="form-control" type="date" name="payment_date" value="{{ today()->format('Y-m-d') }}" required></div><div class="col-6"><label class="form-label">Amount *</label><input class="form-control" type="number" name="amount" min="0.01" max="{{ $invoice->outstanding_amount }}" step="0.01" required></div><div class="col-12"><label class="form-label">Payment method *</label><select class="form-select" name="payment_method" required><option>Bank transfer</option><option>Cheque</option><option>Cash</option><option>Card</option><option>Other</option></select></div><div class="col-12"><label class="form-label">Reference</label><input class="form-control" name="payment_reference"></div><div class="col-12"><label class="form-label">Notes</label><textarea class="form-control" name="notes" rows="2"></textarea></div></div></div><div class="modal-footer"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Cancel</button><button class="btn btn-success"><i class="bi bi-cash-coin me-2"></i>Record payment</button></div></form></div></div>@endcan

@if(!auth()->user()->hasRole('management'))<div class="modal fade" id="attachmentModal" tabindex="-1" aria-labelledby="attachmentTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><form class="modal-content" method="POST" enctype="multipart/form-data" action="{{ route('invoices.attachments.store',$invoice) }}">@csrf<div class="modal-header"><h2 class="modal-title" id="attachmentTitle">Upload private document</h2><button class="btn-close" type="button" data-bs-dismiss="modal"></button></div><div class="modal-body"><label class="upload-drop" for="attachment"><i class="bi bi-cloud-arrow-up"></i><strong>Choose a document</strong><span>PDF, image, Word document &middot; Maximum 10 MB</span><input id="attachment" name="attachment" type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" required></label></div><div class="modal-footer"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary">Upload securely</button></div></form></div></div>@endif
@endsection