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

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

@section('content')
    <div x-data="{ showConfirmDeleteModal: false }">
        <x-daylight::page-header :title="__('daylight::store.edit_category')">
            @if(\Illuminate\Support\Facades\Route::has(app()->getLocale() . '_products.category'))
                <x-daylight::buttons.secondary class="mr-2" element="a" href="{{ route(app()->getLocale() . '_products.category', ['any' => $category->translations->first()->nested_slug]) }}" target="_blank">
                    {{ __('daylight::general.view') }}
                </x-daylight::buttons.secondary>
            @endif

            @can('update:categories')
                <x-daylight::buttons.danger @click.prevent="showConfirmDeleteModal = true">
                    {{ __('daylight::store.delete_category') }}
                </x-daylight::buttons.danger>
            @endif
        </x-daylight::page-header>

        <x-daylight::session-messages/>

        <form method="post"
              action="{{ route('daylight.store.categories.update', $category) }}"
        >
            @csrf
            @method('PUT')
            <input type="hidden" name="locale" value="{{ request()->get('locale', app()->getLocale()) }}">

            <x-daylight::input.group
                    :label="__('daylight::general.parent')"
                    :error="$errors->first('parent')"
                    for="parent_id"
            >
                <x-daylight::input.select name="parent_id" id="parent_id" :disabled="!auth()->user()->can('update:categories')" searchable>
                    <option value="">{{ __('daylight::store.no_parent') }}</option>

                    @foreach($parents as $parent)
                        @include('daylight::store.categories.partials.parent', ['parent' => $parent, 'level' => 0])
                    @endforeach
                </x-daylight::input.select>
            </x-daylight::input.group>

            <x-daylight::input.group
                    :label="__('daylight::general.order')"
                    :error="$errors->first('order')"
                    for="order"
            >
                <x-daylight::input.text
                        name="order"
                        id="order"
                        value="{{ old('order', $category->order) }}"
                        :disabled="!auth()->user()->can('update:categories')"
                />
            </x-daylight::input.group>

            <div x-data="{ display: '{{ old('display', $category->display->value) }}' }">
                <x-daylight::input.group
                        :label="__('daylight::store.display')"
                        :error="$errors->first('display')"
                        for="display"
                >
                    <x-daylight::input.select name="display" id="display" x-model="display">
                        @foreach(\Daylight\Core\Models\Enums\DisplayType::formattedValues() as $key => $value)
                            <option value="{{ $key }}" @if(old('display', $category->display->value) == $key) selected @endif>{{ $value }}</option>
                        @endforeach
                    </x-daylight::input.select>
                </x-daylight::input.group>

                <x-daylight::input.group
                        x-show="display === 'text'"
                        x-cloak
                        :label="__('daylight::store.description')"
                        :error="$errors->first('content')"
                        for="content"
                >
                    <x-daylight::input.wysiwyg
                            name="content"
                            :value="old('content', $translation?->content)"
                            placeholder="{{ __('daylight::store.write_something') }}"
                    />
                </x-daylight::input.group>
            </div>

            <x-daylight::input.group
                    :label="__('daylight::store.manual_sorting')"
                    :error="$errors->first('manual_sorting')"
                    for="manual_sorting"
            >
                <x-daylight::input.select name="manual_sorting" id="manual_sorting">
                    <option value="0" @if(old('manual_sorting', $category->manual_sorting) == $key) selected @endif>{{ __('daylight::general.no') }}</option>
                    <option value="1" @if(old('manual_sorting', $category->manual_sorting) == $key) selected @endif>{{ __('daylight::general.yes') }}</option>
                </x-daylight::input.select>
            </x-daylight::input.group>

            <x-daylight::locale-selector :route="route('daylight.store.categories.edit', $category)"/>

            <div x-data="{ name: '{{ old('name', $translation?->name) }}', slug: '{{ old('slug', $translation?->slug) }}'}">
                <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', $translation?->name) }}"
                            :disabled="!auth()->user()->can('update:categories')"
                            x-model="name"
                    />
                </x-daylight::input.group>

                <x-daylight::input.group
                        :label="__('daylight::general.slug')"
                        :error="$errors->first('slug')"
                        for="slug"
                >
                    <x-daylight::input.text
                            name="slug"
                            id="slug"
                            value="{{ old('slug', $translation?->slug) }}"
                            :disabled="!auth()->user()->can('update:categories')"
                            x-slug="name"
                    />
                </x-daylight::input.group>
            </div>

            <x-daylight::input.group
                :label="__('daylight::general.image')"
                :error="$errors->first('image')"
                for="image"
            >
                <livewire:daylight::media-selector
                    name="image"
                    :single-file="true"
                    :initial-media="old('media', $category->gallery)"
                />
            </x-daylight::input.group>

            <x-daylight::seo :page="$translation"/>

            <div>
                <h2 class="mt-12">{{ __('daylight::general.components') }}</h2>

                <x-daylight::input.group
                    :label="__('daylight::general.components')"
                    :error="$errors->first('components')"
                    for="components"
                >
                    @php
                        $componentsData = null;
                        $oldJson = old('components_json');
                        if ($oldJson && is_array($oldJson)) {
                            $componentsData = array_values(array_filter(array_map(
                                fn($json) => is_string($json) ? json_decode($json, true) : (is_array($json) ? $json : null),
                                $oldJson
                            )));
                        }

                        if (empty($componentsData)) {
                            $componentsData = $components;
                        }

                        if (is_string($componentsData)) {
                            $componentsData = json_decode($componentsData, true);
                        }
                        if ($componentsData instanceof \Illuminate\Support\Collection) {
                            $componentsData = $componentsData->toArray();
                        }
                        $componentsData = $componentsData ?: [];
                    @endphp

                    <livewire:daylight::page-builder
                        :components="$componentsData"
                        :availableComponents="$availableComponents->toArray()"
                        name="components"
                    />
                </x-daylight::input.group>

            </div>

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

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

        <x-daylight::modal.confirm-delete-modal>
            <x-slot name="content">
                <h3 class="text-base font-semibold leading-6 text-gray-900"
                    id="modal-title">{{ __('daylight::general.delete_object', ['object' => __('daylight::store.daylight::store.category')]) }}</h3>
                <div class="mt-2">
                    <p class="text-sm text-gray-500">
                        {{ __('daylight::general.delete_confirm', ['object' => __('daylight::store.daylight::store.category')]) }}
                    </p>
                </div>
            </x-slot>

            <x-slot name="footer">
                <form method="post" action="{{ route('daylight.store.categories.destroy', $category) }}">
                    @csrf
                    @method('DELETE')

                    <button type="button"
                            class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100 sm:mt-0 sm:w-auto"
                            @click.prevent="showConfirmDeleteModal = false">
                        {{ __('daylight::general.cancel') }}
                    </button>

                    <button type="submit"
                            class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-2 sm:w-auto">
                        {{ __('daylight::general.delete') }}
                    </button>
                </form>
            </x-slot>
        </x-daylight::modal.confirm-delete-modal>
    </div>
@endsection
