@extends('layouts.app')
@section('title', __('dashboard.Add New Moderator'))
@section('page_heading', __('dashboard.Add New Moderator'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.moderators.index') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-arrow-right me-1"></i>{{ __('dashboard.Moderators') }}
    </a>
</div>

@include('layouts.partials.workspace-page-styles')

<div class="workspace-shell">
    <div class="workspace-header">
        <div style="display:flex;align-items:center;gap:.75rem">
            <div style="width:38px;height:38px;border-radius:10px;background:var(--c-primary-bg);color:var(--c-primary);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0">
                <i class="fa-solid fa-user-plus"></i>
            </div>
            <div>
                <div style="font-size:.95rem;font-weight:800;color:var(--text-primary)">{{ __('dashboard.Add New Moderator') }}</div>
                <div style="font-size:.75rem;color:var(--text-muted)">{{ __('dashboard.create_moderator_desc') }}</div>
            </div>
        </div>
    </div>

    <div class="workspace-body">
        <form action="{{ route('dashboard.moderators.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="app-grid gap-4">
                <div class="md:col-span-6">
                    <label class="app-label required">{{ __('dashboard.Name') }}</label>
                    <input type="text" class="app-input @error('name') app-input--invalid @enderror" name="name" value="{{ old('name') }}" required autofocus>
                    @error('name')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label required">{{ __('dashboard.Email') }}</label>
                    <input type="email" class="app-input @error('email') app-input--invalid @enderror" name="email" value="{{ old('email') }}" required>
                    @error('email')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label required">{{ __('dashboard.Password') }}</label>
                    <input type="password" class="app-input @error('password') app-input--invalid @enderror" name="password" required>
                    @error('password')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label required">{{ __('dashboard.Confirm Password') }}</label>
                    <input type="password" class="app-input @error('password_confirmation') app-input--invalid @enderror" name="password_confirmation" required>
                    @error('password_confirmation')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label required">{{ __('dashboard.Role') }}</label>
                    <select name="role_id" class="app-input app-select @error('role_id') app-input--invalid @enderror">
                        <option value="">{{ __('dashboard.Select Role') }}</option>
                        @foreach($roles as $id => $name)
                            <option value="{{ $id }}" @selected(old('role_id') == $id)>{{ $name }}</option>
                        @endforeach
                    </select>
                    @error('role_id')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label">{{ __('dashboard.Update Avatar') }}</label>
                    <input type="file" name="avatar" accept=".png,.jpg,.jpeg" class="app-input">
                </div>
            </div>

            <div style="display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border-subtle)">
                <a href="{{ route('dashboard.moderators.index') }}" class="app-btn app-btn--secondary">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="app-btn app-btn--primary">
                    <i class="fa-solid fa-check me-1"></i>{{ __('dashboard.Save') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection