@extends('layouts.admin', ['title' => 'Conciliação de Vendas Externas'])

@section('content')
    <div class="space-y-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-900">Conciliação de Vendas Externas</h1>
            <p class="mt-1 text-sm text-slate-500">
                Exporte pedidos direto do player de e-commerce para comparar usos de cupom, vendas e comissão com o Orvox.
            </p>
        </div>

        <form method="POST" action="{{ route('admin.reports.external-sales-reconciliation.export') }}" class="card space-y-6">
            @csrf

            @if($errors->any())
                <div class="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                    <strong>Revise os campos:</strong>
                    <ul class="mt-2 list-disc pl-5">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if($integrations->isEmpty())
                <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
                    Nenhuma integração externa foi encontrada para esta loja. Conecte primeiro um player em Integrações.
                </div>
            @endif

            <div class="grid gap-4 md:grid-cols-4">
                <div>
                    <label class="input-label">Player</label>
                    <select name="provider" class="input-field" @disabled($integrations->isEmpty())>
                        @foreach($integrations as $integration)
                            @php($slug = $integration->provider?->slug)
                            <option value="{{ $slug }}" @selected(old('provider', $provider) === $slug)>
                                {{ $integration->provider?->name ?? ucfirst((string) $slug) }}
                                @if($integration->external_store_id)
                                    — loja {{ $integration->external_store_id }}
                                @endif
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="input-label">Tipo de período</label>
                    <select name="period_type" class="input-field" data-period-type>
                        <option value="month" @selected(old('period_type', $periodType) === 'month')>Mês</option>
                        <option value="range" @selected(old('period_type', $periodType) === 'range')>Range personalizado</option>
                    </select>
                </div>

                <div data-month-wrapper>
                    <label class="input-label">Mês</label>
                    <input type="month" name="month" class="input-field" value="{{ old('month', $month) }}">
                </div>

                <div>
                    <label class="input-label">Status</label>
                    <select name="status" class="input-field">
                        <option value="paid" @selected(old('status', $status) === 'paid')>Apenas pagos</option>
                        <option value="paid_pending" @selected(old('status', $status) === 'paid_pending')>Pagos + pendentes</option>
                        <option value="all" @selected(old('status', $status) === 'all')>Todos</option>
                    </select>
                </div>
            </div>

            <div class="grid gap-4 md:grid-cols-2" data-range-wrapper>
                <div>
                    <label class="input-label">Data inicial</label>
                    <input type="date" name="start_date" class="input-field" value="{{ old('start_date', $startDate) }}">
                </div>

                <div>
                    <label class="input-label">Data final</label>
                    <input type="date" name="end_date" class="input-field" value="{{ old('end_date', $endDate) }}">
                </div>
            </div>

            <div class="rounded-2xl bg-slate-50 p-4 text-sm text-slate-600">
                <strong>O que será exportado:</strong>
                <p class="mt-1">
                    O arquivo CSV compatível com Excel terá uma seção de resumo por influenciador/cupom e uma seção detalhada por pedido,
                    indicando diferenças entre o player externo e o Orvox.
                </p>
            </div>

            <div class="flex justify-end gap-3 border-t border-slate-100 pt-6">
                <a href="{{ route('admin.reports.index') }}" class="btn-secondary">Cancelar</a>
                <button type="submit" class="btn-primary" @disabled($integrations->isEmpty())>Exportar conciliação</button>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const periodType = document.querySelector('[data-period-type]');
            const monthWrapper = document.querySelector('[data-month-wrapper]');
            const rangeWrapper = document.querySelector('[data-range-wrapper]');

            function refreshPeriodFields() {
                const isRange = periodType.value === 'range';
                monthWrapper.hidden = isRange;
                rangeWrapper.hidden = !isRange;
            }

            periodType?.addEventListener('change', refreshPeriodFields);
            refreshPeriodFields();
        });
    </script>
@endsection