@extends('layouts.shop-control-layout')

@section('title', 'Редагувати інформацію')

@section('content')
    <div class="settings__page">
        <div class="setting__header">
            <h1 class="settings__title">Редагування інформації на сторінці</h1>
        </div>
        <div class="info__block">
            <div class="contacts__info">
                <div class="settings__title">
                    Контактна інформація
                </div>
                <div class="contacts__list">
                    <div class="contacts__item">
                        <img src="{{ asset('assets/footer/phone-icon.png') }}" alt="">
                        <p class="item__text">{{ $contactPhone['value'] }}</p>
                    </div>
                    <div class="contacts__item">
                        <img src="{{ asset('assets/footer/telegram-icon.png') }}" alt="">
                        <p class="item__text">{{ $contactTelegram['value'] }}</p>
                    </div>
                    <div class="contacts__item">
                        <img src="{{ asset('assets/footer/instagram-icon.png') }}" alt="">
                        <p class="item__text">{{ $contactInstagram['value'] }}</p>
                    </div>
                    <div class="contacts__item">
                        <img src="{{ asset('assets/footer/youtube-icon.png') }}" alt="">
                        <p class="item__text">{{ $contactYoutube['value'] }}</p>
                    </div>
                </div>
                <button class="settings__edit" id="contacts__edit">Редагувати</button>
            </div>
            <div class="contacts__info">
                <div class="settings__title">
                    Про нас
                </div>
                <div class="video-info__list">
                    <div class="video-info__item">
                        <p class="item__text">{{ $aboutUsVideo['value'] }}</p>
                    </div>
                    <div class="video-info__item">
                        <p class="item__text">{{ $aboutUsVideo['url'] }}</p>
                    </div>
                </div>
                <button class="settings__edit" id="video-info__edit">Редагувати</button>
            </div>
            <div class="photo-block">
                <div class="photos-grid">
                    @foreach ($clientPhotos as $photo)
                        <div class="photo-item" data-photo-id="{{ $photo->id }}">
                            <img src="{{ asset('assets/photogalary/' . $photo->photo_url) }}" alt="Client Photo">
                        </div>
                    @endforeach
                </div>
                <div class="photo-actions">
                    <button type="button" id="delete-selected" class="delete-photos__button">Видалити</button>
                    <button type="button" id="add-photo" class="add-photos__button">Додати</button>
                </div>
            </div>
        </div>
        <form class="contacts__update settings-update-form" action="{{ route('settings.update.contacts') }}"
            method="POST">
            @csrf
            <button type="button" class="close__button">
                <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1L26 26M26 1L1 26" stroke="black" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </button>
            <div class="form__info">
                <div class="form__group">
                    <label for="contact_phone">Телефон</label>
                    <div class="inputs__block">
                        <input type="text" id="contact_phone" name="contact_phone_value"
                            value="{{ $contactPhone['value'] }}">
                        <input type="text" id="contact_phone" name="contact_phone_url"
                            value="{{ $contactPhone['url'] }}">
                    </div>
                </div>
                <div class="form__group">
                    <label for="contact_telegram">Telegram</label>
                    <div class="inputs__block">
                        <input type="text" id="contact_telegram" name="contact_telegram_value"
                            value="{{ $contactTelegram['value'] }}">
                        <input type="text" id="contact_telegram" name="contact_telegram_url"
                            value="{{ $contactTelegram['url'] }}">
                    </div>
                </div>
                <div class="form__group">
                    <label for="contact_instagram">Instagram</label>
                    <div class="inputs__block">
                        <input type="text" id="contact_instagram" name="contact_instagram_value"
                            value="{{ $contactInstagram['value'] }}">
                        <input type="text" id="contact_instagram" name="contact_instagram_url"
                            value="{{ $contactInstagram['url'] }}">
                    </div>
                </div>
                <div class="form__group">
                    <label for="contact_youtube">Youtube</label>
                    <div class="inputs__block">
                        <input type="text" id="contact_youtube" name="contact_youtube_value"
                            value="{{ $contactYoutube['value'] }}">
                        <input type="text" id="contact_youtube" name="contact_youtube_url"
                            value="{{ $contactYoutube['url'] }}">
                    </div>
                </div>
                <button type="submit" class="save-contacts save-button">Зберегти</button>
            </div>
        </form>
        <form class="video-info__update settings-update-form" action="{{ route('settings.update.video') }}"
            method="POST">
            @csrf
            <button type="button" class="close__button">
                <svg width="27" height="27" viewBox="0 0 27 27" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1L26 26M26 1L1 26" stroke="black" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </button>
            <div class="form__info">
                <div class="form__group">
                    <label for="video__text">Текст</label>
                    <textarea name="video__text" id="video__text" cols="30" rows="10">{{ $aboutUsVideo['value'] }}</textarea>
                </div>
                <div class="form__group">
                    <label for="video__url">Посилання</label>
                    <input type="text" id="video__url" name="video__url" value="{{ $aboutUsVideo['url'] }}">
                </div>
                <button type="submit" class="save-video-info save-button">Зберегти</button>
            </div>
        </form>
        <form class="remove-photo" action="{{ route('settings.remove.photo') }}" method="POST"
            style="display: none">
            @csrf
            {{-- action="{{ route('settings.remove-photo') }}" --}}
            <input type="hidden" name="selected_photos" id="selected_photos" value="">
        </form>
        <form class="add-photo" action="{{ route('settings.add.photo') }}" method="POST"
            enctype="multipart/form-data" style="display: none">
            @csrf
            {{-- action="{{ route('settings.add-photo') }}" --}}
            <input type="file" id="add_photo_input" name="new_photos[]" accept="image/*" style="display: none;"
                multiple>
        </form>
        <script>
            function addEventOnForm(form, button) {
                button.addEventListener('click', () => {
                    form.classList.add('opened');
                });

                const closeButton = form.querySelector('.close__button');
                closeButton.addEventListener('click', () => {
                    form.classList.remove('opened');
                });
            }
            document.addEventListener('DOMContentLoaded', function() {
                const contactsEditForm = document.querySelector('.contacts__update');
                const contactsButton = document.getElementById('contacts__edit');
                addEventOnForm(contactsEditForm, contactsButton);

                const videoInfoEditForm = document.querySelector('.video-info__update');
                const videoInfoButton = document.getElementById('video-info__edit');
                addEventOnForm(videoInfoEditForm, videoInfoButton);

                /*---------------photos---------*/
                const photoItems = document.querySelectorAll('.photo-item');
                const deleteButton = document.getElementById('delete-selected');
                const selectedPhotosInput = document.getElementById('selected_photos');

                let selectedPhotos = new Set();

                photoItems.forEach(item => {
                    item.addEventListener('click', function() {
                        const photoId = this.getAttribute('data-photo-id');
                        if (selectedPhotos.has(photoId)) {
                            selectedPhotos.delete(photoId);
                            this.classList.remove('selected');
                        } else {
                            selectedPhotos.add(photoId);
                            this.classList.add('selected');
                        }
                        selectedPhotosInput.value = Array.from(selectedPhotos).join(',');
                    });
                });

                deleteButton.addEventListener('click', function() {
                    document.querySelector('.remove-photo').submit();
                });

                document.getElementById('add-photo').addEventListener('click', function() {
                    document.getElementById('add_photo_input')
                        .click();
                });

                document.getElementById('add_photo_input').addEventListener('change', function() {
                    document.querySelector('.add-photo').submit();
                });
            });
        </script>
    </div>
@endsection