@extends('layouts.admin')

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

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

@section('breadcrumbs')
    <a href="{{ route('admin.customers.index') }}" class="hover:text-primary">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-[#dbe0e6] text-[#617589] rounded-lg hover:bg-background-light transition-colors flex items-center gap-2">
            <span class="material-symbols-outlined text-lg">edit</span>
            <span>Edit</span>
        </a>
    </div>
@endsection

@section('content')
<div class="max-w-7xl mx-auto flex flex-col gap-6">
    <!-- Customer Header -->
    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-2xl font-bold text-[#111418] text-gray-900 mb-2">{{ $customer->name }}</h2>
                @if($customer->company)
                    <p class="text-lg text-[#617589]">{{ $customer->company }}</p>
                @endif
            </div>
            <div class="text-right">
                <span class="px-3 py-1 rounded-lg text-sm font-medium {{ $customer->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                    {{ $customer->is_active ? 'Active' : 'Inactive' }}
                </span>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Contact Information</p>
                <div class="text-sm space-y-1 text-[#111418] text-gray-900">
                    @if($customer->email)
                        <p><span class="text-[#617589]">Email:</span> {{ $customer->email }}</p>
                    @endif
                    @if($customer->phone)
                        <p><span class="text-[#617589]">Phone:</span> {{ $customer->phone }}</p>
                    @endif
                    @if($customer->address)
                        <p><span class="text-[#617589]">Address:</span> {{ $customer->address }}</p>
                    @endif
                    @if($customer->city || $customer->state || $customer->zip)
                        <p><span class="text-[#617589]">Location:</span> 
                            {{ implode(', ', array_filter([$customer->city, $customer->state, $customer->zip])) }}
                            @if($customer->country)
                                , {{ $customer->country }}
                            @endif
                        </p>
                    @endif
                    @if($customer->tax_id)
                        <p><span class="text-[#617589]">Tax ID:</span> {{ $customer->tax_id }}</p>
                    @endif
                </div>
            </div>
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Statistics</p>
                <div class="text-sm space-y-1">
                    <div class="flex justify-between">
                        <span class="text-[#617589]">Total Invoices:</span>
                        <span class="font-medium text-[#111418] text-gray-900">{{ $customer->invoices->count() }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-[#617589]">Total Estimates:</span>
                        <span class="font-medium text-[#111418] text-gray-900">{{ $customer->estimates->count() }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-[#617589]">Total Payments:</span>
                        <span class="font-medium text-[#111418] text-gray-900">{{ $customer->payments->count() }}</span>
                    </div>
                </div>
            </div>
        </div>

        @if($customer->notes)
            <div class="mt-6 pt-6 border-t border-[#e5e7eb]">
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Notes</p>
                <p class="text-sm text-[#111418] text-gray-900">{{ $customer->notes }}</p>
            </div>
        @endif
    </div>

    <!-- Recent Invoices -->
    @if($customer->invoices->count() > 0)
        <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6">
            <h3 class="text-lg font-bold text-[#111418] text-gray-900 mb-6">Recent Invoices</h3>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-background-light border-b border-[#e5e7eb]">
                        <tr>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Invoice #</th>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Date</th>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Due Date</th>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase text-right">Amount</th>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Status</th>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#e5e7eb]">
                        @foreach($customer->invoices->take(10) as $invoice)
                            <tr>
                                <td class="py-4 px-4">
                                    <a href="{{ route('admin.invoices.show', $invoice) }}" class="text-primary hover:underline font-medium">
                                        {{ $invoice->invoice_number }}
                                    </a>
                                </td>
                                <td class="py-4 px-4 text-sm text-[#617589]">{{ $invoice->issue_date->format('M d, Y') }}</td>
                                <td class="py-4 px-4 text-sm text-[#617589]">{{ $invoice->due_date->format('M d, Y') }}</td>
                                <td class="py-4 px-4 text-sm font-medium text-[#111418] text-gray-900 text-right">{{ $invoice->currency }} {{ number_format($invoice->total, 2) }}</td>
                                <td class="py-4 px-4">
                                    @php
                                        $statusColors = [
                                            'draft' => 'bg-gray-100 text-gray-700',
                                            'sent' => 'bg-blue-100 text-blue-700',
                                            'viewed' => 'bg-purple-100 text-purple-700',
                                            'partial' => 'bg-yellow-100 text-yellow-700',
                                            'paid' => 'bg-green-100 text-green-700',
                                            'overdue' => 'bg-red-100 text-red-700',
                                        ];
                                        $status = $invoice->isOverdue() ? 'overdue' : $invoice->status;
                                    @endphp
                                    <span class="px-2 py-1 rounded-full text-xs font-medium {{ $statusColors[$status] ?? 'bg-gray-100 text-gray-700' }}">
                                        {{ ucfirst($status) }}
                                    </span>
                                </td>
                                <td class="py-4 px-4 text-right">
                                    <a href="{{ route('admin.invoices.show', $invoice) }}" class="text-primary hover:underline text-sm">View</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
</div>
@endsection