@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>
                    </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 }}" @if($editable) data-toggle="modal" data-target="#addWish" @endif
                        >
                            <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 }}">{{ $wish->link }}</a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </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
                                <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">
                                    <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="" value="">
                                    <div class="field__error">Поле должно содержать ссылку либо быть пустым.</div>
                                </div>

                                <input type="submit" form="wish-form" value="Сохранить">
                            </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==" />
                        </div>
                    </div>
                </div>
            </div>
            <x-wishlist-action :wishlist="$wishlist" :catalog_id="null" :catalogs="$catalogs" />
        @endif
    </div>
    <script>
        function wishDataModalShow(targetModal, obj) {
            const routes = {
                store: "{{ route('wishes.store') }}",
                update: "{{ route('wishes.update', ':id') }}"
            };

            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).modal('show');
            } else {
                // serviceForm.attr('action', `/wishes/${obj.id}`);
                serviceForm.attr('action', routes.update.replace(':id', obj.id));
                serviceForm.attr('method', 'put');
                $(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).modal('show');
            }
        };



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

            $(document).on('click', '.getData', function (e) {
                var targetModal = $(this).data('target');
                wishDataModalShow(targetModal, {
                    id: $(this).data('el_id'),
                    name: $(this).data('el_name'),
                    link: $(this).data('el_link')
                });
            });

            $(document).on('blur', '#link', function () {
                var link = $(this).val();
                if (link && !link.startsWith('http://') && !link.startsWith('https://')) {
                    $(this).val('https://' + link);
                }
            });

            $(document).on('submit', '#wish-form', function (event) {
                submitModal(event, this, 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');
                    }
                });
                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);
                    },
                    error: function (xhr, status, error) {                        
                        $('.modal-info').addClass('modal-info-active');                        
                        console.error(xhr);
                    }
                });
            });
        });
    </script>
</x-layout>