@extends('layouts.app')

@section('title', __('dashboard.Email Settings'))
@section('page_heading', __('dashboard.Email Settings'))

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

<div class="workspace-shell">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-envelope"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Email Settings') }}</h2>
                    <p>إعدادات خادم البريد الإلكتروني (SMTP).</p>
                </div>
            </div>
        </div>

        <form action="{{ route('dashboard.settings.update', ['type' => $type]) }}" method="POST" class="mt-4">
            @csrf

            <div class="app-grid gap-4">
                @foreach($settings as $setting)
                <div class="md:col-span-6">
                    <label for="{{ $setting->key }}" class="app-label font-bold">
                        {{ __(ucfirst(str_replace('_', ' ', $setting->key))) }}
                    </label>
                    <input type="text" class="app-input @error("settings.{$setting->key}.value") app-input--invalid @enderror"
                        id="{{ $setting->key }}" name="settings[{{ $setting->key }}][value]"
                        value="{{ old("settings.{$setting->key}.value", $setting->value) }}">
                    <input type="hidden" name="settings[{{ $setting->key }}][key]" value="{{ $setting->key }}">
                    @error("settings.{$setting->key}.value")<div class="app-field-error">{{ $message }}</div>@enderror
                </div>
                @endforeach
            </div>

            <div class="flex justify-end gap-2 mt-5">
                <button type="reset" class="app-btn app-btn--secondary">{{ __('dashboard.Cancel') }}</button>
                <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Save Settings') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection