@extends('layouts.app')

@section('content')
    <h1>Добавить товар</h1>
    <form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-3">
            <label for="name" class="form-label">Название</label>
            <input type="text" name="name" id="name" class="form-control" required>
            @error('name')
                <div class="text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-3">
            <label for="description" class="form-label">Описание</label>
            <div id="editor"></div>
            <input type="hidden" name="description" id="description">
            @error('description')
                <div class="text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-3">
    <label for="currency" class="form-label">Валюта</label>
    <select name="currency" id="currency" class="form-select" required>
        <option value="UAH" {{ old('currency', $product->currency ?? 'UAH') == 'UAH' ? 'selected' : '' }}>₴ Гривна</option>
        <option value="USD" {{ old('currency', $product->currency ?? '') == 'USD' ? 'selected' : '' }}>$ Доллар</option>
        <option value="EUR" {{ old('currency', $product->currency ?? '') == 'EUR' ? 'selected' : '' }}>€ Евро</option>
    </select>
    @error('currency')
        <div class="text-danger mt-1">{{ $message }}</div>
    @enderror
</div>

        <div class="mb-3">
            <label for="price" class="form-label">Цена</label>
            <input type="number" name="price" id="price" class="form-control" required min="0">
            @error('price')
                <div class="text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-3">
            <label for="new_price" class="form-label">Акционная цена</label>
            <input type="number" name="new_price" id="new_price" class="form-control" min="0">
            @error('new_price')
                <div class="text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-3">
            <label for="is_popular" class="form-check-label">Популярный товар</label>
            <input type="checkbox" name="is_popular" id="is_popular" class="form-check-input" value="1">
            @error('is_popular')
                <div class="text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-3">
            <label for="category_id" class="form-label">Категория</label>
            <select name="category_id" id="category_id" class="form-select" required>
                <option value="">Выберите категорию</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}">{{ str_repeat('—', $category->depth ?? 0) }} {{ $category->name }}</option>
                @endforeach
            </select>
            @error('category_id')
                <div class="text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-3">
    <label for="manufacturer_id" class="form-label">Виробник</label>
    <select name="manufacturer_id" id="manufacturer_id" class="form-select">
        <option value="">Без виробника</option>
        {{-- сюда будут подгружаться виробники через JS --}}
    </select>
    @error('manufacturer_id')
        <div class="text-danger mt-1">{{ $message }}</div>
    @enderror
</div>
        <div class="mb-3">
            <label for="image" class="form-label">Изображение</label>
            <input type="file" name="image" id="image" class="form-control" accept="image/*">
            @error('image')
                <div class="text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-3">
    <label for="in_stock" class="form-label">Наявність</label>
    <select name="in_stock" id="in_stock" class="form-select">
        <option value="1" {{ old('in_stock', $product->in_stock ?? 1) ? 'selected' : '' }}>В наявності</option>
        <option value="0" {{ old('in_stock', $product->in_stock ?? 1) == 0 ? 'selected' : '' }}>Немає</option>
    </select>
</div>

<div class="mb-3">
    <label for="fraction" class="form-label">Фракція</label>
    <select name="fraction" id="fraction" class="form-select">
        <option value="">—</option>
        <option value="стандарт" {{ old('fraction', $product->fraction ?? '') == 'стандарт' ? 'selected' : '' }}>Стандарт</option>
        <option value="екстра" {{ old('fraction', $product->fraction ?? '') == 'екстра' ? 'selected' : '' }}>Екстра</option>
    </select>
</div>

<div class="mb-3">
    <label for="production_year" class="form-label">Рік виробництва</label>
    <input type="number" name="production_year" id="production_year" 
           class="form-control"
           value="{{ old('production_year', $product->production_year ?? '') }}"
           min="2000" max="{{ date('Y') }}">
</div>

<button type="submit" class="btn btn-primary" onclick="beforeSubmit()">Сохранить</button>

    </form>

<script>
    var quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                [{'list': 'ordered'}, {'list': 'bullet'}],
                ['link', 'image']
            ]
        }
    });

    function beforeSubmit() {
        var description = document.querySelector('#description');
        description.value = quill.root.innerHTML;
    }

document.addEventListener('DOMContentLoaded', function () {
    const categorySelect = document.getElementById('category_id');
    const manufacturerSelect = document.getElementById('manufacturer_id');

    async function loadManufacturers(categoryId) {
        manufacturerSelect.innerHTML = '<option value="">Завантаження...</option>';
        if (!categoryId) {
            manufacturerSelect.innerHTML = '<option value="">Без виробника</option>';
            return;
        }

        try {
            const res = await fetch('/admin/manufacturers/by-category/' + categoryId);
            if (!res.ok) throw new Error('Network error');
            const data = await res.json();

            manufacturerSelect.innerHTML = '<option value="">Без виробника</option>';
            data.forEach(item => {
                const opt = document.createElement('option');
                opt.value = item.id;
                opt.textContent = item.name;
                manufacturerSelect.appendChild(opt);
            });
        } catch (e) {
            manufacturerSelect.innerHTML = '<option value="">Помилка завантаження</option>';
            console.error(e);
        }
    }

    categorySelect.addEventListener('change', function () {
        loadManufacturers(this.value);
    });
});
</script>

@endsection