@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-6 max-w-4xl">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-800">📡 Modo Campo / Offline-First</h1>
        <p class="text-sm text-slate-500">Sincronize os dados dos imóveis para atendimento de corretores em campo sem internet.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-indigo-600">
            <h2 class="text-lg font-bold text-slate-800 mb-2">📥 Descarregar Dados (Pull)</h2>
            <p class="text-sm text-slate-600 mb-4">Guarde o pacote atual com <strong>{{ $propertiesCount }} imóveis disponíveis</strong> para consulta rápida em formato JSON.</p>
            <a href="{{ route('admin.offline.pull') }}" target="_blank" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded text-sm shadow">
                Descarregar Pacote JSON ↗
            </a>
        </div>

        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-emerald-600">
            <h2 class="text-lg font-bold text-slate-800 mb-2">📤 Enviar Fila (Push)</h2>
            <p class="text-sm text-slate-600 mb-4">Envie dados registados offline (como novas visitas ou leads) de volta para o servidor principal.</p>
            <form action="{{ route('admin.offline.push') }}" method="POST">
                @csrf
                <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-4 py-2 rounded text-sm shadow">
                    Sincronizar Fila Local
                </button>
            </form>
        </div>
    </div>

    <div class="bg-slate-900 text-slate-200 rounded-lg p-6 text-sm">
        <h3 class="font-bold text-white mb-2">💡 Como funciona o Modo Campo?</h3>
        <p class="leading-relaxed text-slate-300">
            Esta ferramenta foi desenhada para permitir que os corretores em visitas externas descarreguem a base de imóveis ativos para o armazenamento local do telemóvel ou tablet. As alterações feitas offline ficam guardadas em cache até que a ligação à internet seja restabelecida.
        </p>
    </div>
</div>
@endsection