@php
                                                $reviewInvoice = $order->invoices()->where('status', 'pending_review')->first();
                                                $unpaidInvoice = $order->invoices()->whereIn('status', ['unpaid','rejected'])->first();
                                            @endphp

@if(isset($reviewInvoice) || isset($unpaidInvoice))
<!-- Payment Screenshot Upload Component -->
<style>
    /* Glass Effect for component consistency */
    .glass-effect {
        background: rgba(103, 62, 229, 0.15);
        border-radius: 20px;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(103, 62, 229, 0.2);
        padding: 2.5rem;
        position: relative;
        overflow: hidden;
    }

    /* Background elements for depth */
    .glass-effect::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(103, 62, 229, 0.1) 0%, transparent 70%);
        z-index: -1;
    }

    /* Order item styling */
    .order-item {
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(103, 62, 229, 0.1);
        padding: 20px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }

    .order-item:hover {
        box-shadow: 0 10px 25px rgba(103, 62, 229, 0.2);
        transform: translateY(-5px);
    }

    /* Status badges */
    .badge-pending {
        background-color: #FFB800;
        color: #fff;
    }

    .badge-approved {
        background-color: #00C853;
        color: #fff;
    }

    .badge-rejected {
        background-color: #F44336;
        color: #fff;
    }

    /* Upload area styling */
    .upload-area {
        border: 2px dashed rgba(103, 62, 229, 0.4);
        border-radius: 12px;
        padding: 25px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        background: rgba(255, 255, 255, 0.5);
    }

    .upload-area:hover {
        border-color: #673EE5;
        background: rgba(103, 62, 229, 0.1);
    }

    .upload-area input[type="file"] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

    /* Preview image container */
    .preview-container {
        max-width: 100%;
        margin-top: 15px;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
    }

    .preview-image {
        max-width: 100%;
        border-radius: 8px;
        display: none;
    }

    .preview-close {
        position: absolute;
        top: 5px;
        right: 5px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
        display: none;
    }

    /* Button styling */
    .btn-submit {
        background-color: #673EE5;
        border-color: #673EE5;
        color: white;
        border-radius: 10px;
        padding: 10px 25px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-submit:hover {
        background-color: #5630c0;
        border-color: #5630c0;
    }

    /* Tab styling */
    .nav-tabs .nav-link {
        border: none;
        color: #673EE5;
        border-bottom: 2px solid transparent;
        padding: 10px 20px;
        transition: all 0.3s ease;
    }

    .nav-tabs .nav-link.active {
        border-bottom: 2px solid #673EE5;
        background: rgba(103, 62, 229, 0.1);
        color: #673EE5;
        border-radius: 8px 8px 0 0;
    }

    .section-title {
        position: relative;
        display: inline-block;
        margin-bottom: 30px;
    }

    .section-title:after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 50px;
        height: 3px;
        background: #673EE5;
        border-radius: 3px;
    }

    /* Plan details badge */
    .plan-badge {
        background: rgba(103, 62, 229, 0.1);
        color: #673EE5;
        border-radius: 20px;
        padding: 5px 15px;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 8px;
    }

    .recommended-badge {
        background: #673EE5;
        color: white;
        border-radius: 20px;
        padding: 3px 10px;
        font-size: 0.7rem;
        font-weight: 600;
        display: inline-block;
        margin-left: 8px;
    }

    .plan-duration {
        display: inline-block;
        padding: 3px 10px;
        background: rgba(0, 200, 83, 0.1);
        color: #00C853;
        border-radius: 20px;
        font-size: 0.8rem;
        margin-left: 8px;
    }

    /* Collapsible details */
    .plan-details-toggle {
        cursor: pointer;
        user-select: none;
        color: #673EE5;
        font-size: 0.9rem;
    }

    .plan-details-container {
        display: none;
        padding: 15px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        margin-top: 10px;
    }

    .plan-feature {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .plan-feature i {
        margin-right: 5px;
    }
</style>



<section class="section glass-effect rounded-4 p-4 mt-5" id="payment-uploads">
    <div class="card-body">
        <div class="container" style="z-index: 10;">
            <h3 class="section-title fw-bold">Payment Verification</h3>


            <div class="tab-content" id="orderTabsContent">
                <!-- Pending Orders Tab -->
                <div class="tab-pane fade show active" id="pending-orders" role="tabpanel" aria-labelledby="pending-tab">
                            <div class="order-item">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <h5 class="mb-1">Order #{{ $order->order_id }}</h5>

                                        @php
                                            $planData = $order->plan_data;
                                        @endphp

                                        <div class="d-flex align-items-center">
                                            <p class="text-muted mb-1 fw-bold">{{ $planData['title'] ?? 'Subscription Plan' }}</p>
                                            @if(isset($planData['is_recommended']) && $planData['is_recommended'])
                                                <span class="recommended-badge">Recommended</span>
                                            @endif
                                        </div>

                                        <div class="mb-2">
                                            <h4 class="mb-0">{{ $order->symbol }}{{ number_format($order->amount) }}</h4>
                                            @if(isset($planData['days']))
                                                <span class="plan-duration">{{ $planData['days'] }} Days</span>
                                            @endif
                                        </div>

                                        <p class="mb-2"><small>Order Date: {{ \Carbon\Carbon::parse($order->created_at)->format('M d, Y') }}</small></p>

                                        <span class="badge badge-pending">Pending</span>

                                        <div class="mt-3">
                                            <p class="plan-details-toggle" data-toggle="plan-details-{{ $order->id }}">
                                                <i class="mdi mdi-chevron-down"></i> Show plan details
                                            </p>
                                            <div class="plan-details-container" id="plan-details-{{ $order->id }}">
                                                <div class="row">
                                                    @if(isset($planData['data']))
                                                        @foreach($planData['data'] as $key => $value)
                                                            <div class="col-md-6 plan-feature">
                                                                <i class="mdi {{ $value == true ? 'mdi-check-circle text-success' : 'mdi-cancel text-danger' }}"></i>
                                                                <span>
                                                                    {{ ucwords(str_replace('_', ' ', $key)) }}
                                                                    @if($key == 'messages_limit' || $key == 'device_limit')
                                                                        ({{ number_format($value) }})
                                                                    @endif
                                                                </span>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">


                                        @if(!isset($unpaidInvoice) && (isset($reviewInvoice) && $reviewInvoice->screenshot))
                                            <div class="text-end mb-3">
                                                <a href="{{ url('storage/'.$reviewInvoice->screenshot) }}" class="btn btn-sm btn-outline-primary" target="_blank">
                                                    <i class="mdi mdi-eye me-1"></i> View Screenshot
                                                </a>
                                            </div>
                                            <p class="text-muted small mb-0 text-end">Screenshot uploaded on {{ \Carbon\Carbon::parse($order->updated_at)->format('M d, Y H:i') }}</p>
                                        @elseif(isset($unpaidInvoice))
                                            <form action="{{ route('payments.orders.upload-screenshot', $unpaidInvoice->id) }}" method="POST" enctype="multipart/form-data" class="screenshot-form">
                                                @csrf
                                                <div class="upload-area" id="upload-area-{{ $order->id }}">
                                                    <i class="mdi mdi-cloud-upload fs-1 text-primary"></i>
                                                    <h6 class="mt-3">Upload Payment Screenshot</h6>
                                                    <p class="text-muted small">Click or drag image here</p>
                                                    <input type="file" name="screenshot" id="screenshot-{{ $order->id }}" accept="image/*" class="screenshot-input" data-id="{{ $order->id }}">
                                                </div>
                                                <div class="preview-container" id="preview-container-{{ $order->id }}">
                                                    <img src="#" alt="Preview" class="preview-image" id="preview-image-{{ $order->id }}">
                                                    <span class="preview-close" id="preview-close-{{ $order->id }}">&times;</span>
                                                </div>
                                                <button type="submit" class="btn btn-submit w-100 mt-3">Submit Payment Proof</button>
                                            </form>
                                        @endif
                                    </div>
                                </div>
                            </div>


                </div>


            </div>
        </div>
    </div>
</section>

<!-- JavaScript for Image Preview and Plan Details Toggle -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get all screenshot input elements
    const screenshotInputs = document.querySelectorAll('.screenshot-input');

    screenshotInputs.forEach(input => {
        const orderId = input.getAttribute('data-id');
        const previewImage = document.getElementById(`preview-image-${orderId}`);
        const previewContainer = document.getElementById(`preview-container-${orderId}`);
        const previewClose = document.getElementById(`preview-close-${orderId}`);

        // Handle file selection
        input.addEventListener('change', function(e) {
            if (this.files && this.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                    previewImage.style.display = 'block';
                    previewClose.style.display = 'block';
                }

                reader.readAsDataURL(this.files[0]);
            }
        });

        // Handle close button click
        previewClose.addEventListener('click', function() {
            previewImage.src = '';
            previewImage.style.display = 'none';
            previewClose.style.display = 'none';
            input.value = '';
        });
    });

    // Plan details toggle functionality
    const detailsToggles = document.querySelectorAll('.plan-details-toggle');

    detailsToggles.forEach(toggle => {
        const containerId = toggle.getAttribute('data-toggle');
        const container = document.getElementById(containerId);

        toggle.addEventListener('click', function() {
            const icon = this.querySelector('i');

            if (container.style.display === 'block') {
                container.style.display = 'none';
                icon.classList.remove('mdi-chevron-up');
                icon.classList.add('mdi-chevron-down');
                this.innerHTML = `<i class="mdi mdi-chevron-down"></i> Show plan details`;
            } else {
                container.style.display = 'block';
                icon.classList.remove('mdi-chevron-down');
                icon.classList.add('mdi-chevron-up');
                this.innerHTML = `<i class="mdi mdi-chevron-up"></i> Hide plan details`;
            }
        });
    });
});
</script>


@endif