@extends('layouts.admin')

@section('title', 'Customer Details - ' . $customer->name)

@section('page-title', 'Customer Details')

@section('breadcrumbs')
    <a href="{{ route('admin.customers.index') }}" class="hover:text-primary text-gray-600">Customers</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">{{ $customer->name }}</span>
@endsection

@section('header-actions')
    <div class="flex items-center gap-3">
        <a href="{{ route('admin.customers.edit', $customer) }}" class="px-4 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-2">
            <span class="material-symbols-outlined text-lg">edit</span>
            <span>Edit</span>
        </a>
        <a href="{{ route('admin.customers.index') }}" class="px-4 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-2">
            <span class="material-symbols-outlined text-lg">arrow_back</span>
            <span>Back</span>
        </a>
    </div>
@endsection

@section('content')
<div class="max-w-7xl mx-auto flex flex-col gap-6">
    <!-- Customer Header Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-start gap-6">
            @if($customer->image && file_exists(storage_path('app/public/' . $customer->image)))
                <div class="h-20 w-20 shrink-0 rounded-full bg-cover bg-center" style="background-image: url('{{ asset('storage/' . $customer->image) }}');"></div>
            @else
                <div class="h-20 w-20 shrink-0 rounded-full bg-gradient-to-br from-primary/20 to-primary/40 flex items-center justify-center text-primary font-bold text-3xl">
                    {{ strtoupper(substr($customer->name, 0, 1)) }}
                </div>
            @endif
            <div class="flex-1">
                <h1 class="text-2xl font-bold text-gray-900 mb-2">{{ $customer->name }}</h1>
                @if($customer->company)
                    <p class="text-gray-600 mb-3">{{ $customer->company }}</p>
                @endif
                <div class="flex flex-wrap gap-4 text-sm text-gray-600">
                    @if($customer->email)
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-lg">email</span>
                            <a href="mailto:{{ $customer->email }}" class="hover:text-primary">{{ $customer->email }}</a>
                        </div>
                    @endif
                    @if($customer->phone)
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-lg">phone</span>
                            <a href="tel:{{ $customer->phone }}" class="hover:text-primary">{{ $customer->phone }}</a>
                        </div>
                    @endif
                    @if($customer->website)
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-lg">language</span>
                            <a href="{{ $customer->website }}" target="_blank" class="hover:text-primary">{{ $customer->website }}</a>
                        </div>
                    @endif
                </div>
            </div>
            <div class="text-right">
                <span class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium {{ $customer->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                    {{ $customer->is_active ? 'Active' : 'Inactive' }}
                </span>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm text-gray-600">Total Invoices</span>
                <span class="material-symbols-outlined text-gray-400">description</span>
            </div>
            <p class="text-2xl font-bold text-gray-900">{{ $customer->invoices ? $customer->invoices->count() : 0 }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm text-gray-600">Outstanding Balance</span>
                <span class="material-symbols-outlined text-gray-400">account_balance_wallet</span>
            </div>
            @php
                $balance = $customer->invoices ? $customer->invoices->sum('balance') : 0;
            @endphp
            <p class="text-2xl font-bold {{ $balance > 0 ? 'text-red-600' : 'text-gray-900' }}">${{ number_format($balance, 2) }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm text-gray-600">Total Paid</span>
                <span class="material-symbols-outlined text-gray-400">payments</span>
            </div>
            @php
                $paid = $customer->invoices ? $customer->invoices->sum('paid_amount') : 0;
            @endphp
            <p class="text-2xl font-bold text-green-600">${{ number_format($paid, 2) }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm text-gray-600">Total Revenue</span>
                <span class="material-symbols-outlined text-gray-400">trending_up</span>
            </div>
            @php
                $total = $customer->invoices ? $customer->invoices->sum('total') : 0;
            @endphp
            <p class="text-2xl font-bold text-primary">${{ number_format($total, 2) }}</p>
        </div>
    </div>

    <!-- Details Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Contact Information -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Contact Information</h3>
            <div class="space-y-4">
                <div>
                    <label class="text-xs font-semibold text-gray-500 uppercase">Email</label>
                    <p class="text-gray-900 mt-1">{{ $customer->email ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="text-xs font-semibold text-gray-500 uppercase">Phone</label>
                    <p class="text-gray-900 mt-1">{{ $customer->phone ?? 'N/A' }}</p>
                </div>
                @if($customer->company)
                    <div>
                        <label class="text-xs font-semibold text-gray-500 uppercase">Company</label>
                        <p class="text-gray-900 mt-1">{{ $customer->company }}</p>
                    </div>
                @endif
                @if($customer->website)
                    <div>
                        <label class="text-xs font-semibold text-gray-500 uppercase">Website</label>
                        <p class="text-gray-900 mt-1">
                            <a href="{{ $customer->website }}" target="_blank" class="text-primary hover:underline">{{ $customer->website }}</a>
                        </p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Address Information -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Address</h3>
            <div class="space-y-4">
                @if($customer->address || $customer->city || $customer->state || $customer->zip || $customer->country)
                    <div>
                        <label class="text-xs font-semibold text-gray-500 uppercase">Billing Address</label>
                        <p class="text-gray-900 mt-1">
                            @if($customer->address){{ $customer->address }}<br>@endif
                            @if($customer->city || $customer->state || $customer->zip)
                                {{ $customer->city }}{{ $customer->city && $customer->state ? ', ' : '' }}{{ $customer->state }} {{ $customer->zip }}
                            @endif
                            @if($customer->country)
                                <br>{{ $customer->country }}
                            @endif
                        </p>
                    </div>
                @else
                    <p class="text-gray-500">No address information available</p>
                @endif
            </div>
        </div>
    </div>

    <!-- Notes Section -->
    @if($customer->notes)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Notes</h3>
            <p class="text-gray-700 whitespace-pre-wrap">{{ $customer->notes }}</p>
        </div>
    @endif

    <!-- Recent Invoices -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold text-gray-900">Recent Invoices</h3>
            <a href="{{ route('admin.invoices.index', ['customer_id' => $customer->id]) }}" class="text-sm text-primary hover:underline">View All</a>
        </div>
        @if($customer->invoices && $customer->invoices->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-xs uppercase text-gray-500">
                        <tr>
                            <th class="px-4 py-3 text-left font-semibold">Invoice #</th>
                            <th class="px-4 py-3 text-left font-semibold">Date</th>
                            <th class="px-4 py-3 text-left font-semibold">Due Date</th>
                            <th class="px-4 py-3 text-right font-semibold">Amount</th>
                            <th class="px-4 py-3 text-right font-semibold">Balance</th>
                            <th class="px-4 py-3 text-center font-semibold">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($customer->invoices->take(5) as $invoice)
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3">
                                    <a href="{{ route('admin.invoices.show', $invoice) }}" class="text-primary hover:underline font-medium">{{ $invoice->invoice_number }}</a>
                                </td>
                                <td class="px-4 py-3 text-gray-600">{{ $invoice->issue_date->format('M d, Y') }}</td>
                                <td class="px-4 py-3 text-gray-600">{{ $invoice->due_date->format('M d, Y') }}</td>
                                <td class="px-4 py-3 text-right font-medium">${{ number_format($invoice->total, 2) }}</td>
                                <td class="px-4 py-3 text-right {{ $invoice->balance > 0 ? 'text-red-600' : 'text-gray-600' }}">${{ number_format($invoice->balance, 2) }}</td>
                                <td class="px-4 py-3 text-center">
                                    <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium 
                                        @if($invoice->status === 'paid') bg-green-100 text-green-800
                                        @elseif($invoice->status === 'overdue') bg-red-100 text-red-800
                                        @elseif($invoice->status === 'partial') bg-yellow-100 text-yellow-800
                                        @else bg-gray-100 text-gray-800
                                        @endif">
                                        {{ ucfirst($invoice->status) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-gray-500 text-center py-8">No invoices found for this customer</p>
        @endif
    </div>
</div>
@endsection