@extends('admin.layouts.app')

@section('content')
    <div class="azp-page">
        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">Loja de pontos</div>
                <div class="azp-page-subtitle">
                    Escolhe produtos da loja normal, define o custo em pontos e limita por clube quando necessário.
                </div>
            </div>

            <div class="azp-actions">
                <a href="{{ route('admin.point-store-products.create') }}" class="btn primary">+ Novo produto</a>
            </div>
        </div>

        <div class="azp-card" style="margin-bottom:12px;">
            <div class="azp-filter-head">
                <div class="azp-section-title" style="margin:0">Filtros</div>

                <div class="azp-filter-actions">
                    <a class="btn outline" href="{{ route('admin.point-store-products.index') }}">Limpar</a>
                    <button class="btn primary" type="submit" form="pointsStoreFilterForm">Aplicar</button>
                </div>
            </div>

            <form id="pointsStoreFilterForm" method="GET" class="azp-filter-grid">
                <div class="field">
                    <label class="label">Pesquisa</label>
                    <input type="text" name="q" value="{{ request('q') }}" placeholder="Produto ou SKU">
                </div>

                <div class="field">
                    <label class="label">Tipo</label>
                    <select name="type">
                        <option value="">Todos</option>
                        <option value="product" {{ request('type') === 'product' ? 'selected' : '' }}>Produtos</option>
                        <option value="voucher" {{ request('type') === 'voucher' ? 'selected' : '' }}>Vouchers</option>
                    </select>
                </div>

                <div class="field">
                    <label class="label">Âmbito</label>
                    <select name="scope">
                        <option value="">Todos</option>
                        <option value="global" {{ request('scope') === 'global' ? 'selected' : '' }}>Todos os clubes</option>
                        <option value="club" {{ request('scope') === 'club' ? 'selected' : '' }}>Clube específico</option>
                    </select>
                </div>

                <div class="field">
                    <label class="label">Estado</label>
                    <select name="status">
                        <option value="">Todos</option>
                        <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Ativos</option>
                        <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>Inativos</option>
                    </select>
                </div>
            </form>
        </div>

        <div class="azp-card">
            <div class="azp-table-wrap">
                <table class="azp-table">
                    <thead>
                    <tr>
                        <th>Produto</th>
                        <th style="width:130px;">Tipo</th>
                        <th style="width:180px;">Âmbito</th>
                        <th style="width:130px;text-align:right;">Pontos</th>
                        <th style="width:120px;text-align:right;">Desconto</th>
                        <th style="width:110px;text-align:center;">Estado</th>
                        <th style="width:110px;text-align:right;">Ordem</th>
                        <th style="width:190px;text-align:right;">Ações</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($entries as $entry)
                        @php
                            $product = $entry->product;
                            $mainImagePath = optional($product)->image_url ?? optional($product->images->first())->path;
                            $mainImageUrl = $mainImagePath ? asset('storage/' . ltrim($mainImagePath, '/')) : null;
                        @endphp

                        <tr>
                            <td>
                                <div class="points-product-main">
                                    <div class="points-product-thumb">
                                        @if($mainImageUrl)
                                            <img src="{{ $mainImageUrl }}" alt="{{ $product->name }}">
                                        @else
                                            <span>Sem imagem</span>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="azp-table-primary">{{ optional($product)->name ?? 'Produto removido' }}</div>
                                        <div class="points-product-meta">
                                            {{ $entry->displayTitle() }}
                                            <br>Ref: {{ optional($product)->sku ?: '—' }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="azp-tag">{{ $entry->isVoucher() ? 'Voucher' : 'Produto' }}</span>
                            </td>
                            <td>
                                @if($entry->club)
                                    <span class="azp-tag">{{ $entry->club->name }}</span>
                                @else
                                    <span class="azp-tag">Todos os clubes</span>
                                @endif
                            </td>
                            <td style="text-align:right;font-weight:900;">
                                {{ number_format((int) $entry->points_cost, 0, ',', ' ') }}
                            </td>
                            <td style="text-align:right;">
                                @if($entry->isVoucher())
                                    <span class="azp-badge-pill">{{ (int) $entry->discount_percent }}%</span>
                                @else
                                    —
                                @endif
                            </td>
                            <td style="text-align:center;">
                                @if($entry->is_active)
                                    <span class="azp-tag"><span class="azp-dot active"></span>Ativo</span>
                                @else
                                    <span class="azp-tag"><span class="azp-dot inactive"></span>Inativo</span>
                                @endif
                            </td>
                            <td style="text-align:right;">{{ $entry->sort_order }}</td>
                            <td style="text-align:right;">
                                <div class="azp-actions" style="justify-content:flex-end;">
                                    <a href="{{ route('admin.point-store-products.edit', $entry) }}" class="btn xs">Editar</a>
                                    <form method="POST" action="{{ route('admin.point-store-products.destroy', $entry) }}" onsubmit="return confirm('Remover este produto da loja de pontos?');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn danger xs" type="submit">Remover</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" style="color:var(--muted);">Ainda não há produtos na loja de pontos.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

            @if(method_exists($entries, 'links'))
                <div style="margin-top:14px;">{{ $entries->links() }}</div>
            @endif
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .azp-filter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.06);margin-bottom:10px;}
        .azp-filter-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
        .azp-filter-grid{display:grid;grid-template-columns:1.2fr .7fr .8fr .7fr;gap:12px;align-items:end;}
        .points-product-main{display:flex;align-items:center;gap:10px;}
        .points-product-thumb{width:44px;height:44px;border-radius:10px;overflow:hidden;background:#f2f2f2;border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#999;font-size:10px;text-align:center;}
        .points-product-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
        .points-product-meta{font-size:12px;color:rgba(17,17,17,.58);margin-top:2px;}
        @media (max-width: 900px){.azp-filter-grid{grid-template-columns:1fr;}.azp-filter-head{align-items:flex-start;}}
    </style>
@endpush