@extends('layouts.app')
@section('title', __('dashboard.Edit Moderator'))
@section('page_heading', __('dashboard.Edit 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.show', $moderator->id) }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-eye me-1"></i>{{ __('dashboard.Show') }}
    </a>
    <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">
            @if($moderator->avatar)
                <img src="{{ $moderator->avatar_url }}" alt="{{ $moderator->name }}" style="width:38px;height:38px;border-radius:10px;object-fit:cover;flex-shrink:0">
            @else
                <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;font-weight:900">{{ mb_substr($moderator->name,0,1) }}</div>
            @endif
            <div>
                <div style="font-size:.95rem;font-weight:800;color:var(--text-primary)">{{ $moderator->name }}</div>
                <div style="font-size:.75rem;color:var(--text-muted)">{{ $moderator->email }}</div>
            </div>
        </div>
    </div>

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

            <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', $moderator->name) }}" required>
                    @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', $moderator->email) }}" required>
                    @error('email')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label">{{ __('dashboard.Password') }}</label>
                    <input type="password" class="app-input @error('password') app-input--invalid @enderror" name="password">
                    @error('password')<div class="app-field-error">{{ $message }}</div>@enderror
                    <div style="font-size:.72rem;color:var(--text-muted);margin-top:.25rem">{{ __('dashboard.Leave blank if you do not want to change the password.') }}</div>
                </div>

                <div class="md:col-span-6">
                    <label class="app-label">{{ __('dashboard.Confirm Password') }}</label>
                    <input type="password" class="app-input @error('password_confirmation') app-input--invalid @enderror" name="password_confirmation">
                    @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', $moderatorRole?->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>
                    @if($moderator->avatar)
                    <div style="margin-bottom:.5rem">
                        <img src="{{ $moderator->avatar_url }}" alt="" style="height:44px;width:44px;border-radius:8px;object-fit:cover">
                    </div>
                    @endif
                    <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 Changes') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection