@extends('layouts.master')
@section('css')


@section('title')
{{ __('home.templates') }}
@stop
@endsection

@section('content')
<div class="container mt-5">
    <form action="{{ route('templates.store') }}" method="POST">
        @csrf

        <div class="card mb-4">
            <div class="card-header bg-primary text-white">إضافة قالب ثوب جديد</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label>اسم القالب</label>
                        <input type="text" name="template_name" class="form-control" placeholder="مثلاً: ثوب سعودي مطرز" required>
                    </div>
                    <div class="col-md-12">
                        <label>ملاحظات</label>
                        <textarea name="notes" class="form-control" rows="2" placeholder="أي تفاصيل إضافية..."></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
                <span>مكونات القالب (المنتجات)</span>
                <button type="button" class="btn btn-sm btn-light" id="add-item"> + إضافة منتج</button>
            </div>
            <div class="card-body">
                <table class="table table-bordered" id="items-table">
                    <thead>
                        <tr>
                            <th>المنتج</th>
                            <th width="100">إجراء</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <select name="items[0][product_id]" class="form-control select2" required>
                                    <option value="">اختر المنتج</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="text-center">-</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <button type="submit" class="btn btn-success mt-3">حفظ البيانات</button>
    </form>
</div>

<script>
    let rowIdx = 1;
    document.getElementById('add-item').addEventListener('click', function() {
        let tableBody = document.querySelector('#items-table tbody');
        let newRow = `
            <tr>
                <td>
                    <select name="items[${rowIdx}][product_id]" class="form-control" required>
                        <option value="">اختر المنتج</option>
                        @foreach($products as $product)
                            <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                        @endforeach
                    </select>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm remove-row">حذف</button>
                </td>
            </tr>`;
        tableBody.insertAdjacentHTML('beforeend', newRow);
        rowIdx++;
    });

    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-row')) {
            e.target.closest('tr').remove();
        }
    });
</script>
@endsection