@props([ 'catalog', 'editable', 'catalogs' ])

<x-layout>
    @if($editable)
    <div class="section topBreadcrumbs">
        <div class="container">
            <div class="row">
                <div class="twelve columns">
                    <div class="main-lk__back">
                        @if($wishlist->catalog_id)
                            <a href="{{ route('catalogs.show', $wishlist->catalog_id) }}">К списку вишлистов</a>
                        @else
                            <a href="{{ route('index') }}">На главную</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    <div class="service">
        <div class="service-main_title">
        {{ $wishlist->name }}
        </div>
        <div class="service-main_table">
            <table>
                <thead>
                    <tr>
                        <th>
                            <div class="service-main_table__th">Цена</div>
                        </th>
                        <th>
                            <div class="service-main_table__th">Наименование</div>
                        </th>
                        <th>
                            <div class="service-main_table__th">Ссылка</div>
                        </th>
                        <th>
                            <div class="service-main_table__th">Статус</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($wishlist->wishes as $wish)
                        <tr class="getData" 
                            data-el_id="{{ $wish->id }}" 
                            data-el_name="{{ $wish->name }}" 
                            data-el_link="{{ $wish->link }}" 
                            data-el_image="{{ $wish->image }}"
                            data-el_price="{{ $wish->price }}"
                            data-el_status="{{ $wish->status }}"
                            data-el_created_at="{{ $wish->created_at }}"
                            data-el_updated_at="{{ $wish->updated_at }}"
                            @if($editable) data-toggle="modal" data-target="#addWish" @endif
                        >
                            <td class="td_el">
                                <div class="service-main_table__td">{{ $wish->price }} ₽</div>
                            </td>
                            <td class="td_el">
                                <div class="service-main_table__td">{{ $wish->name }}</div>
                            </td>
                            <td class="td_el">
                                <div class="service-main_table__td">
                                    <a href="{{ $wish->link }}" target="_blank">Ссылка</a>
                                </div>
                            </td>
                            <td class="td_el">
                                <div class="service-main_table__td">
                                    @if($wish->status === 0)
                                        <div class="service-main_table__td">Нет</div>
                                    @elseif ($wish->status === 1)
                                        <div class="service-main_table__td">Забронирован</div>
                                    @else 
                                        <div class="service-main_table__td">Подарен</div>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach

                    @if ($wishlist->wishes->isEmpty())
                        <tr>
                            <td colspan="4">
                                <div class="service-main_table__td">Элементы для вывода отсутствуют</div>
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>

        @if($editable)

            <div id="addWishBtn" class="service-main_button" data-toggle="modal" data-target="#addWish">
                Добавить запись
            </div>
            <div class="modal fade newDesignModal cur_modal" id="addWish">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Добавить запись</h5>
                            <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="wish-form" class="service-form" action="" method="post" enctype="multipart/form-data" name="service-form">
                                @csrf
                                @method('post')
                                <input type="text" name="id" id="id" value="" style="display: none; opacity: 0;">
                                <input type="text" name="wishlist_id" id="wishlist_id" value="{{ $wishlist->id }}" style="display: none; opacity: 0;">

                                <div class="field req">
                                    <label for="name">Наименование</label>
                                    <input type="text" name="name" class="service-form__input" value="" maxlength="225" placeholder="Введите название">
                                    <div class="field__error">Пожалуйста, заполните поле.</div>
                                </div>

                                <div class="field">
                                    <label for="link">Ссылка</label>
                                    <input type="text" name="link" id="link" class="service-form__input" placeholder="https://ozon.ru/tovar">
                                    <div class="field__error">Поле должно содержать ссылку либо быть пустым.</div>
                                </div>

                                <div class="field">
                                    <label for="price">Цена, ₽</label>
                                    <input type="text" name="price" id="price" class="service-form__input" placeholder="000.00">
                                    <div class="field__error">Поле должно содержать число.</div>
                                </div>

                                <div class="field">
                                    <label for="status">Статус</label>
                                    <select name="status" id="status" class="service-form__input">
                                        <option value="0">Нет</option>
                                        <option value="1">Забронирован</option>
                                        <option value="2">Подарен</option>
                                    </select>
                                    <div class="field__error">Пожалуйста, заполните поле.</div>
                                </div>
                                <script>
                                    $(document).ready(function() {
                                        $('#status').select2({
                                            tags: true,
                                            width: '100%',
                                            minimumResultsForSearch: -1
                                        });
                                    });
                                </script>

                                <div class="field">
                                    <div class="attach attach-doc">
                                        <div class="attach-title">
                                            <label for="doc_file" class="attach-title-text">Прикрепите картинку</label>
                                        </div>
                                        <div class="attach-content">
                                            <div class="field">
                                                <input type="file" name="doc_file" id="doc_file" class="service-form__file" accept=".jpg,.jpeg,.svg,.png,.heic,.webp">
                                                <div class="attached-documents"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <input type="submit" form="wish-form" value="Сохранить">
                                <div class="service-main_button" id="importButton" data-target="#importFromMarketplaceModal" data-toggle="modal" data-dismiss="modal">Импортировать с ozon/wb/kuper</div>
                            </form>
                            <div id="deleteElementStartBtn" 
                                    class="service-form__delete_link" data-el_id="" data-toggle="modal" 
                                    data-dismiss="modal" data-target="#delElementModal"
                            >
                                Удалить запись
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <x-delete-confirmation 
                :modalId="'delElementModal'" 
                :buttonId="'delElementButton'" 
                :text="'Вы дествительно хотите удалить запись?'"
                :model="'wishes'"
                :redirectUrl="null"
            />
            <div id="showQrBtn" data-el_id="{{ $wishlist->id }}" class="service-main_button" data-toggle="modal" data-target="#showQr">
                Скачать QR-код
            </div>
            <div class="modal fade newDesignModal cur_modal" id="showQr">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">QR-код</h5>
                            <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <div class="modal-body">
                            <img id="qrImage" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
            AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
                9TXL0Y4OHwAAAABJRU5ErkJggg==" />
                            <a href="" id="qrLink" target="_blank"></a>
                        </div>
                    </div>
                </div>
            </div>
            <x-wishlist-action :wishlist="$wishlist" :catalog_id="null" :catalogs="$catalogs" />
            <x-import-modal />
        @endif
    </div>
    <script>
        function wishDataModalShow(targetModal, obj) {
            console.log(obj);
            const routes = {
                store: "{{ route('wishes.store') }}",
                update: "{{ route('wishes.update', ':id') }}"
            };

            const documentDiv = $(targetModal).find('.attached-documents');

            const serviceForm = $(targetModal).find('.service-form');
            if (!obj) {
                serviceForm.attr('action', routes.store);
                serviceForm.attr('method', 'post');
                $(targetModal).find('.service-form__delete_link').hide();
                $(targetModal).find('.modal-title').html('Добавить запись');
                $(targetModal).find('input[name=name]').val('');
                $(targetModal).find('input[name=link]').val('');
                $(targetModal).find('input[name=price]').val('');
                // $(targetModal).find('select[name=status]').val(0).select2().change();
                $(targetModal).find('select[name=status]').val(0).trigger('change');
                $(targetModal).find('#importButton').attr('hidden', false);
                $(targetModal).find('#doc_file').attr('disabled', false);
                documentDiv?.html('');
                $(targetModal).modal('show');
            } else {
                // serviceForm.attr('action', `/wishes/${obj.id}`);
                serviceForm.attr('action', routes.update.replace(':id', obj.id));
                serviceForm.attr('method', 'post');
                $(targetModal).find('.service-form__delete_link').show();
                $(targetModal).find('.service-form__delete_link').data('el_id', obj.id);
                $(targetModal).find('.modal-title').html('Редактировать запись');
                $(targetModal).find('input[name=name]').val(obj.name);
                $(targetModal).find('input[name=link]').val(obj.link);
                $(targetModal).find('input[name=price]').val(obj.price);
                $(targetModal).find('select[name=status]').val(obj.status).trigger('change');
                $(targetModal).find('#importButton').attr('hidden', true);
                
                if (obj.image) {
                    $(targetModal).find('#doc_file').attr('disabled', true);
                    documentDiv.html(`
                        <div class="attached-file new_file">
                            <div>
                                <div class="attached-file_date">${obj.created_at}</div>
                                <div class="attached-file_name">
                                    <a href="${obj.image}" target="_blank">Изображение</a>
                                </div>
                            </div>
                            <div class="delete-file" onclick="deleteFile('${obj.id}')"></div>
                        </div>
                    `);
                } else {
                    $(targetModal).find('#doc_file').attr('disabled', false);
                    documentDiv.html('');
                }

                $(targetModal).modal('show');
            }
        };

        function deleteFile(id) {
            const route = "{{ route('wishes.image.delete', ':id') }}";
            $.ajax({
                url: route.replace(':id', id),
                type: 'DELETE',
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    removeImage(id);
                },
                error: function(xhr) {
                    console.error(xhr);
                }
            });
        }

        function removeImage(id) {
            const documentDiv = $('#addWish').find('.attached-documents');
            $('#addWish').find('#doc_file').attr('disabled', false);
            $(`.getData[data-el_id="${id}"]`).removeAttr('data-el_image');
            documentDiv.html('');
        }

        $(document).ready(function() {
            $(document).on('click', '#addWishBtn', function (e) {                    
                let targetModal = $(this).data('target');
                wishDataModalShow(targetModal);
            });

            $(document).on('click', '.getData', function (e) {
                let targetModal = $(this).data('target');
                wishDataModalShow(targetModal, {
                    id: $(this).data('el_id'),
                    name: $(this).data('el_name'),
                    link: $(this).data('el_link'),
                    price: $(this).data('el_price'),
                    image: $(this).data('el_image'),
                    status: $(this).data('el_status'),
                    created_at: $(this).data('el_created_at'),
                    updated_at: $(this).data('el_updated_at')
                });
            });

            $(document).on('submit', '#wish-form', function (event) {
                event.preventDefault();
                const form = $(this);
                const linkInput = form.find('input[name=link]');
                if (linkInput.val() && !linkInput.val().match(/^https?:\/\//)) {
                    linkInput.val('https://' + linkInput.val());
                }

                const priceInput = form.find('input[name=price]');
                if (priceInput.val() && !priceInput.val().match(/^\d+(\.\d{1,2})?$/)) {
                    priceInput.siblings().find('.field__error').html('Поле должно содержать число.');
                    priceInput.parent().addClass('error');
                    return;
                }

                const formData = new FormData(this);
                formData.append('_token', "{{ csrf_token() }}");
                submitModal(event, form, formData, function(xhr, form) {
                    if (xhr.responseJSON.errors.name) {
                        form.find('input[name=name]').siblings().find('.field__error').html(xhr.responseJSON.errors.name[0]);
                        form.find('input[name=name]').parent().addClass('error');
                    } if (xhr.responseJSON.errors.link) {
                        form.find('input[name=link]').siblings().find('.field__error').html(xhr.responseJSON.errors.link[0]);
                        form.find('input[name=link]').parent().addClass('error');
                    }
                });

                return;
            });

            $(document).on('click', '#deleteElementStartBtn', function (e) {
                if ($(this).attr('disabled')) {
                    return;
                }
                var el_id = $(this).data('el_id');
                //$('.modal').modal('hide');
                $(document).find('#delElementButton').data('el_id', el_id);
                // $(document).find("#delElementModal").modal('show');
            });

            $(document).on('click', '#showQrBtn', function (e) {
                const wishlistQrRoute = "{{ route('wishlists.qr', ':id') }}";

                var el_id = $(this).data('el_id');
                $('#qrImage').attr('src', '');

                var data = {};
                data._token = "{{ csrf_token() }}";
                $.ajax({
                    type: 'get',
                    url: wishlistQrRoute.replace(':id', el_id),
                    data: data,
                    success: function (response) {
                        $('#qrImage').attr('src', response);
                        // $('#qrLink').attr('href', response.url);
                        // $('#qrLink').textContent = response.url;
                    },
                    error: function (xhr, status, error) {                        
                        $('.modal-info').addClass('modal-info-active');                        
                        console.error(xhr);
                    }
                });
            });
        });
    </script>
</x-layout>