@extends('admin.layouts.app')

@section('title', 'Profile Settings | EMI CREDITS')

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

@section(
    'page-description',
    'Manage your admin profile information and password'
)

@section('content')
@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/profilesettings.css') }}">
@endpush

<div class="profile-page">


    {{-- =====================================================
         PAGE HEADING
    ====================================================== --}}

    <div class="profile-heading">

        <h2>
            Profile Settings
        </h2>

        <p>
            Update your administrator account information and security settings.
        </p>

    </div>


    {{-- =====================================================
         SUCCESS MESSAGE
    ====================================================== --}}

    @if(session('success'))

        <div class="profile-alert success">

            <span class="profile-alert-icon">
                ✓
            </span>

            <span>
                {{ session('success') }}
            </span>

        </div>

    @endif


    @if(session('password_success'))

        <div class="profile-alert success">

            <span class="profile-alert-icon">
                ✓
            </span>

            <span>
                {{ session('password_success') }}
            </span>

        </div>

    @endif


    @if(session('admin_success'))

        <div class="profile-alert success">

            <span class="profile-alert-icon">
                ✓
            </span>

            <span>
                {{ session('admin_success') }}
            </span>

        </div>

    @endif


    {{-- =====================================================
         GENERAL ERROR
    ====================================================== --}}

    @if($errors->any())

        <div class="profile-alert error">

            <span class="profile-alert-icon">
                !
            </span>

            <span>
                Please check the highlighted fields below.
            </span>

        </div>

    @endif


    {{-- =====================================================
         PROFILE GRID
    ====================================================== --}}

    <div class="profile-grid">


        {{-- =================================================
             PROFILE INFORMATION
        ================================================== --}}

        <div class="profile-card">

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

                <div class="profile-card-icon">
                    👤
                </div>

                <div>

                    <h3>
                        Profile Information
                    </h3>

                    <p>
                        Manage your basic administrator details.
                    </p>

                </div>

            </div>


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


                @php

                    $adminName =
                        $admin->name ?? 'Administrator';

                    $adminInitial =
                        strtoupper(
                            substr(
                                $adminName,
                                0,
                                1
                            )
                        );

                @endphp


                <div class="profile-user">

                    <div class="profile-avatar">
                        {{ $adminInitial }}
                    </div>

                    <div class="profile-user-info">

                        <span class="profile-user-name">
                            {{ $adminName }}
                        </span>

                        <span class="profile-user-email">
                            {{ $admin->email ?? '-' }}
                        </span>

                        <span class="profile-admin-badge">
                            Administrator
                        </span>

                    </div>

                </div>


                <form
                    method="POST"
                    action="{{ route('admin.profile-settings.update') }}"
                    class="profile-form"
                >

                    @csrf

                    @method('PUT')


                    {{-- NAME --}}

                    <div class="profile-field">

                        <label for="name">
                            Admin Name
                        </label>

                        <input
                            type="text"
                            id="name"
                            name="name"
                            value="{{ old('name', $admin->name ?? '') }}"
                            placeholder="Enter admin name"
                            maxlength="255"
                            required
                        >

                        @error('name')

                            <span class="field-error">
                                {{ $message }}
                            </span>

                        @enderror

                    </div>


                    {{-- EMAIL --}}

                    <div class="profile-field">

                        <label for="email">
                            Email Address
                        </label>

                        <input
                            type="email"
                            id="email"
                            name="email"
                            value="{{ old('email', $admin->email ?? '') }}"
                            placeholder="Enter email address"
                            maxlength="255"
                            required
                        >

                        @error('email')

                            <span class="field-error">
                                {{ $message }}
                            </span>

                        @enderror

                    </div>


                    <button
                        type="submit"
                        class="profile-button"
                    >
                        ✓ &nbsp; Save Profile Changes
                    </button>

                </form>

            </div>

        </div>



        {{-- =================================================
             CHANGE PASSWORD
        ================================================== --}}

        <div class="profile-card">

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

                <div class="profile-card-icon">
                    🔐
                </div>

                <div>

                    <h3>
                        Change Password
                    </h3>

                    <p>
                        Keep your administrator account secure.
                    </p>

                </div>

            </div>


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


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

                    @csrf

                    @method('PUT')


                    {{-- CURRENT PASSWORD --}}

                    <div class="profile-field">

                        <label for="current_password">
                            Current Password
                        </label>

                        <div class="password-wrapper">

                            <input
                                type="password"
                                id="current_password"
                                name="current_password"
                                placeholder="Enter current password"
                                required
                            >

                            <button
                                type="button"
                                class="password-toggle"
                                onclick="togglePassword(
                                    'current_password',
                                    this
                                )"
                            >
                                Show
                            </button>

                        </div>

                        @error('current_password')

                            <span class="field-error">
                                {{ $message }}
                            </span>

                        @enderror

                    </div>


                    {{-- NEW PASSWORD --}}

                    <div class="profile-field">

                        <label for="password">
                            New Password
                        </label>

                        <div class="password-wrapper">

                            <input
                                type="password"
                                id="password"
                                name="password"
                                placeholder="Enter new password"
                                minlength="8"
                                required
                            >

                            <button
                                type="button"
                                class="password-toggle"
                                onclick="togglePassword(
                                    'password',
                                    this
                                )"
                            >
                                Show
                            </button>

                        </div>

                        @error('password')

                            <span class="field-error">
                                {{ $message }}
                            </span>

                        @enderror

                    </div>


                    {{-- CONFIRM PASSWORD --}}

                    <div class="profile-field">

                        <label for="password_confirmation">
                            Confirm New Password
                        </label>

                        <div class="password-wrapper">

                            <input
                                type="password"
                                id="password_confirmation"
                                name="password_confirmation"
                                placeholder="Confirm new password"
                                minlength="8"
                                required
                            >

                            <button
                                type="button"
                                class="password-toggle"
                                onclick="togglePassword(
                                    'password_confirmation',
                                    this
                                )"
                            >
                                Show
                            </button>

                        </div>

                        @error('password_confirmation')

                            <span class="field-error">
                                {{ $message }}
                            </span>

                        @enderror

                    </div>


                    <button
                        type="submit"
                        class="
                            profile-button
                            password-button
                        "
                    >
                        🔐 &nbsp; Change Password
                    </button>

                </form>


                <div class="password-info">

                    <div class="password-info-title">
                        Password requirements
                    </div>

                    <ul>

                        <li>
                            Minimum 8 characters
                        </li>

                        <li>
                            Use a strong and unique password
                        </li>

                        <li>
                            Do not share your administrator password
                        </li>

                    </ul>

                </div>

            </div>

        </div>


    </div>


    {{-- =====================================================
         ADMIN MANAGEMENT
    ====================================================== --}}

    <div class="profile-card security-card">

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

            <div
                class="profile-card-icon"
                style="
                    background:#eef8f2;
                    color:#198754;
                "
            >
                👥
            </div>

            <div style="flex:1;">

                <h3>
                    Admin Management
                </h3>

                <p>
                    Create and manage administrator accounts.
                </p>

            </div>

            <button
                type="button"
                id="addAdminToggle"
                class="admin-add-button"
                onclick="toggleAdminForm()"
            >
                + Add Admin
            </button>

        </div>


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


            {{-- =================================================
                 ADD ADMIN FORM
            ================================================== --}}

            <div
                id="addAdminForm"
                class="admin-form-wrapper"
                style="display:none;"
            >

                <div class="admin-form-title">

                    <div>

                        <strong>
                            Create New Administrator
                        </strong>

                        <span>
                            The new user will have full admin access.
                        </span>

                    </div>

                    <button
                        type="button"
                        class="admin-close-button"
                        onclick="toggleAdminForm()"
                        aria-label="Close"
                    >
                        ×
                    </button>

                </div>


                <form
                    method="POST"
                    action="{{ route('admin.profile-settings.admin.store') }}"
                    class="profile-form"
                >

                    @csrf


                    <div class="admin-form-grid">


                        {{-- NAME --}}

                        <div class="profile-field">

                            <label for="new_admin_name">
                                Admin Name
                            </label>

                            <input
                                type="text"
                                id="new_admin_name"
                                name="name"
                                value="{{ old('name') }}"
                                placeholder="Enter admin name"
                                maxlength="255"
                                required
                            >

                            @error('name')

                                <span class="field-error">
                                    {{ $message }}
                                </span>

                            @enderror

                        </div>


                        {{-- EMAIL --}}

                        <div class="profile-field">

                            <label for="new_admin_email">
                                Email Address
                            </label>

                            <input
                                type="email"
                                id="new_admin_email"
                                name="email"
                                value="{{ old('email') }}"
                                placeholder="Enter email address"
                                maxlength="255"
                                required
                            >

                            @error('email')

                                <span class="field-error">
                                    {{ $message }}
                                </span>

                            @enderror

                        </div>


                        {{-- MOBILE --}}

                        <div class="profile-field">

                            <label for="new_admin_mobile">
                                Mobile Number
                            </label>

                            <input
                                type="text"
                                id="new_admin_mobile"
                                name="mobile"
                                value="{{ old('mobile') }}"
                                placeholder="Mobile Number"
                                maxlength="20"
                            >

                            @error('mobile')

                                <span class="field-error">
                                    {{ $message }}
                                </span>

                            @enderror

                        </div>


                        {{-- PASSWORD --}}

                        <div class="profile-field">

                            <label for="new_admin_password">
                                Password
                            </label>

                            <div class="password-wrapper">

                                <input
                                    type="password"
                                    id="new_admin_password"
                                    name="password"
                                    placeholder="Minimum 8 characters"
                                    minlength="8"
                                    required
                                >

                                <button
                                    type="button"
                                    class="password-toggle"
                                    onclick="togglePassword(
                                        'new_admin_password',
                                        this
                                    )"
                                >
                                    Show
                                </button>

                            </div>

                            @error('password')

                                <span class="field-error">
                                    {{ $message }}
                                </span>

                            @enderror

                        </div>


                        {{-- CONFIRM PASSWORD --}}

                        <div class="profile-field">

                            <label for="new_admin_password_confirmation">
                                Confirm Password
                            </label>

                            <div class="password-wrapper">

                                <input
                                    type="password"
                                    id="new_admin_password_confirmation"
                                    name="password_confirmation"
                                    placeholder="Confirm password"
                                    minlength="8"
                                    required
                                >

                                <button
                                    type="button"
                                    class="password-toggle"
                                    onclick="togglePassword(
                                        'new_admin_password_confirmation',
                                        this
                                    )"
                                >
                                    Show
                                </button>

                            </div>

                        </div>


                    </div>


                    <button
                        type="submit"
                        class="profile-button admin-create-button"
                    >
                        ✓ &nbsp; Create Administrator
                    </button>

                </form>

            </div>


            {{-- =================================================
                 EXISTING ADMINS
            ================================================== --}}

            <div class="admin-list-header">

                <div>

                    <strong>
                        Administrators
                    </strong>

                    <span>
                        {{ $admins->count() }}
                        {{ $admins->count() === 1 ? 'account' : 'accounts' }}
                    </span>

                </div>

            </div>


            <div class="admin-list">

                @forelse($admins as $adminUser)

                    @php

                        $adminInitial =
                            strtoupper(
                                substr(
                                    $adminUser->name ?? 'A',
                                    0,
                                    1
                                )
                            );

                    @endphp


                    <div class="admin-list-item">


                        <div class="admin-list-avatar">
                            {{ $adminInitial }}
                        </div>


                        <div class="admin-list-info">

                            <strong>
                                {{ $adminUser->name }}
                            </strong>

                            <span>
                                {{ $adminUser->email }}
                            </span>

                            @if($adminUser->mobile)

                                <small>
                                    {{ $adminUser->mobile }}
                                </small>

                            @endif

                        </div>


                        <div class="admin-list-status">


                            @if($adminUser->id === $admin->id)

                                <span class="admin-current-badge">
                                    Current Admin
                                </span>

                            @else

                                <span class="admin-active-badge">
                                    Active
                                </span>

                            @endif


                            {{-- EDIT BUTTON --}}

                            <a
                                href="{{
                                    route(
                                        'admin.profile-settings.admin.edit',
                                        $adminUser
                                    )
                                }}"
                                class="admin-edit-button"
                            >
                                ✏ Edit
                            </a>


                            {{-- DELETE BUTTON --}}

                            @if($adminUser->id !== $admin->id)

                                <form
                                    method="POST"
                                    action="{{
                                        route(
                                            'admin.profile-settings.admin.delete',
                                            $adminUser
                                        )
                                    }}"
                                    style="display:inline;margin:0;"
                                    onsubmit="return confirm(
                                        'Are you sure you want to delete this administrator? This action cannot be undone.'
                                    );"
                                >

                                    @csrf

                                    @method('DELETE')

                                    <button
                                        type="submit"
                                        class="admin-delete-button"
                                    >
                                        🗑 Delete
                                    </button>

                                </form>

                            @endif


                        </div>


                    </div>


                @empty

                    <div class="admin-empty">
                        No administrator accounts found.
                    </div>

                @endforelse

            </div>

        </div>

    </div>


    {{-- =====================================================
         SECURITY INFORMATION
    ====================================================== --}}

    <div class="profile-card security-card">

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

            <div class="profile-card-icon">
                🛡️
            </div>

            <div>

                <h3>
                    Account Security
                </h3>

                <p>
                    Basic security information for your administrator account.
                </p>

            </div>

        </div>


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


            <div class="security-item">

                <div class="security-icon">
                    🔒
                </div>

                <div class="security-info">

                    <span class="security-title">
                        Secure Password Storage
                    </span>

                    <span class="security-description">
                        Your password is stored securely using Laravel password hashing.
                    </span>

                </div>

            </div>


            <div class="security-item">

                <div class="security-icon">
                    📧
                </div>

                <div class="security-info">

                    <span class="security-title">
                        Account Email
                    </span>

                    <span class="security-description">
                        {{ $admin->email ?? '-' }}
                    </span>

                </div>

            </div>


            <div class="security-item">

                <div class="security-icon">
                    📅
                </div>

                <div class="security-info">

                    <span class="security-title">
                        Account Created
                    </span>

                    <span class="security-description">

                        @if($admin->created_at)

                            {{ $admin->created_at->format(
                                'd M Y, h:i A'
                            ) }}

                        @else

                            -

                        @endif

                    </span>

                </div>

            </div>


        </div>

    </div>


</div>


<script>

/* =========================================================
   PASSWORD SHOW / HIDE
   ========================================================= */

function togglePassword(inputId, button)
{
    const input =
        document.getElementById(inputId);

    if (!input) {
        return;
    }


    if (input.type === 'password') {

        input.type = 'text';

        button.textContent = 'Hide';

    } else {

        input.type = 'password';

        button.textContent = 'Show';

    }
}


/* =========================================================
   ADD ADMIN FORM
   ========================================================= */

function toggleAdminForm()
{
    const form =
        document.getElementById('addAdminForm');

    const button =
        document.getElementById('addAdminToggle');


    if (!form || !button) {
        return;
    }


    if (
        form.style.display === 'none' ||
        form.style.display === ''
    ) {

        form.style.display = 'block';

        button.textContent = '× Close';

    } else {

        form.style.display = 'none';

        button.textContent = '+ Add Admin';

    }
}


/* =========================================================
   AUTO OPEN ADD ADMIN FORM
   WHEN VALIDATION ERROR EXISTS
   ========================================================= */

document.addEventListener(
    'DOMContentLoaded',
    function () {

        @if(
            $errors->has('name') ||
            $errors->has('email') ||
            $errors->has('mobile') ||
            $errors->has('password')
        )

            const form =
                document.getElementById('addAdminForm');

            const button =
                document.getElementById('addAdminToggle');


            if (form && button) {

                form.style.display = 'block';

                button.textContent = '× Close';

            }

        @endif

    }
);

</script>

@endsection