@extends('agent.layouts.app')

@section('title', 'Edit Profile')

@section('content')
<div class="py-6">
    <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <div class="mb-6">
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Edit Profile</h1>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Update your personal and banking information</p>
        </div>

        <form action="{{ route('agent.profile.update') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <!-- Personal Information -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Personal Information</h3>

                <div class="space-y-4">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name *</label>
                        <input type="text" name="name" id="name" value="{{ old('name', $agent->name) }}" required
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        @error('name')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
                        <input type="email" id="email" value="{{ $agent->email }}" disabled
                               class="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 cursor-not-allowed">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Email cannot be changed. Contact support if needed.</p>
                    </div>

                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number</label>
                        <input type="text" name="phone" id="phone" value="{{ old('phone', $agent->phone) }}"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        @error('phone')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="ic_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">IC Number (NRIC)</label>
                        <input type="text" name="ic_number" id="ic_number" value="{{ old('ic_number', $agent->ic_number) }}"
                               placeholder="e.g., 901231-14-5678"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent font-mono">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Required for official payslip/financial documents</p>
                        @error('ic_number')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Street Address</label>
                        <textarea name="address" id="address" rows="2"
                                  placeholder="e.g., No. 123, Jalan Example, Taman ABC"
                                  class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">{{ old('address', $agent->address) }}</textarea>
                        @error('address')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label for="postcode" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Postcode</label>
                            <input type="text" name="postcode" id="postcode" value="{{ old('postcode', $agent->postcode) }}"
                                   placeholder="e.g., 50000"
                                   class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                            @error('postcode')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
                            <input type="text" name="city" id="city" value="{{ old('city', $agent->city) }}"
                                   placeholder="e.g., Kuala Lumpur"
                                   class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                            @error('city')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State</label>
                            <select name="state" id="state"
                                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                                <option value="">Select State</option>
                                <option value="Johor" {{ old('state', $agent->state) == 'Johor' ? 'selected' : '' }}>Johor</option>
                                <option value="Kedah" {{ old('state', $agent->state) == 'Kedah' ? 'selected' : '' }}>Kedah</option>
                                <option value="Kelantan" {{ old('state', $agent->state) == 'Kelantan' ? 'selected' : '' }}>Kelantan</option>
                                <option value="Melaka" {{ old('state', $agent->state) == 'Melaka' ? 'selected' : '' }}>Melaka</option>
                                <option value="Negeri Sembilan" {{ old('state', $agent->state) == 'Negeri Sembilan' ? 'selected' : '' }}>Negeri Sembilan</option>
                                <option value="Pahang" {{ old('state', $agent->state) == 'Pahang' ? 'selected' : '' }}>Pahang</option>
                                <option value="Perak" {{ old('state', $agent->state) == 'Perak' ? 'selected' : '' }}>Perak</option>
                                <option value="Perlis" {{ old('state', $agent->state) == 'Perlis' ? 'selected' : '' }}>Perlis</option>
                                <option value="Pulau Pinang" {{ old('state', $agent->state) == 'Pulau Pinang' ? 'selected' : '' }}>Pulau Pinang</option>
                                <option value="Sabah" {{ old('state', $agent->state) == 'Sabah' ? 'selected' : '' }}>Sabah</option>
                                <option value="Sarawak" {{ old('state', $agent->state) == 'Sarawak' ? 'selected' : '' }}>Sarawak</option>
                                <option value="Selangor" {{ old('state', $agent->state) == 'Selangor' ? 'selected' : '' }}>Selangor</option>
                                <option value="Terengganu" {{ old('state', $agent->state) == 'Terengganu' ? 'selected' : '' }}>Terengganu</option>
                                <option value="W.P. Kuala Lumpur" {{ old('state', $agent->state) == 'W.P. Kuala Lumpur' ? 'selected' : '' }}>W.P. Kuala Lumpur</option>
                                <option value="W.P. Labuan" {{ old('state', $agent->state) == 'W.P. Labuan' ? 'selected' : '' }}>W.P. Labuan</option>
                                <option value="W.P. Putrajaya" {{ old('state', $agent->state) == 'W.P. Putrajaya' ? 'selected' : '' }}>W.P. Putrajaya</option>
                            </select>
                            @error('state')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bank Information -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Bank Details</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Add your bank details to receive commission payouts.</p>

                <div class="space-y-4">
                    <div>
                        <label for="bank_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bank Name</label>
                        <select name="bank_name" id="bank_name"
                                class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                            <option value="">Select Bank</option>
                            <option value="Maybank" {{ old('bank_name', $agent->bank_name) == 'Maybank' ? 'selected' : '' }}>Maybank</option>
                            <option value="CIMB Bank" {{ old('bank_name', $agent->bank_name) == 'CIMB Bank' ? 'selected' : '' }}>CIMB Bank</option>
                            <option value="Public Bank" {{ old('bank_name', $agent->bank_name) == 'Public Bank' ? 'selected' : '' }}>Public Bank</option>
                            <option value="RHB Bank" {{ old('bank_name', $agent->bank_name) == 'RHB Bank' ? 'selected' : '' }}>RHB Bank</option>
                            <option value="Hong Leong Bank" {{ old('bank_name', $agent->bank_name) == 'Hong Leong Bank' ? 'selected' : '' }}>Hong Leong Bank</option>
                            <option value="AmBank" {{ old('bank_name', $agent->bank_name) == 'AmBank' ? 'selected' : '' }}>AmBank</option>
                            <option value="Bank Islam" {{ old('bank_name', $agent->bank_name) == 'Bank Islam' ? 'selected' : '' }}>Bank Islam</option>
                            <option value="Bank Rakyat" {{ old('bank_name', $agent->bank_name) == 'Bank Rakyat' ? 'selected' : '' }}>Bank Rakyat</option>
                            <option value="BSN" {{ old('bank_name', $agent->bank_name) == 'BSN' ? 'selected' : '' }}>BSN</option>
                            <option value="Affin Bank" {{ old('bank_name', $agent->bank_name) == 'Affin Bank' ? 'selected' : '' }}>Affin Bank</option>
                            <option value="Alliance Bank" {{ old('bank_name', $agent->bank_name) == 'Alliance Bank' ? 'selected' : '' }}>Alliance Bank</option>
                            <option value="OCBC Bank" {{ old('bank_name', $agent->bank_name) == 'OCBC Bank' ? 'selected' : '' }}>OCBC Bank</option>
                            <option value="HSBC Bank" {{ old('bank_name', $agent->bank_name) == 'HSBC Bank' ? 'selected' : '' }}>HSBC Bank</option>
                            <option value="Standard Chartered" {{ old('bank_name', $agent->bank_name) == 'Standard Chartered' ? 'selected' : '' }}>Standard Chartered</option>
                            <option value="UOB Bank" {{ old('bank_name', $agent->bank_name) == 'UOB Bank' ? 'selected' : '' }}>UOB Bank</option>
                            <option value="Agrobank" {{ old('bank_name', $agent->bank_name) == 'Agrobank' ? 'selected' : '' }}>Agrobank</option>
                            <option value="Bank Muamalat" {{ old('bank_name', $agent->bank_name) == 'Bank Muamalat' ? 'selected' : '' }}>Bank Muamalat</option>
                        </select>
                        @error('bank_name')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="bank_account_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Account Number</label>
                        <input type="text" name="bank_account_number" id="bank_account_number" value="{{ old('bank_account_number', $agent->bank_account_number) }}"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent font-mono">
                        @error('bank_account_number')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="bank_account_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Account Holder Name</label>
                        <input type="text" name="bank_account_name" id="bank_account_name" value="{{ old('bank_account_name', $agent->bank_account_name) }}"
                               class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        @error('bank_account_name')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex justify-end gap-4">
                <a href="{{ route('agent.profile.show') }}"
                   class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                    Cancel
                </a>
                <button type="submit"
                        class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>
@endsection