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

@section('title', 'Редагувати товар')

@section('content')
    <div class="edit-product__page">
        <div class="edit-product__header">
            <h1 class="edit-product__title">
                Редагувати товар #{{ $product->product_id }}
            </h1>
        </div>
        <form class="edit-product__form" action="{{ route('products.update', ['product' => $product->product_id]) }}"
            method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="edit-form__row">
                <div class="form__group">
                    <label for="name">Назва</label>
                    <input type="text" id="name" name="name" value="{{ old('name', $product->name) }}" required>
                </div>
                <div class="form__group">
                    <label for="price">Ціна</label>
                    <input type="text" id="price" name="price" value="{{ old('price', $product->price) }}"
                        required>
                </div>
            </div>
            <div class="edit-form__row">
                <div class="form__group">
                    <label for="description">Опис</label>
                    <textarea id="description" name="description">{{ old('description', $product->description) }}</textarea>
                </div>
            </div>
            <div class="edit-form__row">
                <div class="form__group">
                    <label for="category_id">Категорія</label>
                    <select id="category_id" name="category_id" required>
                        @foreach ($categories as $category)
                            <option value="{{ $category->category_id }}"
                                {{ $product->category_id == $category->category_id ? 'selected' : '' }}>
                                {{ $category->category_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form__group">
                    <label for="quantity_in_stock">Кількість в наявності</label>
                    <input type="number" id="quantity_in_stock" name="quantity_in_stock"
                        value="{{ old('quantity_in_stock', $product->quantity_in_stock) }}" required>
                </div>
            </div>

            <div class="edit-form__row">
                <div class="form__group">
                    <label for="availability_status">Статус</label>
                    <div class="status__block">
                        <input type="hidden" name="availability_status" value="0">
                        <input type="checkbox" id="availability_status" name="availability_status" value="1"
                            {{ $product->availability_status == 'В наявності' ? 'checked' : '' }}>
                        <label for="availability_status">В наявності</label>
                    </div>
                </div>
            </div>
            <div class="edit-form__row">
                <div class="form__group">
                    <label for="productPhotos">Зображення</label>
                    <input type="file" id="productPhotos" name="productPhotos[]" multiple>
                </div>
            </div>
            <div class="edit-form__row">
                <div class="images-row">

                    @foreach ($product->productPhotos as $photo)
                        <div class="image__item">
                            <div class="image__block">
                                <img src="{{ asset('products/' . $photo->photo_url) }}" width="100" alt="Product Photo">
                            </div>
                            <button type="button" class="delete-photo-btn"
                                data-photo-id="{{ $photo->photo_id }}">Видалити</button>
                        </div>
                    @endforeach
                </div>
            </div>
            <button type="submit" class="save-product">Зберегти</button>
        </form>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.delete-photo-btn').forEach(button => {
                    button.addEventListener('click', function() {
                        const photoId = this.getAttribute('data-photo-id');
                        var metaTag = document.querySelector('meta[name="csrf-token"]');
                        var csrfToken = metaTag.getAttribute('content');
                        metaTag.parentNode.removeChild(metaTag);
                        if (confirm('Ви впевнені, що хочете видалити це зображення?')) {
                            fetch(`/product-photos/${photoId}`, {
                                    method: 'DELETE',
                                    headers: {
                                        'X-CSRF-TOKEN': csrfToken
                                    }
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        location.reload();
                                    } else {
                                        alert('Помилка при видаленні зображення.');
                                    }
                                });
                        }
                    });
                });
            })
        </script>
    </div>

@endsection