@extends('layouts.app')

@section('content')
<div class="px-4 pb-60">

    {{-- Header --}}
    <div class="sm:flex sm:items-center gap-x-2">
        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
            <div class="lg:divide-y lg:divide-stone-200">
                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                    <a href="{{ route('customers.index') }}"
                        class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400">
                        <span class="material-symbols-rounded text-stone-500">arrow_back</span>
                    </a>
                </nav>
            </div>
        </header>
        <livewire:customer-header :customer-id="$id" />
    </div>

    {{-- Customer Info Card --}}
    <div class="mt-4 max-w-7xl">
        <livewire:customer-info :customer-id="$id" />
    </div>

    {{-- Transactions Livewire Component --}}
    <div class="mt-4 max-w-7xl pb-60">
        <livewire:customer-transactions :customer-id="$id" />
    </div>
</div>
@endsection