@extends('layouts.admin', ['title' => 'Партнёры'])

@section('content')
    <div class="content__wrapper content__wrapper--editor">
        <div class="block">
            <div class="block__wrapper block__wrapper--big">
                <a href="/admin" class="content__back text text--small text--medium text--grey--lighter">Вернуться
                    назад</a>
                <div class="settings-filter">
                    <a href="#"
                       onclick="openPopup()"
                       class="settings-filter__button button button--base button--base--middle button--base--small--radius button--full button--white">Добавить
                        +</a>
                </div>
                <div class="block__wrapper">
                    <div class="block__item">
                        <div class="grid grid--partners">
                            @foreach($partners as $partner)
                                <a onclick="openPopup({{$partner->id}}, '{{$partner->position}}', '{{$partner->picture}}')" class="card">
                                    <div class="card__wrapper">
                                        <img src="{{$partner->picture}}" alt="" class="icon">
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="popup popup--modal popup-partners-add">
        <div class="popup__wrapper popup__wrapper--modal">
            <div class="popup__container popup__container--modal card">
                <div class="card__wrapper card__wrapper--full card__wrapper--big card__wrapper--radius--middle">
                    <form
                        method="POST"
                        action="{{route('admin.partners.store')}}"
                        class="card__column card__column--big">
                        @csrf
                        @method('PUT')
                        <label class="input-wrapper">
                            <p class="text text--tiny text--grey--light">
                                Позиция на главной</p>
                            <input type="text"
                                   name="position"
                                   class="input input--light input--small" value="">
                        </label>
                        <div class="input-wrapper">
                            <p class="text text--tiny text--grey--light">
                                Изображение</p>
                            <div class="input-wrapper__column">
                                <div class="input input--light input--img">
                                    <img src="" alt="" id="picture">
                                </div>
                                <div class="grid grid--column--two">
                                    <a onclick="clearImage()"
                                            class="button button--tiny button--tiny--mobile--small button--red  button--full">
                                        Удалить
                                    </a>
                                    <label
                                        class="file-input button button--tiny button--tiny--mobile--small button--bordered--blue button--full">
                                        <input type="hidden" name="picture">
                                        <input type="file" id="" class="file-input__item" data-set-value="picture" data-preview="picture">
                                        <span>Загрузить</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <button type="submit"
                                class="button button--tiny button--tiny--mobile--small button--green button--full">
                            Сохранить
                        </button>
                        <a href="#" onclick="closePopup()" class="popup-close text--center text text--tiny text--grey--white">
                            Отменить
                        </a>
                    </form>
                    <form method="POST"
                          id="form-delete"
                          style="width: 100%; text-align: center; margin-top: 10px;"
                          action="#">
                        @method('DELETE')
                        <button type="submit" class="text--center text text--tiny text--red">
                            Удалить
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        function clearImage() {
            document.querySelector('.file-input__item').value = '';
            document.querySelector('#picture').src = '';
        }

        function openPopup(id, position, picture) {
            const popup = document.querySelector('.popup');
            const form = document.querySelector('form');
            const form_delete = document.querySelector('form#form-delete')

            if(id !== undefined) {
                form.action = '/admin/partners/' + id;
                form.querySelector('[name="_method"]').value = 'PUT';

                form_delete.style.display = 'block';
                form_delete.action = '/admin/partners/' + id;

                popup.querySelector('[name="position"]').value = position;
                popup.querySelector('[name="picture"]').value = picture;
                popup.querySelector('#picture').src = picture;
            } else {
                form.action = '{{route('admin.partners.index')}}';
                form_delete.style.display = 'none';
                form.querySelector('[name="_method"]').value = null;
                popup.querySelector('[name="position"]').value = '';
                popup.querySelector('[name="picture"]').value = '';
                popup.querySelector('#picture').src = '';
            }

            popup.classList.add('popup--active');
        }

        function closePopup() {
            const popup = document.querySelector('.popup')
            popup.classList.remove('popup--active');
        }
    </script>
@endsection