@extends('layouts.app')

@section('title', 'Profil Saya - ' . setting('store_name'))

@section('content')
<div class="bg-slate-50 min-h-screen py-12 sm:py-20" x-data="{ modalOpen: false, editingAddress: null }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-3xl border border-slate-100 p-8 sticky top-28 shadow-sm">
                    <div class="flex items-center gap-4 mb-8">
                        <img class="h-16 w-16 rounded-full border-4 border-primary/10 shadow-sm" src="{{ auth()->user()->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode(auth()->user()->name) }}" alt="">
                        <div>
                            <h2 class="text-xl font-bold text-slate-900">{{ auth()->user()->name }}</h2>
                            <p class="text-sm text-slate-400">{{ auth()->user()->email }}</p>
                        </div>
                    </div>
                    
                    <nav class="space-y-1">
                        <a href="{{ url('/profile') }}" class="flex items-center gap-3 px-4 py-3 bg-primary/5 text-primary font-bold rounded-xl">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            Profil Saya
                        </a>
                        <a href="{{ url('/orders') }}" class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-50 rounded-xl transition-colors font-medium">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 11h14l1 12H4L5 11z"/></svg>
                            Pesanan Saya
                        </a>
                        <form method="POST" action="{{ route('logout') }}" class="pt-4">
                            @csrf
                            <button type="submit" class="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 rounded-xl transition-colors font-bold">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                                Keluar
                            </button>
                        </form>
                    </nav>
                </div>
            </div>

            <!-- Content -->
            <div class="lg:col-span-2 space-y-12">
                <!-- Update Profile -->
                <div class="bg-white rounded-3xl border border-slate-100 p-8 sm:p-10 shadow-sm">
                    <h3 class="text-2xl font-bold text-slate-900 mb-8">Informasi Personal</h3>
                    
                    @if(session('success'))
                        <div class="mb-6 p-4 bg-green-50 text-green-700 text-sm font-bold rounded-xl border border-green-100">
                            {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ url('/profile') }}" method="POST" class="space-y-6">
                        @csrf
                        @method('PUT')
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div class="space-y-2">
                                <label class="text-xs font-bold uppercase tracking-widest text-slate-400">Nama Lengkap</label>
                                <input type="text" name="name" value="{{ old('name', $user->name) }}" class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm font-medium">
                                @error('name') <p class="text-xs text-red-500 font-bold">{{ $message }}</p> @enderror
                            </div>
                            <div class="space-y-2">
                                <label class="text-xs font-bold uppercase tracking-widest text-slate-400">Email</label>
                                <input type="email" name="email" value="{{ old('email', $user->email) }}" class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm font-medium">
                                @error('email') <p class="text-xs text-red-500 font-bold">{{ $message }}</p> @enderror
                            </div>
                            <div class="space-y-2">
                                <label class="text-xs font-bold uppercase tracking-widest text-slate-400">Nomor HP / WhatsApp</label>
                                <input type="text" name="phone" value="{{ old('phone', $user->phone) }}" class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm font-medium">
                                @error('phone') <p class="text-xs text-red-500 font-bold">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <div class="pt-4">
                            <button type="submit" class="px-10 py-4 bg-primary text-white font-bold rounded-2xl shadow-xl shadow-primary/20 hover:scale-105 transition-all">
                                Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Addresses -->
                <div class="bg-white rounded-3xl border border-slate-100 p-8 sm:p-10 shadow-sm">
                    <div class="flex justify-between items-center mb-8">
                        <h3 class="text-2xl font-bold text-slate-900">Daftar Alamat</h3>
                        <button @click="modalOpen = true; editingAddress = null" class="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary font-bold rounded-xl text-sm hover:bg-primary hover:text-white transition-all">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                            Tambah Alamat
                        </button>
                    </div>

                    <div class="space-y-4">
                        @forelse($addresses as $address)
                            <div class="p-6 rounded-2xl border-2 {{ $address->is_primary ? 'border-primary bg-primary/5' : 'border-slate-100' }} relative group">
                                <div class="flex justify-between items-start mb-4">
                                    <div class="flex items-center gap-3">
                                        <h4 class="font-bold text-slate-900">{{ $address->label }}</h4>
                                        @if($address->is_primary)
                                            <span class="px-2 py-0.5 bg-primary text-white text-[10px] font-bold rounded-full uppercase tracking-widest">Utama</span>
                                        @endif
                                    </div>
                                    <div class="flex items-center gap-2">
                                        @if(!$address->is_primary)
                                            <form action="{{ url('/profile/addresses/' . $address->id . '/primary') }}" method="POST">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" class="text-xs font-bold text-primary hover:underline">Set Utama</button>
                                            </form>
                                            <span class="text-slate-200">|</span>
                                        @endif
                                        <button @click="editingAddress = {{ $address->toJson() }}; modalOpen = true" class="text-slate-400 hover:text-slate-900 transition-colors">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                                        </button>
                                        @if(!$address->is_primary)
                                            <form action="{{ url('/profile/addresses/' . $address->id) }}" method="POST" onsubmit="return confirm('Hapus alamat ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-slate-400 hover:text-red-500 transition-colors">
                                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </div>
                                <div class="space-y-1 text-sm text-slate-600">
                                    <p class="font-bold text-slate-900">{{ $address->recipient_name }} <span class="font-medium text-slate-400">({{ $address->phone }})</span></p>
                                    <p>{{ $address->address }}</p>
                                    <p>{{ $address->district }}, {{ $address->city }}, {{ $address->province }} {{ $address->postal_code }}</p>
                                </div>
                            </div>
                        @empty
                            <div class="py-12 text-center border-2 border-dashed border-slate-200 rounded-3xl">
                                <p class="text-slate-400 text-sm">Belum ada alamat tersimpan.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Address Modal -->
    <div x-show="modalOpen" class="fixed inset-0 z-[100] flex items-center justify-center p-4" x-cloak>
        <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" @click="modalOpen = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"></div>
        
        <div class="relative bg-white rounded-[2.5rem] p-8 sm:p-10 w-full max-w-2xl shadow-2xl overflow-hidden" 
             x-transition:enter="ease-out duration-300" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100">
            
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-2xl font-extrabold text-slate-900" x-text="editingAddress ? 'Edit Alamat' : 'Tambah Alamat Baru'"></h2>
                <button @click="modalOpen = false" class="text-slate-400 hover:text-slate-900">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>

            <form :action="editingAddress ? '{{ url('/profile/addresses') }}/' + editingAddress.id : '{{ url('/profile/addresses') }}'" method="POST" class="space-y-6">
                @csrf
                <template x-if="editingAddress">
                    <input type="hidden" name="_method" value="PUT">
                </template>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-h-[60vh] overflow-y-auto pr-2">
                    <div class="sm:col-span-2 space-y-2">
                        <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Label Alamat (e.g. Rumah, Kantor)</label>
                        <input type="text" name="label" :value="editingAddress?.label" required class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm">
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Nama Penerima</label>
                        <input type="text" name="recipient_name" :value="editingAddress?.recipient_name" required class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm">
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Nomor HP Penerima</label>
                        <input type="text" name="phone" :value="editingAddress?.phone" required class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm">
                    </div>
                    <div class="sm:col-span-2 space-y-2">
                        <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Alamat Lengkap</label>
                        <textarea name="address" rows="3" required class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm" x-text="editingAddress?.address"></textarea>
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Provinsi</label>
                        <input type="text" name="province" :value="editingAddress?.province" required class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm">
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Kota / Kabupaten</label>
                        <input type="text" name="city" :value="editingAddress?.city" required class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm">
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Kecamatan</label>
                        <input type="text" name="district" :value="editingAddress?.district" required class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm">
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Kode Pos</label>
                        <input type="text" name="postal_code" :value="editingAddress?.postal_code" required class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="is_primary" value="1" :checked="editingAddress?.is_primary" class="w-5 h-5 rounded border-slate-200 text-primary focus:ring-primary">
                            <span class="text-sm font-bold text-slate-700">Jadikan Alamat Utama</span>
                        </label>
                    </div>
                </div>

                <div class="pt-4">
                    <button type="submit" class="w-full py-5 bg-primary text-white font-bold rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] transition-all">
                        Simpan Alamat
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection