@extends('layouts.member')
@section('title', 'Profile — JAM Members Club')

@section('content')
@php $user = auth()->user(); @endphp
<div class="mb-8">
    <h1 class="text-3xl font-semibold" style="font-family: 'Playfair Display', serif;">Profile</h1>
    <p class="text-white/40 text-sm mt-1">Membership #{{ $user->membership_number }}</p>
</div>

@if (session('status'))
    <div class="bg-green-900/30 border border-green-700/50 rounded-lg p-4 mb-6 max-w-2xl">
        <p class="text-green-400 text-sm">{{ session('status') }}</p>
    </div>
@endif

@if ($errors->any())
    <div class="bg-red-900/30 border border-red-700/50 rounded-lg p-4 mb-6 max-w-2xl">
        @foreach ($errors->all() as $error)
            <p class="text-red-400 text-sm">{{ $error }}</p>
        @endforeach
    </div>
@endif

<form method="POST" action="{{ route('member.profile.update') }}" enctype="multipart/form-data" class="max-w-2xl">
    @csrf
    @method('PUT')

    {{-- Profile Image Section --}}
    <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-8 mb-6">
        <h3 class="text-xs tracking-widest uppercase text-[#D4B84A] mb-6 font-medium">Profile Photo</h3>
        <div class="flex items-center gap-6" x-data="{ preview: '{{ $user->profile_image ? asset('storage/' . $user->profile_image) : '' }}' }">
            <div class="w-20 h-20 rounded-full bg-[#1e1e1e] border-2 border-[#2a2a2a] flex items-center justify-center overflow-hidden flex-shrink-0">
                <template x-if="preview">
                    <img :src="preview" class="w-full h-full object-cover" alt="Profile">
                </template>
                <template x-if="!preview">
                    <span class="text-[#D4B84A] text-2xl font-semibold">{{ strtoupper(substr($user->first_name, 0, 1)) }}</span>
                </template>
            </div>
            <div>
                <label for="profile_image" class="inline-block px-5 py-2 border border-[#2a2a2a] rounded-full text-xs tracking-widest uppercase text-white/60 hover:text-white hover:border-[#D4B84A] transition-colors cursor-pointer">
                    Choose Photo
                </label>
                <input type="file" name="profile_image" id="profile_image" accept="image/jpg,image/jpeg,image/png,image/webp" class="hidden"
                       @change="preview = URL.createObjectURL($event.target.files[0])">
                <p class="text-white/25 text-xs mt-2">JPG, PNG or WebP. Max 2MB.</p>
            </div>
        </div>
    </div>

    {{-- Personal Information --}}
    <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-8 mb-6">
        <h3 class="text-xs tracking-widest uppercase text-[#D4B84A] mb-6 font-medium">Personal Information</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Name</label>
                <input type="text" name="first_name" value="{{ old('first_name', $user->first_name) }}" required
                       class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white py-3 text-sm transition-colors duration-200">
            </div>
            <div>
                <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Email</label>
                <input type="email" name="email" value="{{ old('email', $user->email) }}" required
                       class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white py-3 text-sm transition-colors duration-200">
            </div>
            <div>
                <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Phone</label>
                <input type="tel" name="phone" value="{{ old('phone', $user->phone) }}"
                       placeholder="+61 4XX XXX XXX"
                       class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
            </div>
        </div>
    </div>

    {{-- Address Information --}}
    <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-8 mb-6">
        <h3 class="text-xs tracking-widest uppercase text-[#D4B84A] mb-6 font-medium">Address</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">State</label>
                <input type="text" name="state" value="{{ old('state', $user->state) }}"
                       placeholder="e.g. Queensland"
                       class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
            </div>
            <div>
                <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">City</label>
                <input type="text" name="city" value="{{ old('city', $user->city) }}"
                       placeholder="e.g. Townsville"
                       class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
            </div>
            <div class="md:col-span-2">
                <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Full Address</label>
                <textarea name="address" rows="2" placeholder="Street address, suburb, postcode"
                          class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200 resize-none">{{ old('address', $user->address) }}</textarea>
            </div>
        </div>
    </div>

    {{-- Membership Info (read-only) --}}
    <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-8 mb-6">
        <h3 class="text-xs tracking-widest uppercase text-[#D4B84A] mb-6 font-medium">Membership Details</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <p class="text-xs tracking-widest uppercase text-white/40 mb-1">Member Since</p>
                <p class="text-white text-sm">{{ $user->enrolled_at?->format('d M Y') }}</p>
            </div>
            <div>
                <p class="text-xs tracking-widest uppercase text-white/40 mb-1">Points Expire</p>
                <p class="text-white text-sm">{{ $user->points_expiry_date?->format('d M Y') }}</p>
            </div>
        </div>
    </div>

    {{-- Submit --}}
    <div class="flex justify-end">
        <button type="submit"
                class="px-8 py-3 bg-[#D4B84A] hover:bg-[#E8D080] text-black font-semibold text-xs tracking-widest uppercase rounded-full transition-colors duration-200">
            Save Changes
        </button>
    </div>
</form>
@endsection