@extends('layouts.master')

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

@section('content')

<div class="workflow-page">

    <x-workflow.header
        title="My Profile"
        subtitle="Manage your account">

    </x-workflow.header>

    {{-- PROFILE INFORMATION --}}

    <div class="workflow-card">

        <div class="workflow-card-header">

            Profile Information

        </div>

        <div class="workflow-card-body">

            <form
                method="POST"
                enctype="multipart/form-data"
                action="{{ route('profile.update') }}">

                @csrf

                <div class="mb-4">

                    <label class="workflow-label">

                        Profile Photo

                    </label>

                    @if($user->avatar)

                        <div class="mb-3">

                            <img
                                src="{{ asset(
                                    'storage/' .
                                    $user->avatar
                                ) }}"
                                alt="Avatar"
                                style="
                                    width:100px;
                                    height:100px;
                                    border-radius:50%;
                                    object-fit:cover;
                                ">

                        </div>

                    @endif

                    <input
                        type="file"
                        name="avatar"
                        class="workflow-input">

                </div>

                <div class="workflow-grid-2">

                    <div>

                        <label class="workflow-label">

                            First Name

                        </label>

                        <input
                            type="text"
                            name="first_name"
                            value="{{ old(
                                'first_name',
                                $user->first_name
                            ) }}"
                            class="workflow-input">

                    </div>

                    <div>

                        <label class="workflow-label">

                            Surname

                        </label>

                        <input
                            type="text"
                            name="surname"
                            value="{{ old(
                                'surname',
                                $user->surname
                            ) }}"
                            class="workflow-input">

                    </div>

                    <div>

                        <label class="workflow-label">

                            Other Names

                        </label>

                        <input
                            type="text"
                            name="other_names"
                            value="{{ old(
                                'other_names',
                                $user->other_names
                            ) }}"
                            class="workflow-input">

                    </div>

                    <div>

                        <label class="workflow-label">

                            Phone Number

                        </label>

                        <input
                            type="text"
                            name="phone_number"
                            value="{{ old(
                                'phone_number',
                                $user->phone_number
                            ) }}"
                            class="workflow-input">

                    </div>

                    <div>

                        <label class="workflow-label">

                            Email

                        </label>

                        <input
                            type="email"
                            name="email"
                            value="{{ old(
                                'email',
                                $user->email
                            ) }}"
                            class="workflow-input">

                    </div>

                </div>

                <button
                    type="submit"
                    class="workflow-btn workflow-btn-primary mt-3">

                    Save Changes

                </button>

            </form>

        </div>

    </div>

    {{-- ACCOUNT INFORMATION --}}

    <div class="workflow-card mt-4">

        <div class="workflow-card-header">

            Account Information

        </div>

        <div class="workflow-card-body">

            <table class="workflow-table">

                <tbody>

                    <tr>
                        <th>Username</th>
                        <td>{{ $user->username }}</td>
                    </tr>

                    <tr>
                        <th>Status</th>
                        <td>

                            @if($user->is_active)

                                <span class="workflow-badge workflow-badge-green">

                                    Active

                                </span>

                            @else

                                <span class="workflow-badge workflow-badge-red">

                                    Inactive

                                </span>

                            @endif

                        </td>
                    </tr>

                    <tr>
                        <th>Created</th>
                        <td>{{ $user->created_at }}</td>
                    </tr>

                    <tr>
                        <th>Last Login</th>
                        <td>{{ $user->last_login_at ?? '-' }}</td>
                    </tr>

                </tbody>

            </table>

        </div>

    </div>

    {{-- CHANGE PASSWORD --}}

    <div class="workflow-card mt-4">

        <div class="workflow-card-header">

            Change Password

        </div>

        <div class="workflow-card-body">

            <form
                method="POST"
                action="{{ route('profile.change-password') }}">

                @csrf

                <div class="workflow-grid-2">

                    <div>

                        <label class="workflow-label">

                            Current Password

                        </label>

                        <input
                            type="password"
                            name="current_password"
                            class="workflow-input">

                    </div>

                    <div>

                        <label class="workflow-label">

                            New Password

                        </label>

                        <input
                            type="password"
                            name="password"
                            class="workflow-input">

                    </div>

                    <div>

                        <label class="workflow-label">

                            Confirm Password

                        </label>

                        <input
                            type="password"
                            name="password_confirmation"
                            class="workflow-input">

                    </div>

                </div>

                <button
                    type="submit"
                    class="workflow-btn workflow-btn-primary mt-3">

                    Change Password

                </button>

            </form>

        </div>

    </div>

</div>

@endsection