@extends('layouts.dashboard')

@section('page_title', 'Account Settings')

@section('dashboard_content')
<div class="max-w-4xl">
    <div class="glass-panel rounded-3xl overflow-hidden">
        <div class="px-8 py-8 border-b border-white/5">
            <h3 class="font-bold text-white text-lg">Profile & Business Information</h3>
            <p class="text-white/40 text-sm italic">Update your primary contact and tax details.</p>
        </div>

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

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Personal Info -->
                <div class="space-y-6">
                    <div>
                        <label class="text-[10px] font-black uppercase text-white/40 tracking-widest mb-2 block">Full Name</label>
                        <input type="text" name="name" value="{{ old('name', $user->name) }}" 
                               class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-emerald focus:border-emerald transition-all">
                    </div>
                    <div>
                        <label class="text-[10px] font-black uppercase text-white/40 tracking-widest mb-2 block">Phone Number</label>
                        <input type="text" name="phone" value="{{ old('phone', $user->phone) }}" 
                               class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-emerald focus:border-emerald transition-all"
                               placeholder="+92 300 1234567">
                    </div>
                    <div>
                        <label class="text-[10px] font-black uppercase text-white/40 tracking-widest mb-2 block">CNIC (ID Number)</label>
                        <input type="text" name="cnic" value="{{ old('cnic', $user->cnic) }}" 
                               class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-emerald focus:border-emerald transition-all"
                               placeholder="42101-1234567-1">
                    </div>
                </div>

                <!-- Business Info -->
                <div class="space-y-6 text-white">
                    <div>
                        <label class="text-[10px] font-black uppercase text-white/40 tracking-widest mb-2 block">Business Name (Optional)</label>
                        <input type="text" name="business_name" value="{{ old('business_name', $user->business_name) }}" 
                               class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-emerald focus:border-emerald transition-all">
                    </div>
                    <div>
                        <label class="text-[10px] font-black uppercase text-white/40 tracking-widest mb-2 block">City</label>
                        <input type="text" name="city" value="{{ old('city', $user->city) }}" 
                               class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-emerald focus:border-emerald transition-all">
                    </div>
                    <div>
                        <label class="text-[10px] font-black uppercase text-white/40 tracking-widest mb-2 block">Mailing Address</label>
                        <textarea name="address" rows="1" 
                                  class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-emerald focus:border-emerald transition-all">{{ old('address', $user->address) }}</textarea>
                    </div>
                </div>
            </div>

            <div class="pt-8 border-t border-white/5 flex justify-end">
                <button type="submit" class="px-8 py-3 bg-white text-navy font-black text-xs uppercase tracking-widest rounded-xl hover:scale-105 transition-all">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>
@endsection