@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="text-sm font-semibold text-gray-900">Edit profile</div>

                <form method="POST" action="{{ route('customer.profile.update') }}" class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4" enctype="multipart/form-data">
                    @csrf
                    @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)
                    <div class="sm:col-span-2">
                        <label class="text-sm font-medium text-gray-700">Avatar</label>
                        <div class="mt-2 flex items-center gap-4">
                            <div class="w-16 h-16 rounded-full overflow-hidden border border-gray-200 bg-gray-100 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-8 h-8 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="flex-1">
                                <input type="file" name="avatar" accept="image/*" class="block w-full text-sm" />
                                <x-input-error :messages="$errors->get('avatar')" class="mt-2" />
                                @if ($customer->avatar_path)
                                    <label class="mt-2 inline-flex items-center gap-2 text-sm text-gray-700">
                                        <input type="checkbox" name="remove_avatar" value="1" class="rounded border-gray-300 text-red-700 focus:ring-red-500" />
                                        <span>Remove current avatar</span>
                                    </label>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-700">Name</label>
                        <input type="text" name="name" value="{{ old('name', $customer->name) }}" required class="mt-1 w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" />
                        <x-input-error :messages="$errors->get('name')" class="mt-2" />
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-700">Phone number</label>
                        <input type="tel" name="phone" value="{{ old('phone', $customer->phone) }}" required inputmode="numeric" autocomplete="tel" pattern="01[0-9]{9}" minlength="11" maxlength="11" class="mt-1 w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" placeholder="01XXXXXXXXX" />
                        <x-input-error :messages="$errors->get('phone')" class="mt-2" />
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-700">Email</label>
                        <input type="email" name="email" value="{{ old('email', $customer->email) }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" />
                        <x-input-error :messages="$errors->get('email')" class="mt-2" />
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-700">Date Of Birth</label>
                        <input type="date" name="date_of_birth" value="{{ old('date_of_birth', $customer->date_of_birth?->toDateString()) }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" />
                        <x-input-error :messages="$errors->get('date_of_birth')" class="mt-2" />
                    </div>

                    @if ($showBank)
                        <div class="sm:col-span-2 pt-2">
                            <div class="text-sm font-semibold text-gray-900">Bank info</div>
                        </div>

                        <div>
                            <label class="text-sm font-medium text-gray-700">Bank name</label>
                            <input type="text" name="bank_name" value="{{ old('bank_name', $customer->bank_name) }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" />
                            <x-input-error :messages="$errors->get('bank_name')" class="mt-2" />
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-700">Account name</label>
                            <input type="text" name="bank_account_name" value="{{ old('bank_account_name', $customer->bank_account_name) }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" />
                            <x-input-error :messages="$errors->get('bank_account_name')" class="mt-2" />
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-700">Account number</label>
                            <input type="text" name="bank_account_number" value="{{ old('bank_account_number', $customer->bank_account_number) }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" />
                            <x-input-error :messages="$errors->get('bank_account_number')" class="mt-2" />
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-700">Branch</label>
                            <input type="text" name="bank_branch" value="{{ old('bank_branch', $customer->bank_branch) }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" />
                            <x-input-error :messages="$errors->get('bank_branch')" class="mt-2" />
                        </div>
                        <div class="sm:col-span-2">
                            <label class="text-sm font-medium text-gray-700">Routing number</label>
                            <input type="text" name="bank_routing_number" value="{{ old('bank_routing_number', $customer->bank_routing_number) }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" />
                            <x-input-error :messages="$errors->get('bank_routing_number')" class="mt-2" />
                        </div>
                    @endif

                    <div class="sm:col-span-2 flex items-center justify-end gap-3 pt-2">
                        <a href="{{ route('customer.profile') }}" class="text-sm font-semibold text-gray-700 hover:text-gray-900">Cancel</a>
                        <button type="submit" class="rounded-md bg-red-700 px-5 py-2 text-white text-sm font-semibold hover:bg-red-800">Update profile</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection