@extends('layouts.app')

@section('title', 'My Profile')

@section('content')

{{-- ── Page Header ── --}}
<div class="page-header-bar">
    <div class="header-title-row">
        <div class="page-title-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <div>
            <h1 class="page-title">My Profile</h1>
            <p class="page-subtitle">Update your photo, name, email &amp; password</p>
        </div>
    </div>
</div>

{{-- ── Profile Image ── --}}
<div class="detail-card" style="--card-delay: 0.08s;">
    <div class="detail-card-header">
        <div class="detail-card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
        </div>
        <h2 class="detail-card-title">Profile Image</h2>
    </div>
    <div class="detail-card-body">
        <form method="POST" action="{{ route('user.profile.image') }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="avatar-row">
                @if($user->image_url)
                <img src="{{ $user->image_url }}" alt="" width="72" height="72" class="profile-avatar">
                @else
                <div class="profile-avatar-placeholder">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                </div>
                @endif
                <div class="avatar-upload-area">
                    <label for="image" class="upload-label">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        Choose file
                    </label>
                    <input type="file" id="image" name="image" class="file-input" accept="image/jpeg,image/png,image/gif,image/webp" required>
                    <span class="form-hint">Max 2MB · JPG, PNG, GIF or WebP</span>
                    @error('image')<span class="field-error">{{ $message }}</span>@enderror
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn-primary-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Update Image
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ── Profile Details ── --}}
<div class="detail-card" style="--card-delay: 0.15s;">
    <div class="detail-card-header">
        <div class="detail-card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
        </div>
        <h2 class="detail-card-title">Profile Details</h2>
    </div>
    <div class="detail-card-body">
        <form method="POST" action="{{ route('user.profile') }}">
            @csrf
            @method('PUT')

            <div class="form-grid">
                <div class="profile-form-group">
                    <label for="name" class="profile-label">Name</label>
                    <input type="text" id="name" name="name" class="profile-input {{ $errors->has('name') ? 'input-error' : '' }}" value="{{ old('name', $user->name) }}" required autocomplete="name">
                    @error('name')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="profile-form-group">
                    <label for="email" class="profile-label">Email Address</label>
                    <input type="email" id="email" name="email" class="profile-input {{ $errors->has('email') ? 'input-error' : '' }}" value="{{ old('email', $user->email) }}" required autocomplete="email">
                    @error('email')<span class="field-error">{{ $message }}</span>@enderror
                </div>
            </div>

            <div class="form-grid">
                <div class="profile-form-group">
                    <label for="phone" class="profile-label">Phone Number</label>
                    <input type="tel" id="phone" name="phone" class="profile-input {{ $errors->has('phone') ? 'input-error' : '' }}" value="{{ old('phone', $user->phone) }}" placeholder="e.g. 0493 545 471">
                    @error('phone')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="profile-form-group">
                    <label for="date_of_birth" class="profile-label">Date of Birth</label>
                    <input type="date" id="date_of_birth" name="date_of_birth" class="profile-input {{ $errors->has('date_of_birth') ? 'input-error' : '' }}" value="{{ old('date_of_birth', $user->date_of_birth?->format('Y-m-d')) }}" max="{{ date('Y-m-d', strtotime('-1 day')) }}">
                    @error('date_of_birth')<span class="field-error">{{ $message }}</span>@enderror
                </div>
            </div>

            <div class="form-grid">
                <div class="profile-form-group">
                    <label for="avc_id" class="profile-label">AVC Id</label>
                    <input type="text" id="avc_id" name="avc_id" class="profile-input {{ $errors->has('avc_id') ? 'input-error' : '' }}" value="{{ old('avc_id', $user->avc?->avc_id) }}" placeholder="AVC ID">
                    @error('avc_id')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="profile-form-group">
                    <label for="location" class="profile-label">Location</label>
                    <input type="text" id="location" name="location" class="profile-input {{ $errors->has('location') ? 'input-error' : '' }}" value="{{ old('location', $user->avc?->location) }}" placeholder="Location">
                    @error('location')<span class="field-error">{{ $message }}</span>@enderror
                </div>
            </div>

            <div class="form-divider">
                <span>Change Password</span>
            </div>

            <div class="form-grid">
                <div class="profile-form-group">
                    <label for="password" class="profile-label">New Password <span class="label-optional">— leave blank to keep current</span></label>
                    <div class="password-wrap">
                        <input type="password" id="password" name="password" class="profile-input {{ $errors->has('password') ? 'input-error' : '' }}" autocomplete="new-password">
                        <button type="button" class="pw-toggle" data-target="password" aria-label="Toggle password visibility">
                            <svg class="eye-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    @error('password')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="profile-form-group">
                    <label for="password_confirmation" class="profile-label">Confirm New Password</label>
                    <div class="password-wrap">
                        <input type="password" id="password_confirmation" name="password_confirmation" class="profile-input" autocomplete="new-password">
                        <button type="button" class="pw-toggle" data-target="password_confirmation" aria-label="Toggle password visibility">
                            <svg class="eye-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-primary-action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Update Profile
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('styles')
<style>

/* ─── PASSWORD TOGGLE ─────────────────────────────────── */
.password-wrap { position: relative; display: flex; align-items: center; }
.password-wrap .profile-input { width: 100%; padding-right: 2.5rem; }
.pw-toggle { position: absolute; right: 0.65rem; background: none; border: none; cursor: pointer; color: var(--text-muted, #9ca3af); padding: 0; display: flex; align-items: center; transition: color 0.18s; }
.pw-toggle:hover { color: var(--accent, #e31e52); }

/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header-bar {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
    animation: fadeSlideDown 0.4s ease both;
}
.header-title-row { display: flex; align-items: center; gap: 0.85rem; }
.page-title-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); flex-shrink: 0;
}
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text,#111); letter-spacing: -0.3px; line-height: 1.2; }
.page-subtitle { margin: 0.15rem 0 0; font-size: 0.845rem; color: var(--text-muted,#888); }

/* ─── DETAIL CARDS ────────────────────────────────────── */
.detail-card {
    background: #fff;
    border: 1px solid var(--border,#e8eaed);
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    margin-bottom: 1.25rem;
    overflow: hidden;
    animation: fadeSlideUp 0.45s ease var(--card-delay, 0.1s) both;
}
.detail-card-header {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 1rem 1.25rem;
    border-bottom: 1.5px solid var(--border,#f0f0f0);
    background: color-mix(in srgb, var(--accent) 4%, #fafafa);
}
.detail-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); flex-shrink: 0;
}
.detail-card-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text,#111); }
.detail-card-body { padding: 1.25rem; }

/* ─── AVATAR ROW ──────────────────────────────────────── */
.avatar-row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border,#e8eaed); flex-shrink: 0; }
.profile-avatar-placeholder {
    width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent); display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--border,#e8eaed);
}
.avatar-upload-area { display: flex; flex-direction: column; gap: .3rem; }

/* file input hidden, replaced by label */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-label {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .9rem;
    border: 1.5px solid var(--border,#e0e0e0);
    border-radius: 8px; font-size: .845rem; font-weight: 600;
    color: var(--text,#444); background: #fff; cursor: pointer;
    transition: all .18s; width: fit-content;
}
.upload-label:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.form-hint { font-size: .775rem; color: var(--text-muted,#aaa); }

/* ─── FORM GRID ───────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-bottom: .75rem; }

.profile-form-group { display: flex; flex-direction: column; gap: .35rem; }

.profile-label {
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted,#999);
}
.label-optional { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .75rem; color: var(--text-muted,#bbb); }

.profile-input {
    width: 100%; padding: .58rem .85rem;
    border: 1.5px solid var(--border,#e0e0e0);
    border-radius: 9px; font-size: .9rem;
    background: #fff; color: var(--text,#111);
    outline: none; transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.profile-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.input-error { border-color: #dc3545 !important; }
.input-error:focus { box-shadow: 0 0 0 3px rgba(220,53,69,.15) !important; }

.field-error { font-size: .775rem; color: #dc3545; font-weight: 500; }

/* ─── DIVIDER ─────────────────────────────────────────── */
.form-divider {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.1rem 0 1rem; color: var(--text-muted,#aaa);
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
}
.form-divider::before,
.form-divider::after { content: ''; flex: 1; height: 1px; background: var(--border,#e8eaed); }

/* ─── FORM ACTIONS ────────────────────────────────────── */
.form-actions { margin-top: 1.25rem; }
.btn-primary-action {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .52rem 1.15rem; background: var(--accent); color: #fff;
    border: none; border-radius: 9px; font-size: .875rem; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: all .18s;
}
.btn-primary-action:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); color: #fff; text-decoration: none; }

/* ─── KEYFRAMES ───────────────────────────────────────── */
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideUp   { from { opacity: 0; transform: translateY(14px);  } to { opacity: 1; transform: translateY(0); } }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .page-title { font-size: 1.25rem; }
    .detail-card-body { padding: 1rem; }
}
</style>
@endpush

@push('scripts')
<script>
document.querySelectorAll('.pw-toggle').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var input = document.getElementById(this.getAttribute('data-target'));
        var isHidden = input.type === 'password';
        input.type = isHidden ? 'text' : 'password';
        this.querySelector('.eye-icon').style.display = isHidden ? 'none' : '';
        this.querySelector('.eye-off-icon').style.display = isHidden ? '' : 'none';
    });
});
</script>
@endpush