@extends('layouts.app')

@section('title', 'Edit Profile - Agent Portal')

@section('content')
<div class="bg-black text-white py-8 border-b border-neutral-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="font-serif-heading font-extrabold text-2xl">Edit Agent Profile</h1>
    </div>
</div>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="border border-gray-200 p-8 bg-white shadow-xl">
        
        <form action="{{ route('agent.profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Full Name</label>
                <input type="text" name="name" value="{{ $agent->name }}" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs">
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Phone Number</label>
                    <input type="tel" name="phone" value="{{ $agent->phone }}" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">WhatsApp Number</label>
                    <input type="tel" name="whatsapp" value="{{ $agent->whatsapp }}" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs">
                </div>
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Profile Photo</label>
                <input type="file" name="photo" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs">
                @if($agent->photo)
                    <img src="{{ asset($agent->photo) }}" class="w-16 h-16 rounded-full object-cover mt-2">
                @endif
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Biography / Specialization</label>
                <textarea name="bio" rows="4" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs">{{ $agent->bio }}</textarea>
            </div>

            <button type="submit" class="w-full py-4 bg-brand-blue text-white text-xs font-bold uppercase tracking-[0.2em] hover:bg-brand-darkblue shadow-lg">
                Save Profile Changes
            </button>
        </form>

    </div>
</div>
@endsection
