@extends('layouts.admin')

@section('title', 'My Profile · Aromaniacs ERP')
@section('overline', 'Account')
@section('heading', 'Admin Profile')

@section('content')
    <div class="grid gap-6 md:grid-cols-2">
        <section class="card">
            <h2 class="text-lg mb-5" style="font-family: var(--font-serif);">Profile Details</h2>

            <form method="POST" action="{{ route('admin.profile.update') }}" class="space-y-5">
                @csrf
                @method('PUT')

                <div>
                    <label for="name" class="label block mb-2" style="color: var(--color-ink-70);">Name</label>
                    <input
                        id="name"
                        type="text"
                        name="name"
                        value="{{ old('name', $user->name) }}"
                        required
                        autocomplete="name"
                        class="input"
                    >
                    @error('name')
                        <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="email" class="label block mb-2" style="color: var(--color-ink-70);">Email</label>
                    <input
                        id="email"
                        type="email"
                        name="email"
                        value="{{ old('email', $user->email) }}"
                        required
                        autocomplete="email"
                        class="input"
                    >
                    @error('email')
                        <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="phone" class="label block mb-2" style="color: var(--color-ink-70);">Phone</label>
                    <input
                        id="phone"
                        type="text"
                        name="phone"
                        value="{{ old('phone', $user->phone) }}"
                        autocomplete="tel"
                        class="input"
                        placeholder="+8801XXXXXXXXX"
                    >
                    @error('phone')
                        <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                    @enderror
                </div>

                <div class="pt-2">
                    <button type="submit" class="btn btn-primary">Save Profile</button>
                </div>
            </form>
        </section>

        <section class="card">
            <h2 class="text-lg mb-2" style="font-family: var(--font-serif);">Change Password</h2>
            <p class="text-sm mb-5" style="color: var(--color-ink-60);">Use your current password to confirm this change.</p>

            <form method="POST" action="{{ route('admin.profile.password.update') }}" class="space-y-5">
                @csrf
                @method('PUT')

                <div>
                    <label for="current_password" class="label block mb-2" style="color: var(--color-ink-70);">Current Password</label>
                    <input
                        id="current_password"
                        type="password"
                        name="current_password"
                        required
                        autocomplete="current-password"
                        class="input"
                    >
                    @error('current_password')
                        <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="password" class="label block mb-2" style="color: var(--color-ink-70);">New Password</label>
                    <input
                        id="password"
                        type="password"
                        name="password"
                        required
                        autocomplete="new-password"
                        class="input"
                    >
                    @error('password')
                        <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="password_confirmation" class="label block mb-2" style="color: var(--color-ink-70);">Confirm New Password</label>
                    <input
                        id="password_confirmation"
                        type="password"
                        name="password_confirmation"
                        required
                        autocomplete="new-password"
                        class="input"
                    >
                </div>

                <div class="pt-2">
                    <button type="submit" class="btn btn-primary">Update Password</button>
                </div>
            </form>
        </section>
    </div>
@endsection