<x-layouts.dashboard title="GTS Services">
    <section class="card gts-service-order-panel">
        <div><p class="eyebrow">Available Balance</p><h2>{{ $wallet->currency }} {{ number_format($wallet->balance) }}</h2><p>{{ $orderCreateEnabled ? 'Select a GTS service and place an order from your wallet.' : 'Order creation is temporarily disabled by admin.' }}</p></div>
        <a class="ghost" href="{{ route('gts-client.wallet') }}">Add Funds</a>
    </section>

    <div class="gts-category-filter">
        <a class="active" href="{{ route('gts-client.services') }}">All</a>
        @foreach($services->pluck('category')->unique() as $category)
            <a href="#category-{{ str($category)->slug() }}">{{ $category }}</a>
        @endforeach
    </div>

    <div class="gts-service-client-grid">
        @foreach($services as $service)
            <article class="card gts-client-service-card" id="category-{{ str($service->category)->slug() }}">
                <span>{{ $service->category }}</span>
                <h3>{{ $service->name }}</h3>
                <p>{{ $service->description }}</p>
                <div class="gts-service-price"><b>PKR {{ number_format($service->rate_per_1000) }}</b><small>per 1K</small></div>
                <div class="gts-api-flags">
                    <span class="{{ $service->auto_submit ? 'on' : '' }}">{{ $service->auto_submit ? 'Auto API' : 'Manual' }}</span>
                    @if($service->refill_enabled)<span class="on">Refill</span>@endif
                    @if($service->dripfeed_enabled)<span class="on">Drip Feed</span>@endif
                </div>
                <small>{{ number_format($service->min_quantity) }} - {{ number_format($service->max_quantity) }} quantity</small>
                @if($orderCreateEnabled)
                    <form method="post" action="{{ route('gts-client.orders.store') }}" class="gts-order-form" data-rate="{{ $service->rate_per_1000 }}">
                        @csrf
                        <input type="hidden" name="gts_service_id" value="{{ $service->id }}">
                        <input name="target_link" placeholder="Target profile/post/video link" required>
                        <input class="gts-quantity-input" type="number" name="quantity" min="{{ $service->min_quantity }}" max="{{ $service->max_quantity }}" value="{{ $service->min_quantity }}" required>
                        <span class="gts-order-estimate">Estimated charge: PKR {{ number_format(($service->min_quantity / 1000) * $service->rate_per_1000) }}</span>
                        <button class="btn full">Place Order</button>
                    </form>
                @else
                    <div class="empty-state compact">Order create module is off. Services remain visible for price review.</div>
                @endif
            </article>
        @endforeach
    </div>
    <script>
        document.querySelectorAll('.gts-order-form').forEach((form) => {
            const rate = Number(form.dataset.rate || 0);
            const input = form.querySelector('.gts-quantity-input');
            const output = form.querySelector('.gts-order-estimate');
            const update = () => {
                const quantity = Number(input.value || 0);
                output.textContent = `Estimated charge: PKR ${Math.round((quantity / 1000) * rate).toLocaleString()}`;
            };
            input.addEventListener('input', update);
            update();
        });
    </script>
</x-layouts.dashboard>
