@extends('layouts.app')

@push('head')
<style>
    .profile-shell {
        position: relative;
        max-width: 960px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 42px 40px 36px;
        border-radius: 30px;
        background: linear-gradient(150deg, rgba(12, 24, 52, 0.95), rgba(7, 15, 36, 0.88));
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: 0 38px 62px rgba(3, 7, 18, 0.58);
        overflow: hidden;
    }
    .profile-shell::before,
    .profile-shell::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    .profile-shell::before {
        background:
            radial-gradient(circle at 16% 18%, rgba(59, 130, 246, 0.26), transparent 54%),
            radial-gradient(circle at 82% -4%, rgba(14, 165, 233, 0.32), transparent 60%);
        opacity: 0.82;
    }
    .profile-shell::after {
        background: linear-gradient(140deg, transparent 40%, rgba(129, 140, 248, 0.16));
        opacity: 0.7;
    }
    .profile-shell > * { position: relative; z-index: 1; }

    .profile-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        flex-wrap: wrap;
    }
    .profile-hero__info {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 520px;
    }
    .profile-hero__tagline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(129, 140, 248, 0.2);
        border: 1px solid rgba(129, 140, 248, 0.4);
        color: #e0e7ff;
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 600;
    }
    .profile-hero__info h2 {
        margin: 0;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #f8fafc;
    }
    .profile-hero__info p {
        margin: 0;
        color: rgba(226, 232, 240, 0.78);
        font-size: 15px;
        line-height: 1.6;
    }
    .profile-hero__meta {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 220px;
        align-items: flex-end;
    }
    .profile-hero__chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 14px;
        background: rgba(37, 99, 235, 0.18);
        border: 1px solid rgba(37, 99, 235, 0.38);
        color: #bfdbfe;
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 600;
    }
    .profile-hero__meta-text {
        color: rgba(148, 163, 184, 0.8);
        font-size: 12px;
    }

    .profile-alert {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px;
        border-radius: 16px;
        border: 1px solid transparent;
        background: rgba(15, 23, 42, 0.72);
        font-size: 13px;
    }
    .profile-alert--success { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.38); color: #bbf7d0; }
    .profile-alert--error { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.4); color: #fecaca; }
    .profile-alert__title {
        margin: 0;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .profile-alert__list {
        margin: 0 0 0 18px;
        padding: 0;
    }

    .profile-form {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .profile-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px 24px;
    }
    .profile-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .profile-field--full {
        grid-column: 1 / -1;
    }
    .profile-label {
        font-size: 13px;
        font-weight: 600;
        color: #dbeafe;
        letter-spacing: 0.02em;
    }
    .profile-input,
    .profile-textarea,
    .profile-file {
        background: rgba(2, 6, 23, 0.9);
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 14px;
        padding: 11px 14px;
        color: #e2e8f0;
        font-size: 14px;
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.12);
    }
    .profile-textarea {
        resize: vertical;
        min-height: 90px;
        line-height: 1.55;
    }
    .profile-input::placeholder,
    .profile-textarea::placeholder {
        color: rgba(148, 163, 184, 0.7);
    }
    .profile-input:focus,
    .profile-textarea:focus,
    .profile-file:focus {
        outline: none;
        border-color: rgba(59, 130, 246, 0.6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
        background: rgba(2, 6, 23, 0.95);
        transform: translateY(-1px);
    }

    .profile-avatar-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
    }
    .profile-upload-hint {
        font-size: 12px;
        color: rgba(148, 163, 184, 0.78);
        margin-top: 6px;
    }
    .profile-avatar-preview {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        padding: 16px 18px;
        border-radius: 16px;
        background: rgba(8, 16, 32, 0.7);
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: 0 12px 24px rgba(5, 12, 28, 0.38);
    }
    .profile-avatar-preview img {
        width: 86px;
        height: 86px;
        border-radius: 999px;
        object-fit: cover;
        border: 1px solid rgba(56, 189, 248, 0.38);
        box-shadow: 0 10px 20px rgba(5, 12, 28, 0.5);
    }
    .profile-avatar-preview span {
        font-size: 13px;
        color: #cbd5f5;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .profile-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .profile-tip {
        color: rgba(148, 163, 184, 0.82);
        font-size: 12px;
        letter-spacing: 0.04em;
    }
    .profile-submit {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #f8fafc;
        border: none;
        padding: 12px 26px;
        border-radius: 16px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        box-shadow: 0 22px 38px rgba(37, 99, 235, 0.34);
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .profile-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 26px 44px rgba(37, 99, 235, 0.4);
    }

    .profile-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }
    .profile-summary__card {
        position: relative;
        padding: 18px 20px;
        border-radius: 18px;
        background: rgba(8, 16, 36, 0.78);
        border: 1px solid rgba(129, 140, 248, 0.26);
        box-shadow: 0 18px 30px rgba(5, 12, 28, 0.38);
        display: flex;
        flex-direction: column;
        gap: 6px;
        overflow: hidden;
    }
    .profile-summary__card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 82% 18%, rgba(59, 130, 246, 0.22), transparent 55%);
        opacity: 0.68;
        pointer-events: none;
    }
    .profile-summary__card > * { position: relative; z-index: 1; }
    .profile-summary__label {
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(203, 213, 225, 0.72);
        font-weight: 600;
    }
    .profile-summary__value {
        font-size: 20px;
        font-weight: 700;
        color: #f8fafc;
        letter-spacing: -0.01em;
    }
    .profile-summary__meta {
        font-size: 12px;
        color: rgba(148, 163, 184, 0.78);
    }

    @media (max-width: 860px) {
        .profile-shell {
            padding: 36px 28px 30px;
        }
        .profile-hero__meta {
            align-items: flex-start;
        }
    }
    @media (max-width: 640px) {
        .profile-shell {
            padding: 28px 22px;
            border-radius: 26px;
        }
        .profile-actions {
            flex-direction: column;
            align-items: flex-start;
        }
        .profile-submit {
            width: 100%;
            justify-content: center;
        }
    }
</style>
@endpush

@section('content')
@php
    $createdAt = $user->created_at?->timezone(config('app.timezone'));
    $updatedAt = $user->updated_at?->timezone(config('app.timezone'));
@endphp

<div class="profile-shell">
    <div class="profile-hero">
        <div class="profile-hero__info">
            <span class="profile-hero__tagline">Kendali Akun</span>
            <h2>Profil Saya</h2>
            <p>Kelola data pribadi, kredensial, dan foto profil dengan antarmuka modern yang konsisten dengan dashboard.</p>
        </div>
        <div class="profile-hero__meta">
            <span class="profile-hero__chip">Terakhir diperbarui {{ $updatedAt?->format('d M Y H:i') ?? '-' }}</span>
            <span class="profile-hero__meta-text">Terdaftar {{ $createdAt?->format('d M Y') ?? '-' }}</span>
        </div>
    </div>

    @if (session('success'))
        <div class="profile-alert profile-alert--success">
            <p class="profile-alert__title">Berhasil</p>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if ($errors->any())
        <div class="profile-alert profile-alert--error">
            <p class="profile-alert__title">Periksa kembali input</p>
            <ul class="profile-alert__list">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('profile.update') }}" class="profile-form" enctype="multipart/form-data">
        @csrf
        <div class="profile-grid">
            <div class="profile-field profile-field--full">
                <label for="name" class="profile-label">Nama</label>
                <input type="text" id="name" name="name" class="profile-input" value="{{ old('name', $user->name) }}" required>
            </div>
            <div class="profile-field">
                <label for="username" class="profile-label">Username</label>
                <input type="text" id="username" name="username" class="profile-input" value="{{ old('username', $user->username ?? '') }}" placeholder="Opsional">
            </div>
            <div class="profile-field">
                <label for="email" class="profile-label">Email</label>
                <input type="email" id="email" name="email" class="profile-input" value="{{ old('email', $user->email) }}" required>
            </div>
            <div class="profile-field">
                <label for="phone" class="profile-label">No. HP</label>
                <input type="text" id="phone" name="phone" class="profile-input" value="{{ old('phone', $user->phone ?? '') }}" placeholder="Opsional">
            </div>
            <div class="profile-field profile-field--full">
                <label for="address" class="profile-label">Alamat</label>
                <textarea id="address" name="address" rows="2" class="profile-textarea" placeholder="Opsional">{{ old('address', $user->address ?? '') }}</textarea>
            </div>
            <div class="profile-field profile-field--full">
                <label for="password" class="profile-label">Ganti Password</label>
                <input type="password" id="password" name="password" class="profile-input" placeholder="Kosongkan jika tidak ingin mengganti">
            </div>
            <div class="profile-field profile-field--full">
                <label class="profile-label">Foto Profil</label>
                <div class="profile-avatar-row">
                    <div>
                        <input type="file" name="avatar" accept="image/*" class="profile-file">
                        <div class="profile-upload-hint">Maks 2MB. Format: JPG/PNG.</div>
                    </div>
                    @if(!empty($user->avatar_path))
                        <div class="profile-avatar-preview">
                            <span>Saat ini</span>
                            <img src="{{ asset('storage/' . $user->avatar_path) }}" alt="Avatar">
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="profile-actions">
            <span class="profile-tip">Pastikan data sudah akurat. Semua perubahan langsung disimpan ke profil Anda.</span>
            <button type="submit" class="profile-submit">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.5 12.75l6 6 9-13.5" />
                </svg>
                Simpan Perubahan
            </button>
        </div>
    </form>

    <div class="profile-summary">
        <div class="profile-summary__card">
            <span class="profile-summary__label">Role</span>
            <span class="profile-summary__value">{{ $user->role ?? '-' }}</span>
            <span class="profile-summary__meta">Hak akses dalam sistem</span>
        </div>
        <div class="profile-summary__card">
            <span class="profile-summary__label">Terdaftar</span>
            <span class="profile-summary__value">{{ $createdAt?->format('d/m/Y H:i') ?? '-' }}</span>
            <span class="profile-summary__meta">Tanggal akun dibuat</span>
        </div>
        <div class="profile-summary__card">
            <span class="profile-summary__label">Update Terakhir</span>
            <span class="profile-summary__value">{{ $updatedAt?->format('d/m/Y H:i') ?? '-' }}</span>
            <span class="profile-summary__meta">Perubahan profil terbaru</span>
        </div>
    </div>
</div>
@endsection