@extends('layouts.main')

@section('return_btn_url') @include('layouts.return-btn', ['routeName' => 'site.menu.products.index']) @endsection

@section('title', 'Изменить товар "' . $product->title . '"')

@section('content')
    <div class="container mt-3 ms-2">
        <form action="{{ route('site.menu.products.update', $product->id) }}" method="post" enctype="multipart/form-data">
            @csrf
            @method('PATCH')
            <div class="row d-flex">
                <div class="col-md-6">

                    <div class="mb-3">
                        <select class="form-select @error('category_id') is-invalid @enderror" name="category_id" id="category_id">
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title', $product->title) }}" placeholder="Введите название товара">

                        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <textarea class="form-control @error('description') is-invalid @enderror" name="description" rows="5" placeholder="Описание товара">{{ old('description', $product->description) }}</textarea>
                        @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3 mt-2 switch-wrapper">
                        <label class="switch-label">
                            <input type="checkbox" name="is_only_here" {{ old('is_only_here', $product->is_only_here) ? 'checked' : '' }} class="switch-checkbox">
                            <span class="switch-slider"></span>
                            <span class="switch-text">Эксклюзивно в кофебон</span>
                        </label>
                    </div>

                    <div class="mb-3 mt-2 switch-wrapper">
                        <label class="switch-label">
                            <input id="tabToggle" type="checkbox" name="has_volumes"
                                   {{ old('has_volumes', $product->has_volumes) ? 'checked' : '' }}
                                   class="switch-checkbox" onclick="toggleTab()">
                            <span class="switch-slider"></span>
                            <span class="switch-text">Несколько объемов</span>
                        </label>
                    </div>

                    <div id="basic" class="product-tab-content active">
                        <div class="mb-3">
                            <input type="text" class="form-control @error('price') is-invalid @enderror" name="price" value="{{ old('price', $product->price) }}" placeholder="Укажите цену">

                            @error('price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control @error('size') is-invalid @enderror" name="size" value="{{ old('size', $product->size) }}" placeholder="Укажите вес/объем">

                            @error('size')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div id="volumes" class="product-tab-content">
                        <div class="mb-3">
                            <div id="priceVariations">
                                @if(old('variations', $product->volumes))
                                    @foreach(old('variations', $product->volumes->toArray()) as $index => $variation)
                                        @include('site.menu.products.volume-form', [
                                            'variation' => $variation['pivot'] ?? [],
                                            'index' => $index
                                        ])
                                    @endforeach
                                @endif
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-danger mt-2" id="addVariation">Добавить объем</button>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-danger w-100">Добавить</button>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <input accept="image/*" type="file" class="form-control @error('img') is-invalid @enderror" name="img" id="img">
                        @error('img')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="border rounded p-3 bg-light position-relative">
                        <div id="preview" class="text-center d-flex flex-column align-items-center justify-content-center">
                            <img src="{{ $product->img_url }}" alt="Предпросмотр картинки" class="img-fluid rounded @if(!$product->img_url) d-none @endif" style="max-height: 300px;" id="imagePreview">
                            @if (!$product->img_url)
                                <p class="text-muted mb-0" id="noImageText">Изображение не выбрано</p>
                            @endif
                        </div>

                        @if ($product->img)
                            <div class="position-absolute bottom-0 start-0 p-2">
                                <a href="{{ route('site.menu.products.delete-img', $product->id) }}" class="btn btn-outline-danger">Удалить</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </div>
    <template id="variationTemplate">
        @include('site.menu.products.volume-form')
    </template>
@endsection
@section('scripts')
    @parent
    <script>
        document.getElementById('img').addEventListener('change', function () {
            const file = this.files[0];
            const preview = document.getElementById('imagePreview');
            const noImageText = document.getElementById('noImageText');

            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.classList.remove('d-none');
                    noImageText.classList.add('d-none');
                };
                reader.readAsDataURL(file);
            } else {
                preview.src = '';
            }
        });
    </script>
    <script>
        function toggleTab() {
            const checkbox = document.getElementById('tabToggle');
            const basicTab = document.getElementById('basic');
            const volumesTab = document.getElementById('volumes');

            const isChecked = checkbox.checked;

            basicTab.classList.toggle('active', !isChecked);
            volumesTab.classList.toggle('active', isChecked);
        }
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('tabToggle').addEventListener('change', toggleTab);
            toggleTab();
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const addBtn = document.getElementById('addVariation');
            const container = document.getElementById('priceVariations');

            addBtn.addEventListener('click', function() {
                const template = document.getElementById('variationTemplate');
                const clone = template.content.cloneNode(true);
                container.appendChild(clone);
            });

            container.addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-variation')) {
                    e.target.closest('.variation-item').remove();
                }
            });
        });
    </script>
@endsection