@extends('layouts.app')
@section('title', 'Profile · SakuApp')
@section('page-title', 'Profile')

@section('content')
    <div style="display:flex; flex-direction:row; flex-wrap:wrap; gap:14px;">

        <div class="card" style="width:560px;">
            <p style="font-size:.8rem; font-weight:600; color:var(--t2); margin-bottom:14px;">Profile Information</p>
            <form method="POST" action="{{ route('profile.update') }}">
                @csrf
                @method('PATCH')
                <div class="form-group">
                    <label class="form-label" for="name">Name</label>
                    <input type="text" name="name" id="name" class="form-control"
                        value="{{ old('name', auth()->user()->name) }}" required>
                    @error('name')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group">
                    <label class="form-label" for="email">Email</label>
                    <input type="email" name="email" id="email" class="form-control"
                        value="{{ old('email', auth()->user()->email) }}" required>
                    @error('email')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>
                <div style="display:flex; align-items:center; gap:12px;">
                    <button type="submit" class="btn btn-primary">Save changes</button>
                    @if (session('status') === 'profile-updated')
                        <span style="font-size:.76rem; color:var(--income);">Saved.</span>
                    @endif
                </div>
            </form>
        </div>

        <div class="card" style="width:560px;">
            <p style="font-size:.8rem; font-weight:600; color:var(--t2); margin-bottom:14px;">Update Password</p>
            <form method="POST" action="{{ route('password.update') }}">
                @csrf
                @method('PUT')
                <div class="form-group">
                    <label class="form-label" for="current_password">Current Password</label>
                    <input type="password" name="current_password" id="current_password" class="form-control" required>
                    @error('current_password', 'updatePassword')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-grid">
                    <div class="form-group mb0">
                        <label class="form-label" for="password">New Password</label>
                        <input type="password" name="password" id="password" class="form-control" required>
                        @error('password', 'updatePassword')
                            <div class="form-error">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group mb0">
                        <label class="form-label" for="password_confirmation">Confirm</label>
                        <input type="password" name="password_confirmation" id="password_confirmation" class="form-control"
                            required>
                    </div>
                </div>
                <div style="display:flex; align-items:center; gap:12px; margin-top:14px;">
                    <button type="submit" class="btn btn-primary">Update Password</button>
                    @if (session('status') === 'password-updated')
                        <span style="font-size:.76rem; color:var(--income);">Updated.</span>
                    @endif
                </div>
            </form>
        </div>

        <div class="card" style="width:560px;border-color:#FECDD3;">
            <p style="font-size:.8rem; font-weight:600; color:#9F1239; margin-bottom:6px;">Delete Account</p>
            <p style="font-size:.78rem; color:var(--t3); margin-bottom:14px;">Permanently delete your account and all
                associated data. This cannot be undone.</p>
            <form method="POST" action="{{ route('profile.destroy') }}"
                onsubmit="return confirm('Are you sure? This will permanently delete your account.');">
                @csrf
                @method('DELETE')
                <div class="form-group">
                    <label class="form-label" for="delete_password">Confirm your password</label>
                    <input type="password" name="password" id="delete_password" class="form-control"
                        style="max-width:280px;" placeholder="Enter password" required>
                    @error('password', 'userDeletion')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>
                <button type="submit" class="btn btn-danger">Delete my account</button>
            </form>
        </div>
    </div>
@endsection