@extends('app')

@section('content')

    <style>
        .login-toggle-pass {
            position: absolute;
            top: 50%;
            right: 12px;
            transform: translateY(-50%);
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 0;
            font-size: 14px;
            color: #6b7280;
        }

        .login-toggle-pass:hover {
            color: var(--green-500);
        }
    </style>
    <div class="container-fluid px-4">

        {{-- Page Header --}}
        <div class="page-header mt-2">
            <h1 class="page-title">
                Profil Saya
                <span>Kelola informasi akun dan keamanan Anda</span>
            </h1>
        </div>

        {{-- Breadcrumb --}}
        <div class="breadcrumb-wrap mb-4">
            <a href="{{ url('/dashboard') }}">Dashboard</a>
            <i class="fas fa-chevron-right"></i>
            <span>Profil Saya</span>
        </div>

        {{-- Alerts --}}
        @if (session('success'))
            <div class="comp-alert comp-alert-success mb-4">
                <i class="fas fa-check-circle comp-alert-icon"></i>
                <div>
                    <strong>Berhasil!</strong>
                    <span>{{ session('success') }}</span>
                </div>
            </div>
        @endif

        @if (session('error'))
            <div class="comp-alert comp-alert-danger mb-4">
                <i class="fas fa-times-circle comp-alert-icon"></i>
                <div>
                    <strong>Gagal!</strong>
                    <span>{{ session('error') }}</span>
                </div>
            </div>
        @endif

        <div class="row g-4">

            {{-- LEFT: Avatar & info ringkas --}}
            <div class="col-lg-4">

                {{-- Profile Card --}}
                <div class="card mb-4">
                    <div class="card-body" style="text-align:center; padding:2rem 1.5rem !important;">

                        {{-- Avatar --}}
                        <div style="position:relative; display:inline-block; margin-bottom:1.1rem;">
                            <div
                                style="width:88px; height:88px; border-radius:50%;
                                    background:linear-gradient(135deg, var(--green-700), var(--green-500));
                                    display:grid; place-items:center;
                                    font-size:2rem; color:#fff; font-weight:700;
                                    border:3px solid var(--gold);
                                    box-shadow:0 6px 20px rgba(61,150,81,.3);
                                    margin:0 auto;">
                                {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                            </div>
                            <span
                                style="position:absolute; bottom:2px; right:2px;
                                     width:18px; height:18px; border-radius:50%;
                                     background:var(--green-500);
                                     border:2px solid #fff;
                                     display:grid; place-items:center;">
                            </span>
                        </div>

                        {{-- Name & Role --}}
                        <h2 style="font-size:1.05rem; font-weight:700; color:var(--text-dark); margin:0 0 .3rem;">
                            {{ Auth::user()->name }}
                        </h2>
                        <span style="font-size:.75rem; color:var(--text-light);">
                            {{ Auth::user()->email }}
                        </span>

                        <div style="margin:.85rem 0;">
                            @if (Auth::user()->role === 'admin')
                                <span class="badge-status badge-aman">
                                    <i class="fas fa-shield-alt"></i> Admin
                                </span>
                            @else
                                <span class="badge-status badge-hampir">
                                    <i class="fas fa-user"></i> Pembeli
                                </span>
                            @endif
                        </div>

                        <hr style="border-color:var(--border);">

                        {{-- Stats --}}
                        <div style="display:flex; justify-content:center; gap:2rem; margin-top:.75rem;">
                            <div style="text-align:center;">
                                <div style="font-size:1.2rem; font-weight:800; color:var(--green-600);">
                                    {{ Auth::user()->pemesanan->count() }}
                                </div>
                                <div style="font-size:.7rem; color:var(--text-light); margin-top:.1rem;">
                                    Total Pesanan
                                </div>
                            </div>
                            <div style="width:1px; background:var(--border);"></div>
                            <div style="text-align:center;">
                                <div style="font-size:1.2rem; font-weight:800; color:var(--green-600);">
                                    {{ Auth::user()->pemesanan->where('status', 'selesai')->count() }}
                                </div>
                                <div style="font-size:.7rem; color:var(--text-light); margin-top:.1rem;">
                                    Selesai
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                {{-- Info Akun --}}
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-info-circle"></i>
                        Informasi Akun
                    </div>
                    <div class="card-body" style="display:flex; flex-direction:column; gap:.65rem;">

                        <div
                            style="display:grid; grid-template-columns:90px 1fr; gap:.4rem;
                                font-size:.82rem; align-items:start;">
                            <span
                                style="color:var(--text-light); font-weight:600; font-size:.72rem;
                                     text-transform:uppercase; letter-spacing:.4px;">
                                Bergabung
                            </span>
                            <span style="color:var(--text-dark);">
                                {{ Auth::user()->created_at->format('d M Y') }}
                            </span>
                        </div>

                        <div
                            style="display:grid; grid-template-columns:90px 1fr; gap:.4rem;
                                font-size:.82rem; align-items:start;">
                            <span
                                style="color:var(--text-light); font-weight:600; font-size:.72rem;
                                     text-transform:uppercase; letter-spacing:.4px;">
                                Diperbarui
                            </span>
                            <span style="color:var(--text-dark);">
                                {{ Auth::user()->updated_at->format('d M Y') }}
                            </span>
                        </div>

                        <div
                            style="display:grid; grid-template-columns:90px 1fr; gap:.4rem;
                                font-size:.82rem; align-items:start; padding-top:.5rem;
                                border-top:1px solid var(--border);">
                            <span
                                style="color:var(--text-light); font-weight:600; font-size:.72rem;
                                     text-transform:uppercase; letter-spacing:.4px;">
                                Alamat
                            </span>
                            <span style="color:var(--text-dark); line-height:1.5;">
                                {{ Auth::user()->alamat ?? '-' }}
                            </span>
                        </div>

                    </div>
                </div>

            </div>

            {{-- RIGHT: Forms --}}
            <div class="col-lg-8" style="display:flex; flex-direction:column; gap:1.25rem;">

                {{-- Form: Edit Profil --}}
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-user-edit"></i>
                        Edit Informasi Profil
                    </div>
                    <div class="card-body">

                        @if ($errors->hasBag('updateProfile'))
                            <div class="comp-alert comp-alert-danger mb-3">
                                <i class="fas fa-times-circle comp-alert-icon"></i>
                                <div>
                                    <strong>Kesalahan:</strong>
                                    <span>
                                        <ul class="mb-0 mt-1 ps-3">
                                            @foreach ($errors->getBag('updateProfile')->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </span>
                                </div>
                            </div>
                        @endif

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

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="fas fa-user" style="color:var(--green-500); width:14px;"></i>
                                        Nama Lengkap <span style="color:var(--red-card)">*</span>
                                    </label>
                                    <input type="text" name="name"
                                        class="form-control @error('name', 'updateProfile') is-invalid @enderror"
                                        value="{{ old('name', Auth::user()->name) }}" placeholder="Nama lengkap" required>
                                    @error('name', 'updateProfile')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="fas fa-envelope" style="color:var(--green-500); width:14px;"></i>
                                        Email <span style="color:var(--red-card)">*</span>
                                    </label>
                                    <input type="email" name="email"
                                        class="form-control @error('email', 'updateProfile') is-invalid @enderror"
                                        value="{{ old('email', Auth::user()->email) }}" placeholder="contoh@email.com"
                                        required>
                                    @error('email', 'updateProfile')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <label class="form-label">
                                        <i class="fas fa-map-marker-alt" style="color:var(--green-500); width:14px;"></i>
                                        Alamat
                                    </label>
                                    <textarea name="alamat" class="form-control @error('alamat', 'updateProfile') is-invalid @enderror" rows="3"
                                        placeholder="Masukkan alamat lengkap (opsional)">{{ old('alamat', Auth::user()->alamat) }}</textarea>
                                    @error('alamat', 'updateProfile')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <hr style="border-color:var(--border); margin:.1rem 0 .5rem;">
                                </div>

                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-1"></i> Simpan Perubahan
                                    </button>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>

                {{-- Form: Ganti Password --}}
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-lock"></i>
                        Ganti Password
                    </div>
                    <div class="card-body">

                        @if ($errors->hasBag('updatePassword'))
                            <div class="comp-alert comp-alert-danger mb-3">
                                <i class="fas fa-times-circle comp-alert-icon"></i>
                                <div>
                                    <strong>Kesalahan:</strong>
                                    <span>
                                        <ul class="mb-0 mt-1 ps-3">
                                            @foreach ($errors->getBag('updatePassword')->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </span>
                                </div>
                            </div>
                        @endif

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

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="fas fa-key" style="color:var(--green-500); width:14px;"></i>
                                        Password Saat Ini <span style="color:var(--red-card)">*</span>
                                    </label>
                                    <div style="position:relative;">
                                        <input type="password" name="current_password" id="currentPass"
                                            class="form-control @error('current_password', 'updatePassword') is-invalid @enderror"
                                            placeholder="Password saat ini" style="padding-right:2.6rem !important;"
                                            required>
                                        <button type="button" class="login-toggle-pass"
                                            onclick="togglePass('currentPass','iconCurrent')">
                                            <i class="fas fa-eye" id="iconCurrent"></i>
                                        </button>
                                    </div>
                                    @error('current_password', 'updatePassword')
                                        <div class="invalid-feedback" style="display:block;">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="fas fa-key" style="color:var(--green-500); width:14px;"></i>
                                        Password Baru <span style="color:var(--red-card)">*</span>
                                    </label>
                                    <div style="position:relative;">
                                        <input type="password" name="password" id="newPass"
                                            class="form-control @error('password', 'updatePassword') is-invalid @enderror"
                                            placeholder="Minimal 8 karakter" style="padding-right:2.6rem !important;"
                                            required>
                                        <button type="button" class="login-toggle-pass"
                                            onclick="togglePass('newPass','iconNew')">
                                            <i class="fas fa-eye" id="iconNew"></i>
                                        </button>
                                    </div>
                                    @error('password', 'updatePassword')
                                        <div class="invalid-feedback" style="display:block;">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="fas fa-key" style="color:var(--green-500); width:14px;"></i>
                                        Konfirmasi Password Baru <span style="color:var(--red-card)">*</span>
                                    </label>
                                    <div style="position:relative;">
                                        <input type="password" name="password_confirmation" id="confirmPass"
                                            class="form-control" placeholder="Ulangi password baru"
                                            style="padding-right:2.6rem !important;" required>
                                        <button type="button" class="login-toggle-pass"
                                            onclick="togglePass('confirmPass','iconConfirm')">
                                            <i class="fas fa-eye" id="iconConfirm"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="comp-alert comp-alert-info">
                                        <i class="fas fa-info-circle comp-alert-icon"></i>
                                        <div>
                                            <span>Password baru minimal 8 karakter. Gunakan kombinasi huruf, angka, dan
                                                simbol untuk keamanan lebih baik.</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <hr style="border-color:var(--border); margin:.1rem 0 .5rem;">
                                </div>

                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-lock me-1"></i> Perbarui Password
                                    </button>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        function togglePass(inputId, iconId) {
            const input = document.getElementById(inputId);
            const icon = document.getElementById(iconId);
            const isPass = input.type === 'password';
            input.type = isPass ? 'text' : 'password';
            icon.classList.toggle('fa-eye', !isPass);
            icon.classList.toggle('fa-eye-slash', isPass);
        }
    </script>
@endsection