{{--
    Halaman  : Profil Customer
    Layout   : layouts.app (Bootstrap 5 SparkWash)
    Controller: Customer\ProfileController@edit
--}}
<x-layouts.app :title="'Profil Saya'">

<div class="page-header">
    <div>
        <h1 class="page-title">
            <i class="fas fa-user-circle me-2" style="color:var(--sw-primary);"></i>
            Profil Saya
        </h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0" style="font-size:0.8rem;">
                <li class="breadcrumb-item">
                    <a href="{{ route('customer.dashboard') }}" style="color:var(--sw-primary);text-decoration:none;">Dashboard</a>
                </li>
                <li class="breadcrumb-item active">Profil</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row g-4">

    {{-- Kolom Kiri: Avatar + Info Singkat --}}
    <div class="col-lg-4">
        <div class="card text-center">
            <div class="card-body p-4">
                {{-- Avatar --}}
                <div class="mx-auto mb-3 position-relative d-inline-block">
                    <img src="{{ $user->avatar_url }}"
                         alt="{{ $user->name }}"
                         class="rounded-circle"
                         width="96" height="96"
                         style="object-fit:cover;border:4px solid var(--sw-primary-light);">
                    <div class="position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center rounded-circle"
                         style="width:28px;height:28px;background:var(--sw-primary);cursor:pointer;"
                         title="Ganti foto (segera hadir)">
                        <i class="fas fa-camera text-white" style="font-size:0.65rem;"></i>
                    </div>
                </div>

                <h6 class="fw-700 mb-0" style="color:var(--sw-dark);">{{ $user->name }}</h6>
                <div style="font-size:0.8rem;color:var(--sw-gray);">{{ $user->email }}</div>

                @if ($user->phone)
                <div style="font-size:0.8rem;color:var(--sw-gray);" class="mt-1">
                    <i class="fas fa-phone me-1"></i>{{ $user->phone }}
                </div>
                @endif

                <div class="mt-3">
                    <span class="badge rounded-pill px-3 py-2"
                          style="background:var(--sw-primary-light);color:var(--sw-primary-dark);font-size:0.75rem;">
                        <i class="fas fa-user me-1"></i>Customer
                    </span>
                </div>

                <div class="mt-3 pt-3" style="border-top:1px solid #ECEFF1;font-size:0.8rem;color:var(--sw-gray);">
                    Bergabung sejak<br>
                    <span class="fw-600" style="color:var(--sw-dark);">
                        {{ $user->created_at->locale('id')->isoFormat('MMMM Y') }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Kolom Kanan: Form Edit --}}
    <div class="col-lg-8">

        {{-- Kartu Edit Profil --}}
        <div class="card mb-4">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-4" style="color:var(--sw-dark);">
                    <i class="fas fa-pen me-2" style="color:var(--sw-primary);"></i>
                    Edit Data Profil
                </h6>

                @if (session('success'))
                <div class="alert border-0 rounded-sw mb-4 d-flex align-items-center gap-2"
                     style="background:#E8F5E9;color:#2E7D32;">
                    <i class="fas fa-circle-check"></i>
                    <span>{{ session('success') }}</span>
                </div>
                @endif

                <form method="POST" action="{{ route('customer.profile.update') }}" novalidate>
                    @csrf
                    @method('PATCH')

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Nama Lengkap</label>
                            <input type="text"
                                   name="name"
                                   class="form-control @error('name') is-invalid @enderror"
                                   value="{{ old('name', $user->name) }}"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Alamat Email</label>
                            <input type="email"
                                   name="email"
                                   class="form-control @error('email') is-invalid @enderror"
                                   value="{{ old('email', $user->email) }}"
                                   required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">
                                Nomor Telepon
                                <span style="font-weight:400;color:var(--sw-gray);">(opsional)</span>
                            </label>
                            <input type="tel"
                                   name="phone"
                                   class="form-control @error('phone') is-invalid @enderror"
                                   value="{{ old('phone', $user->phone) }}"
                                   placeholder="08xxxxxxxxxx">
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary px-5">
                            <i class="fas fa-save me-2"></i>Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Kartu Ganti Password --}}
        <div class="card">
            <div class="card-body p-4">
                <h6 class="fw-700 mb-4" style="color:var(--sw-dark);">
                    <i class="fas fa-lock me-2" style="color:var(--sw-primary);"></i>
                    Ganti Password
                </h6>

                <form method="POST" action="{{ route('customer.profile.update-password') }}" novalidate id="passwordForm">
                    @csrf
                    @method('PATCH')

                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label">Password Saat Ini</label>
                            <div class="input-group">
                                <input type="password"
                                       id="currentPassword"
                                       name="current_password"
                                       class="form-control @error('current_password') is-invalid @enderror"
                                       placeholder="Masukkan password saat ini"
                                       required>
                                <button class="btn btn-outline-secondary border" type="button"
                                        onclick="togglePwd('currentPassword')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                @error('current_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Password Baru</label>
                            <div class="input-group">
                                <input type="password"
                                       id="newPassword"
                                       name="password"
                                       class="form-control @error('password') is-invalid @enderror"
                                       placeholder="Minimal 8 karakter"
                                       required>
                                <button class="btn btn-outline-secondary border" type="button"
                                        onclick="togglePwd('newPassword')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Konfirmasi Password Baru</label>
                            <div class="input-group">
                                <input type="password"
                                       id="confirmPassword"
                                       name="password_confirmation"
                                       class="form-control"
                                       placeholder="Ulangi password baru"
                                       required>
                                <button class="btn btn-outline-secondary border" type="button"
                                        onclick="togglePwd('confirmPassword')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-outline-primary px-5">
                            <i class="fas fa-key me-2"></i>Ubah Password
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

@push('scripts')
<script>
function togglePwd(id) {
    const input = document.getElementById(id);
    input.type = input.type === 'password' ? 'text' : 'password';
}

document.getElementById('passwordForm').addEventListener('submit', function(e) {
    const newPwd     = document.getElementById('newPassword').value;
    const confirmPwd = document.getElementById('confirmPassword').value;
    if (newPwd !== confirmPwd) {
        e.preventDefault();
        SwAlert.error('Konfirmasi Tidak Cocok', 'Password baru dan konfirmasi password tidak sesuai.');
    }
});
</script>
@endpush

</x-layouts.app>