@php
    $mainTab = "main-tab";
    $detailTab = "detail-tab";
    $specificationTab = "specification-tab";
    $paragraphTab = "paragraph-tab";
    $documentTab = App\Enums\AttachmentTypes::Document->value . "-tab";
    $imageTab = App\Enums\AttachmentTypes::Image->value . "-tab";
    $contentTab = "content-tab";
    $categoriesTab = "categories-tab";
@endphp

<div class="row mt-4">
    <div class="col">
        <ul class="nav nav-tabs nav-tabs-with-hash" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#{{ $mainTab }}" type="button" role="tab" aria-controls="{{ $mainTab }}" aria-selected="true">
                    <i class="fa-regular fa-file-lines"></i>
                    {{ __('Principale') }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#{{ $detailTab }}" type="button" role="tab" aria-controls="{{ $detailTab }}" aria-selected="false">
                    <i class="fa-solid fa-circle-info"></i>
                    {{ __('Approfondimento') }}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#{{ $specificationTab }}" type="button" role="tab" aria-controls="{{ $specificationTab }}" aria-selected="false">
                    <i class="fa-solid fa-gear"></i>
                    {{ __('Capitolato') }}
                </button>
            </li>

            @if($product->id)
                @can('viewAny', App\Models\Paragraph::class)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#{{ $paragraphTab }}" type="button" role="tab" aria-controls="{{ $paragraphTab }}" aria-selected="false">
                            <i class="fa-solid fa-paragraph"></i>
                            {{ __('Paragrafi') }}
                        </button>
                    </li>
                @endcan

                @can('viewAny', App\Models\Attachment::class)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#{{ $documentTab }}" type="button" role="tab" aria-controls="{{ $documentTab }}" aria-selected="false">
                            <i class="fa-solid fa-paperclip"></i>
                            {{ __('Documenti') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#{{ $imageTab }}" type="button" role="tab" aria-controls="{{ $imageTab }}" aria-selected="false">
                            <i class="fa-solid fa-paperclip"></i>
                            {{ __('Immagini') }}
                        </button>
                    </li>
                @endcan

                @can('viewAny', App\Models\Content::class)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#{{ $contentTab }}" type="button" role="tab" aria-controls="{{ $contentTab }}" aria-selected="false">
                            <i class="fa-solid fa-table"></i>
                            {{ __('Contenuti') }}
                        </button>
                    </li>
                @endcan
            @endif

            @if($tenant->id == App\Enums\ProductVersions::Current->value)
                @can('viewAny', App\Models\Category::class)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#{{ $categoriesTab }}" type="button" role="tab" aria-controls="{{ $categoriesTab }}" aria-selected="false">
                            <i class="fa-solid fa-sitemap"></i>
                            {{ __('Categorie') }}
                        </button>
                    </li>
                @endcan
            @endif
        </ul>
        <div class="tab-content p-2 tab-content p-2 border border-top-0" id="myTabContent">
            <div class="tab-pane fade" id="{{ $mainTab }}" role="tabpanel" aria-labelledby="{{ $mainTab }}" tabindex="0">

                <input type="hidden" readonly name="hash_id" value="{{ $product->hash_id }}">

                <div class="row">
                    @foreach (app(\Astrotomic\Translatable\Locales::class)->all() as $locale)
                        <div class="form-group col-12 col-sm-6 mb-3">
                            <label for="name:{{ $locale }}">{{ __('Nome') }}{!! field_required($locale == app(\Astrotomic\Translatable\Locales::class)->current()) !!} ({{ $locale }})</label>
                            <input
                                name="name:{{ $locale }}"
                                class="form-control {{ $errors->has('name:' . $locale) ? 'is-invalid' : '' }}"
                                type="text"
                                value="{{ old('name:' . $locale, $product->{'name:' . $locale}) }}"
                            >
                            @if ($errors->has('name:' . $locale))
                                <div class="invalid-feedback">{{ $errors->first('name:' . $locale) }}</div>
                            @endif
                        </div>
                    @endforeach
                </div>

                <div class="row">
                    @foreach (app(\Astrotomic\Translatable\Locales::class)->all() as $locale)
                        <div class="form-group col-12 col-sm-6 mb-3">
                            <label for="description:{{ $locale }}">{{ __('Descrizione') }}{!! field_required($locale == app(\Astrotomic\Translatable\Locales::class)->current()) !!} ({{ $locale }})</label>
                            <input
                                name="description:{{ $locale }}"
                                class="form-control {{ $errors->has('description:' . $locale) ? 'is-invalid' : '' }}"
                                type="text"
                                value="{{ old('description:' . $locale, $product->{'description:' . $locale}) }}"
                            >
                            @if ($errors->has('description:' . $locale))
                                <div class="invalid-feedback">{{ $errors->first('description:' . $locale) }}</div>
                            @endif
                        </div>
                    @endforeach
                </div>

                <div class="row">
                    <div class="form-group col-4 mb-3 {{ $errors->has('template') ? ' has-error' : '' }}">
                        <label for="template">{{ __('Template') }} {!! field_required(true) !!}</label>
                        <select name="template" class="form-select {{ $errors->has('template') ? ' is-invalid' : '' }}" id="template">
                            @foreach(\App\Enums\ProductTemplate::cases() as $header_product_template)
                                <option @if( old('template', $product->template) == $header_product_template->value) selected  @endif value="{{ $header_product_template->value }}">{{ __("enums.header-product-template.{$header_product_template->value}") }}</option>
                            @endforeach
                        </select>
                        @if ($errors->has('template')) <small class="invalid-feedback">{{ $errors->first('template') }}</small> @endif
                    </div>
                    <div class="form-group col-4 mb-3">
                        <label for="video">{{ __('Video') }}</label>
                        <input name="video"  class="form-control {{ $errors->has('video') ? 'is-invalid' : '' }}" type="text" value="{{ old('video', $product->video) }}">
                        @if ($errors->has('video'))
                            <div class="invalid-feedback">{{ $errors->first('video') }}</div>
                        @endif
                    </div>
                    <div class="form-group col-4 mb-3">
                        <label for="show_climabox">{{ __('Climabox') }}</label>
                        <div class="form-check form-switch form-switch-lg ms-1 me-3">
                            <input type="hidden" name="show_climabox" value="0">
                            <input id="show_climabox" class="form-check-input" type="checkbox" name="show_climabox" value="1" {{ old("show_climabox", $product->show_climabox ?? null) ? 'checked' : "" }}>
                        </div>
                    </div>
                </div>

                @if($tenant->id == App\Enums\ProductVersions::Current->value)
                    <div class="row">
                        <div class="form-group col-12 mb-3 {{ $errors->has('recommendations') ? ' has-error' : '' }}">
                            <label for="recommendations">{{ __('Consigliati') }}</label>
                            <select name="recommendations[]" class="select2-sortable form-select {{ $errors->has('recommendations') ? ' is-invalid' : '' }}" multiple>
                                @foreach($product->recommendations as $recommended)
                                    <option value="{{ $recommended->id }}" selected>{{ $recommended->name }}</option>
                                @endforeach
                                @foreach($recommendations as $recommended)
                                    @if (!in_array($recommended->id, $product->recommendations->pluck('id')->toArray()))
                                        <option value="{{ $recommended->id }}">{{ $recommended->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                            @if ($errors->has('recommendations')) <small class="invalid-feedback">{{ $errors->first('recommendations') }}</small> @endif
                        </div>
                    </div>
                @endif

                <div class="row">
                    @foreach (app(\Astrotomic\Translatable\Locales::class)->all() as $locale)
                        @php $cover_key = App\Enums\AttachmentTypes::Cover->value . ':' . $locale; @endphp
                        <div class="form-group col-12 col-sm-6 mb-3">
                            <label for="{{ $cover_key }}">{{ __('enums.attachment-types.cover') }} ({{ $locale }})</label>
                            <input type="file" id="{{ $cover_key }}" name="{{ $cover_key }}" class="form-control {{ $errors->has($cover_key) ? 'is-invalid' : '' }}">
                            @if ($errors->has($cover_key))
                                <div class="invalid-feedback">{{ $errors->first($cover_key) }}</div>
                            @endif

                            @if($product->cover && $product->cover->{"file_url:{$locale}"})
                                <div class="mt-3">
                                    <img style="width: 250px;" src="{{ $product->cover->{"file_url:{$locale}"} }}">
                                    <div class="form-check">
                                        <input id="cover_delete:{{ $locale }}" name="cover_delete:{{ $locale }}" class="form-check-input" type="checkbox" value="1">
                                        <label for="cover_delete:{{ $locale }}" class="form-check-label">{{ __('Elimina file') }}</label>
                                    </div>
                                </div>
                            @endif

                        </div>
                    @endforeach
                </div>

                <div class="row">
                    @foreach (app(\Astrotomic\Translatable\Locales::class)->all() as $locale)
                        @php $schema_key = App\Enums\AttachmentTypes::Schema->value . ':' . $locale; @endphp
                        <div class="form-group col-12 col-sm-6 mb-3">
                            <label for="{{ $schema_key }}">{{ __('enums.attachment-types.schema') }} ({{ $locale }})</label>
                            <input type="file" id="{{ $schema_key }}" name="{{ $schema_key }}" class="form-control {{ $errors->has($schema_key) ? 'is-invalid' : '' }}">
                            @if ($errors->has($schema_key))
                                <div class="invalid-feedback">{{ $errors->first($schema_key) }}</div>
                            @endif

                            @if($product->schema && $product->schema->{"file_url:{$locale}"})
                                <div class="mt-3">
                                    <img style="width: 250px;" src="{{ $product->schema->{"file_url:{$locale}"} }}">
                                    <div class="form-check">
                                        <input id="schema_delete:{{ $locale }}" name="schema_delete:{{ $locale }}" class="form-check-input" type="checkbox" value="1">
                                        <label for="schema_delete:{{ $locale }}" class="form-check-label">{{ __('Elimina file') }}</label>
                                    </div>
                                </div>
                            @endif

                        </div>
                    @endforeach
                </div>

                @foreach (config('ecoclima.sites') as $key => $name)
                    <fieldset class="shadow-sm border mb-3" >
                        <div class="row p-3">
                            <legend class="col-1 fs-5">{{ $name }}</legend>
                            <div class="col">
                                <div class="d-flex">
                                    @foreach (config('ecoclima.flags') as $flag => $label)
                                        <label for="{{ $key }}_{{ $flag }}">{{ __($label) }}</label>
                                        <div class="form-check form-switch form-switch-lg ms-1 me-3">
                                            <input type="hidden" name="flags[{{ $key }}][{{ $flag }}]" value="0">
                                            <input id="{{ $key }}_{{ $flag }}" class="form-check-input" type="checkbox" name="flags[{{ $key }}][{{ $flag }}]" value="1" {{ old("flags.{$key}.{$flag}", $product->flags[$key][$flag] ?? null) ? 'checked' : "" }}>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </fieldset>
                @endforeach
            </div>
            <div class="tab-pane fade" id="{{ $detailTab }}" role="tabpanel" aria-labelledby="{{ $detailTab }}" tabindex="1">
                <div class="row">
                    @foreach (app(\Astrotomic\Translatable\Locales::class)->all() as $locale)
                        <div class="form-group col-12 mb-3">
                            <label for="detail:{{ $locale }}">{{ __('Approfondimento') }} ({{ $locale }})</label>
                            <textarea id="detail_{{ $locale }}" name="detail:{{ $locale }}" class="form-control ckeditor">
                                {{ old('detail:' . $locale, $product->{'detail:' . $locale}) }}
                            </textarea>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="tab-pane fade" id="{{ $specificationTab }}" role="tabpanel" aria-labelledby="{{ $specificationTab }}" tabindex="2">
                <div class="row">
                    @foreach (app(\Astrotomic\Translatable\Locales::class)->all() as $locale)
                        <div class="form-group col-12 mb-3">
                            <label for="specification:{{ $locale }}">{{ __('Capitolato') }} ({{ $locale }})</label>
                            <textarea id="specification_{{ $locale }}" name="specification:{{ $locale }}" class="form-control ckeditor">
                                {{ old('specification:' . $locale, $product->{'specification:' . $locale}) }}
                            </textarea>
                        </div>
                    @endforeach
                </div>
            </div>

            @if($product->id)
                @can('viewAny', App\Models\Paragraph::class)
                    <div class="tab-pane fade" id="{{ $paragraphTab }}" role="tabpanel" aria-labelledby="{{ $paragraphTab }}" tabindex="3">
                        @can('create', App\Models\Paragraph::class)
                            <div class="row mb-3">
                                <div class="col">
                                    <a class="btn btn-success btn-sm float-end" data-toggle="tooltip" href="{{ route('products.tenants.paragraphs.create', [$product, $tenant]) }}" aria-label="Nuovo paragrafo" data-coreui-original-title="Nuovo paragrafo">
                                        <i class="fas fa-plus fa-fw"></i> {{ __('Nuovo paragrafo') }}
                                    </a>
                                </div>
                            </div>
                        @endcan
                        <div class="row">
                            @foreach(\App\Enums\ParagraphColumn::cases() as $paragraph_column)
                                <div class="col">
                                    <h5>{{ __("enums.paragraph-column.{$paragraph_column->value}") }}</h5>
                                    <ul class="list-group paragraphs-list bg-light" data-column="{{ $paragraph_column->value }}">
                                        @foreach ($product->paragraphs()->where('column', $paragraph_column)->get() as $paragraph)
                                            <li class="list-group-item d-flex justify-content-between align-items-center" data-id="{{ $paragraph->id }}">
                                                <div>
                                                    <i class="fa-solid fa-bars handle me-3"></i>
                                                    {{ $paragraph->title }}
                                                </div>
                                                @include ("products.paragraphs.partials.action_column", ['product' => $product, 'paragraph' => $paragraph])
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endcan

                @can('viewAny', App\Models\Attachment::class)
                    <div class="tab-pane fade" id="{{ $documentTab }}" role="tabpanel" aria-labelledby="{{ $documentTab }}" tabindex="3">
                        @can('create', App\Models\Attachment::class)
                            <div class="row mb-3">
                                <div class="col">
                                    <a class="btn btn-success btn-sm float-end" data-toggle="tooltip" href="{{ route('products.tenants.attachments.create', [$product, $tenant, App\Enums\AttachmentTypes::Document->value]) }}" aria-label="Nuovo documento" data-coreui-original-title="Nuovo documento">
                                        <i class="fas fa-plus fa-fw"></i> {{ __('Nuovo documento') }}
                                    </a>
                                </div>
                            </div>
                        @endcan

                        <div class="row">
                            <div class="col">
                                <ul class="attachments-list list-group">
                                    @foreach ($product->documents as $attachment)
                                        <li class="list-group-item d-flex justify-content-between align-items-center" data-id="{{ $attachment->id }}">
                                            <div>
                                                <i class="fa-solid fa-bars handle me-3"></i>
                                                {{ $attachment->title }}
                                            </div>
                                            @include ("products.attachments.partials.action_column", ['product' => $product, 'attachment' => $attachment])
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="{{ $imageTab }}" role="tabpanel" aria-labelledby="{{ $imageTab }}" tabindex="3">
                        @can('create', App\Models\Attachment::class)
                            <div class="row mb-3">
                                <div class="col">
                                    <a class="btn btn-success btn-sm float-end" data-toggle="tooltip" href="{{ route('products.tenants.attachments.create', [$product, $tenant, App\Enums\AttachmentTypes::Image->value]) }}" aria-label="Nuova immagine" data-coreui-original-title="Nuova immagine">
                                        <i class="fas fa-plus fa-fw"></i> {{ __('Nuova immagine') }}
                                    </a>
                                </div>
                            </div>
                        @endcan

                        <div class="row">
                            <div class="col">
                                <ul class="attachments-list list-group">
                                    @foreach ($product->images as $attachment)
                                        <li class="list-group-item d-flex justify-content-between align-items-center" data-id="{{ $attachment->id }}">
                                            <div>
                                                <i class="fa-solid fa-bars handle me-3"></i>
                                                {{ $attachment->title }}
                                            </div>
                                            @include ("products.attachments.partials.action_column", ['product' => $product, 'attachment' => $attachment])
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endcan

                @can('viewAny', App\Models\Content::class)
                    <div class="tab-pane fade" id="{{ $contentTab }}" role="tabpanel" aria-labelledby="{{ $contentTab }}" tabindex="3">
                        @can('create', App\Models\Content::class)
                            <div class="row mb-3">
                                <div class="col">
                                        <a class="btn btn-success btn-sm float-end" data-toggle="tooltip" href="{{ route('products.tenants.contents.create', [$product, $tenant]) }}" aria-label="Nuovo contenuto" data-coreui-original-title="Nuovo contenuto">
                                            <i class="fas fa-plus fa-fw"></i> {{ __('Nuovo contenuto') }}
                                        </a>
                                </div>
                            </div>
                        @endcan
                        <div class="row">
                            <div class="col">
                                <ul id="contents-list" class="list-group">
                                    @foreach ($product->contents as $content)
                                        <li class="list-group-item d-flex justify-content-between align-items-center" data-id="{{ $content->id }}">
                                            <div>
                                                <i class="fa-solid fa-bars handle me-3"></i>
                                                @if($content->file_url)
                                                    <img style="width: 50px;" src="{{ $content->file_url }}">
                                                @endif
                                                {{ $content->label }}
                                            </div>
                                            @include ("products.contents.partials.action_column", ['product' => $product, 'content' => $content])
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endcan
            @endif

            @if($tenant->id == App\Enums\ProductVersions::Current->value)
                @can('viewAny', App\Models\Category::class)
                    <div class="tab-pane fade" id="{{ $categoriesTab }}" role="tabpanel" aria-labelledby="{{ $categoriesTab }}" tabindex="4">
                        <div class="row">
                            <div class="col">
                                <div id="categories-list">
                                    @foreach ($categories as $category)
                                        @include('products.partials.category', [
                                            'category' => $category,
                                            'categories' => $product->categories->pluck('id')->toArray(),
                                        ])
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endcan
            @endif
        </div>
    </div>
</div>

@push('after-scripts')
    <script type="module">
        $(function() {
            @if($product->id)
                @can('sort', App\Models\Paragraph::class)
                    $(".paragraphs-list").sortable({
                        handle: ".handle",
                        connectWith: ".paragraphs-list",
                        stop: function( event, ui ) {
                            var $paragraphs = {};
                            $('.paragraphs-list').each(function() {
                                var $column = $(this).data('column');
                                var $parIds = $(this).sortable('toArray', {attribute: 'data-id'});
                                $paragraphs[$column] = $parIds;
                            });
                            Tools.blockUI();
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                url: "{{ route('products.tenants.paragraphs.sort',[$product, $tenant]) }}",
                                type:"POST",
                                data: {'paragraphs': $paragraphs},
                            }).done(function( data, textStatus, jqXHR ) {
                                iziToast.success({
                                    message: data.message,
                                });
                            }).fail(function( data, textStatus, errorThrown ) {
                                iziToast.error({
                                    message: data.responseJSON.message
                                });
                            }).always(function() {
                                Tools.unblockUI();
                            });
                        }
                    });
                @endcan
            @endif

            @if($product->id)
                @can('sort', App\Models\Attachment::class)
                    $(".attachments-list").sortable({
                        handle: ".handle",
                        stop: function( event, ui ) {
                            var $ids = $(this).sortable('toArray', {attribute: 'data-id'});
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                url: "{{ route('products.tenants.attachments.sort', [$product, $tenant]) }}",
                                type:"POST",
                                data: {'ids': $ids},
                            }).done(function( data, textStatus, jqXHR ) {
                                iziToast.success({
                                    message: data.message,
                                });
                            }).fail(function( data, textStatus, errorThrown ) {
                                iziToast.error({
                                    message: data.responseJSON.message
                                });
                            }).always(function() {
                            });
                        }
                    });
                @endcan

                @can('sort', App\Models\Content::class)
                    $("#contents-list").sortable({
                        handle: ".handle",
                        stop: function( event, ui ) {
                            var $ids = $(this).sortable('toArray', {attribute: 'data-id'});
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                url: "{{ route('products.tenants.contents.sort', [$product, $tenant]) }}",
                                type:"POST",
                                data: {'ids': $ids},
                            }).done(function( data, textStatus, jqXHR ) {
                                iziToast.success({
                                    message: data.message,
                                });
                            }).fail(function( data, textStatus, errorThrown ) {
                                iziToast.error({
                                    message: data.responseJSON.message
                                });
                            }).always(function() {
                            });
                        }
                    });
                @endcan
            @endif

            @can('viewAny', App\Models\Category::class)
                $('#categories-list').jstree({
                    "core": {
                        'themes': {
                            'name': 'proton',
                            'responsive': true
                        }
                    },
                    "checkbox": {
                        "three_state": false,
                    },
                    "plugins": ["checkbox", "wholerow"],
                }).on('activate_node.jstree', function(e, data) {
                    if (data.node.state.selected) {
                        // se selezione => seleziono tutti i padri
                        data.node.parents.forEach(node => {
                            data.instance.check_node(node)
                        });
                    } else {
                        // se deselezione => deseleziono tutti i figli
                        data.node.children_d.forEach(node => {
                            data.instance.uncheck_node(node)
                        });
                    }
                });

                $("#product-form").submit(function(event) {
                    // inserisco le categorie selezionate
                    var categoryIds = $('#categories-list').jstree("get_selected");
                    $.each(categoryIds, function() {
                        $('<input>', {
                            type: 'hidden',
                            name: 'categories[]',
                            value: this
                        }).appendTo('#product-form');
                    });
                });
            @endcan
        });

    </script>
@endpush