@extends('admin.layouts.master')

@section('css')
    {{-- Use shared light form styles (includes Select2) --}}
    @include('admin.helper.formscss')
@endsection

@section('page-header')
    <!-- breadcrumb -->

    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> اضافة منتج </h4>
            </div>
        </div>
    </div>

    <!-- breadcrumb -->
@endsection

@section('content')
    <div id='pageid'>

        <div>
            <div class="row">

                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">

                    <!--div-->

                    <form id='new-prod' enctype="multipart/form-data">
                        @csrf
                        <div class="card">
                            <div class="card-body">
                                <div class="row row-sm">

                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label">الإسم </label>
                                        <div id="unit-preview" class="alert alert-info py-2 mb-2" style="display: none;">
                                            📦 <span id="preview-text"></span>
                                        </div>
                                        <input required class="form-control" id="product-name-input" name="name" value="" type="text">
                                        <small id="unit-hint" class="text-muted" style="display: none;">💡 سيتم حفظ الاسم كـ "<span id="hint-text"></span>" في النظام</small>
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label> الالعاب </label>
                                        <select class="form-control select2" name='game_id' style="width: 100%;height:45px">
                                            <option selected value=" ">اختر </option>
                                            @foreach (\App\Models\Game::all() as $us)
                                                <option value="{{ $us->id }}"> {{ $us->name }} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label">السعر </label>
                                        <input required class="form-control" name="price" value="" type="number"
                                            step="0.01">
                                    </div>
                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label">اقل كمية </label>
                                        <input required class="form-control" name="min_value" value="" type="number"
                                            step="0.01">
                                    </div>

                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label">اقصى كمية </label>
                                        <input required class="form-control" name="max_value" value="" type="number"
                                            step="0.01">
                                    </div>

                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label">نوع المنتج</label>
                                        <select name="type" class="form-control" required
                                            onchange="toggleBundleSection(this.value)">
                                            <option value="single">منتج منفرد</option>
                                            <option value="bundle">حزمة منتجات</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label">الوصف</label>
                                        <textarea class="form-control" name="description" rows="3"></textarea>
                                    </div>

                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label">الجهاز</label>
                                        <input class="form-control" name="device" type="text">
                                    </div>

                                    <!-- Bundle Items Section -->
                                    <div id="bundle-section" class="col-12 mt-3" style="display: none;">
                                        <div class="card">
                                            <div class="card-header">
                                                <h5>منتجات الحزمة</h5>
                                                <button type="button" class="btn btn-sm btn-primary"
                                                    onclick="addBundleItem()">
                                                    <x-lucide-plus width="20" height="20" /> إضافة منتج
                                                </button>
                                            </div>
                                            <div class="card-body">
                                                <div id="bundle-items-container">
                                                    <!-- Bundle items will be added here dynamically -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mt-3">
                                        <p class="mt-0">حالة النشاط</p>
                                        <select name="isActive" class="form-control" required>
                                            <option value="1">مفعل</option>
                                            <option value="0">غير مفعل</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-6 mt-3">
                                        <p class="mt-0">خاص/عام</p>
                                        <select name="isPrivate" class="form-control" required>
                                            <option value="0">عام</option>
                                            <option value="1">خاص</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mt-3">
                                        <p class="mt-0">بطاقة</p>
                                        <select name="isCard" class="form-control">
                                            <option value="0">لا</option>
                                            <option value="1">نعم</option>
                                        </select>
                                    </div>


                                    @if(can_admin('products_images_edit'))
                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label"> صورة </label>
                                        <input class="form-control" name="image" type="file"
                                            accept="image/*">
                                    </div>
                                    @endif
                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label"> ملحوظه </label>
                                        <input required class="form-control" name="note" value=""
                                            type="text">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label> المخزن </label>
                                        <select class="form-control select2" name='storage_id'
                                            style="width: 100%;height:45px">
                                            <option selected value="">اختر المخزن</option>
                                            @foreach ($storages ?? [] as $storage)
                                                <option value="{{ $storage->id }}"> {{ $storage->name }} </option>
                                            @endforeach
                                        </select>
                                    </div>


                                </div>

                                <div class=" text-center row justify-content-center">
                                    <button type="button" @click="savecat" class="col-5 btn btn-primary mt-3 mb-0">
                                        حفظ</button>
                                    <button class="col-5 btn btn-secondary mt-3 mb-0" type="button"> رجوع</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('js')
    @include('admin.helper.formscripts')


    <script>
        // Available products for bundle creation
        const availableProducts = @json($availableProducts ?? []);
        let bundleItemCounter = 0;

        function toggleBundleSection(type) {
            const bundleSection = document.getElementById('bundle-section');
            if (type === 'bundle') {
                bundleSection.style.display = 'block';
            } else {
                bundleSection.style.display = 'none';
                // Clear bundle items when switching to single
                document.getElementById('bundle-items-container').innerHTML = '';
                bundleItemCounter = 0;
            }
        }

        function addBundleItem() {
            const container = document.getElementById('bundle-items-container');
            const itemDiv = document.createElement('div');
            itemDiv.className = 'row mb-3 bundle-item';
            itemDiv.id = `bundle-item-${bundleItemCounter}`;

            itemDiv.innerHTML = `
                <div class="col-md-5">
                    <label class="form-label">المنتج</label>
                    <select name="bundle_items[${bundleItemCounter}][product_id]" class="form-control" required>
                        <option value="">اختر المنتج</option>
                        ${availableProducts.map(product => 
                            `<option value="${product.id}">${product.name} - ${product.price} ر.س</option>`
                        ).join('')}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">الكمية</label>
                    <input type="number" name="bundle_items[${bundleItemCounter}][quantity]" 
                           class="form-control" min="1" value="1" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <button type="button" class="btn btn-danger btn-block" onclick="removeBundleItem(${bundleItemCounter})">
                        <x-lucide-trash-2 width="20" height="20" />
                    </button>
                </div>
            `;

            container.appendChild(itemDiv);
            bundleItemCounter++;
        }

        function removeBundleItem(itemId) {
            const item = document.getElementById(`bundle-item-${itemId}`);
            if (item) {
                item.remove();
            }
        }

        // Initialize with one bundle item if bundle type is selected
        document.addEventListener('DOMContentLoaded', function() {
            const typeSelect = document.querySelector('select[name="type"]');
            if (typeSelect && typeSelect.value === 'bundle') {
                addBundleItem();
            }

            // Initialize select2
            $('.select2').select2();
        });
    </script>

    <script>
        // Game units data for live preview
        const gameUnits = @json($games ?? []);

        function getSelectedGameUnit() {
            const gameId = $('select[name="game_id"]').val();
            if (gameId && gameUnits[gameId] && gameUnits[gameId].unit) {
                return gameUnits[gameId].unit;
            }
            return null;
        }

        function updateUnitPreview() {
            const name = $('#product-name-input').val().trim();
            const unit = getSelectedGameUnit();

            if (unit && name) {
                const finalName = name + ' ' + unit;
                $('#preview-text').text(finalName);
                $('#hint-text').text(finalName);
                $('#unit-preview').show();
                $('#unit-hint').show();
            } else {
                $('#unit-preview').hide();
                $('#unit-hint').hide();
            }
        }

        $(function() {
            $('#product-name-input').on('input', updateUnitPreview);
            $('select[name="game_id"]').on('change', updateUnitPreview);
        });
    </script>

    @include('vue')
    <script>
        app = new Vue({
            'el': "#pageid",
            'data': {
                name: ""
            },
            methods: {
                savecat: function(e) {
                    e.preventDefault();
                    let formData = new FormData(document.getElementById('new-prod'));

                    // Append unit to product name if game has a unit
                    const unit = getSelectedGameUnit();
                    const nameInput = formData.get('name');
                    if (unit && nameInput) {
                        formData.set('name', nameInput.trim() + ' ' + unit);
                    }

                    // Validate bundle items if product type is bundle
                    const productType = formData.get('type');
                    if (productType === 'bundle') {
                        const bundleItems = document.querySelectorAll('.bundle-item');
                        if (bundleItems.length === 0) {
                            swal({
                                title: 'خطأ',
                                text: 'يجب إضافة منتج واحد على الأقل للحزمة',
                                type: 'error'
                            });
                            return;
                        }
                    }

                    axios.post('{{ route('admin.products.store') }}', formData).then(response => {
                        console.log(response.data);
                        if (response.status !== 200) {
                            swal({
                                title: response.data.msg,
                                type: 'success',
                                confirmButtonText: 'موافق',
                            });
                        } else {
                            if (response.data.err == true) {
                                swal({
                                    title: response.data.msg,
                                    type: 'warning',
                                    confirmButtonText: 'موافق',
                                });
                            } else {
                                swal({
                                    title: response.data.msg,
                                    type: 'success',
                                    confirmButtonText: 'موافق',
                                });
                            }
                        }
                    }).catch(response => {
                        console.log(response)
                    })
                }

            }
        });
    </script>
@endsection