@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/gigax-compact.css') }}?v=1.0.4">
<style>
.gx-store{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}
.gx-main,.gx-side{display:grid;gap:14px;align-content:start}
.gx-card{background:linear-gradient(180deg,#0c1b28,#09151f);border:1px solid #183149;border-radius:10px;padding:14px}
.gx-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.gx-title{font-size:12px;font-weight:900;text-transform:uppercase}
.gx-sub{font-size:9px;color:#7890a3;margin-top:4px}
.gx-balance{background:#0b1823;border:1px solid #173047;border-radius:9px;padding:9px 12px}
.gx-balance small{display:block;font-size:8px;color:#7890a3;text-transform:uppercase}
.gx-balance strong{display:block;color:#00ef79;font-size:16px;margin-top:2px}
.gx-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:12px}
.gx-cat{border:1px solid #173047;background:#0b1823;border-radius:9px;padding:14px 10px;text-align:center;color:#dce8ef;cursor:pointer;min-height:82px}
.gx-cat:hover,.gx-cat.active{border-color:#00ef79;background:#0a2a1c;color:#00ef79}
.gx-cat i{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 7px;border:1px solid #205171;border-radius:10px;font-style:normal;font-size:16px}
.gx-cat b{display:block;font-size:10px}.gx-cat small{display:block;font-size:8px;color:#7890a3;margin-top:4px}
.gx-panel{display:none}.gx-panel.active{display:block}
.gx-empty{min-height:145px;border:1px dashed #1a3548;border-radius:9px;background:#08151e;display:grid;place-items:center;text-align:center;padding:20px;color:#71889b}
.gx-empty b{display:block;color:#dce8ef;font-size:11px;margin-bottom:5px}
.gx-table{width:100%;border-collapse:collapse}
.gx-table th{font-size:8px;color:#7890a3;text-align:left;text-transform:uppercase;padding:9px;border-bottom:1px solid #173047}
.gx-table td{font-size:9px;padding:11px 9px;border-bottom:1px solid #142838}
.gx-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #142838;font-size:9px}
.gx-row:last-child{border-bottom:0}
.gx-green{color:#00ef79}
.gx-side-title{font-size:10px;font-weight:900;text-transform:uppercase;margin-bottom:8px}
.gx-search{width:100%;height:34px;border:1px solid #173047;border-radius:7px;background:#0b1823;color:#dce8ef;padding:0 10px;font-size:9px}
.gx-note{font-size:8px;color:#71889b;line-height:1.5}
@media(max-width:1200px){.gx-store{grid-template-columns:1fr}.gx-cats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gx-cats{grid-template-columns:repeat(2,1fr)}}
</style>
@endpush

@section('title','Loja - GIGAX ARENA')
@section('page_title','Loja')

@section('content')

{{-- GIGAX_LOJA_PREMIUM_ACCESS_V1 --}}
<style>
.gx-premium-access{
    margin:0 0 12px;
    padding:13px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border:1px solid rgba(255,210,43,.24);
    border-radius:11px;
    background:
        radial-gradient(circle at 86% 30%,rgba(255,210,43,.08),transparent 28%),
        linear-gradient(100deg,rgba(32,242,122,.055),rgba(21,156,241,.035),rgba(173,33,239,.035));
}
.gx-premium-access-copy{min-width:0}
.gx-premium-access-kicker{
    margin:0 0 2px;
    color:#ffd94f;
    font-size:9px;
    font-weight:1000;
    letter-spacing:.10em;
}
.gx-premium-access-title{
    margin:0!important;
    color:#f4fbff;
    font-size:17px!important;
    font-weight:1000;
    line-height:1!important;
}
.gx-premium-access-sub{
    margin:4px 0 0;
    color:#8199ac;
    font-size:9px;
    line-height:1.15;
}
.gx-premium-access-btn{
    flex:0 0 auto;
    height:36px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,210,43,.34);
    border-radius:8px;
    background:linear-gradient(135deg,rgba(255,210,43,.16),rgba(32,242,122,.10));
    color:#ffe46b!important;
    font-size:9px;
    font-weight:1000;
    text-decoration:none!important;
    white-space:nowrap;
    transition:.15s ease;
}
.gx-premium-access-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.14);
    border-color:rgba(255,210,43,.58);
}
@media(max-width:650px){
    .gx-premium-access{align-items:flex-start;flex-direction:column}
    .gx-premium-access-btn{width:100%}
}
</style>

<div class="gx-premium-access">
    <div class="gx-premium-access-copy">
        <div class="gx-premium-access-kicker">★ GIGAX PREMIUM</div>
        <h2 class="gx-premium-access-title">Premium</h2>
        <p class="gx-premium-access-sub">Planos Premium, PIX, cartão e boleto.</p>
    </div>
    <a class="gx-premium-access-btn"
       href="{{ Route::has('premium.index') ? route('premium.index') : url('/premium') }}">
        VER PREMIUM →
    </a>
</div>
{{-- /GIGAX_LOJA_PREMIUM_ACCESS_V1 --}}

@php
    $user = auth()->user();

    // Usa saldo real somente se a coluna existir/estiver preenchida.
    // Remove o fallback fictício de 2.450 GX.
    $gxBalance = (int) (data_get($user, 'gx_coins') ?? 0);
@endphp

<div class="gx-store" id="gx-store">
    <main class="gx-main">
        <section class="gx-card">
            <div class="gx-head">
                <div>
                    <div class="gx-title">Loja</div>
                    <div class="gx-sub">Tudo que você precisa em um só lugar.</div>
                </div>
                <div class="gx-balance">
                    <small>Saldo</small>
                    <strong>{{ number_format($gxBalance, 0, ',', '.') }} GX</strong>
                </div>
            </div>

            <div class="gx-cats" role="tablist">
                <button type="button" class="gx-cat active" data-store-tab="itens">
                    <i>◇</i><b>Itens</b><small>Skins, emblemas e mais</small>
                </button>
                <button type="button" class="gx-cat" data-store-tab="pacotes">
                    <i>▣</i><b>Pacotes</b><small>Pacotes especiais</small>
                </button>
                <button type="button" class="gx-cat" data-store-tab="apostas">
                    <i>◎</i><b>Apostas</b><small>Indisponível no momento</small>
                </button>
                <button type="button" class="gx-cat" data-store-tab="servicos">
                    <i>⚙</i><b>Serviços</b><small>Serviços premium</small>
                </button>
                <button type="button" class="gx-cat" data-store-tab="cupons">
                    <i>✦</i><b>Cupons</b><small>Cupons de desconto</small>
                </button>
            </div>
        </section>

        <section class="gx-card">
            <input id="gxStoreSearch" class="gx-search" type="search" placeholder="Buscar na loja...">
        </section>

        <section class="gx-card gx-panel active" data-store-panel="itens">
            <div class="gx-title">Itens</div>
            <div class="gx-empty" style="margin-top:10px">
                <div><b>Nenhum item cadastrado</b><span>Os produtos reais aparecerão aqui quando forem adicionados ao sistema.</span></div>
            </div>
        </section>

        <section class="gx-card gx-panel" data-store-panel="pacotes">
            <div class="gx-title">Pacotes</div>
            <div class="gx-empty" style="margin-top:10px">
                <div><b>Nenhum pacote cadastrado</b><span>Não existem pacotes disponíveis no momento.</span></div>
            </div>
        </section>

        <section class="gx-card gx-panel" data-store-panel="apostas">
            <div class="gx-title">Apostas</div>
            <div class="gx-empty" style="margin-top:10px">
                <div><b>Nenhuma aposta ativa</b><span>Não existem registros ativos nesta área.</span></div>
            </div>
        </section>

        <section class="gx-card gx-panel" data-store-panel="servicos">
            <div class="gx-title">Serviços</div>
            <div class="gx-empty" style="margin-top:10px">
                <div><b>Nenhum serviço cadastrado</b><span>Os serviços reais aparecerão aqui quando forem configurados.</span></div>
            </div>
        </section>

        <section class="gx-card gx-panel" data-store-panel="cupons">
            <div class="gx-title">Cupons</div>
            <div class="gx-empty" style="margin-top:10px">
                <div><b>Nenhum cupom ativo</b><span>Você não possui cupons ativos no momento.</span></div>
            </div>
        </section>

        <section class="gx-card">
            <div class="gx-title">Histórico / Pedidos</div>
            <div style="overflow:auto;margin-top:8px">
                <table class="gx-table">
                    <thead>
                        <tr><th>Pedido</th><th>Produto</th><th>Status</th><th>Valor</th><th>Data</th></tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="5" style="text-align:center;color:#71889b;padding:24px">
                                Nenhum pedido realizado.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>

    <aside class="gx-side">
        <section class="gx-card">
            <div class="gx-side-title">Resumo</div>
            <div class="gx-row"><span>Saldo atual</span><b class="gx-green">{{ number_format($gxBalance, 0, ',', '.') }} GX</b></div>
            <div class="gx-row"><span>Pedidos</span><b>0</b></div>
            <div class="gx-row"><span>Apostas ativas</span><b>0</b></div>
            <div class="gx-row"><span>Cupons</span><b>0</b></div>
        </section>

        <section class="gx-card">
            <div class="gx-side-title">Mais vendidos</div>
            <div class="gx-empty" style="min-height:80px">
                <div><b>Sem ranking de vendas</b><span>Ainda não existem vendas registradas.</span></div>
            </div>
        </section>

        <section class="gx-card">
            <div class="gx-side-title">Ofertas</div>
            <div class="gx-empty" style="min-height:80px">
                <div><b>Nenhuma oferta ativa</b><span>Promoções reais aparecerão aqui.</span></div>
            </div>
        </section>

        <section class="gx-card">
            <div class="gx-side-title">Pagamento</div>
            <div class="gx-note">
                Os meios de pagamento só devem ser exibidos quando estiverem efetivamente configurados no backend/gateway.
            </div>
        </section>
    </aside>
</div>

@push('scripts')
<script>
(function(){
    const root = document.getElementById('gx-store');
    if (!root) return;

    const tabs = [...root.querySelectorAll('[data-store-tab]')];
    const panels = [...root.querySelectorAll('[data-store-panel]')];

    function activate(name) {
        tabs.forEach(el => el.classList.toggle('active', el.dataset.storeTab === name));
        panels.forEach(el => el.classList.toggle('active', el.dataset.storePanel === name));
        history.replaceState(null, '', '#' + name);
    }

    tabs.forEach(el => el.addEventListener('click', () => activate(el.dataset.storeTab)));

    const valid = ['itens','pacotes','apostas','servicos','cupons'];
    const initial = location.hash.replace('#','');
    if (valid.includes(initial)) activate(initial);

    document.getElementById('gxStoreSearch')?.addEventListener('input', function(){
        // Estrutura pronta para filtrar produtos reais quando forem carregados.
        const q = this.value.trim().toLowerCase();
        root.querySelectorAll('[data-product-name]').forEach(el => {
            el.style.display = !q || (el.dataset.productName || '').toLowerCase().includes(q) ? '' : 'none';
        });
    });
})();
</script>
@endpush
@endsection