@extends('layouts.app')
@section('title', 'Marketplaces')

@section('content')

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

    {{-- ── Formulário adicionar ────────────────────────────────────────── --}}
    <div class="bg-white rounded-xl border border-slate-200 p-4 h-fit">
        <h2 class="text-sm font-semibold text-slate-700 mb-4">Novo Marketplace / Transportadora</h2>
        <form method="POST" action="{{ route('marketplaces.store') }}" class="space-y-3">
            @csrf
            <div>
                <label class="block text-xs font-medium text-slate-600 mb-1">Nome *</label>
                <input type="text" name="nome" required
                    class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
                    placeholder="Ex: Shopee, Jadlog...">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-600 mb-1">Valor por Pacote (centavos) *</label>
                <input type="number" name="valor_centavos" min="1" required
                    class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
                    placeholder="100 = R$ 1,00">
                <p class="text-xs text-slate-400 mt-1">100 centavos = R$ 1,00</p>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-600 mb-1">Cor</label>
                <div class="flex items-center gap-2">
                    <input type="color" name="cor" value="#16a34a"
                        class="w-10 h-9 rounded-lg border border-slate-300 cursor-pointer">
                    <span class="text-xs text-slate-500">Cor identificadora</span>
                </div>
            </div>
            <button type="submit"
                class="w-full bg-brand-600 hover:bg-brand-700 text-white font-medium py-2 rounded-lg text-sm transition-colors">
                Adicionar
            </button>
        </form>
    </div>

    {{-- ── Lista de marketplaces ───────────────────────────────────────── --}}
    <div class="lg:col-span-2 space-y-3">
        @foreach($marketplaces as $mp)
            <div x-data="{ editando: false }"
                 class="bg-white rounded-xl border border-slate-200 p-4">

                {{-- Visualização --}}
                <div x-show="!editando" class="flex items-center gap-4">
                    <div class="w-3 h-3 rounded-full shrink-0"
                         style="background-color: {{ $mp->cor }}"></div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="font-semibold text-slate-800 text-sm">{{ $mp->nome }}</span>
                            @if(!$mp->ativo)
                                <span class="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full">Inativo</span>
                            @endif
                        </div>
                        <div class="text-xs text-slate-500 mt-0.5">
                            {{ $mp->valor_reais }} por pacote
                            @if($mp->bipagens_count ?? 0 > 0)
                                · {{ $mp->bipagens_sum_quantidade ?? 0 }} pacotes bipados no total
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-2 shrink-0">
                        <button @click="editando = true"
                            class="text-xs text-slate-500 hover:text-brand-600 transition-colors font-medium">
                            Editar
                        </button>
                        @if(($mp->bipagens_count ?? 0) == 0)
                            <form method="POST" action="{{ route('marketplaces.destroy', $mp) }}"
                                  onsubmit="return confirm('Remover {{ $mp->nome }}?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-xs text-red-400 hover:text-red-600 transition-colors">
                                    Remover
                                </button>
                            </form>
                        @endif
                    </div>
                </div>

                {{-- Edição --}}
                <div x-show="editando" x-cloak>
                    <form method="POST" action="{{ route('marketplaces.update', $mp) }}" class="space-y-3">
                        @csrf @method('PUT')
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-medium text-slate-600 mb-1">Nome</label>
                                <input type="text" name="nome" value="{{ $mp->nome }}" required
                                    class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-slate-600 mb-1">Valor (centavos)</label>
                                <input type="number" name="valor_centavos" value="{{ $mp->valor_centavos }}" min="1" required
                                    class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
                            </div>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="flex items-center gap-2">
                                <input type="color" name="cor" value="{{ $mp->cor }}"
                                    class="w-10 h-9 rounded-lg border border-slate-300 cursor-pointer">
                                <label class="text-xs text-slate-500">Cor</label>
                            </div>
                            <label class="flex items-center gap-2 text-xs text-slate-600 cursor-pointer">
                                <input type="checkbox" name="ativo" value="1" {{ $mp->ativo ? 'checked' : '' }}
                                    class="rounded border-slate-300 text-brand-600">
                                Ativo
                            </label>
                        </div>
                        <div class="flex gap-2">
                            <button type="submit"
                                class="flex-1 bg-brand-600 hover:bg-brand-700 text-white text-sm py-2 rounded-lg font-medium transition-colors">
                                Salvar
                            </button>
                            <button type="button" @click="editando = false"
                                class="px-4 py-2 border border-slate-300 rounded-lg text-sm text-slate-600 hover:bg-slate-50 transition-colors">
                                Cancelar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
</div>

@endsection