@extends('admin.layouts.master')

@section('css')
    {{-- Shared lightweight form styles (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='editpro' enctype="multipart/form-data">
                        @csrf
                        <div class="card">
                            <div class="card-body">
                                <div class="row row-sm">
                                    <input class="form-control" name="id" type="hidden" value="{{ $product->id }}">
                                    @unless($imagesOnly ?? false)
                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label">الإسم </label>
                                        <div id="current-name-preview" class="alert alert-secondary py-2 mb-2" style="display: none;">
                                            📋 الاسم الحالي: <strong><span id="current-name-text"></span></strong>
                                        </div>
                                        <div id="unit-preview" class="alert alert-info py-2 mb-2" style="display: none;">
                                            📦 سيتم الحفظ كـ: <strong><span id="preview-text"></span></strong>
                                        </div>
                                        <input required class="form-control" id="product-name-input" name="name" type="text"
                                            value="{{ $product->name }}">
                                        <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 {{ $product->game_id == $us->id ? 'selected' : '' }}
                                                    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" type="float"
                                            value="{{ $product->price }}">
                                    </div>
                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label">اقل كمية </label>
                                        <input required class="form-control" name="min_value"
                                            value= "{{ $product->min_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="{{ $product->max_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" {{ $product->type == 'single' ? 'selected' : '' }}>منتج
                                                منفرد</option>
                                            <option value="bundle" {{ $product->type == 'bundle' ? 'selected' : '' }}>حزمة
                                                منتجات</option>
                                        </select>
                                    </div>

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

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

                                    <!-- Bundle Items Section -->
                                    <div id="bundle-section" class="col-12 mt-3"
                                        style="display: {{ $product->type == 'bundle' ? 'block' : '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">
                                                    @if ($product->type == 'bundle' && isset($bundleItems))
                                                        @foreach ($bundleItems as $index => $bundleItem)
                                                            <div class="row mb-3 bundle-item"
                                                                id="bundle-item-{{ $index }}">
                                                                <div class="col-md-5">
                                                                    <label class="form-label">المنتج</label>
                                                                    <select
                                                                        name="bundle_items[{{ $index }}][product_id]"
                                                                        class="form-control" required>
                                                                        <option value="">اختر المنتج</option>
                                                                        @foreach ($availableProducts as $availableProduct)
                                                                            <option value="{{ $availableProduct->id }}"
                                                                                {{ $bundleItem->item_id == $availableProduct->id ? 'selected' : '' }}>
                                                                                {{ $availableProduct->name }} -
                                                                                {{ $availableProduct->price }} ر.س
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label class="form-label">الكمية</label>
                                                                    <input type="number"
                                                                        name="bundle_items[{{ $index }}][quantity]"
                                                                        class="form-control" min="1"
                                                                        value="{{ $bundleItem->quantity }}" required>
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <label class="form-label">&nbsp;</label>
                                                                    <button type="button"
                                                                        class="btn btn-danger btn-block"
                                                                        onclick="removeBundleItem({{ $index }})">
                                                                        <x-lucide-trash-2 width="20" height="20" />
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mt-3">
                                        <label class="form-label"> ملحوظه </label>
                                        <input required class="form-control" name="note" value="{{ $product->note }}"
                                            type="text">
                                    </div>

                                    <div class="col-lg-6 mt-3">
                                        <p class="mt-0">حالة النشاط</p>
                                        <select name="isActive" class="form-control" required>
                                            <option value="1" {{ $product->isActive == 1 ? 'selected' : '' }}>مفعل
                                            </option>
                                            <option value="0" {{ $product->isActive == 0 ? 'selected' : '' }}>غير
                                                مفعل</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" {{ $product->isPrivate == 0 ? 'selected' : '' }}>عام
                                            </option>
                                            <option value="1" {{ $product->isPrivate == 1 ? 'selected' : '' }}>خاص
                                            </option>
                                        </select>
                                    </div>

                                    <div class="col-lg-6 mt-3">
                                        <p class="mt-0">بطاقة</p>
                                        <select name="isCard" class="form-control">
                                            <option value="0" {{ $product->isCard == 0 ? 'selected' : '' }}>لا
                                            </option>
                                            <option value="1" {{ $product->isCard == 1 ? 'selected' : '' }}>نعم
                                            </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

                                    @endunless
                                    @if(($imagesOnly ?? false) && 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/*">
                                        @if($product->image)
                                            <div class="mt-2">
                                                <img src="{{ url('/images/product_images/' . $product->image) }}"
                                                    alt="صورة المنتج الحالية" class="img-thumbnail"
                                                    style="max-width: 100px; max-height: 100px;">
                                                <small class="d-block text-muted">الصورة الحالية</small>
                                            </div>
                                        @endif
                                    </div>
                                    @endif

                                    @unless($imagesOnly ?? false)
                                        <label> المخزن </label>
                                        <select class="form-control select2" name='storage_id'
                                            style="width: 100%;height:45px">
                                            <option value="">اختر المخزن</option>
                                            @foreach ($storages ?? [] as $storage)
                                                <option value="{{ $storage->id }}"
                                                    {{ $product->storage_id == $storage->id ? 'selected' : '' }}>
                                                    {{ $storage->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @endunless

                                </div>
                                <div class="text-center row justify-content-center">
                                    <button type="submit" @click="updateProduct"
                                        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')
    {{-- Form scripts only (no DataTables needed) --}}
    @include('admin.helper.formscripts')
    @include('vue')

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

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

        function stripUnitFromName(name, unit) {
            if (unit && name.endsWith(' ' + unit)) {
                return name.slice(0, -(unit.length + 1));
            }
            return name;
        }

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

            // Show current DB name preview
            if (unit) {
                $('#current-name-text').text(originalDbName);
                $('#current-name-preview').show();
            } else {
                $('#current-name-preview').hide();
            }

            // Show save preview
            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() {
            // On page load: strip the unit from the stored name so the input shows the clean name
            const unit = getSelectedGameUnit();
            if (unit) {
                const currentName = $('#product-name-input').val().trim();
                $('#product-name-input').val(stripUnitFromName(currentName, unit));
            }

            $('#product-name-input').on('input', updateUnitPreview);
            $('select[name="game_id"]').on('change', function() {
                const oldUnit = getSelectedGameUnit();
                const currentName = $('#product-name-input').val().trim();
                if (oldUnit) {
                    $('#product-name-input').val(stripUnitFromName(currentName, oldUnit));
                }
                updateUnitPreview();
            });

            updateUnitPreview();
        });
    </script>

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

        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();
            }
        }
        $(function() {
            $('#editpro').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(document.getElementById('editpro'));

                @if($imagesOnly ?? false)
                adawe('{{ route('admin.products.update-images') }}', formData)
                @else
                // 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;
                    }
                }

                adawe('{{ route('admin.products.update') }}', formData)
                @endif
            });

            $('.select2').select2();
        });

        app = new Vue({
            'el': "#pageid",
            'data': {
                name: ""
            },
            methods: {
                updateProduct: function(e) {
                    e.preventDefault();
                    $('#editpro').submit();
                }
            }
        });
    </script>
@endsection