@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h2>Редактировать товар: {{ $product->name }}</h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    {{-- Форма редактирования основных данных --}}
    <form action="{{ url('admin/products/'.$product->id.'/update') }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="mb-3">
            <label for="name" class="form-label">Название</label>
            <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $product->name) }}" required>
        </div>

        <div class="mb-3">
            <label for="description" class="form-label">Описание</label>
            <textarea class="form-control" id="description" name="description" rows="4" required>{{ old('description', $product->description) }}</textarea>
        </div>

        <div class="mb-3">
            <label for="full_description" class="form-label">Полное описание / характеристики</label>
            <textarea class="form-control" id="full_description" name="full_description" rows="6">{{ old('full_description', $product->full_description) }}</textarea>
        </div>

        <h4 class="mt-4">Варианты памяти</h4>
			<div id="memory-container">
				@foreach($product->variants as $index => $variant)
					<div class="card mb-3 p-3 memory-item" data-index="{{ $index }}">
						<input type="hidden" name="variants[{{ $index }}][id]" value="{{ $variant->id }}">

						<div class="mb-2">
							<label class="form-label">Память</label>
							<input type="text" class="form-control" name="variants[{{ $index }}][memory]" value="{{ $variant->memory }}">
						</div>

						<div class="mb-2">
							<label class="form-label">Цена</label>
							<input type="number" step="0.01" class="form-control" name="variants[{{ $index }}][price]" value="{{ $variant->price }}">
						</div>

						<div class="mb-2">
							<label class="form-label">Связанный товар (ID)</label>
							<input type="number" class="form-control" name="variants[{{ $index }}][related_product_id]" value="{{ $variant->related_product_id ?? '' }}" placeholder="ID другого товара">
						</div>

						<button type="button" class="btn btn-sm btn-danger remove-memory">Удалить вариант</button>
					</div>
				@endforeach
			</div>

			<button type="button" class="btn btn-success" id="add-memory">Добавить новый вариант памяти</button>


        <div class="mb-3">
            <label for="price" class="form-label">Цена</label>
            <input type="number" step="0.01" class="form-control" id="price" name="price" value="{{ old('price', $product->price) }}" required>
        </div>


		<div class="mb-3">
			<label class="form-label">Статусы товара</label>
			<div class="form-check">
				<input class="form-check-input" type="checkbox" name="statuses[]" value="new"
					{{ in_array('new', old('statuses', $product->statuses ?? [])) ? 'checked' : '' }}>
				<label class="form-check-label">Новинка</label>
			</div>

			<div class="form-check">
				<input class="form-check-input" type="checkbox" name="statuses[]" value="available"
					{{ in_array('available', old('statuses', $product->statuses ?? [])) ? 'checked' : '' }}>
				<label class="form-check-label">В наличии</label>
			</div>

			<div class="form-check">
				<input class="form-check-input" type="checkbox" name="statuses[]" value="out_of_stock"
					{{ in_array('out_of_stock', old('statuses', $product->statuses ?? [])) ? 'checked' : '' }}>
				<label class="form-check-label">Нет в наличии</label>
			</div>

			<div class="form-check">
				<input class="form-check-input" type="checkbox" name="statuses[]" value="top"
					{{ in_array('top', old('statuses', $product->statuses ?? [])) ? 'checked' : '' }}>
				<label class="form-check-label">Топ продаж</label>
			</div>
		</div>



        {{-- Форма для добавления нового цвета --}}
<h4 class="mt-4">Цвета</h4>

<div id="colors-container">
    @foreach($product->colors as $index => $color)
        <div class="card mb-3 p-3 color-item" data-index="{{ $index }}">
            <input type="hidden" name="colors[{{ $index }}][id]" value="{{ $color->id }}">

            <div class="mb-2">
                <label class="form-label">Название цвета</label>
                <input type="text" class="form-control" name="colors[{{ $index }}][name]" value="{{ $color->name }}">
            </div>

            <div class="mb-2">
                <label class="form-label">Связанный товар (ID)</label>
                <input type="number" class="form-control" 
                       name="colors[{{ $index }}][related_product_id]" 
                       value="{{ $color->related_product_id ?? '' }}" 
                       placeholder="ID другого товара">
            </div>

            <div class="mb-2">
                <label class="form-label">Изображения цвета</label>
                <input type="file" class="form-control" name="colors[{{ $index }}][images][]" multiple>
                @if($color->images)
                    <div class="mt-2 d-flex flex-wrap gap-2">
                        @foreach($color->images as $img)
                            <div class="text-center position-relative">
                                <img src="{{ asset('images/products/' . $img) }}" style="width:80px;" class="img-thumbnail">
                                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 remove-color-img" 
                                        data-img="{{ $img }}" data-color-id="{{ $color->id }}">×</button>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <button type="button" class="btn btn-sm btn-danger remove-color">Удалить цвет</button>
        </div>
    @endforeach
</div>

<button type="button" class="btn btn-success" id="add-color">Добавить новый цвет</button>



        <button type="submit" class="btn btn-primary">Обновить данные</button>
    </form>

    {{-- Существующие изображения товара --}}
    <h4>Основные изображения</h4>
    <div class="row mb-4">
        @php $images = json_decode($product->images, true) ?? []; @endphp
        @foreach($images as $img)
            <div class="col-md-3 mb-3 text-center">
                <img src="{{ asset('images/products/' . $img) }}" class="img-thumbnail" style="max-width:300px;">
                
                <form action="{{ url('admin/products/'.$product->id.'/delete-image') }}" method="POST" class="mt-2">
                    @csrf
                    <input type="hidden" name="image_name" value="{{ $img }}">
                    <button type="submit" class="btn btn-sm btn-danger mb-1" onclick="return confirm('Удалить это изображение?')">
                        Удалить
                    </button>
                </form>

                @if($img !== $images[0])
                    <form action="{{ url('admin/products/'.$product->id.'/set-main-image') }}" method="POST">
                        @csrf
                        <input type="hidden" name="image_name" value="{{ $img }}">
                        <button type="submit" class="btn btn-sm btn-primary">Сделать главной</button>
                    </form>
                @else
                    <span class="badge bg-success">Главная</span>
                @endif
            </div>
        @endforeach
    </div>

    {{-- Загрузка новых изображений --}}
    <form action="{{ url('admin/products/'.$product->id.'/update-images') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-3">
            <label for="images" class="form-label">Добавить новые изображения</label>
            <input type="file" class="form-control" id="images" name="images[]" multiple>
        </div>
        <button class="btn btn-success">Загрузить</button>
    </form>

{{-- Отзывы клиентов --}}
<h4 class="mt-5">Отзывы клиентов</h4>

<div class="mb-3">
    <a href="{{ route('admin.reviews.create') }}" class="btn btn-success mb-3">Добавить отзыв для этого товара</a>
</div>

@php
    $reviews = $product->reviews ?? [];
@endphp

@if(count($reviews))
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Автор</th>
                <th>Рейтинг</th>
                <th>Отзыв</th>
                <th>Дата</th>
                <th>Действия</th>
            </tr>
        </thead>
        <tbody>
            @foreach($reviews as $review)
            <tr>
                <td>{{ $review->id }}</td>
                <td>{{ $review->author }}</td>
                <td>
                    @for($i=0; $i < $review->rating; $i++)
                        ⭐
                    @endfor
                </td>
                <td>{{ $review->review }}</td>
                <td>{{ $review->created_at->format('d.m.Y') }}</td>
                <td>
                    <a href="{{ route('admin.reviews.edit', $review) }}" class="btn btn-sm btn-primary">Редактировать</a>
                    <form action="{{ route('admin.reviews.delete', $review) }}" method="POST" style="display:inline-block;">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-sm btn-danger" onclick="return confirm('Удалить отзыв?')">Удалить</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
@else
    <p>Для этого товара пока нет отзывов.</p>
@endif





    <a href="{{ url('admin/products') }}" class="btn btn-secondary mt-4">Назад к списку товаров</a>
</div>


<script>
let memoryIndex = {{ $product->variants->count() }};

// Добавление нового варианта памяти
document.getElementById('add-memory').addEventListener('click', function() {
    const container = document.getElementById('memory-container');
    const html = `
    <div class="card mb-3 p-3 memory-item" data-index="${memoryIndex}">
        <div class="mb-2">
            <label class="form-label">Память</label>
            <input type="text" class="form-control" name="variants[${memoryIndex}][memory]" value="">
        </div>
        <div class="mb-2">
            <label class="form-label">Цена</label>
            <input type="number" step="0.01" class="form-control" name="variants[${memoryIndex}][price]" value="">
        </div>
        <div class="mb-2">
            <label class="form-label">Связанный товар (ID)</label>
            <input type="number" class="form-control" name="variants[${memoryIndex}][related_product_id]" value="" placeholder="ID другого товара">
        </div>
        <button type="button" class="btn btn-sm btn-danger remove-memory">Удалить вариант</button>
    </div>`;
    container.insertAdjacentHTML('beforeend', html);
    memoryIndex++;
});

// Удаление варианта памяти
document.getElementById('memory-container').addEventListener('click', function(e){
    if(e.target.classList.contains('remove-memory')){
        e.target.closest('.memory-item').remove();
    }
});

let colorIndex = {{ $product->colors->count() }};

// --- Добавление нового цвета ---
document.getElementById('add-color').addEventListener('click', function() {
    const container = document.getElementById('colors-container');
    const html = `
    <div class="card mb-3 p-3 color-item">
        <div class="mb-2">
            <label class="form-label">Название цвета</label>
            <input type="text" class="form-control" name="colors[${colorIndex}][name]" value="">
        </div>
        <div class="mb-2">
            <label class="form-label">Связанный товар (ID)</label>
            <input type="number" class="form-control" name="colors[${colorIndex}][related_product_id]" value="" placeholder="ID другого товара">
        </div>
        <div class="mb-2">
            <label class="form-label">Изображения цвета</label>
            <input type="file" class="form-control" name="colors[${colorIndex}][images][]" multiple>
            <div class="mt-2 d-flex flex-wrap gap-2 new-color-images"></div>
        </div>
        <button type="button" class="btn btn-sm btn-danger remove-color">Удалить цвет</button>
    </div>`;
    container.insertAdjacentHTML('beforeend', html);
    colorIndex++;
});

// --- Удаление цвета и изображений ---
document.getElementById('colors-container').addEventListener('click', function(e){
    const target = e.target;

    // Удаление цвета
    if(target.classList.contains('remove-color')){
        target.closest('.color-item').remove();
        return;
    }

    // Удаление изображения цвета (класс должен совпадать!)
    if(target.classList.contains('remove-color-img')){
        const btn = target;
        const imgName = btn.dataset.img;
        const colorId = btn.dataset.colorId;

        if(!colorId){
            // Новый цвет — удаляем только из DOM
            btn.parentElement.remove();
            return;
        }

        if(confirm('Удалить это изображение?')){
            fetch(`/admin/products/{{ $product->id }}/colors/delete-image`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ color_id: colorId, image_name: imgName })
            })
            .then(res => res.json())
            .then(data => {
                console.log(data); // для отладки
                if(data.success){
                    btn.parentElement.remove();
                } else {
                    alert(data.message || 'Ошибка при удалении');
                }
            })
            .catch(err => console.error('Ошибка запроса:', err));
        }
    }
});
</script>



@endsection