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

@section('title', __('Create product'))

@section('content')
    <x-daylight::page-header :title="__('Create product')"/>

    <x-daylight::session-messages/>

    <form method="post" action="{{ route('daylight.store.products.store') }}" x-data="{ name: '{{ old('name') }}'}">
        @csrf

        <input type="hidden" name="locale" value="{{ request()->get('locale', 'en') }}">

        <div x-data="{ activeTab: 'general', type: '{{ old('type', 'variable') }}' }" class="w-full">
            <div class="flex border-b">
                <button @click.prevent="activeTab = 'general'"
                        :class="{ 'bg-gray-100 text-sky-600': activeTab === 'general', 'text-gray-600': activeTab !== 'tab1' }"
                        class="px-4 py-2 focus:outline-none font-semibold text-sm cursor-pointer rounded border-1 mb-4 border-blue-500">{{ __('General') }}</button>
                <button @click.prevent="activeTab = 'variants'" x-show="type !== 'simple'"
                        :class="{ 'bg-gray-100 text-sky-600': activeTab === 'variants', 'text-gray-600': activeTab !== 'tab2' }"
                        class="px-4 py-2 focus:outline-none font-semibold text-sm cursor-pointer rounded border-1 mb-4 border-blue-500">{{ __('Variants') }}</button>
                <button @click.prevent="activeTab = 'content'"
                        :class="{ 'bg-gray-100 text-sky-600': activeTab === 'content', 'text-gray-600': activeTab !== 'tab2' }"
                        class="px-4 py-2 focus:outline-none font-semibold text-sm cursor-pointer rounded border-1 mb-4 border-blue-500">{{ __('Content') }}</button>
            </div>

            <div x-show="activeTab === 'general'">
                <h2 class="mt-6">{{ __('General') }}</h2>

                <x-daylight::input.group
                    :label="__('Type *')"
                    :error="$errors->first('type')"
                    for="type"
                >
                    <flux:select placeholder="{{ __('Choose type') }}..." x-model="type"
                                 @change="document.querySelector('#sku').value = null;">
                        <flux:select.option value="simple">{{ __('Simple') }}</flux:select.option>
                        <flux:select.option value="variable">{{ __('Variable') }}</flux:select.option>
                    </flux:select>

                    <input type="hidden" name="type" x-model="type">
                </x-daylight::input.group>

                <div x-cloak x-show="type === 'simple'">
                    <x-daylight::input.group
                        :label="__('SKU *')"
                        :error="$errors->first('sku')"
                        for="type"
                    >
                        <livewire:daylight::products.sku-input
                            :sku="old('sku')"
                        />
                    </x-daylight::input.group>
                </div>

                <x-daylight::input.group
                    :label="__('Brand *')"
                    :error="$errors->first('brand')"
                    for="brand_id"
                >
                    <div x-data="{ brand: '{{ old('brand_id') }}' }">
                        <flux:select :placeholder="__('Choose brand...')" x-model="brand">
                            @foreach($brands as $brand)
                                <flux:select.option value="{{ $brand->id }}">{{ $brand->name }}</flux:select.option>
                            @endforeach
                        </flux:select>

                        <input type="hidden" name="brand_id" x-model="brand">
                    </div>
                </x-daylight::input.group>

                <div x-data="{ labels: @json(old('labels')) || [],
                    get filteredLabels() {
                        return this.labels.filter(label => label !== null && label !== '');
                    }">
                    <x-daylight::input.group :label="__('Labels')" :error="$errors->first('labels')" for="labels">
                        <select multiple x-model="labels">
                            @foreach($labels as $label)
                                <flux:select.option value="{{ $label->id }}">
                                    {{ $label->translations->first()->name ?? __('Not translated') }}
                                </flux:select.option>
                            @endforeach
                        </select>
                    </x-daylight::input.group>

                    <template x-for="label in filteredLabels">
                        <input type="hidden" name="labels[]" x-bind:value="label">
                    </template>
                </div>

                <h2 class="mt-12 mb-4">{{ __('Category & attributes') }}</h2>

                <livewire:daylight::products.attribute-selector
                    :categories="$categories"
                    :activeCategories="old('categories')"
                    :availableAttributes="$attributes"
                    :activeAttributes="old('attributes')"
                />

                <h2 class="mt-12 mb-4">{{ __('Downloads') }}</h2>

                <x-daylight::input.group
                    :label="__('Downloads')"
                    :error="$errors->first('downloads')"
                    for="media"
                >
                    <livewire:daylight::products.media-selector
                        :initialMedia="old('downloads')"
                        name="downloads"
                        displayType="list"
                    />
                </x-daylight::input.group>

                <h2 class="mt-12 mb-4">{{ __('Status') }}</h2>

                <x-daylight::input.group
                    :label="__('Status *')"
                    :error="$errors->first('status')"
                    for="status"
                >
                    <div x-data="{ status: '{{ old('status', \App\Models\Enums\ProductStatus::DRAFT->value) }}' }">
                        <flux:select placeholder="{{ __('Choose status') }}..." x-model="status">
                            @foreach($statuses as $key => $value)
                                <flux:select.option value="{{ $key }}">{{ $value }}</flux:select.option>
                            @endforeach
                        </flux:select>

                        <input type="hidden" name="status" x-model="status">
                    </div>
                </x-daylight::input.group>
            </div>

            <div x-show="activeTab === 'variants'" x-cloak>
                @error('options')
                <div class="mt-2 text-xs text-red-500">{{ $errors->first('options') }}</div>
                @enderror
                @error('variants')
                <div class="mt-2 text-xs text-red-500">{{ $errors->first('variants') }}</div>
                @enderror

                <livewire:daylight::products.product-variation-builder/>
            </div>

            <div x-show="activeTab === 'content'" x-cloak>
                <h2 class="mt-6 mb-8">{{ __('Content') }}</h2>

                <div x-data="{ currentLocale: 'en' }">
                    <div class="sm:hidden mb-6 bg-gray-100 -mx-4 p-4">
                        <select x-model="currentLocale" id="tabs" name="tabs"
                                class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach(\Daylight\Core\Modules\Multilingualism\Multilingualism::getAvailableLocales() as $locale)
                                <option
                                    {{ request()->get('locale', 'en') === $locale ? 'selected' : '' }} value="{{ $locale }}">
                                    {{ strtoupper($locale) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="hidden sm:flex items-center">
                        <p class="text-sm text-gray-600">{{ __('Locale') }}:</p>
                        <nav class="ml-4 flex space-x-4" aria-label="Tabs">
                            @foreach(\Daylight\Core\Modules\Multilingualism\Multilingualism::getAvailableLocales() as $locale)
                                <button
                                    @click.prevent="currentLocale = '{{ $locale }}'"
                                    :class="{
                                        'text-sky-700 bg-sky-100': currentLocale === '{{ $locale }}',
                                        'text-gray-500 hover:text-gray-700': currentLocale !== '{{ $locale }}'
                                    }"
                                    class="rounded-md  px-3 py-2 text-sm font-medium hover:text-gray-700 flex items-center"
                                >
                                    <img
                                        src="{{ daylightAsset('resources/assets/images/flags/'.$locale.'.svg') }}"
                                        alt="{{ $locale }}" class="h-5 w-5 rounded-full ring-2 ring-white mr-2"
                                    >
                                    {{ strtoupper($locale) }}
                                </button>
                            @endforeach
                        </nav>
                    </div>

                    @foreach(\Daylight\Core\Modules\Multilingualism\Multilingualism::getAvailableLocales() as $locale)
                        <div
                            x-show="currentLocale === '{{ $locale }}'" {{ $loop->first ? 'x-cloak' : '' }}
                        x-data="{
                                name: '{{ old('translations.'.$locale.'.name') }}',
                                slug: '{{ old('translations.'.$locale.'.slug') }}'
                            }">
                            <x-daylight::input.group
                                :label="__('Name *')"
                                :error="$errors->first('translations.'.$locale.'.name')"
                                for="{{ $locale }}_name"
                            >
                                <x-daylight::input.text
                                    :name="'translations[' . $locale . '][name]'"
                                    id="{{ $locale }}_name"
                                    value="{{ old('translation.'.$locale.'.name') }}"
                                    x-model="name"
                                />
                            </x-daylight::input.group>

                            <x-daylight::input.group
                                :label="__('Slug *')"
                                :error="$errors->first('translations.'.$locale.'.slug')"
                                for="{{ $locale }}_slug"
                            >
                                <x-daylight::input.text
                                    :name="'translations[' . $locale . '][slug]'"
                                    id="{{ $locale }}_slug"
                                    value="{{ old('translations.'.$locale.'.slug') }}"
                                    readonly
                                    x-slug="name"
                                />
                            </x-daylight::input.group>

                            <x-daylight::input.group
                                :label="__('Description')"
                                :error="$errors->first('translations.'.$locale.'.description')"
                                for="{{ $locale }}_description"
                            >
                                <div class="mb-4 border rounded-lg p-4 text-sm hidden" id="original-description">
                                    <h3 class="uppercase text-xs tracking-wide mb-1.5 text-gray-500">
                                        {{ __('Original description') }}
                                    </h3>
                                    <p></p>
                                </div>

                                <div id="{{ $locale }}_description"
                                     x-data='{ description: @json(old('translations.'.$locale . '.description')) }'>
                                    <flux:editor x-model="description"/>
                                    <textarea class="hidden" name="translations[{{ $locale }}][description]'"
                                              x-model="description"></textarea>
                                </div>
                            </x-daylight::input.group>

                            <x-daylight::input.group
                                :label="__('Pros')"
                                for="{{ $locale }}_pros"
                            >
                                <div x-data='{ pros: @json(array_filter(old('translations.'.$locale.'.pros', []))) }'>
                                    <template x-for="(pro, index) in pros" :key="index">
                                        <div class="flex items-center mb-2">
                                            <input name="translations[{{ $locale }}][pros][]" x-model="pros[index]"
                                                   type="text"
                                                   class="block w-full rounded-md border border-gray-300 py-1.5 text-gray-900 shadow-sm placeholder:text-gray-400 sm:max-w-lg sm:text-sm sm:leading-6">

                                            <button @click.prevent="pros.splice(index, 1)"
                                                    class="ml-2 p-2 bg-red-500 hover:bg-red-700 transition rounded-full">
                                                <svg class="text-white w-4 h-4" data-slot="icon" fill="none"
                                                     stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24"
                                                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </template>

                                    <x-daylight::buttons.primary @click.prevent="pros.push('')">
                                        {{ __('Add new') }}
                                    </x-daylight::buttons.primary>
                                </div>

                            </x-daylight::input.group>

                            <x-daylight::input.group
                                :label="__('Cons')"
                                :error="$errors->first('translations.'.$locale.'.cons')"
                                for="{{ $locale }}_cons"
                            >
                                <div x-data='{ cons: @json(array_filter(old('translations.'.$locale.'.cons', []))) }'>
                                    <template x-for="(con, index) in cons" :key="index">
                                        <div class="flex items-center mb-2">
                                            <input name="translations[{{ $locale }}][cons][]" x-model="cons[index]"
                                                   type="text"
                                                   class="block w-full rounded-md border border-gray-300 py-1.5 text-gray-900 shadow-sm placeholder:text-gray-400 sm:max-w-lg sm:text-sm sm:leading-6">

                                            <button @click.prevent="cons.splice(index, 1)"
                                                    class="ml-2 p-2 bg-red-500 hover:bg-red-700 transition rounded-full">
                                                <svg class="text-white w-4 h-4" data-slot="icon" fill="none"
                                                     stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24"
                                                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </template>

                                    <x-daylight::buttons.primary @click.prevent="cons.push('')">
                                        {{ __('Add new') }}
                                    </x-daylight::buttons.primary>
                                </div>

                            </x-daylight::input.group>

                            <div>
                                <h2 class="mt-12">SEO</h2>

                                <x-daylight::input.group
                                    :label="__('Robots *')"
                                    :error="$errors->first('translations.'.$locale.'.robots')"
                                    for="{{ $locale }}_robots"
                                >
                                    <x-daylight::input.select name="translations[{{ $locale }}][robots]"
                                                          id="{{ $locale }}_robots">
                                        <option
                                            value="index, follow" {{ old('translations.'.$locale.'.robots') === 'index, follow' ? 'selected' : '' }}>
                                            Default (index, follow)
                                        </option>
                                        <option
                                            value="nofollow" {{ old('translations.'.$locale.'.robots') === 'nofollow' ? 'selected' : '' }}>
                                            nofollow
                                        </option>
                                        <option
                                            value="noindex" {{ old('translations.'.$locale.'.robots') === 'noindex' ? 'selected' : '' }}>
                                            noindex
                                        </option>
                                        <option
                                            value="noindex, nofollow" {{ old('translations.'.$locale.'.robots') === 'noindex, nofollow' ? 'selected' : '' }}>
                                            noindex, nofollow
                                        </option>
                                    </x-daylight::input.select>
                                </x-daylight::input.group>

                                <x-daylight::input.group
                                    :label="__('Title')"
                                    :error="$errors->first('translations.'.$locale.'.meta_title')"
                                    for="{{ $locale }}_meta_title"
                                >
                                    <x-daylight::input.text name="translations[{{ $locale }}][meta_title]"
                                                        id="{{ $locale }}_meta_title"
                                                        value="{{ old('translations.'.$locale.'.meta_title') }}"/>
                                </x-daylight::input.group>

                                <x-daylight::input.group
                                    :label="__('Description')"
                                    :error="$errors->first('translations.'.$locale.'.meta_description')"
                                    for="{{ $locale }}_meta_description"
                                >
                                    <x-daylight::input.textarea name="translations[{{ $locale }}][meta_description]"
                                                            id="{{ $locale }}_meta_description">
                                        {{ old('translations.'.$locale.'.meta_description') }}
                                    </x-daylight::input.textarea>
                                </x-daylight::input.group>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

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

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

    <script>
        document.addEventListener('variant-selected', function (event) {
            let nameInput = document.querySelector('#en_name')
            let originalDescription = document.querySelector('#original-description')

            if (nameInput && nameInput.value === '') {
                nameInput.value = event.detail[0].variant.title;

                nameInput.dispatchEvent(new Event('input'));
            }

            if(event.detail[0].variant.description) {
                originalDescription.querySelector('p').innerHTML = event.detail[0].variant.description;
                originalDescription.classList.remove('hidden');
            } else {
                originalDescription.classList.add('hidden');
            }
        });
    </script>
@endsection
