@extends('admin.layout')

@section('title', 'Account')

@section('content')
<div class="admin-account-page">
    <section class="admin-section-header">
        <div>
            <span class="admin-page-eyebrow">Administrator Accounts</span>

            <h1 class="admin-section-title font-display">
                Kelola <span>Account</span>
            </h1>

            <p class="admin-section-description">
                Tambahkan administrator baru, lihat detail login, dan perbarui password akun yang sedang digunakan. Login tetap memakai alamat email.
            </p>
        </div>

        <div class="admin-account-summary">
            <div class="admin-account-count">
                <span>Total admin</span>
                <strong class="font-figures">{{ $admins->count() }}</strong>
            </div>

            <div class="admin-account-current">
                <span>Login sebagai</span>
                <strong>{{ auth('admin')->user()->name }}</strong>
                <small>{{ auth('admin')->user()->email }}</small>
            </div>
        </div>
    </section>

    <div class="admin-account-grid">
        <form method="POST" action="{{ route('admin.settings.accounts.password.update') }}" class="admin-form-panel">
            @csrf

            <header class="admin-form-panel-header">
                <span class="admin-form-panel-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                        <rect x="5" y="10" width="14" height="10" rx="2"></rect>
                        <path stroke-linecap="round" d="M8 10V7a4 4 0 0 1 8 0v3"/>
                    </svg>
                </span>

                <div>
                    <span class="admin-panel-eyebrow">Current Account</span>
                    <h2 class="admin-panel-title font-display">Ganti Password</h2>
                </div>
            </header>

            <div class="admin-form-panel-body">
                <div class="admin-account-identity">
                    <strong>{{ auth('admin')->user()->name }}</strong>
                    <span>{{ auth('admin')->user()->email }}</span>
                </div>

                <div class="admin-form-group">
                    <label for="current-password" class="admin-form-label">Password saat ini</label>
                    <input id="current-password" type="password" name="current_password" required autocomplete="current-password" class="admin-form-control">
                    @error('current_password')
                        <p class="admin-form-error">{{ $message }}</p>
                    @enderror
                </div>

                <div class="admin-form-group">
                    <label for="new-password" class="admin-form-label">Password baru</label>
                    <input id="new-password" type="password" name="password" required autocomplete="new-password" class="admin-form-control">
                    <p class="admin-form-help">Minimal 10 karakter serta mengandung huruf dan angka.</p>
                    @error('password')
                        <p class="admin-form-error">{{ $message }}</p>
                    @enderror
                </div>

                <div class="admin-form-group">
                    <label for="new-password-confirmation" class="admin-form-label">Konfirmasi password baru</label>
                    <input id="new-password-confirmation" type="password" name="password_confirmation" required autocomplete="new-password" class="admin-form-control">
                </div>

                <button type="submit" class="admin-button admin-button-primary admin-account-submit">Perbarui Password</button>
            </div>
        </form>

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

            <header class="admin-form-panel-header">
                <span class="admin-form-panel-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19a6 6 0 0 0-12 0m6-8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm9-4v6m3-3h-6"/>
                    </svg>
                </span>

                <div>
                    <span class="admin-panel-eyebrow">New Administrator</span>
                    <h2 class="admin-panel-title font-display">Tambah User</h2>
                </div>
            </header>

            <div class="admin-form-panel-body">
                <div class="admin-settings-notice">
                    <span>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                            <circle cx="12" cy="12" r="9"></circle>
                            <path stroke-linecap="round" d="M12 11v5M12 8h.01"/>
                        </svg>
                    </span>
                    <p>Akun baru langsung aktif dan mempunyai akses admin penuh karena permission granular belum digunakan.</p>
                </div>

                <div class="admin-form-group">
                    <label for="admin-name" class="admin-form-label">Nama</label>
                    <input id="admin-name" type="text" name="name" value="{{ old('name') }}" required maxlength="100" autocomplete="name" class="admin-form-control">
                    @error('name')
                        <p class="admin-form-error">{{ $message }}</p>
                    @enderror
                </div>

                <div class="admin-form-group">
                    <label for="admin-email" class="admin-form-label">Email login</label>
                    <input id="admin-email" type="email" name="email" value="{{ old('email') }}" required maxlength="255" autocomplete="email" class="admin-form-control">
                    @error('email')
                        <p class="admin-form-error">{{ $message }}</p>
                    @enderror
                </div>

                <div class="admin-form-group">
                    <label for="admin-password" class="admin-form-label">Password</label>
                    <input id="admin-password" type="password" name="password" required autocomplete="new-password" class="admin-form-control">
                    @error('password')
                        <p class="admin-form-error">{{ $message }}</p>
                    @enderror
                </div>

                <div class="admin-form-group">
                    <label for="admin-password-confirmation" class="admin-form-label">Konfirmasi password</label>
                    <input id="admin-password-confirmation" type="password" name="password_confirmation" required autocomplete="new-password" class="admin-form-control">
                </div>

                <button type="submit" class="admin-button admin-button-primary admin-account-submit">Buat Akun Admin</button>
            </div>
        </form>
    </div>

    <section class="admin-account-list-panel">
        <header>
            <div>
                <span class="admin-panel-eyebrow">Registered Accounts</span>
                <h2 class="admin-panel-title font-display">Daftar Admin</h2>
            </div>
        </header>

        <div class="admin-account-list">
            @foreach ($admins as $admin)
                @php
                    $isCurrent = auth('admin')->id() === $admin->id;
                    $isOnline = $admin->sessions->isNotEmpty();
                @endphp

                <article class="admin-account-item">
                    <span class="admin-account-avatar">{{ mb_strtoupper(mb_substr($admin->name, 0, 1)) }}</span>

                    <div class="admin-account-main">
                        <div class="admin-account-name-row">
                            <strong>{{ $admin->name }}</strong>
                            @if ($isCurrent)
                                <span class="admin-account-you">Akun Anda</span>
                            @endif
                        </div>
                        <span>{{ $admin->email }}</span>
                    </div>

                    <div class="admin-account-meta">
                        <span class="{{ $isOnline ? 'is-online' : 'is-offline' }}">
                            {{ $isOnline ? 'Sedang online' : 'Offline' }}
                        </span>
                        <small>{{ $admin->last_login_at ? 'Login terakhir '.$admin->last_login_at->timezone(config('app.timezone'))->format('d/m/Y H:i') : 'Belum pernah login' }}</small>
                    </div>

                    <a href="{{ route('admin.settings.accounts.show', $admin) }}" class="admin-account-detail-link">
                        Detail
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m9 18 6-6-6-6"/>
                        </svg>
                    </a>
                </article>
            @endforeach
        </div>
    </section>
</div>
@endsection