@extends('laravelticket::layouts.master')
@section('page', trans('laravelticket::admin.config-create-subtitle'))

@section('laravelticket_header')
    <a href="{{ route($setting->grab('admin_route').'.configuration.index') }}"
       class="inline-flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 text-sm font-medium rounded-md transition-colors">
        {{ trans('laravelticket::admin.btn-create-new-config') }}
    </a>
@stop

@section('laravelticket_content')
    {!! html()->form('POST', route($setting->grab('admin_route').'.priority.store'))->open() !!}

    <div class="space-y-4 max-w-2xl">

        {{-- Slug Field --}}
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 items-start">
            {!! html()->label('slug', trans('laravelticket::admin.config-edit-slug') . trans('laravelticket::admin.colon'))
                ->class('sm:col-span-1 block text-sm font-medium text-gray-700 dark:text-gray-300 pt-2') !!}
            <div class="sm:col-span-3">
                {!! html()->text('slug', null)
                    ->class('w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm') !!}
            </div>
        </div>

        {{-- Default Field --}}
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 items-start">
            {!! html()->label('default', trans('laravelticket::admin.config-edit-default') . trans('laravelticket::admin.colon'))
                ->class('sm:col-span-1 block text-sm font-medium text-gray-700 dark:text-gray-300 pt-2') !!}
            <div class="sm:col-span-3">
                {!! html()->text('default', null)
                    ->class('w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm') !!}
            </div>
        </div>

        {{-- Value Field --}}
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 items-start">
            {!! html()->label('value', trans('laravelticket::admin.config-edit-value') . trans('laravelticket::admin.colon'))
                ->class('sm:col-span-1 block text-sm font-medium text-gray-700 dark:text-gray-300 pt-2') !!}
            <div class="sm:col-span-3">
                {!! html()->text('value', null)
                    ->class('w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm') !!}
            </div>
        </div>

        {{-- Lang Field --}}
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 items-start">
            {!! html()->label('lang', trans('laravelticket::admin.config-edit-language') . trans('laravelticket::admin.colon'))
                ->class('sm:col-span-1 block text-sm font-medium text-gray-700 dark:text-gray-300 pt-2') !!}
            <div class="sm:col-span-3">
                {!! html()->text('lang', null)
                    ->class('w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm') !!}
            </div>
        </div>

        {{-- Submit --}}
        <div class="sm:col-start-2 pt-2">
            {!! html()->submit(trans('laravelticket::admin.btn-update'))
                ->class('inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md transition-colors') !!}
        </div>

    </div>

    {!! html()->closeModelForm() !!}
@stop

@section('footer')
    <script>
        document.getElementById('slug').addEventListener('change', function () {
            this.value = this.value.replace(/\W/g, '.').toLowerCase();
        });
        document.getElementById('default').addEventListener('input', function () {
            document.getElementById('value').value = this.value;
        });
    </script>
@append