@extends('layouts.main')

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

@section('title', 'Добавить товар')

@section('content')
    <div class="container mt-3 ms-2">
        <form action="{{ route('site.menu.products.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            <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') == $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') }}" 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') }}</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') ? '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') ? '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') }}" 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') }}" 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('variation_volume_id') && old('variations_price'))
                                    @foreach(old('variation_volume_id') as $index => $volume_id)
                                        @include('site.menu.products.volume-form', [
                                            'variation' => ['volume_id' => $volume_id, 'price' => old('variations_price')[$index]],
                                            'index' => $index
                                        ])
                                    @endforeach
                                @endif
                            </div>
                            @if ($errors->has('variations'))<div class="text-danger">{{ $errors->first('variations') }}</div>@endif
                            <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">
                        <div id="preview" class="text-center d-flex flex-column align-items-center justify-content-center">
                            <img src="" alt="Предпросмотр картинки" class="img-fluid rounded" style="max-height: 300px; display: none;" id="imagePreview">
                            <p class="text-muted" id="noImageText">Изображение не выбрано</p>
                        </div>
                    </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.style.display = 'block';
                    noImageText.style.display = 'none';
                };
                reader.readAsDataURL(file);
            } else {
                preview.src = '';
                preview.style.display = 'none';
                noImageText.style.display = 'block';
            }
        });
    </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