@extends('daylight::layouts.app')

@section('title', __('daylight::store.create_brand'))

@section('content')
    <x-daylight::page-header :title="__('daylight::store.create_brand')" />

    <x-daylight::session-messages/>

    <form method="post" action="{{ route('daylight.store.brands.store') }}">
        @csrf

        <x-daylight::input.group
            :label="__('daylight::general.name')"
            :error="$errors->first('name')"
            for="code"
        >
            <x-daylight::input.text
                name="name"
                id="name"
                value="{{ old('name') }}"
            />
        </x-daylight::input.group>

        <x-daylight::input.group
            :label="__('daylight::general.color')"
            :error="$errors->first('color')"
            for="code"
        >
            <x-daylight::input.color
                name="color"
                id="color"
                value="{{ old('color') }}"
                placeholder="#000000"
            />
        </x-daylight::input.group>
        
        @if(isset($pages) && $pages->isNotEmpty())
            <x-daylight::input.group
                label="Pagina"
                :error="$errors->first('page_id')"
                for="page_id"
            >
                <x-daylight::input.select name="page_id" id="page_id">
                    <option value="">— Geen pagina —</option>
                    @foreach($pages as $page)
                        <option value="{{ $page->id }}" {{ (int) old('page_id') === $page->id ? 'selected' : '' }}>
                            {{ $page->defaultTranslation?->name ?? $page->translations->first()?->name ?? '—' }}
                        </option>
                    @endforeach
                </x-daylight::input.select>
            </x-daylight::input.group>
        @endif

        <div class="mt-6 flex items-center justify-end gap-x-3">
            <x-daylight::buttons.secondary href="{{ route('daylight.store.brands.index') }}" element="a">
                {{ __('daylight::general.cancel') }}
            </x-daylight::buttons.secondary>

            <x-daylight::buttons.primary type="submit">
                {{ __('daylight::general.save') }}
            </x-daylight::buttons.primary>
        </div>
    </form>
@endsection
