@extends('theme::backend.layouts.app')

@section('theme::backend-content')
    @include('theme::backend.layouts.navbar')

    <div class="container-fluid">
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Edit Balance Item</h1>
        </div>

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

        @if (session('message'))
            <div class="alert alert-success d-flex justify-content-between align-items-center">
                <span>{{ session('message') }}</span>
                <a href="{{ route('market-balance-index-backend') }}" class="btn btn-sm btn-light border">
                    🔙 Back to Items
                </a>
            </div>
        @endif

        <div class="row">
            <div class="container">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('market-balance-update-backend', $item->id) }}" method="POST"
                            enctype="multipart/form-data"  onsubmit="disableSubmitButton()">
                            @csrf
                            @method('PUT')

                            {{-- Sort Order --}}
<div class="form-group">
    <label>Sort Order</label>
    <input type="number" name="sort_order" class="form-control" min="1" required
        value="{{ old('sort_order', $item->sort_order) }}">
    @error('sort_order')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>

                            {{-- Name --}}
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="name" class="form-control" required
                                    value="{{ old('name', $item->name) }}">
                                @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- Description --}}
                            <div class="form-group">
                                <label>Description</label>
                                <textarea name="description" class="form-control">{{ old('description', $item->description) }}</textarea>
                                @error('description')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- Item Type --}}
                            <div class="form-group">
                                <label>Item Type</label>
                                <select name="item_type" id="item_type" class="form-control" required
                                    onchange="toggleCodeNameField()">
                                    <option value="Gold" {{ $item->item_type == 'Gold' ? 'selected' : '' }}>💰 Gold
                                    </option>
                                    <option value="Silk" {{ $item->item_type == 'Silk' ? 'selected' : '' }}>🧵 Silk
                                    </option>
                                    <option value="Donate" {{ $item->item_type == 'Donate' ? 'selected' : '' }}>💚 Donate
                                    </option>
                                    <option value="Gift balance"
                                        {{ $item->item_type == 'Gift balance' ? 'selected' : '' }}>🎁 Gift Balance</option>
                                    <option value="item" {{ $item->item_type == 'item' ? 'selected' : '' }}>📦 Item
                                    </option>
                                </select>
                                @error('item_type')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- CodeName128 --}}
                            <div class="form-group" id="codeName128Field"
                                style="{{ $item->item_type == 'item' ? '' : 'display: none;' }}">
                                <label>CodeName128</label>
                                <input type="text" name="CodeName128" id="CodeName128" class="form-control"
                                    value="{{ old('CodeName128', $item->CodeName128) }}">
                                @error('CodeName128')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>Count</label>
                                <input type="number" name="Count" class="form-control" min="1" required
                                    value="{{ old('count', $item->Count ?? '') }}">
                                @error('count')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- Price --}}
                            <div class="form-group">
                                <label>Price</label>
                                <input type="number" name="price" class="form-control" min="0" step="0.01" required
                                    value="{{ old('price', $item->price) }}">
                                @error('price')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- Stock --}}
                            <div class="form-group">
                                <label>Stock</label>
                                <input type="number" name="stock" class="form-control" min="0" required
                                    value="{{ old('stock', $item->stock) }}">
                                @error('stock')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>Expiry Date</label>
                                <input type="date" name="expiry_date" class="form-control"
                                    value="{{ old('expiry_date', $item->expiry_date ? \Carbon\Carbon::parse($item->expiry_date)->format('Y-m-d') : '') }}">
                                @error('expiry_date')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

{{-- ✅ عرض الصورة الحالية --}}
<div class="form-group">
    <label>Current Image</label>
    <div class="flex justify-center mb-4">
        @php
            $imageSrc = $item->image ?? null; // جلب الصورة إذا كانت موجودة
        @endphp

        @if (!empty($imageSrc))
            @if (Str::startsWith($imageSrc, ['http://', 'https://']))
                <!-- ✅ إذا كانت الصورة رابط خارجي -->
                <div class="text-center">
                    <p class="text-success">Image URL: <a href="{{ $imageSrc }}" target="_blank">{{ $imageSrc }}</a></p>
                    <img id="selected-image" src="{{ $imageSrc }}" alt="Item Image"
                        class="rounded-lg shadow-lg large-image transition-all duration-300">
                </div>
            @else
                <!-- ✅ إذا كانت الصورة مخزنة في storage -->
                <div class="text-center">
                    <p class="text-info">Stored Image:</p>
                    <img id="selected-image" src="{{ asset('storage/' . $imageSrc) }}" alt="Item Image"
                        class="rounded-lg shadow-lg large-image transition-all duration-300">
                </div>
            @endif
        @else
            <!-- ✅ إذا لم تكن هناك صورة متاحة -->
            <p class="text-gray-500">No image available</p>
        @endif
    </div>
</div>

{{-- ✅ حفظ المسار القديم للصورة --}}
<input type="hidden" name="old_image" value="{{ $item->image ?? '' }}">

{{-- ✅ اختيار طريقة إدخال الصورة --}}
<div class="form-group">
    <label>Choose Image Input Method</label>
    <div class="d-flex">
        <div class="form-check mr-3">
            <input class="form-check-input" type="radio" name="image_type" id="uploadImage" value="upload" checked>
            <label class="form-check-label" for="uploadImage">Upload Image</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="image_type" id="urlImage" value="url">
            <label class="form-check-label" for="urlImage">Image URL</label>
        </div>
    </div>
</div>

{{-- ✅ إدخال الصورة من الجهاز --}}
<div class="form-group" id="imageUploadContainer">
    <label>Upload Image</label>
    <input type="file" name="image" class="form-control-file" accept="image/*">
    @error('image')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>

{{-- ✅ إدخال رابط الصورة --}}
<div class="form-group d-none" id="imageUrlContainer">
    <label>Image URL</label>
    <input type="url" name="image_url" class="form-control" placeholder="Enter Image URL">
    @error('image_url')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>



                            {{-- Additional Details --}}
                            <div class="form-group">
                                <button type="button" class="btn btn-success add-option">+</button>
                                <label>Additional Options</label>
                                <div id="additional-options" class="d-flex flex-column">
                                    @foreach ($item->json_data['options'] as $index => $option)
                                        <div class="option-box d-flex align-items-center mb-3">
                                            <input type="text" name="options[]" class="form-control mb-2 mr-2"
                                                value="{{ $option['name'] }}" placeholder="Option Name">
                            
                                            {{-- إضافة الصورة القديمة هنا --}}
                                            <input type="file" name="option_images[]" class="form-control mb-2 mr-2" accept="image/*">
                                            @if (!empty($option['image']))
                                                <div class="existing-image">
                                                    <label>Existing Image:</label>
                                                    <img src="{{ asset('storage/' . $option['image']) }}" alt="Option Image"
                                                        class="img-thumbnail" style="max-width: 100px;">
                                                </div>
                                            @endif
                            
                                            <textarea name="option_descriptions[]" class="form-control mb-2 mr-2"
                                                placeholder="Option Description">{{ $option['description'] }}</textarea>
                                            <button type="button" class="btn btn-danger remove-option">-</button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            {{-- Submit --}}
                            <button type="submit" class="btn btn-primary">Update Balance Item</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


<script>
    function toggleCodeNameField() {
        let itemType = document.getElementById("item_type").value;
        let codeNameField = document.getElementById("codeName128Field");
        let codeNameInput = document.getElementById("CodeName128");

        if (itemType === "item") {
            codeNameField.style.display = "block";
            codeNameInput.removeAttribute('disabled'); // إعادة تفعيل الحقل
        } else {
            codeNameField.style.display = "none";
            codeNameInput.value = ""; // تفريغ الحقل
            codeNameInput.setAttribute('disabled', 'true'); // تعطيل الإدخال
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        // JavaScript لإضافة سطر جديد للخيارات
        document.querySelector('.add-option').addEventListener('click', function() {
            let newOptionBox = document.querySelector('.option-box').cloneNode(true);
            document.getElementById('additional-options').appendChild(newOptionBox);
        });

        // JavaScript لإزالة السطر عند الضغط على زر "-"
        document.getElementById('additional-options').addEventListener('click', function(event) {
            if (event.target.classList.contains('remove-option')) {
                event.target.closest('.option-box').remove(); // إزالة الحقل الذي يحتوي على الزر
            }
        });
       
       
       
        const uploadRadio = document.getElementById("uploadImage");
    const urlRadio = document.getElementById("urlImage");
    const uploadContainer = document.getElementById("imageUploadContainer");
    const urlContainer = document.getElementById("imageUrlContainer");
    const fileInput = document.querySelector('input[name="image"]');
    const urlInput = document.querySelector('input[name="image_url"]');
    const oldImage = document.querySelector('input[name="old_image"]').value; // الصورة القديمة

    function toggleImageInput() {
        if (uploadRadio.checked) {
            uploadContainer.classList.remove("d-none");
            urlContainer.classList.add("d-none");
            fileInput.required = !oldImage; // لا يفرض required إذا كانت هناك صورة قديمة
            urlInput.required = false;
        } else {
            uploadContainer.classList.add("d-none");
            urlContainer.classList.remove("d-none");
            urlInput.required = !oldImage;
            fileInput.required = false;
        }
    }

    uploadRadio.addEventListener("change", toggleImageInput);
    urlRadio.addEventListener("change", toggleImageInput);

    // ✅ تشغيل الوظيفة عند تحميل الصفحة
    toggleImageInput();
    });

    
    function disableSubmitButton() {
        const btn = document.querySelector('button[type="submit"]');
        btn.disabled = true;
        btn.innerText = 'Uploading..';
    }
</script>