@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">Create Balance item</h1>
        </div>
        <div class="row">
            <div class="container">
                <div class="card">
                    <div class="card-body">

                        {{-- عرض كل الأخطاء في بوكس واحد فوق الفورم --}}
                        @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>
                                @if (session('back_link'))
                                    <a href="{{ session('back_link') }}" class="btn btn-sm btn-light border">
                                        🔙 Back to Items
                                    </a>
                                @endif
                            </div>
                        @endif

                        <form action="{{ route('market-balance-store-backend') }}" method="POST"
                            enctype="multipart/form-data" onsubmit="disableSubmitButton()">
                            @csrf
                            {{-- Sort Order --}}
                            <div class="form-group">
                                <label>Sort Order - Start From ({{ $minSortOrder  }})</label>
                                <input type="number" name="sort_order" class="form-control" min="1" required
                                    value="{{ old('sort_order', $maxSortOrder) }}">
                                @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') }}">
                                @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') }}</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">💰 Gold</option>
                                    <option value="Silk">🧵 Silk</option>
                                    <option value="Donate">💚 Donate</option>
                                    <option value="Gift balance">🎁 Gift Balance</option>
                                    <option value="item">📦 Item</option>
                                </select>
                                @error('item_type')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

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

                            {{-- Count --}}
                            <div class="form-group">
                                <label>Count</label>
                                <input type="number" name="Count" class="form-control" min="1" required
                                    value="{{ old('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') }}">
                                @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') }}">
                                @error('stock')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- Expiry Date --}}
                            <div class="form-group">
                                <label>Expiry Date</label>
                                <input type="date" name="expiry_date" class="form-control"
                                    value="{{ old('expiry_date') }}">
                                @error('expiry_date')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- اختيار طريقة إدخال الصورة --}}
                            <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">
                            </div>


                            {{-- Hidden Package ID --}}
                            <input type="hidden" name="package_id" value="0">

                            {{-- 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">
                                    <div class="option-box d-flex align-items-center mb-3">
                                        <input type="text" name="options[]" class="form-control mb-2 mr-2"
                                            placeholder="Option Name">
                                        <input type="file" name="option_images[]" class="form-control mb-2 mr-2"
                                            accept="image/*">
                                        <textarea name="option_descriptions[]" class="form-control mb-2 mr-2" placeholder="Option Description"></textarea>
                                        <!-- زر إزالة السطر -->
                                        <button type="button" class="btn btn-danger remove-option">-</button>
                                    </div>
                                </div>
                            </div>

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

    {{-- JavaScript للتحكم في ظهور CodeName128 --}}
    <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.setAttribute('required', 'true');
            } else {
                codeNameField.style.display = "none";
                codeNameInput.removeAttribute('required');
            }
        }

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

        // JavaScript لإزالة السطر عند الضغط على زر "-"
        document.addEventListener('click', function(event) {
            if (event.target.classList.contains('remove-option')) {
                event.target.closest('.option-box').remove();
            }
        });


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



        document.addEventListener("DOMContentLoaded", function () {
        const uploadRadio = document.getElementById("uploadImage");
        const urlRadio = document.getElementById("urlImage");
        const uploadContainer = document.getElementById("imageUploadContainer");
        const urlContainer = document.getElementById("imageUrlContainer");

        function toggleImageInput() {
            if (uploadRadio.checked) {
                uploadContainer.classList.remove("d-none");
                urlContainer.classList.add("d-none");
            } else {
                uploadContainer.classList.add("d-none");
                urlContainer.classList.remove("d-none");
            }
        }

        uploadRadio.addEventListener("change", toggleImageInput);
        urlRadio.addEventListener("change", toggleImageInput);
    });
    </script>

@endsection