@extends('site.layout')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="bg-white border border-gray-200 rounded-xl p-6">
                <div class="flex flex-col items-center text-center">
                    <div class="w-24 h-24 rounded-full bg-gray-100 border border-gray-200 overflow-hidden flex items-center justify-center">
                        @if ($customer->avatar_path)
                            <img src="{{ asset('storage/'.$customer->avatar_path) }}" class="w-full h-full object-cover" alt="" />
                        @else
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A9 9 0 1118.88 17.804M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        @endif
                    </div>
                    <div class="mt-4 text-lg font-semibold">{{ $customer->name }}</div>
                    <div class="mt-1 text-sm text-gray-600">Phone: {{ $customer->phone ?? '-' }}</div>
                    @if ((float) $customer->refer_balance > 0)
                        <div class="mt-1 text-sm text-gray-600">Refer Balance: {{ number_format((float) $customer->refer_balance, 2) }}</div>
                    @endif
                </div>
            </div>

            <div class="lg:col-span-2 bg-white border border-gray-200 rounded-xl p-6">
                <div class="flex items-center justify-between gap-4">
                    <div class="text-sm font-semibold text-gray-900">Account</div>
                    <a href="{{ route('customer.profile.edit') }}" class="rounded-md bg-red-700 px-4 py-2 text-white text-sm font-semibold hover:bg-red-800">Edit</a>
                </div>

                <div class="mt-6 divide-y divide-gray-200 text-sm">
                    <div class="py-3 grid grid-cols-3 gap-4">
                        <div class="text-gray-600">Name</div>
                        <div class="col-span-2 font-semibold">{{ $customer->name }}</div>
                    </div>
                    <div class="py-3 grid grid-cols-3 gap-4">
                        <div class="text-gray-600">Email</div>
                        <div class="col-span-2 font-semibold">{{ $customer->email }}</div>
                    </div>
                    <div class="py-3 grid grid-cols-3 gap-4">
                        <div class="text-gray-600">Referal Code</div>
                        <div class="col-span-2 font-semibold">{{ $customer->referral_code ?? '-' }}</div>
                    </div>
                    <div class="py-3 grid grid-cols-3 gap-4">
                        <div class="text-gray-600">Mobile</div>
                        <div class="col-span-2 font-semibold">{{ $customer->phone ?? '-' }}</div>
                    </div>
                    <div class="py-3 grid grid-cols-3 gap-4" x-data="{ copied: false }">
                        <div class="text-gray-600">Referral Link</div>
                        <div class="col-span-2">
                            @php($refLink = url('/sign-up').'?ref='.urlencode((string) ($customer->referral_code ?? '')))
                            <div class="flex flex-col sm:flex-row sm:items-center gap-2">
                                <input type="text" readonly value="{{ $refLink }}" class="w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500 text-sm" x-ref="refLink" />
                                <button type="button" class="rounded-md bg-red-700 px-4 py-2 text-white text-sm font-semibold hover:bg-red-800 shrink-0" @click="navigator.clipboard.writeText($refs.refLink.value).then(() => { copied = true; setTimeout(() => copied = false, 1500); })">
                                    <span x-show="!copied">Copy</span>
                                    <span x-show="copied" x-cloak>Copied</span>
                                </button>
                            </div>
                            <div class="mt-2 text-xs text-gray-500">Share this link to invite others. Their signup will use your referral code.</div>
                        </div>
                    </div>
                    @php($showBank = (float) $customer->refer_balance > 0 || $customer->bank_name || $customer->bank_account_name || $customer->bank_account_number || $customer->bank_branch || $customer->bank_routing_number)
                    @if ($showBank)
                        <div class="py-3">
                            <div class="text-sm font-semibold text-gray-900">Bank info</div>
                            <div class="mt-3 divide-y divide-gray-200 text-sm">
                                <div class="py-3 grid grid-cols-3 gap-4">
                                    <div class="text-gray-600">Bank name</div>
                                    <div class="col-span-2 font-semibold">{{ $customer->bank_name ?? '-' }}</div>
                                </div>
                                <div class="py-3 grid grid-cols-3 gap-4">
                                    <div class="text-gray-600">Account name</div>
                                    <div class="col-span-2 font-semibold">{{ $customer->bank_account_name ?? '-' }}</div>
                                </div>
                                <div class="py-3 grid grid-cols-3 gap-4">
                                    <div class="text-gray-600">Account number</div>
                                    <div class="col-span-2 font-semibold">{{ $customer->bank_account_number ?? '-' }}</div>
                                </div>
                                <div class="py-3 grid grid-cols-3 gap-4">
                                    <div class="text-gray-600">Branch</div>
                                    <div class="col-span-2 font-semibold">{{ $customer->bank_branch ?? '-' }}</div>
                                </div>
                                <div class="py-3 grid grid-cols-3 gap-4">
                                    <div class="text-gray-600">Routing number</div>
                                    <div class="col-span-2 font-semibold">{{ $customer->bank_routing_number ?? '-' }}</div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection