@extends('layouts.app')

@section('title', $customer->name)
@section('page-title', 'Customer Profile')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('customers.index') }}">Customers</a></li>
    <li class="breadcrumb-item active">{{ $customer->name }}</li>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body text-center">
                <i class="fas fa-user-circle fa-5x text-info mb-2"></i>
                <h4 class="mb-0">{{ $customer->name }}</h4>
                <p class="text-muted">{{ $customer->company_name }}</p>
                <span class="badge text-bg-{{ $customer->status === 'active' ? 'success' : 'secondary' }}">{{ ucfirst($customer->status) }}</span>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item"><i class="fas fa-hashtag me-2 text-muted"></i>{{ $customer->customer_code }}</li>
                <li class="list-group-item"><i class="fas fa-envelope me-2 text-muted"></i>{{ $customer->email ?? '-' }}</li>
                <li class="list-group-item"><i class="fas fa-phone me-2 text-muted"></i>{{ $customer->phone ?? '-' }}</li>
                <li class="list-group-item"><i class="fas fa-map-marker-alt me-2 text-muted"></i>{{ $customer->address ?? '-' }}, {{ $customer->city }}</li>
            </ul>
            <div class="card-body">
                <a href="{{ route('customers.edit', $customer) }}" class="btn btn-outline-primary btn-sm"><i class="fas fa-pen me-1"></i>Edit</a>
                <a href="{{ route('invoices.create') }}" class="btn btn-info btn-sm text-white"><i class="fas fa-plus me-1"></i>New Invoice</a>
            </div>
        </div>

        <div class="row">
            <div class="col-6">
                <div class="small-box text-bg-success">
                    <div class="inner"><h4>${{ number_format($customer->totalPaid(), 2) }}</h4><p>Paid</p></div>
                </div>
            </div>
            <div class="col-6">
                <div class="small-box text-bg-warning">
                    <div class="inner"><h4>${{ number_format($customer->totalOutstanding(), 2) }}</h4><p>Outstanding</p></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card">
            <div class="card-header"><h3 class="card-title">Invoices</h3></div>
            <div class="card-body table-responsive p-0">
                <table class="table table-sm mb-0">
                    <thead><tr><th>Number</th><th>Date</th><th>Total</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                        @forelse ($customer->invoices as $invoice)
                            <tr>
                                <td>{{ $invoice->invoice_number }}</td>
                                <td>{{ $invoice->issue_date->format('Y-m-d') }}</td>
                                <td>${{ number_format($invoice->total, 2) }}</td>
                                <td><span class="badge text-bg-{{ $invoice->status === 'paid' ? 'success' : 'warning' }}">{{ ucfirst($invoice->status) }}</span></td>
                                <td><a href="{{ route('invoices.show', $invoice) }}" class="btn btn-xs btn-outline-secondary"><i class="fas fa-eye"></i></a></td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center text-muted py-3">No invoices yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h3 class="card-title">Services</h3></div>
            <div class="card-body table-responsive p-0">
                <table class="table table-sm mb-0">
                    <thead><tr><th>Title</th><th>Price</th><th>Billing</th><th>Status</th></tr></thead>
                    <tbody>
                        @forelse ($customer->services as $service)
                            <tr>
                                <td>{{ $service->title }}</td>
                                <td>${{ number_format($service->price, 2) }}</td>
                                <td>{{ ucfirst(str_replace('_', ' ', $service->billing_cycle)) }}</td>
                                <td><span class="badge text-bg-{{ $service->status === 'active' ? 'success' : 'secondary' }}">{{ ucfirst($service->status) }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted py-3">No services yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection