@extends('admin.layouts.master')

@section('title', 'إضافة حزمة جديدة')

@section('css')
@include('admin.layouts.css')
@endsection

@section('body')

<div class="page-body">
    <div class="container-fluid">

        <div class="page-header">
            <h3 style="font-family: Cairo">إضافة الحزمة جديدة</h3>
        </div>

        <div class="card">
            <div class="card-body">

                <form method="POST" action="{{ route('admin.SubPackages.store') }}">
                    @csrf

                    {{-- اسم الباقة --}}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label>اسم الحزمة</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>

                        <div class="col-md-6">
                            <label>الوصف</label>
                            <textarea name="description" class="form-control"></textarea>
                        </div>
                         <div class="col-md-6">
                            <label>اختر الباقة التابعة للحزمة</label>
                            <select name="parent_id" class="form-control" required>
                                <option value="">اختر</option>
                                @foreach($parentPackages as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <hr>

                    {{-- زر إضافة Category --}}
                    <button type="button" class="btn btn-success mb-3" id="add-category">
                        + إضافة عناصر
                    </button>

                    {{-- مكان الـ Categories --}}
                    <div id="categories-wrapper"></div>

                    <hr>

                    <button type="submit" class="btn btn-primary">
                        حفظ الحزمة
                    </button>

                </form>

            </div>
        </div>

    </div>
</div>

@endsection

@section('js')
@include('admin.layouts.js')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
let categoryIndex = 0;

/* =======================
   إضافة Category
======================= */
$('#add-category').on('click', function () {

    let html = `
    <div class="card mb-4 category-box">
        <div class="card-header d-flex justify-content-between align-items-center">
            <strong>تصنيف</strong>
            <button type="button" class="btn btn-danger btn-sm remove-category">حذف</button>
        </div>

        <div class="card-body">

            <div class="mb-3">
                <label>اختر التصنيف</label>
                <select name="categories[${categoryIndex}][package_category_id]" class="form-control" required>
                    <option value="">اختر</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="items-wrapper"></div>

            <button type="button" class="btn btn-primary btn-sm add-item">
                + إضافة عنصر
            </button>

        </div>
    </div>
    `;

    $('#categories-wrapper').append(html);
    categoryIndex++;
});

/* =======================
   إضافة عنصر
======================= */
$(document).on('click', '.add-item', function () {

    let categoryBox = $(this).closest('.category-box');
    let itemsWrapper = categoryBox.find('.items-wrapper');
    let catIndex = $('#categories-wrapper .category-box').index(categoryBox);
    let itemIndex = itemsWrapper.children().length;

    let html = `
    <div class="row border p-2 mb-2 item-row">

     

        <div class="col-md-4">
            <label>المنتج / القطعة</label>

            <!-- input اللي المستخدم بيكتب فيه -->
            <input 
                type="text"
                class="form-control spare-input"
                list="parts-${catIndex}-${itemIndex}"
                placeholder="اكتب للبحث"
                data-hidden="spare-${catIndex}-${itemIndex}"
            >

            <!-- input مخفي يتبعت للسيرفر -->
            <input 
                type="hidden"
                name="categories[${catIndex}][items][${itemIndex}][spare_part_id]"
                id="spare-${catIndex}-${itemIndex}"
            >

            <datalist id="parts-${catIndex}-${itemIndex}">
                @foreach($spareParts as $part)
                    <option 
                        value="{{ $part->getTranslation('name','ar') }}"
                        data-id="{{ $part->id }}">
                    </option>
                @endforeach
            </datalist>
        </div>



        <div class="col-md-2">
            <label>السعر</label>
            <input type="number" name="categories[${catIndex}][items][${itemIndex}][price]" class="form-control">
        </div>

        <div class="col-md-2">
            <label>رئيسي</label><br>
            <input type="checkbox" name="categories[${catIndex}][items][${itemIndex}][is_main]" value="1">
        </div>

        <div class="col-md-2">
            <label>بديل</label><br>
            <input type="checkbox" name="categories[${catIndex}][items][${itemIndex}][is_installation]" value="1">
        </div>

        <div class="col-md-2">
            <button type="button" class="btn btn-danger mt-4 remove-item">
                حذف
            </button>
        </div>

    </div>
    `;

    itemsWrapper.append(html);
});

/* =======================
   حذف Category
======================= */
$(document).on('click', '.remove-category', function () {
    $(this).closest('.category-box').remove();
});

/* =======================
   حذف عنصر
======================= */
$(document).on('click', '.remove-item', function () {
    $(this).closest('.item-row').remove();
});
document.addEventListener('input', function (e) {
    if (!e.target.classList.contains('spare-input')) return;

    let listId = e.target.getAttribute('list');
    let hiddenInput = document.getElementById(e.target.dataset.hidden);

    hiddenInput.value = '';

    document.querySelectorAll(`#${listId} option`).forEach(option => {
        if (option.value === e.target.value) {
            hiddenInput.value = option.dataset.id;
        }
    });
});

</script>

@endsection