@extends('layouts.app')
@section('title', 'Edit Profile')
@section('breadcrumb')
    <a href="{{ route('profile.show') }}" style="color:var(--text-secondary);">Profile</a>
    <span class="topbar-breadcrumb-sep">/</span>
    <span style="font-weight:600;color:var(--text-primary);">Edit</span>
@endsection

@section('content')
    <div style="max-width:780px;">
        <div class="page-header"><h1>Edit Profile</h1></div>

        {{-- Profile Information --}}
        <div class="card mb-4">
            <div class="card-header"><span class="card-header-title">Profile Information</span></div>
            <div class="card-body">
                <form method="POST" action="{{ route('profile.update') }}">
                    @csrf @method('PUT')

                    <div class="grid grid-2">
                        <div class="form-group">
                            <label class="form-label">Full Name *</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Email Address *</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                        </div>
                    </div>

                    <div class="grid grid-2">
                        <div class="form-group">
                            <label class="form-label">Job Title</label>
                            <input type="text" name="job_title" class="form-control" value="{{ old('job_title', $user->job_title) }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Department</label>
                            <input type="text" name="department" class="form-control" value="{{ old('department', $user->department) }}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $user->phone) }}">
                    </div>

                    <div class="flex gap-3 mt-4">
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                        <a href="{{ route('profile.show') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>

        {{-- Change Password --}}
        <div class="card">
            <div class="card-header"><span class="card-header-title">Change Password</span></div>
            <div class="card-body">
                <form method="POST" action="{{ route('profile.password') }}">
                    @csrf @method('PUT')

                    <div class="form-group">
                        <label class="form-label">Current Password *</label>
                        <input type="password" name="current_password" class="form-control" required>
                        @error('current_password')
                            <div style="color:var(--accent-red);font-size:0.8rem;margin-top:4px;">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="grid grid-2">
                        <div class="form-group">
                            <label class="form-label">New Password *</label>
                            <input type="password" name="password" class="form-control" required minlength="8">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Confirm New Password *</label>
                            <input type="password" name="password_confirmation" class="form-control" required minlength="8">
                        </div>
                    </div>

                    <button type="submit" class="btn btn-secondary mt-2">Change Password</button>
                </form>
            </div>
        </div>
    </div>
@endsection