@extends('layouts.app')

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

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

@section('content')

Manage your personal information, account email and password.


{{-- ================================================================ --}}
{{-- Profile Information --}}
{{-- ================================================================ --}}

<form
    action="{{ route('profile.update') }}"
    method="POST"
    id="profile-form"
>
    @csrf
    @method('PUT')

    <div class="card overflow-hidden">

        {{-- Header --}}
        <div class="border-b border-border px-5 py-4">

            <div class="flex items-center gap-4">

                {{-- Avatar --}}
                <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-sky-50 text-lg font-semibold text-sky-600">

                    {{ strtoupper(
                        substr($user->name ?? 'U', 0, 1)
                    ) }}

                </div>

                <div>
                    <h2 class="text-base font-semibold text-text">
                        Profile Information
                    </h2>

                    <p class="mt-1 text-xs text-muted">
                        Update your personal information and account email address.
                    </p>
                </div>

            </div>

        </div>


        {{-- Form --}}
        <div class="p-5 lg:p-6">

            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">

                {{-- Name --}}
                <div>

                    <label
                        for="name"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Full Name
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        id="name"
                        name="name"
                        value="{{ old('name', $user->name) }}"
                        placeholder="Enter your full name"
                        autocomplete="name"
                        class="form-input w-full @error('name') border-danger @enderror"
                        required
                        autofocus
                    >

                    @error('name')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- Email --}}
                <div>

                    <label
                        for="email"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Email Address
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="email"
                        id="email"
                        name="email"
                        value="{{ old('email', $user->email) }}"
                        placeholder="Enter your email address"
                        autocomplete="email"
                        class="form-input w-full @error('email') border-danger @enderror"
                        required
                    >

                    @error('email')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>

            </div>

        </div>


        {{-- Actions --}}
        <div class="flex flex-col-reverse gap-3 border-t border-border bg-background/50 px-5 py-4 sm:flex-row sm:items-center sm:justify-end">

            <button
                type="submit"
                class="btn btn-primary"
                id="profile-submit-button"
            >
                <i class="fa-solid fa-floppy-disk"></i>

                <span>Save Profile</span>
            </button>

        </div>

    </div>

</form>


{{-- ================================================================ --}}
{{-- Account Information --}}
{{-- ================================================================ --}}

<div class="card mt-5 overflow-hidden">

    {{-- Header --}}
    <div class="border-b border-border px-5 py-4">

        <h2 class="text-base font-semibold text-text">
            Account Information
        </h2>

        <p class="mt-1 text-xs text-muted">
            Information related to your system account.
        </p>

    </div>


    <div class="p-5 lg:p-6">

        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">

            {{-- Account ID --}}
            <div>

                <p class="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted">
                    Account ID
                </p>

                <p class="text-sm font-medium text-text">
                    #{{ $user->id }}
                </p>

            </div>


            {{-- Account Email --}}
            <div>

                <p class="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted">
                    Email
                </p>

                <p class="text-sm font-medium text-text">
                    {{ $user->email }}
                </p>

            </div>


            {{-- Created --}}
            <div>

                <p class="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted">
                    Account Created
                </p>

                <p class="text-sm font-medium text-text">
                    {{ $user->created_at?->format('d M Y, h:i A') ?? 'N/A' }}
                </p>

            </div>


            {{-- Last Updated --}}
            <div>

                <p class="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted">
                    Last Updated
                </p>

                <p class="text-sm font-medium text-text">
                    {{ $user->updated_at?->format('d M Y, h:i A') ?? 'N/A' }}
                </p>

            </div>

        </div>

    </div>

</div>


{{-- ================================================================ --}}
{{-- Password --}}
{{-- ================================================================ --}}

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

    <div class="card overflow-hidden">

        {{-- Header --}}
        <div class="border-b border-border px-5 py-4">

            <div class="flex items-start gap-3">

                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-50 text-sky-600">
                    <i class="fa-solid fa-lock text-sm"></i>
                </div>

                <div>
                    <h2 class="text-base font-semibold text-text">
                        Change Password
                    </h2>

                    <p class="mt-1 text-xs text-muted">
                        Use a strong password to keep your account secure.
                    </p>
                </div>

            </div>

        </div>


        {{-- Form --}}
        <div class="p-5 lg:p-6">

            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">

                {{-- Current Password --}}
                <div class="md:col-span-2">

                    <label
                        for="current_password"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Current Password
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="password"
                        id="current_password"
                        name="current_password"
                        placeholder="Enter your current password"
                        autocomplete="current-password"
                        class="form-input w-full @error('current_password') border-danger @enderror"
                        required
                    >

                    @error('current_password')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- New Password --}}
                <div>

                    <label
                        for="password"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        New Password
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="password"
                        id="password"
                        name="password"
                        placeholder="Enter new password"
                        autocomplete="new-password"
                        class="form-input w-full @error('password') border-danger @enderror"
                        required
                    >

                    @error('password')
                        <p class="mt-1.5 text-xs text-danger">
                            {{ $message }}
                        </p>
                    @enderror

                </div>


                {{-- Confirm Password --}}
                <div>

                    <label
                        for="password_confirmation"
                        class="mb-1.5 block text-sm font-medium text-text"
                    >
                        Confirm New Password
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="password"
                        id="password_confirmation"
                        name="password_confirmation"
                        placeholder="Confirm new password"
                        autocomplete="new-password"
                        class="form-input w-full"
                        required
                    >

                </div>

            </div>

        </div>


        {{-- Actions --}}
        <div class="flex flex-col-reverse gap-3 border-t border-border bg-background/50 px-5 py-4 sm:flex-row sm:items-center sm:justify-end">

            <button
                type="submit"
                class="btn btn-primary"
                id="password-submit-button"
            >
                <i class="fa-solid fa-key"></i>

                <span>Update Password</span>
            </button>

        </div>

    </div>

</form>

@endsection