@extends('admin.layouts.app')

@section('title', 'Edit Admin | EMI CREDITS')

@section('page-title', 'Edit Admin')

@section(
    'page-description',
    'Update administrator account information and password'
)

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


@section('content')

<div class="admin-edit-page">


    @if(session('admin_success'))

        <div class="edit-alert success">
            ✓ {{ session('admin_success') }}
        </div>

    @endif


    @if($errors->any())

        <div class="edit-alert error">
            Please check the highlighted fields below.
        </div>

    @endif


    <div class="admin-edit-card">


        {{-- HEADER --}}

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

            <div class="admin-edit-icon">
                ✏
            </div>

            <div>

                <h3>
                    Edit Administrator
                </h3>

                <p>
                    Update administrator account details.
                </p>

            </div>

        </div>


        <div class="admin-edit-body">


            {{-- USER PREVIEW --}}

            @php

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

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

            @endphp


            <div class="admin-edit-user">

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

                <div>

                    <span class="admin-edit-user-name">
                        {{ $admin->name }}
                    </span>

                    <span class="admin-edit-user-email">
                        {{ $admin->email }}
                    </span>

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

                </div>

            </div>


            {{-- FORM --}}

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

                @csrf

                @method('PUT')


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


                    {{-- NAME --}}

                    <div class="admin-edit-field">

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

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

                        @error('name')

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

                        @enderror

                    </div>


                    {{-- EMAIL --}}

                    <div class="admin-edit-field">

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

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

                        @error('email')

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

                        @enderror

                    </div>


                    {{-- MOBILE --}}

                    <div class="admin-edit-field">

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

                        <input
                            type="text"
                            id="mobile"
                            name="mobile"
                            value="{{ old('mobile', $admin->mobile) }}"
                            maxlength="20"
                            placeholder="Optional"
                        >

                        @error('mobile')

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

                        @enderror

                    </div>


                    {{-- PASSWORD --}}

                    <div class="admin-edit-field">

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

                        <div class="password-wrapper">

                            <input
                                type="password"
                                id="password"
                                name="password"
                                minlength="8"
                                placeholder="Leave blank to keep current"
                            >

                            <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="admin-edit-field">

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

                        <div class="password-wrapper">

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

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

                        </div>

                    </div>


                </div>


                {{-- ACTIONS --}}

                <div class="admin-edit-actions">

                    <a
                        href="{{
                            route(
                                'admin.profile-settings.edit'
                            )
                        }}"
                        class="admin-back-button"
                    >
                        ← Back
                    </a>


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

                </div>


            </form>


        </div>

    </div>

</div>


<script>

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';

    }
}

</script>

@endsection