@extends('layouts.frontend')

@section('title', 'Manajemen Profil Saya')

@section('content')
<div class="max-w-2xl mx-auto space-y-6">

    <!-- Notifikasi Sukses Simpan -->
    @if(session('success'))
    <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm p-4 rounded-xl font-medium shadow-sm flex items-center gap-2">
        <span>✅</span>
        <p>{{ session('success') }}</p>
    </div>
    @endif

    <!-- RINGKASAN KARTU MEMBER CRM -->
    <div class="bg-gradient-to-br from-blue-700 to-indigo-800 p-6 rounded-2xl text-white shadow-md flex justify-between items-center">
        <div class="space-y-1">
            <span class="text-[10px] bg-white/20 px-2 py-0.5 rounded-full font-mono font-bold tracking-wider uppercase">Mega Mart Loyalty Member</span>
            <h2 class="text-2xl font-black tracking-tight">{{ $pelanggan->nama }}</h2>
            <p class="text-blue-200 text-xs font-mono">ID Akun: #MBR-{{ $pelanggan->id }}</p>
        </div>
        <div class="bg-white/10 px-5 py-3 rounded-xl border border-white/10 text-center backdrop-blur-sm">
            <span class="block text-2xl font-black text-yellow-300">⭐ {{ $pelanggan->poin_loyalitas }}</span>
            <span class="text-[10px] text-blue-100 font-semibold uppercase tracking-wide">Poin Terkumpul</span>
        </div>
    </div>

    <!-- FORM EDIT DATA DATA PRIBADI -->
    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6">
        <div class="border-b border-gray-100 pb-3 mb-5">
            <h3 class="font-bold text-gray-900 text-base">Perbarui Informasi Profil</h3>
            <p class="text-xs text-gray-500 mt-0.5">Pastikan nomor telepon dan alamat pengiriman Anda sudah benar untuk mempermudah kurir mengantar sembako.</p>
        </div>

        <form action="{{ route('profil.update') }}" method="POST" class="space-y-4">
            @csrf

            <!-- Kolom Email (Read Only - Tidak boleh diganti karena untuk kunci login) -->
            <div>
                <label class="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Alamat Email (Akun Tetap)</label>
                <input type="email" disabled value="{{ $pelanggan->email }}" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-400 cursor-not-allowed font-medium">
            </div>

            <!-- Kolom Nama Lengkap -->
            <div>
                <label class="block text-xs font-bold text-gray-600 uppercase tracking-wider mb-1">Nama Lengkap Member</label>
                <input type="text" name="nama" required value="{{ $pelanggan->nama }}" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm outline-none focus:ring-1 focus:ring-blue-600 font-medium">
            </div>

            <!-- Kolom Nomor Handphone -->
            <div>
                <label class="block text-xs font-bold text-gray-600 uppercase tracking-wider mb-1">Nomor WhatsApp / HP Aktif</label>
                <input type="text" name="no_hp" required value="{{ $pelanggan->no_hp }}" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm outline-none focus:ring-1 focus:ring-blue-600 font-medium font-mono">
            </div>

            <!-- Kolom Alamat Lengkap Domisili Rumah -->
            <div>
                <label class="block text-xs font-bold text-gray-600 uppercase tracking-wider mb-1">Alamat Lengkap Pengiriman Rumah</label>
                <textarea name="alamat" rows="3" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm outline-none focus:ring-1 focus:ring-blue-600 font-medium resize-none">{{ $pelanggan->alamat }}</textarea>
            </div>

            <!-- Tombol Simpan Aksi -->
            <div class="pt-2">
                <button type="submit" class="w-full bg-slate-900 text-white text-sm py-2.5 rounded-lg hover:bg-slate-800 transition font-bold shadow-sm">
                    💾 Simpan Perubahan Data Profil
                </button>
            </div>
        </form>
    </div>

</div>
@endsection