@extends('theme::layouts.app', ['alias' => 'Account'])
@section('theme::title', __('seo.ranking.index'))
@section('theme::sidebar')
    @include('theme::frontend.account.sidebar', ['account_alias' => 'Items'])
@endsection
@section('theme::content')

    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12 main-content">
        <div class="container">
            <div class="card">
                <div class="container mx-auto p-6 userprev-item-details"> <!-- استخدام class الجديد هنا -->
                    <h2 class="text-3xl font-semibold text-center mb-6">
                        @if ($type == 'item')
                            {{ $item->name }} - Item Details
                        @elseif($type == 'package')
                            Package Details
                        @endif
                    </h2>

                    <!-- الكارت الأسود لعرض التفاصيل -->
                    <div class="bg-black text-white rounded-lg p-6">
                        <!-- عرض الاسم -->
                        <h3 class="text-xl font-semibold mb-3">
                            @if ($type == 'item')
                                {{ $item->name }}
                                    <!-- عرض الصورة -->
                                <div class="flex justify-center mb-4">
                                    @if (Str::startsWith($item->image, ['http://', 'https://']))
                                        <!-- ✅ إذا كانت الصورة رابط خارجي -->
                                        <img src="{{ $item->image }}" alt="Item Image"
                                            class="rounded-lg shadow-lg large-image transition-all duration-300">
                                    @else
                                        <!-- ✅ إذا كانت الصورة مخزنة في storage -->
                                        <img src="{{ asset('storage/' . $item->image) }}" alt="Item Image"
                                            class="rounded-lg shadow-lg large-image transition-all duration-300">
                                    @endif
                                </div>
                            @elseif($type == 'package')
                                Package - {{ $fullpackage->package_name }}
                                    <!-- عرض الصورة -->
                                <div class="flex justify-center mb-4">
                                    @if (Str::startsWith($fullpackage->image, ['http://', 'https://']))
                                        <!-- ✅ إذا كانت الصورة رابط خارجي -->
                                        <img src="{{ $fullpackage->image }}" alt="Package Image"
                                            class="rounded-lg shadow-lg large-image transition-all duration-300">
                                    @else
                                        <!-- ✅ إذا كانت الصورة مخزنة في storage -->
                                        <img src="{{ asset('storage/' . $fullpackage->image) }}" alt="Package Image"
                                            class="rounded-lg shadow-lg large-image transition-all duration-300">
                                    @endif
                                </div>
                            @endif
                        </h3>


                        <!-- عرض Select لخيارات item أو package -->
                        <div>
                            @if ($type == 'item')
                                <h4 class="text-lg font-semibold mb-3">Item Options:</h4>
                                <div class="space-y-2">

                                    <div class="option-container">
                                        

                                        @if (isset($item->json_data['options']) && is_array($item->json_data['options']))
                                            <div class="mt-3">
                                                <label for="select-option-{{ $item->id }}"
                                                    class="text-sm text-gray-700">Choose an option:</label>
                                                <!-- عرض الصورة -->
                                                <div class="flex justify-center mb-4">
                                                    @if (!empty($item->image))
                                                        @if (Str::startsWith($item->image, ['http://', 'https://']))
                                                            <!-- ✅ إذا كانت الصورة رابط خارجي -->
                                                            <img id="selected-image" src="{{ $item->image }}" alt="Item Image"
                                                                class="rounded-lg shadow-lg large-image transition-all duration-300">
                                                        @else
                                                            <!-- ✅ إذا كانت الصورة مخزنة في storage -->
                                                            <img id="selected-image" src="{{ asset('storage/' . $item->image) }}" alt="Item Image"
                                                                class="rounded-lg shadow-lg large-image transition-all duration-300">
                                                        @endif
                                                    @else
                                                        <!-- ✅ في حالة عدم توفر صورة -->
                                                        <p class="text-gray-500">No image available</p>
                                                    @endif
                                                </div>                                                
                                                <p class="font-semibold" id="selected-name">{{ $item->name }}</p>
                                                <select id="select-option-{{ $item->id }}"
                                                    name="option-{{ $item->id }}"
                                                    class="form-select w-full bg-yellow-500 text-white rounded-lg py-2 px-4 cursor-pointer hover:bg-yellow-600 transition-all duration-300"
                                                    onchange="updateItemDetails('{{ $item->id }}')">
                                                    <option value="" disabled selected>Select an option</option>
                                                    @foreach ($item->json_data['options'] as $option)
                                                        <option value="{{ is_array($option) ? $option['name'] : $option }}"
                                                            data-image="{{ asset('storage/' . (isset($option['image']) ? $option['image'] : 'default.jpg')) }}"
                                                            data-description="{{ isset($option['description']) ? $option['description'] : 'No Description' }}">
                                                            {{ is_array($option) ? $option['name'] : $option }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @else
                                            <p class="text-gray-500">
                                                {{ $item->description ?? 'No Description' }}</p>
                                        @endif
                                    </div>
                                </div>
                                <!-- عرض الـStock -->
                                @if ($item->stock == 999)
                                    <p class="text-green-500">Stock: Unlimited Stock</p>
                                @elseif ($item->stock > 0)
                                    <p class="text-yellow-500">Stock: {{ $item->stock }}</p>
                                @else
                                    <p class="text-red-500">Out of Stock</p>
                                @endif
                                @if ($item->expiry_date)
                                    <p class="text-red-500">Expires on:
                                        {{ \Carbon\Carbon::parse($item->expiry_date)->format('l d/m/Y h:iA') }}</p>
                                    <div class="market-countdown"
                                        data-expiry="{{ \Carbon\Carbon::parse($item->expiry_date)->format('Y-m-d H:i:s') }}">
                                    </div>
                                @endif
                                <p class="text-green-500">
                                    Price : {{ number_format($item->price, 2) }} 
                                    @if ($item->balance_type == 'balance')
                                        💎
                                    @elseif($item->balance_type == 'gift_balance')
                                        🌟
                                    @endif
                                </p>                                
                                <div class="text-center mt-6">
                                    <form class="purchase-form" action="{{ route('market.purchase') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="type" value="item">
                                        <input type="hidden" name="id" value="{{ $item->id }}">
                                        <!-- لو عايز تسمح يختار كمية -->
                                        <label for="quantity-{{ $item->id }}" class="text-white">Quantity:</label>
                                        <input type="number" id="quantity-{{ $item->id }}" name="quantity"
                                            value="1" min="1" class="text-black">

                                        <button type="submit" class="market-btn market-btn-success mt-3">
                                            Buy Now
                                        </button>
                                    </form>
                                </div>
                            @elseif($type == 'package')
                                <h4 class="text-lg font-semibold mb-3">Package Includes:</h4>
                                <div class="space-y-2">
                                    @foreach ($packageItems as $packageItem)
                                    <div class="option-container" id="option-container-{{ $packageItem->id }}">
                                
                                        <div class="flex justify-center mb-4">
                                            @if (!empty($packageItem->image))
                                                @if (Str::startsWith($packageItem->image, ['http://', 'https://']))
                                                    <!-- ✅ إذا كانت الصورة رابط خارجي -->
                                                    <img id="selected-image-{{ $packageItem->id }}" src="{{ $packageItem->image }}" 
                                                         alt="Item Image"
                                                         class="rounded-lg shadow-lg large-image transition-all duration-300 selected-image">
                                                @else
                                                    <!-- ✅ إذا كانت الصورة مخزنة في storage -->
                                                    <img id="selected-image-{{ $packageItem->id }}" src="{{ asset('storage/' . $packageItem->image) }}" 
                                                         alt="Item Image"
                                                         class="rounded-lg shadow-lg large-image transition-all duration-300 selected-image">
                                                @endif
                                            @else
                                                <!-- ✅ في حالة عدم توفر صورة، عرض صورة افتراضية -->
                                                <img id="selected-image-{{ $packageItem->id }}" src="{{ asset('storage/default.jpg') }}" 
                                                     alt="Default Image"
                                                     class="rounded-lg shadow-lg large-image transition-all duration-300 selected-image">
                                            @endif
                                        </div>
                                        
                                        <p class="font-semibold selected-name">{{ $packageItem->name }}</p>
                                        @if (isset($packageItem->json_data['options']) && is_array($packageItem->json_data['options']))
                                            <div class="mt-3">
                                                <label for="select-option-{{ $packageItem->id }}" class="text-sm text-gray-700">
                                                    Choose an option for {{ $packageItem->name }}:
                                                </label>
                                                <select id="select-option-{{ $packageItem->id }}" name="option-{{ $packageItem->id }}"
                                                        class="form-select w-full bg-yellow-500 text-white rounded-lg py-2 px-4 cursor-pointer hover:bg-yellow-600 transition-all duration-300"
                                                        onchange="updatePackageItemDetails('{{ $packageItem->id }}')">
                                                    <option value="" disabled selected>Select an option</option>
                                                    @foreach ($packageItem->json_data['options'] as $option)
                                                        <option value="{{ is_array($option) ? $option['name'] : $option }}"
                                                                data-image="{{ asset('storage/' . (isset($option['image']) ? $option['image'] : 'default.jpg')) }}"
                                                                data-description="{{ isset($option['description']) ? $option['description'] : 'No Description' }}">
                                                            {{ is_array($option) ? $option['name'] : $option }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @else
                                            <p class="text-gray-500 selected-description">{{ $packageItem->description ?? 'No Description' }}</p>
                                        @endif
                                    </div>
                                @endforeach
                                </div>
                                <!-- عرض الـStock -->
                                @if ($fullpackage->stock == 999)
                                    <p class="text-green-500">Stock: Unlimited Stock</p>
                                @elseif ($fullpackage->stock > 0)
                                    <p class="text-yellow-500">Stock: {{ $fullpackage->stock }}</p>
                                @else
                                    <p class="text-red-500">Out of Stock</p>
                                @endif
                                @if ($fullpackage->expiry_date)
                                    <p class="text-red-500">Expires on:
                                        {{ \Carbon\Carbon::parse($fullpackage->expiry_date)->format('l d/m/Y h:iA') }}</p>
                                    <div class="market-countdown"
                                        data-expiry="{{ \Carbon\Carbon::parse($fullpackage->expiry_date)->format('Y-m-d H:i:s') }}">
                                    </div>
                                @endif
                                <p class="text-green-500">
                                    Price : {{ number_format($fullpackage->price, 2) }} 
                                    @if ($fullpackage->balance_type == 'balance')
                                        💎
                                    @elseif($fullpackage->balance_type == 'gift_balance')
                                        🌟
                                    @endif
                                </p>    
                                <!-- زر الشراء في صفحة التفاصيل -->
                                <div class="text-center mt-6">
                                    <form class="purchase-form" action="{{ route('market.purchase') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="type" value="package">
                                        <input type="hidden" name="id" value="{{ $fullpackage->id }}">

                                        <!-- لو عايز تسمح يختار كمية -->
                                        <label for="quantity-{{ $fullpackage->id }}" class="text-white">Quantity:</label>
                                        <input type="number" id="quantity-{{ $fullpackage->id }}" name="quantity"
                                            value="1" min="1" class="text-black">

                                        <button type="submit" class="market-btn market-btn-success mt-3">
                                            Buy Now
                                        </button>
                                    </form>
                                </div>

                            @endif
                        </div>
                    </div>
                    <div class="text-center mt-6">
                        <a href="{{ session('previous_url', route('index')) }}"
                            class="market-btn market-btn-primary">Back
                            to Market</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

<script>
    @if ($type == 'item')
        // JavaScript لتحديث التفاصيل بناءً على الاختيار
        function updateItemDetails(detailId) {
            let selectedOption = document.getElementById('select-option-' + detailId).value;
            let selectedImage = document.getElementById('selected-image');
            let selectedName = document.getElementById('selected-name');
            let selectedDescription = document.getElementById('selected-description');

            let selectedOptionElement = document.querySelector(
                `#select-option-${detailId} option[value="${selectedOption}"]`);
            let imageUrl = selectedOptionElement.getAttribute('data-image');
            let description = selectedOptionElement.getAttribute('data-description');

            selectedImage.src = imageUrl || '{{ asset('storage/default.jpg') }}'; // Default image if none selected
            selectedName.innerHTML = selectedOption || 'No Name';
            selectedDescription.innerHTML = description || 'No Description';
        }
    @elseif ($type == 'package')

        function updatePackageItemDetails(detailId) {
            let selectedOption = document.getElementById('select-option-' + detailId).value;

            // تحديد العناصر الثلاثة باستخدام نفس الفئة أو مع نفس الـ ID
            let selectedItem = document.querySelector(`#option-container-${detailId}`);

            // استخراج البيانات من الـ option المحدد
            let selectedOptionElement = document.querySelector(
                `#select-option-${detailId} option[value="${selectedOption}"]`);
            let imageUrl = selectedOptionElement.getAttribute('data-image') ||
            '{{ asset('storage/default.jpg') }}'; // Default image if none selected
            let description = selectedOptionElement.getAttribute('data-description') || 'No Description';
            let name = selectedOptionElement.innerHTML || 'No Name';

            // تحديث العناصر المختارة بشكل موحد
            selectedItem.querySelector('.selected-name').innerHTML = name;
            selectedItem.querySelector('.selected-image').src = imageUrl;
            selectedItem.querySelector('.selected-description').innerHTML = description;
        }
    @endif



    document.addEventListener('DOMContentLoaded', function() {





        // (1) كود العد التنازلي
        const timers = document.querySelectorAll('.market-countdown');
        timers.forEach(timer => {
            const expiryDate = new Date(timer.getAttribute('data-expiry')).getTime();

            const interval = setInterval(() => {
                const now = new Date().getTime();
                const distance = expiryDate - now;

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                let colorClass = 'market-countdown-success'; // افتراضي أخضر
                // مثال للتغيير حسب المسافة
                if (distance <= 3600000) { // أقل من ساعة
                    colorClass = 'market-countdown-danger';
                } else if (distance <= 86400000) { // أقل من يوم
                    colorClass = 'market-countdown-warning';
                }

                timer.innerHTML = `<span class="${colorClass}">
                <strong>Time Left:</strong> 
                ${days}d ${hours}h ${minutes}m ${seconds}s
            </span>`;

                if (distance < 0) {
                    clearInterval(interval);
                    timer.innerHTML = "<span class='market-countdown-expired'>Expired</span>";
                }
            }, 1000);
        });


        document.querySelectorAll('.purchase-form').forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();

                let form = this;
                let formData = new FormData(form);

                fetch(form.action, {
                        method: form.method,
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.messages) {
                            let delay = 0;

                            // عرض كل رسالة ب delay بينهم
                            data.messages.forEach(msg => {
                                setTimeout(() => {
                                    if (msg.type === 'success') {
                                        toastr.success(msg.message);
                                    } else {
                                        toastr.error(msg.message);
                                    }
                                }, delay);

                                // زيادة التأخير بين كل رسالة والتانية
                                delay += 1000; // 1000 ميلي ثانية = ثانية واحدة
                            });

                            // تنفيذ الريفريش بعد آخر رسالة
                            if (data.success) {
                                setTimeout(() => {
                                    location.reload();
                                }, delay + 1000); // تأخير إضافي ثانية بعد آخر رسالة
                            }
                        }
                    })
                    .catch(error => {
                        toastr.error('An error occurred while processing the request.');
                    });
            });
        });
    });
</script>