@extends('layouts.admin')
@section('title', 'Simulador Tarifário')
@section('breadcrumb')
    <a class="breadcrumb-item" href="{{ route('admin.tariffs.index') }}">Tarifas</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Simulador</span>
@endsection
@push('styles')
<style>
.tr-nav { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.tr-nav a { padding:7px 14px; border-radius:8px; font-size:.8rem; font-weight:600; text-decoration:none; border:1.5px solid #e5e7eb; color:#374151; background:#fff; }
.tr-nav a.active { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.sim-grid { display:grid; grid-template-columns:380px 1fr; gap:24px; }
@media(max-width:900px){ .sim-grid { grid-template-columns:1fr; } }
.result-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; color:#9ca3af; font-size:.88rem; gap:12px; }
.daily-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f1f5f9; font-size:.82rem; }
.daily-row:last-child { border-bottom:none; }
</style>
@endpush
@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Simulador Tarifário</h1>
        <p class="page-subtitle">Teste o motor de tarifas sem criar uma reserva</p>
    </div>
</div>

<div class="tr-nav">
    <a href="{{ route('admin.tariffs.index') }}">📋 Regras</a>
    <a href="{{ route('admin.tariffs.simulator') }}" class="active">🧮 Simulador</a>
</div>

<div class="sim-grid">
    {{-- Painel de entrada --}}
    <div class="card">
        <div class="card-header"><h3 style="margin:0;font-size:.88rem;font-weight:700;">🔧 Parâmetros</h3></div>
        <div class="card-body" style="padding:20px;display:flex;flex-direction:column;gap:14px;">
            <div>
                <label class="form-label">Categoria de UH *</label>
                <select id="sim-category" class="form-input">
                    <option value="">Selecione…</option>
                    @foreach($categories as $cat)
                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                <div>
                    <label class="form-label">Check-in *</label>
                    <input type="date" id="sim-checkin" class="form-input" value="{{ now()->toDateString() }}">
                </div>
                <div>
                    <label class="form-label">Check-out *</label>
                    <input type="date" id="sim-checkout" class="form-input" value="{{ now()->addDays(2)->toDateString() }}">
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                <div>
                    <label class="form-label">Adultos</label>
                    <input type="number" id="sim-adults" class="form-input" value="2" min="1" max="10">
                </div>
                <div>
                    <label class="form-label">Crianças</label>
                    <input type="number" id="sim-children" class="form-input" value="0" min="0" max="10">
                </div>
            </div>
            <div>
                <label class="form-label">Canal de Venda</label>
                <select id="sim-channel" class="form-input">
                    <option value="">Direto (sem canal)</option>
                    @foreach($channels as $ch)
                    <option value="{{ $ch->id }}">{{ $ch->name }}</option>
                    @endforeach
                </select>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                <div>
                    <label class="form-label">Desconto Manual (R$)</label>
                    <input type="number" id="sim-discount" class="form-input" value="0" min="0" step="0.01">
                </div>
                <div>
                    <label class="form-label">Acréscimo (R$)</label>
                    <input type="number" id="sim-surcharge" class="form-input" value="0" min="0" step="0.01">
                </div>
            </div>
            <button id="btn-simulate" onclick="runSimulation()"
                    style="padding:11px;background:var(--color-primary);color:#fff;border:none;border-radius:9px;font-size:.88rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;">
                🧮 Calcular Tarifa
            </button>
        </div>
    </div>

    {{-- Resultado --}}
    <div>
        <div class="card" id="sim-result-card">
            <div class="card-header"><h3 style="margin:0;font-size:.88rem;font-weight:700;">📊 Resultado do Cálculo</h3></div>
            <div class="card-body" style="padding:20px;">
                <div class="result-placeholder" id="sim-placeholder">
                    <div style="font-size:2.5rem;">🧮</div>
                    <div>Preencha os parâmetros e clique em <strong>Calcular Tarifa</strong></div>
                </div>
                <div id="sim-result" style="display:none;">
                    {{-- Preenchido via JS --}}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
async function runSimulation() {
    const btn = document.getElementById('btn-simulate');
    btn.disabled = true;
    btn.textContent = 'Calculando…';

    const payload = {
        room_category_id: document.getElementById('sim-category').value,
        checkin:          document.getElementById('sim-checkin').value,
        checkout:         document.getElementById('sim-checkout').value,
        adults:           document.getElementById('sim-adults').value,
        children:         document.getElementById('sim-children').value,
        sales_channel_id: document.getElementById('sim-channel').value || null,
        manual_discount:  document.getElementById('sim-discount').value || 0,
        manual_surcharge: document.getElementById('sim-surcharge').value || 0,
    };

    try {
        const res = await fetch('{{ route("admin.tariffs.simulate") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify(payload),
        });

        const data = await res.json();

        if (!res.ok || !data.success) {
            const errors = data.errors ? Object.values(data.errors).flat().join('<br>') : (data.error || data.message || 'Erro desconhecido.');
            document.getElementById('sim-result').innerHTML = `<div style="color:#dc2626;padding:12px;background:#fee2e2;border-radius:8px;font-size:.82rem;">${errors}</div>`;
            document.getElementById('sim-placeholder').style.display = 'none';
            document.getElementById('sim-result').style.display = 'block';
            return;
        }

        const r = data.result;
        renderResult(r);
    } catch(e) {
        alert('Erro de comunicação: ' + e.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = '🧮 Calcular Tarifa';
    }
}

function fmt(v) {
    return 'R$ ' + parseFloat(v).toLocaleString('pt-BR', {minimumFractionDigits:2});
}

function renderResult(r) {
    const daily = r.daily_breakdown || [];
    const dailyHtml = daily.map(d => `
        <div class="daily-row">
            <div>
                <div style="font-weight:600;font-size:.8rem;">${d.date} <span style="color:#9ca3af;font-size:.72rem;">${d.day_of_week || ''}</span></div>
                <div style="font-size:.72rem;color:#6b7280;">${d.rule_name} <span style="background:#f1f5f9;border-radius:4px;padding:1px 5px;">${d.rule_type}</span>${d.channel_adjustment ? ` <span style="color:#7c3aed;">Δ ${d.channel_adjustment > 0 ? '+' : ''}${fmt(d.channel_adjustment)}</span>` : ''}</div>
            </div>
            <span style="font-weight:700;">${fmt(d.price)}</span>
        </div>
    `).join('');

    const noDaily = `<div style="text-align:center;padding:16px;color:#9ca3af;font-size:.82rem;">Nenhuma diária (sem tarifa cadastrada ou período inválido)</div>`;

    document.getElementById('sim-result').innerHTML = `
        <!-- KPIs -->
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;">
            <div style="background:#eff6ff;border-radius:10px;padding:14px;text-align:center;">
                <div style="font-size:.65rem;font-weight:700;text-transform:uppercase;color:#93c5fd;margin-bottom:4px;">Diárias</div>
                <div style="font-size:1.4rem;font-weight:800;color:#1e40af;">${r.nights}</div>
            </div>
            <div style="background:#dcfce7;border-radius:10px;padding:14px;text-align:center;">
                <div style="font-size:.65rem;font-weight:700;text-transform:uppercase;color:#86efac;margin-bottom:4px;">Média/Noite</div>
                <div style="font-size:1.4rem;font-weight:800;color:#15803d;">${fmt(r.average_per_night)}</div>
            </div>
            <div style="background:#f5f3ff;border-radius:10px;padding:14px;text-align:center;">
                <div style="font-size:.65rem;font-weight:700;text-transform:uppercase;color:#c4b5fd;margin-bottom:4px;">Total Final</div>
                <div style="font-size:1.4rem;font-weight:800;color:#6d28d9;">${fmt(r.total_final)}</div>
            </div>
        </div>

        <!-- Regra aplicada -->
        ${r.applied_rule_name ? `<div style="background:#fefce8;border:1px solid #fde68a;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:.8rem;color:#92400e;">
            <strong>Regra Dominante:</strong> ${r.applied_rule_name} ${r.has_package ? '<span style="background:#d1fae5;color:#065f46;border-radius:4px;padding:1px 6px;margin-left:4px;">📦 Pacote</span>' : ''}
        </div>` : ''}

        <!-- Breakdown diário -->
        <div style="font-weight:700;font-size:.82rem;margin-bottom:8px;color:#374151;">📅 Detalhamento por dia</div>
        <div style="border:1px solid #f1f5f9;border-radius:8px;padding:0 12px;margin-bottom:16px;">
            ${daily.length ? dailyHtml : noDaily}
        </div>

        <!-- Totais -->
        <div style="border:1px solid #f1f5f9;border-radius:8px;padding:12px 16px;font-size:.82rem;">
            <div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f8fafc;">
                <span style="color:#6b7280;">Base das diárias</span><span>${fmt(r.total_base)}</span>
            </div>
            ${r.total_extras > 0 ? `<div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f8fafc;"><span style="color:#6b7280;">Extras (pax)</span><span>+ ${fmt(r.total_extras)}</span></div>` : ''}
            ${r.manual_discount > 0 ? `<div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f8fafc;"><span style="color:#16a34a;">Desconto manual</span><span style="color:#16a34a;">- ${fmt(r.manual_discount)}</span></div>` : ''}
            ${r.manual_surcharge > 0 ? `<div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f8fafc;"><span style="color:#dc2626;">Acréscimo manual</span><span style="color:#dc2626;">+ ${fmt(r.manual_surcharge)}</span></div>` : ''}
            <div style="display:flex;justify-content:space-between;padding:8px 0;font-weight:800;font-size:.95rem;border-top:2px solid #e5e7eb;margin-top:4px;">
                <span>Total Final</span><span style="color:#6d28d9;">${fmt(r.total_final)}</span>
            </div>
        </div>
    `;

    document.getElementById('sim-placeholder').style.display = 'none';
    document.getElementById('sim-result').style.display = 'block';
}
</script>
@endsection