@extends('layouts.app')

@section('title', 'Configuración del sistema')

@section('content')
    <x-card class="mx-auto max-w-2xl">
        <form method="POST" action="{{ route('settings.update') }}">
            @csrf
            @method('PUT')

            <div class="space-y-6">
                <div>
                    <x-label for="app_name">Nombre del sistema *</x-label>
                    <x-input id="app_name" type="text" name="app_name" value="{{ old('app_name', $appName) }}" required />
                    <x-error for="app_name" />
                </div>

                <div>
                    <x-label for="primary_color">Color primario global *</x-label>
                    <div class="flex items-center gap-3">
                        <input type="color" value="{{ old('primary_color', $primaryColor) }}"
                               class="h-10 w-14 cursor-pointer rounded-lg border-0 bg-transparent"
                               oninput="document.getElementById('primary_color').value = this.value; document.documentElement.style.setProperty('--app-primary', this.value);">
                        <x-input id="primary_color" type="text" name="primary_color"
                                 value="{{ old('primary_color', $primaryColor) }}" required class="w-32" />
                        <span class="text-xs text-gray-500 dark:text-gray-400">La vista previa se aplica al instante.</span>
                    </div>
                    <x-error for="primary_color" />
                </div>

                <div>
                    <x-label for="registration_enabled">Registro público de usuarios *</x-label>
                    <x-select id="registration_enabled" name="registration_enabled" required>
                        <option value="0" @selected(!old('registration_enabled', $registrationEnabled))>Deshabilitado</option>
                        <option value="1" @selected(old('registration_enabled', $registrationEnabled))>Habilitado</option>
                    </x-select>
                    <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                        Si está habilitado, cualquier persona podrá crear una cuenta desde la pantalla de login.
                    </p>
                    <x-error for="registration_enabled" />
                </div>

                <div>
                    <x-label for="default_role">Rol por defecto para nuevos registros *</x-label>
                    <x-select id="default_role" name="default_role" required>
                        @foreach ($roles as $role)
                            <option value="{{ $role->name }}" @selected(old('default_role', $defaultRole) === $role->name)>
                                {{ ucfirst($role->name) }}
                            </option>
                        @endforeach
                    </x-select>
                    <x-error for="default_role" />
                </div>
            </div>

            <div class="mt-8 flex justify-end">
                <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar configuración</x-button>
            </div>
        </form>
    </x-card>
@endsection