@extends('layouts.app')
@section('title', $invoice->invoice_number)
@section('page-title', $invoice->invoice_number)

@section('content')

<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div class="d-flex align-items-center gap-3">
        <a href="{{ route('invoices.index') }}" class="btn btn-sm btn-light">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h5 class="fw-700 mb-0" style="color:#1e293b;">{{ $invoice->invoice_number }}</h5>
            <span class="status-badge badge-{{ $invoice->status }} mt-1">
                {{ $invoice->status_badge['label'] }}
            </span>
        </div>
    </div>

    {{-- Action buttons --}}
    <div class="d-flex flex-wrap gap-2">
        @if($invoice->isDraft())
            <a href="{{ route('invoices.edit', $invoice) }}" class="btn btn-outline-secondary btn-sm fw-500">
                <i class="bi bi-pencil me-1"></i>Edit
            </a>
        @endif

        @if($invoice->canBeSent())
            <form method="POST" action="{{ route('invoices.send', $invoice) }}">
                @csrf
                <button type="submit" class="btn btn-primary btn-sm fw-500"
                        onclick="return confirm('Send invoice to {{ $invoice->client->email }}?')">
                    <i class="bi bi-send me-1"></i>
                    {{ $invoice->isSent() || $invoice->isViewed() ? 'Resend' : 'Send' }}
                </button>
            </form>
        @endif

        <a href="{{ route('invoices.download', $invoice) }}" class="btn btn-outline-secondary btn-sm fw-500">
            <i class="bi bi-download me-1"></i>PDF
        </a>

        @if($invoice->canBeMarkedPaid())
            <form method="POST" action="{{ route('invoices.mark-paid', $invoice) }}">
                @csrf
                <button type="submit" class="btn btn-success btn-sm fw-500"
                        onclick="return confirm('Mark {{ $invoice->invoice_number }} as paid?')">
                    <i class="bi bi-check-circle me-1"></i>Mark Paid
                </button>
            </form>
        @endif

        <div class="dropdown">
            <button class="btn btn-light btn-sm" data-bs-toggle="dropdown">
                <i class="bi bi-three-dots-vertical"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end" style="font-size:0.875rem;">
                <li>
                    <form method="POST" action="{{ route('invoices.duplicate', $invoice) }}">
                        @csrf
                        <button type="submit" class="dropdown-item">
                            <i class="bi bi-copy me-2"></i>Duplicate
                        </button>
                    </form>
                </li>
                <li>
                    <a class="dropdown-item" href="{{ $invoice->public_url }}" target="_blank">
                        <i class="bi bi-link-45deg me-2"></i>View Public Link
                    </a>
                </li>
                <li>
                    <button type="button" class="dropdown-item" onclick="copyPublicLink()">
                        <i class="bi bi-clipboard me-2"></i>Copy Payment Link
                    </button>
                </li>
                @if(!$invoice->isPaid() && !$invoice->isCancelled())
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <form method="POST" action="{{ route('invoices.cancel', $invoice) }}">
                            @csrf
                            <button type="submit" class="dropdown-item text-warning"
                                    onclick="return confirm('Cancel this invoice? This cannot be undone.')">
                                <i class="bi bi-x-circle me-2"></i>Cancel Invoice
                            </button>
                        </form>
                    </li>
                @endif
                @if($invoice->isDraft())
                    <li>
                        <form method="POST" action="{{ route('invoices.destroy', $invoice) }}">
                            @csrf @method('DELETE')
                            <button type="submit" class="dropdown-item text-danger"
                                    onclick="return confirm('Delete this draft invoice? This cannot be undone.')">
                                <i class="bi bi-trash3 me-2"></i>Delete Draft
                            </button>
                        </form>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</div>

<div class="row g-3">
    {{-- Invoice preview card --}}
    <div class="col-lg-8">
        <div class="card table-card p-4">
            {{-- Header --}}
            <div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-3">
                <div>
                    @if(auth()->user()->logo_path)
                        <img src="{{ auth()->user()->logo_url }}" alt="logo" style="max-height:60px;max-width:160px;object-fit:contain;margin-bottom:0.75rem;display:block;">
                    @endif
                    <div class="fw-700 fs-5" style="color:#1e293b;">{{ auth()->user()->business_name }}</div>
                    @if(auth()->user()->address)
                        <div class="text-muted small" style="max-width:200px;">{{ auth()->user()->address }}</div>
                    @endif
                    @if(auth()->user()->phone)
                        <div class="text-muted small">{{ auth()->user()->phone }}</div>
                    @endif
                </div>
                <div class="text-end">
                    <div class="text-muted" style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;">Invoice</div>
                    <div class="fw-700 fs-4" style="font-family:monospace;color:#1e293b;">{{ $invoice->invoice_number }}</div>
                    <span class="status-badge badge-{{ $invoice->status }}">{{ $invoice->status_badge['label'] }}</span>
                </div>
            </div>

            <hr style="border-color:#e2e8f0;">

            {{-- Bill To + Dates --}}
            <div class="row mb-4">
                <div class="col-sm-6">
                    <div class="text-muted mb-1" style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;">Bill To</div>
                    <div class="fw-600" style="color:#1e293b;">{{ $invoice->client->display_name }}</div>
                    @if($invoice->client->email)
                        <div class="text-muted small">{{ $invoice->client->email }}</div>
                    @endif
                    @if($invoice->client->phone)
                        <div class="text-muted small">{{ $invoice->client->phone }}</div>
                    @endif
                    @if($invoice->client->address)
                        <div class="text-muted small">{{ $invoice->client->address }}</div>
                    @endif
                </div>
                <div class="col-sm-6 mt-3 mt-sm-0">
                    <div class="row g-1" style="font-size:0.875rem;">
                        <div class="col-5 text-muted">Issue Date:</div>
                        <div class="col-7 fw-500">{{ $invoice->issue_date->format('d/m/Y') }}</div>
                        <div class="col-5 text-muted">Due Date:</div>
                        <div class="col-7 fw-500 {{ $invoice->isOverdue() ? 'text-danger' : '' }}">
                            {{ $invoice->due_date->format('d/m/Y') }}
                        </div>
                        @if($invoice->paid_at)
                            <div class="col-5 text-muted">Paid On:</div>
                            <div class="col-7 fw-500 text-success">{{ $invoice->paid_at->format('d/m/Y') }}</div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Line items --}}
            <div class="table-responsive">
                <table class="table mb-0" style="font-size:0.875rem;">
                    <thead>
                        <tr style="background:#f8fafc;">
                            <th class="ps-0">Description</th>
                            <th class="text-center" style="width:80px;">Qty</th>
                            <th class="text-end" style="width:130px;">Unit Price</th>
                            <th class="text-end pe-0" style="width:130px;">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoice->items as $item)
                        <tr>
                            <td class="ps-0">{{ $item->description }}</td>
                            <td class="text-center">{{ $item->quantity }}</td>
                            <td class="text-end">₦{{ number_format($item->unit_price, 2) }}</td>
                            <td class="text-end pe-0 fw-500">₦{{ number_format($item->total, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3" class="text-end text-muted ps-0">Subtotal</td>
                            <td class="text-end pe-0">₦{{ number_format($invoice->subtotal, 2) }}</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-end text-muted ps-0">VAT ({{ $invoice->vat_rate }}%)</td>
                            <td class="text-end pe-0">₦{{ number_format($invoice->vat_amount, 2) }}</td>
                        </tr>
                        @if($invoice->discount > 0)
                        <tr>
                            <td colspan="3" class="text-end text-muted ps-0">Discount</td>
                            <td class="text-end pe-0 text-danger">-₦{{ number_format($invoice->discount, 2) }}</td>
                        </tr>
                        @endif
                        <tr style="border-top:2px solid #e2e8f0;">
                            <td colspan="3" class="text-end fw-700 fs-6 ps-0">Total</td>
                            <td class="text-end pe-0 fw-700 fs-6" style="color:#00a651;">
                                ₦{{ number_format($invoice->total, 2) }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            @if($invoice->notes)
                <div class="mt-4 p-3 rounded" style="background:#f8fafc;font-size:0.875rem;">
                    <div class="text-muted mb-1" style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;">Notes</div>
                    {{ $invoice->notes }}
                </div>
            @endif

            {{-- Bank details --}}
            @if(auth()->user()->bank_name)
            <div class="mt-4 p-3 rounded" style="background:#f0fdf4;border:1px solid #bbf7d0;font-size:0.875rem;">
                <div class="fw-600 mb-1" style="color:#15803d;font-size:0.8rem;">Payment Details</div>
                <div style="color:#166534;">
                    <strong>Bank:</strong> {{ auth()->user()->bank_name }} &nbsp;|&nbsp;
                    <strong>Account:</strong> {{ auth()->user()->account_number }} &nbsp;|&nbsp;
                    <strong>Name:</strong> {{ auth()->user()->account_name }}
                </div>
            </div>
            @endif
        </div>
    </div>

    {{-- Sidebar info --}}
    <div class="col-lg-4">
        {{-- Payment link --}}
        <div class="card table-card p-3 mb-3">
            <div class="form-section-title mb-2" style="font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#94a3b8;">
                <i class="bi bi-link-45deg me-1"></i>Payment Link
            </div>
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" id="publicLinkInput"
                       value="{{ $invoice->public_url }}" readonly style="font-size:0.75rem;">
                <button class="btn btn-outline-secondary" onclick="copyPublicLink()" title="Copy link">
                    <i class="bi bi-clipboard"></i>
                </button>
            </div>
            <a href="{{ $invoice->public_url }}" target="_blank" class="btn btn-sm btn-outline-primary mt-2 w-100">
                <i class="bi bi-eye me-1"></i>Preview Client View
            </a>
        </div>

        {{-- Timeline --}}
        <div class="card table-card p-3 mb-3">
            <div class="form-section-title mb-3" style="font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#94a3b8;">
                <i class="bi bi-clock-history me-1"></i>Timeline
            </div>
            <div class="d-flex flex-column gap-2" style="font-size:0.825rem;">
                <div class="d-flex gap-2 align-items-start">
                    <div style="width:8px;height:8px;background:#00a651;border-radius:50%;margin-top:5px;flex-shrink:0;"></div>
                    <div>
                        <div class="fw-500">Created</div>
                        <div class="text-muted" style="font-size:0.75rem;">{{ $invoice->created_at->format('d/m/Y H:i') }}</div>
                    </div>
                </div>
                @if($invoice->sent_at)
                <div class="d-flex gap-2 align-items-start">
                    <div style="width:8px;height:8px;background:#2563eb;border-radius:50%;margin-top:5px;flex-shrink:0;"></div>
                    <div>
                        <div class="fw-500">Sent to client</div>
                        <div class="text-muted" style="font-size:0.75rem;">{{ $invoice->sent_at->format('d/m/Y H:i') }}</div>
                    </div>
                </div>
                @endif
                @if($invoice->viewed_at)
                <div class="d-flex gap-2 align-items-start">
                    <div style="width:8px;height:8px;background:#7c3aed;border-radius:50%;margin-top:5px;flex-shrink:0;"></div>
                    <div>
                        <div class="fw-500">Viewed by client</div>
                        <div class="text-muted" style="font-size:0.75rem;">{{ $invoice->viewed_at->format('d/m/Y H:i') }}</div>
                    </div>
                </div>
                @endif
                @if($invoice->paid_at)
                <div class="d-flex gap-2 align-items-start">
                    <div style="width:8px;height:8px;background:#16a34a;border-radius:50%;margin-top:5px;flex-shrink:0;"></div>
                    <div>
                        <div class="fw-500 text-success">Payment received</div>
                        <div class="text-muted" style="font-size:0.75rem;">{{ $invoice->paid_at->format('d/m/Y H:i') }}</div>
                    </div>
                </div>
                @endif
            </div>
        </div>

        {{-- Payment records --}}
        @if($invoice->payments->isNotEmpty())
        <div class="card table-card p-3">
            <div class="form-section-title mb-2" style="font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#94a3b8;">
                <i class="bi bi-credit-card me-1"></i>Payments
            </div>
            @foreach($invoice->payments as $payment)
            <div class="d-flex justify-content-between align-items-center p-2 rounded mb-1" style="background:#f0fdf4;">
                <div>
                    <div class="fw-600 text-success small">₦{{ number_format($payment->amount, 2) }}</div>
                    <div class="text-muted" style="font-size:0.72rem;">{{ $payment->method_label }} · {{ $payment->paid_at->format('d/m/Y') }}</div>
                </div>
                <i class="bi bi-check-circle-fill text-success"></i>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>

@endsection

@push('scripts')
<script>
function copyPublicLink() {
    const input = document.getElementById('publicLinkInput');
    navigator.clipboard.writeText(input.value).then(() => {
        Toast.fire({ icon: 'success', title: 'Payment link copied!' });
    });
}
</script>
@endpush