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


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

@section('content')
@if(session()->has('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>✅ تم بنجاح:</strong> {{ session()->get('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if(session()->has('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>❌ خطأ:</strong> {{ session()->get('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="container mt-5">
 <form action="{{ route('templates.update', $template->id) }}" method="POST">
    @csrf
    <div class="card mb-4">
        <div class="card-header bg-info text-white">تعديل قالب: {{ $template->template_name }}</div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-12 mb-3">
                    <label>اسم القالب</label>
                    <input type="text" name="template_name" value="{{ $template->template_name }}" class="form-control" required>
                </div>
                <div class="col-md-12">
                    <label>ملاحظات</label>
                    <textarea name="notes" class="form-control" rows="2">{{ $template->notes }}</textarea>
                </div>
            </div>
        </div>
    </div>

 <div class="card">
    <div class="card-header bg-secondary text-white d-flex justify-content-between">
        <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 text-center" id="items-table">
            <thead>
                <tr>
                    <th>المنتج</th>
                    <th width="150">إجراء</th> </tr>
            </thead>
            <tbody>
                @foreach($template->items as $index => $currentItem)
                <tr>
                    <td>
                        <select name="items[{{ $index }}][product_id]" class="form-control" required>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}" {{ $currentItem->product_id == $product->id ? 'selected' : '' }}>
                                    {{ $product->product_name }}
                                </option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm remove-row">حذف</button> </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
    <button type="submit" class="btn btn-primary mt-3">حفظ التغييرات</button>
</form>
</div>

<script>
    let rowIdx = {{ count($template->items) }};

    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>
                    <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