@extends('layout')

@section('main')
<div class="py-4">
    <h2 class="mb-4 text-center">📝 상품 일괄 추가</h2>

    {{-- 에러 메시지 종합 출력 --}}
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="post" action="{{ route('product.store') }}" enctype="multipart/form-data">
        @csrf
        
        <div class="table-responsive">
            <table class="table table-bordered align-middle" id="productTable">
                <thead class="table-light text-center">
                    <tr>
                        <th style="width: 150px;">분류 (Category)</th>
                        <th style="width: 150px;">상품명 <span class="text-danger">*</span></th>
                        <th style="width: 120px;">상품코드 <span class="text-danger">*</span></th>
                        <th style="width: 120px;">제조사</th>
                        <th style="width: 100px;">단가 <span class="text-danger">*</span></th>
                        <th style="width: 80px;">수량</th>
                        <th>이미지</th>
                        <th style="width: 60px;">삭제</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- 초기 1개 행 --}}
                    <tr class="product-row">
                        <td>
                            <select name="products[0][category]" class="form-select">
                                <option value="">(선택)</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->name }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td><input type="text" name="products[0][name]" class="form-control" required placeholder="상품명"></td>
                        <td><input type="text" name="products[0][sku]" class="form-control" required placeholder="고유코드"></td>
                        <td><input type="text" name="products[0][manufacturer]" class="form-control" placeholder="제조사"></td>
                        <td><input type="number" name="products[0][price]" class="form-control" required min="0" placeholder="0"></td>
                        <td><input type="number" name="products[0][quantity]" class="form-control" min="0" placeholder="0"></td>
                        <td><input type="file" name="products[0][image]" class="form-control"></td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-danger remove-row" disabled>-</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-between mt-3">
            <button type="button" class="btn btn-secondary" id="addRowBtn">+ 행 추가</button>
            <div>
                <a href="{{ route('product') }}" class="btn btn-outline-secondary me-2">취소</a>
                <button class="btn btn-primary">일괄 저장</button>
            </div>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let rowIndex = 1;
        const tableBody = document.querySelector('#productTable tbody');
        const addRowBtn = document.getElementById('addRowBtn');

        // 행 추가
        addRowBtn.addEventListener('click', function() {
            const template = `
                <tr class="product-row">
                    <td>
                        <select name="products[${rowIndex}][category]" class="form-select">
                            <option value="">(선택)</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->name }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td><input type="text" name="products[${rowIndex}][name]" class="form-control" required placeholder="상품명"></td>
                    <td><input type="text" name="products[${rowIndex}][sku]" class="form-control" required placeholder="고유코드"></td>
                    <td><input type="text" name="products[${rowIndex}][manufacturer]" class="form-control" placeholder="제조사"></td>
                    <td><input type="number" name="products[${rowIndex}][price]" class="form-control" required min="0" placeholder="0"></td>
                    <td><input type="number" name="products[${rowIndex}][quantity]" class="form-control" min="0" placeholder="0"></td>
                    <td><input type="file" name="products[${rowIndex}][image]" class="form-control"></td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-danger remove-row">-</button>
                    </td>
                </tr>
            `;
            tableBody.insertAdjacentHTML('beforeend', template);
            rowIndex++;
            updateRemoveButtons();
        });

        // 행 삭제
        tableBody.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-row')) {
                const row = e.target.closest('tr');
                // 최소 1개 행 유지
                if (document.querySelectorAll('.product-row').length > 1) {
                    row.remove();
                    updateRemoveButtons();
                }
            }
        });

        function updateRemoveButtons() {
            const rows = document.querySelectorAll('.product-row');
            const buttons = document.querySelectorAll('.remove-row');
            
            if (rows.length === 1) {
                buttons[0].disabled = true;
            } else {
                buttons.forEach(btn => btn.disabled = false);
            }
        }
    });
</script>
@endsection