@extends('layouts.admin')

@section('title', $mode === 'create' ? 'Add Admin' : 'Edit Admin — '.$admin->name)

@push('styles')
<style>
    .ad-form-wrap { max-width:720px; }
    .ad-form-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
    .ad-field { margin-bottom:1rem; }
    .ad-field label { display:block; font-size:0.82rem; font-weight:600; margin-bottom:0.35rem; color:var(--text-secondary,#6b7280); }
    .ad-input { width:100%; padding:0.6rem 0.85rem; border:1px solid var(--border); border-radius:8px; background:var(--bg-primary,#0b1530); color:var(--text-primary); font-size:0.9rem; }
    .ad-input:focus { border-color:var(--accent,#10BFFF); outline:none; }
    .ad-role-card { display:flex; gap:0.75rem; padding:0.85rem; border:1px solid var(--border); border-radius:8px; margin-bottom:0.5rem; cursor:pointer; }
    .ad-role-card:hover { border-color:var(--accent,#10BFFF); }
    .ad-role-card input { margin-top:0.2rem; }
    .ad-role-card .name { font-weight:600; font-size:0.9rem; }
    .ad-role-card .desc { font-size:0.78rem; color:var(--text-muted,#9CA3AF); margin-top:0.2rem; }
    .ad-actions { display:flex; gap:0.5rem; margin-top:1.25rem; }
    .ad-btn { display:inline-flex; align-items:center; gap:0.45rem; padding:0.65rem 1.1rem; border-radius:8px; font-weight:600; font-size:0.88rem; border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); cursor:pointer; text-decoration:none; }
    .ad-btn-primary { background:var(--accent,#10BFFF); color:#fff; border-color:var(--accent,#10BFFF); }
    .ad-error { color:#FF4757; font-size:0.78rem; margin-top:0.25rem; }
</style>
@endpush

@section('content')
<div class="ad-form-wrap">
    <a href="{{ route('admin.admin-users.index') }}" style="display:inline-flex;align-items:center;gap:0.35rem;color:var(--text-secondary,#6b7280);text-decoration:none;font-size:0.85rem;margin-bottom:1rem;">
        <i class="fas fa-arrow-left"></i> Back to admin team
    </a>

    <h1 style="font-size:1.5rem;font-weight:700;margin-bottom:0.25rem;">{{ $mode === 'create' ? 'Add admin' : 'Edit admin' }}</h1>
    <p style="color:var(--text-secondary,#6b7280);margin-bottom:1.5rem;font-size:0.88rem;">
        @if($mode === 'create')
            Create a new Tenseal staff account. The admin receives a welcome email with a temporary password.
        @else
            Change this admin's role, contact info, or activation.
        @endif
    </p>

    <form method="POST"
          action="{{ $mode === 'create' ? route('admin.admin-users.store') : route('admin.admin-users.update', $admin->id) }}"
          class="ad-form-card">
        @csrf
        @if($mode === 'edit') @method('PUT') @endif

        <div class="ad-field">
            <label>Name</label>
            <input type="text" name="name" required maxlength="120" class="ad-input" value="{{ old('name', $admin->name) }}">
            @error('name')<div class="ad-error">{{ $message }}</div>@enderror
        </div>

        <div class="ad-field">
            <label>Email</label>
            <input type="email" name="email" required maxlength="160" class="ad-input" value="{{ old('email', $admin->email) }}" {{ $mode === 'edit' ? '' : '' }}>
            @error('email')<div class="ad-error">{{ $message }}</div>@enderror
        </div>

        <div class="ad-field">
            <label>Phone (optional)</label>
            <input type="text" name="phone" maxlength="32" class="ad-input" value="{{ old('phone', $admin->phone) }}">
        </div>

        <div class="ad-field">
            <label>Role</label>
            @foreach($roles as $key => $meta)
                <label class="ad-role-card">
                    <input type="radio" name="role" value="{{ $key }}" {{ old('role', $admin->role) === $key ? 'checked' : '' }} {{ old('role') === null && $admin->role === null && $key === 'admin' ? 'checked' : '' }}>
                    <div>
                        <div class="name">{{ $meta['label'] }}</div>
                        <div class="desc">{{ $meta['description'] }}</div>
                    </div>
                </label>
            @endforeach
            @error('role')<div class="ad-error">{{ $message }}</div>@enderror
        </div>

        @if($mode === 'create')
            <div class="ad-field">
                <label>Password (optional)</label>
                <input type="text" name="password" minlength="10" class="ad-input" placeholder="Leave blank to auto-generate">
                <div style="font-size:0.75rem;color:var(--text-muted,#9CA3AF);margin-top:0.25rem;">Leave blank and we'll generate a strong one. The admin gets it in their invite email.</div>
            </div>

            <div class="ad-field">
                <label style="display:flex;align-items:center;gap:0.5rem;font-weight:400;">
                    <input type="checkbox" name="send_welcome" value="1" checked>
                    Email the credentials to the new admin
                </label>
            </div>
        @endif

        <div class="ad-actions">
            <button class="ad-btn ad-btn-primary">
                <i class="fas fa-{{ $mode === 'create' ? 'plus' : 'save' }}"></i>
                {{ $mode === 'create' ? 'Create admin' : 'Save changes' }}
            </button>
            <a href="{{ route('admin.admin-users.index') }}" class="ad-btn">Cancel</a>
        </div>
    </form>
</div>
@endsection