@extends('layouts.admin')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="mb-10">
        <a href="{{ route('admin.loja') }}" class="text-slate-500 hover:text-slate-900 transition text-xs font-bold uppercase tracking-widest flex items-center gap-2 mb-4">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Voltar para a Loja
        </a>
        <h1 class="text-4xl font-bold text-slate-900 tracking-tighter">EDITAR <span class="text-red-600">EQUIPAMENTO</span></h1>
        <p class="text-slate-600 font-medium">Atualize os dados do {{ $produto->nome }}.</p>
    </div>

    <form action="{{ route('admin.loja.update', $produto->id) }}" method="POST" enctype="multipart/form-data" class="glass p-8 md:p-12 rounded-[3rem] border border-slate-200 bg-slate-50">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div>
        <label class="block text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-3">Nome do Equipamento</label>
        <input type="text" name="nome" value="{{ $produto->nome }}" required
            class="w-full bg-slate-50 border border-slate-200 rounded-2xl px-6 py-4 text-slate-900 focus:border-red-600 outline-none transition" placeholder="Ex: GPS Geodésico V200">
    </div>

    <div>
        <label class="block text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-3">Preço Venda (Kz)</label>
        <input type="number" step="0.01" name="preco" value="{{ $produto->preco }}" required
            class="w-full bg-slate-50 border border-slate-200 rounded-2xl px-6 py-4 text-slate-900 focus:border-red-600 outline-none transition" placeholder="Ex: 250000">
    </div>

    <div>
        <label class="block text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-3">Stock (Unidades)</label>
        <input type="number" name="stock" value="{{ $produto->stock }}" required
            class="w-full bg-slate-50 border border-slate-200 rounded-2xl px-6 py-4 text-slate-900 focus:border-red-600 outline-none transition" placeholder="Ex: 5">
    </div>

    <div>
        <label class="block text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-3">Modelo de Negócio</label>
        <select name="tipo" class="w-full bg-slate-50 border border-slate-200 rounded-2xl px-6 py-4 text-slate-900 focus:border-red-600 outline-none transition">
            <option value="venda" {{ $produto->tipo == 'venda' ? 'selected' : '' }}>Apenas Venda</option>
            <option value="aluguer" {{ $produto->tipo == 'aluguer' ? 'selected' : '' }}>Apenas Aluguer</option>
            <option value="ambos" {{ $produto->tipo == 'ambos' ? 'selected' : '' }}>Venda e Aluguer</option>
        </select>
    </div>

    <div>
        <label class="block text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-3">Categoria</label>
        <select name="categoria" class="w-full bg-slate-50 border border-slate-200 rounded-2xl px-6 py-4 text-slate-900 focus:border-red-600 outline-none transition">
            <option value="" {{ $produto->categoria == null ? 'selected' : '' }}>Selecionar...</option>
            <option value="gps" {{ $produto->categoria == 'gps' ? 'selected' : '' }}>GPS</option>
            <option value="estacao_total" {{ $produto->categoria == 'estacao_total' ? 'selected' : '' }}>Estação Total</option>
            <option value="drones" {{ $produto->categoria == 'drones' ? 'selected' : '' }}>Drones</option>
            <option value="epis" {{ $produto->categoria == 'epis' ? 'selected' : '' }}>EPIs</option>
        </select>
    </div>

    <div id="preco-aluguer-wrap" class="{{ $produto->tipo == 'venda' ? 'hidden' : '' }}">
        <label class="block text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-3">Preço Aluguer (Kz/Dia)</label>
        <input type="number" step="0.01" name="preco_aluguer" value="{{ $produto->preco_aluguer }}" 
            class="w-full bg-slate-50 border border-slate-200 rounded-2xl px-6 py-4 text-slate-900 focus:border-red-600 outline-none transition" placeholder="Ex: 50000">
    </div>
</div>

        <div class="grid grid-cols-1 gap-8 mt-8">
            <div>
                <label class="block text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-3">Descrição Técnica</label>
                <textarea name="descricao" rows="4" 
                    class="w-full bg-slate-50 border border-slate-200 rounded-3xl px-6 py-4 text-slate-900 focus:border-red-600 focus:ring-0 transition">{{ $produto->descricao }}</textarea>
            </div>

            <div>
                <label class="block text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-3">Alterar Foto (Opcional)</label>
                <div class="flex items-center gap-6 p-6 bg-slate-50 rounded-3xl border border-dashed border-slate-200">
                    @if($produto->imagem)
                        <img src="{{ asset('storage/'.$produto->imagem) }}" class="w-20 h-20 object-cover rounded-xl border border-slate-200">
                    @endif
                    <input type="file" name="imagem" class="text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[10px] file:font-bold file:uppercase file:bg-red-600 file:text-white hover:file:bg-red-700 transition">
                </div>
            </div>

            <div>
                <label class="block text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-3">Galeria de Imagens (Múltiplas Fotos)</label>
                <div class="bg-slate-50 rounded-3xl border border-slate-200 p-6">
                    <!-- Imagens Existentes -->
                    @if($produto->imagens->count() > 0)
                        <div class="mb-6">
                            <p class="text-slate-500 text-xs font-semibold mb-3">Imagens Atuais:</p>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                @foreach($produto->imagens as $img)
                                    <div class="relative group">
                                        <img src="{{ asset('storage/' . $img->imagem) }}" class="w-full aspect-square object-cover rounded-lg border border-slate-200">
                                        <form action="{{ route('admin.loja.delete.imagem', $img->id) }}" method="POST" class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center bg-black/50 rounded-lg" onsubmit="return confirm('Remover esta imagem?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="bg-red-600 hover:bg-red-700 rounded-full p-2 transition-all">
                                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                                </svg>
                                            </button>
                                        </form>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Upload de Novas Imagens -->
                    <p class="text-slate-500 text-xs font-semibold mb-3">Adicionar Imagens à Galeria:</p>
                    <input type="file" name="galeria_imagens[]" multiple accept="image/*" class="w-full text-slate-500 text-xs file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[10px] file:font-bold file:uppercase file:bg-red-600 file:text-white cursor-pointer hover:file:bg-red-700 transition-all">
                    <p class="text-slate-500 text-[10px] mt-2">Selecione uma ou mais fotos. As imagens da galeria aparecerão como miniaturas para o cliente alternar.</p>
                </div>
            </div>
        </div>

        <div class="mt-12 flex gap-4">
            <button type="submit" class="flex-1 bg-red-600 hover:bg-red-700 text-white font-bold py-4 rounded-2xl shadow-lg shadow-red-600/20 transition-all uppercase text-xs tracking-widest">
                Guardar Alterações
            </button>
            <a href="{{ route('admin.loja') }}" class="px-8 py-4 bg-slate-50 hover:bg-slate-100 text-slate-700 font-bold rounded-2xl transition-all uppercase text-[10px] tracking-widest border border-slate-200">
                Cancelar
            </a>
        </div>
    </form>
</div>

<script>
    (function () {
        const tipo = document.querySelector('select[name="tipo"]');
        const aluguelWrap = document.getElementById('preco-aluguer-wrap');
        const precoAluguer = document.querySelector('input[name="preco_aluguer"]');
        const precoVenda = document.querySelector('input[name="preco"]');

        function toggleFields() {
            const val = tipo.value;
            if (val === 'aluguer') {
                aluguelWrap.classList.remove('hidden');
                precoAluguer.required = true;
                precoVenda.required = false;
                precoVenda.parentElement.classList.add('opacity-50');
            } else if (val === 'ambos') {
                aluguelWrap.classList.remove('hidden');
                precoAluguer.required = true;
                precoVenda.required = true;
                precoVenda.parentElement.classList.remove('opacity-50');
            } else { // venda
                aluguelWrap.classList.add('hidden');
                precoAluguer.required = false;
                precoVenda.required = true;
                precoVenda.parentElement.classList.remove('opacity-50');
            }
        }

        tipo.addEventListener('change', toggleFields);
        document.addEventListener('DOMContentLoaded', toggleFields);
        // ensure initial state (in case DOMContentLoaded already fired)
        try { toggleFields(); } catch(e) { /* ignore */ }
    })();
</script>

@endsection