@extends('layouts.admin')

@section('content')
<div class="fixed inset-0 pointer-events-none z-0 overflow-hidden">
    <div class="absolute -top-[5%] -right-[5%] w-[30%] h-[30%] bg-blue-50 blur-[100px] rounded-full opacity-60"></div>
</div>

<div class="relative z-10 w-full max-w-4xl mx-auto px-4 py-8">
    <header class="mb-10">
        <div class="flex items-center gap-3 mb-2">
            <span class="w-8 h-[2px] bg-[#06458F]"></span>
            <span class="text-[#06458F] font-bold text-[10px] uppercase tracking-[0.4em]">Gestão da Loja</span>
        </div>
        <h1 class="text-4xl font-bold text-slate-800 italic tracking-tighter uppercase">NOVO <span class="text-[#06458F]">EQUIPAMENTO</span></h1>
        <p class="text-slate-600 font-medium">Adicione um novo hardware de alta precisão ao inventário e catálogo da loja.</p>
    </header>

    @if($errors->any())
        <div class="mb-8 p-5 bg-blue-50 border-l-4 border-[#06458F] rounded-r-2xl shadow-sm">
            <div class="flex items-center gap-3 mb-2 text-[#06458F]">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                </svg>
                <span class="font-bold text-xs uppercase tracking-widest">Erros de Validação</span>
            </div>
            <ul class="space-y-1">
                @foreach($errors->all() as $error)
                    <li class="text-[#06458F] text-sm font-bold leading-relaxed">• {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.loja.store') }}" method="POST" enctype="multipart/form-data" 
        class="bg-white border border-slate-200 p-8 md:p-12 rounded-[2.5rem] shadow-[0_20px_60px_rgba(0,0,0,0.06)] space-y-8">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {{-- Nome do Produto --}}
            <div class="md:col-span-2">
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Nome do Equipamento *</label>
                <input type="text" name="nome" value="{{ old('nome') }}" required 
                    placeholder="Ex: GPS RTK Hi-Target V200"
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold placeholder:text-slate-400">
            </div>

            {{-- Marca --}}
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Marca / Fabricante *</label>
                <select name="marca" required class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold cursor-pointer">
                    <option value="">Selecionar Marca...</option>
                    <option value="Leica" {{ old('marca') === 'Leica' ? 'selected' : '' }}>Leica Geosystems</option>
                    <option value="FOIF" {{ old('marca') === 'FOIF' ? 'selected' : '' }}>FOIF</option>
                    <option value="KOLIDA" {{ old('marca') === 'KOLIDA' ? 'selected' : '' }}>KOLIDA</option>
                    <option value="Hi-Target" {{ old('marca') === 'Hi-Target' ? 'selected' : '' }}>Hi-Target</option>
                    <option value="SOUTH" {{ old('marca') === 'SOUTH' ? 'selected' : '' }}>SOUTH</option>
                    <option value="RUIDE" {{ old('marca') === 'RUIDE' ? 'selected' : '' }}>RUIDE</option>
                    <option value="DJI" {{ old('marca') === 'DJI' ? 'selected' : '' }}>DJI</option>
                    <option value="Harxon" {{ old('marca') === 'Harxon' ? 'selected' : '' }}>Harxon</option>
                    <option value="Trimble" {{ old('marca') === 'Trimble' ? 'selected' : '' }}>Trimble</option>
                    <option value="Topcon" {{ old('marca') === 'Topcon' ? 'selected' : '' }}>Topcon</option>
                </select>
            </div>

            {{-- Modelo --}}
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Modelo do Equipamento *</label>
                <input type="text" name="modelo" value="{{ old('modelo') }}" required placeholder="Ex: V200 GNSS"
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold placeholder:text-slate-400">
            </div>

            {{-- Número de Série --}}
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Número de Série (Controlo Interno) *</label>
                <input type="text" name="numero_serie" value="{{ old('numero_serie') }}" required placeholder="Ex: HT-9281-2026"
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold placeholder:text-slate-400">
            </div>

            {{-- Categoria --}}
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Categoria de Artigo *</label>
                <select name="categoria" required class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold cursor-pointer">
                    <option value="">Selecionar...</option>
                    <option value="gps" {{ old('categoria') === 'gps' ? 'selected' : '' }}>GPS RTK</option>
                    <option value="estacao_total" {{ old('categoria') === 'estacao_total' ? 'selected' : '' }}>Estações Totais</option>
                    <option value="drones" {{ old('categoria') === 'drones' ? 'selected' : '' }}>Drones</option>
                    <option value="epis" {{ old('categoria') === 'epis' ? 'selected' : '' }}>EPIs & Acessórios</option>
                </select>
            </div>

            {{-- Modelo de Negócio --}}
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Modelo de Negócio *</label>
                <select id="produto-tipo" name="tipo" required class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold cursor-pointer">
                    <option value="venda" {{ old('tipo') === 'venda' ? 'selected' : '' }}>Apenas Venda</option>
                    <option value="aluguer" {{ old('tipo') === 'aluguer' ? 'selected' : '' }}>Apenas Aluguer</option>
                    <option value="ambos" {{ old('tipo') === 'ambos' ? 'selected' : '' }}>Venda e Aluguer</option>
                </select>
            </div>

            {{-- Status de Disponibilidade --}}
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Disponibilidade Operacional *</label>
                <select name="status_disponibilidade" required class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold cursor-pointer">
                    <option value="Disponível" {{ old('status_disponibilidade') === 'Disponível' ? 'selected' : '' }}>Disponível</option>
                    <option value="Alugado" {{ old('status_disponibilidade') === 'Alugado' ? 'selected' : '' }}>Alugado</option>
                    <option value="Em Manutenção" {{ old('status_disponibilidade') === 'Em Manutenção' ? 'selected' : '' }}>Em Manutenção</option>
                </select>
            </div>

            {{-- Preço de Venda --}}
            <div id="preco-venda-wrap">
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Preço de Venda (Kz) *</label>
                <div class="relative flex items-center">
                    <span class="absolute left-5 font-bold text-slate-400">Kz</span>
                    <input id="preco-venda" type="number" step="0.01" name="preco" value="{{ old('preco', '0') }}" 
                        class="w-full bg-slate-50 border-2 border-slate-200 pl-12 pr-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold">
                </div>
            </div>

            {{-- Preço de Aluguer --}}
            <div id="preco-aluguer-wrap" class="hidden">
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Preço de Aluguer (Kz / Dia) *</label>
                <div class="relative flex items-center">
                    <span class="absolute left-5 font-bold text-slate-400">Kz</span>
                    <input id="preco-aluguer" type="number" step="0.01" name="preco_aluguer" value="{{ old('preco_aluguer') }}"
                        class="w-full bg-slate-50 border-2 border-slate-200 pl-12 pr-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold" placeholder="Ex: 45000">
                </div>
            </div>

            {{-- Stock Atual --}}
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Stock Atual (Unidades) *</label>
                <input type="number" name="stock" value="{{ old('stock', '1') }}" required 
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold">
            </div>

            {{-- Ficha Técnica PDF --}}
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Ficha Técnica do Equipamento (PDF)</label>
                <input type="file" name="ficha_tecnica" accept=".pdf" 
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-3 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-600 text-xs font-bold file:mr-4 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:bg-[#06458F] file:text-white file:text-[10px] file:uppercase file:tracking-wider">
            </div>
        </div>

        {{-- Descrição --}}
        <div>
            <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Descrição Detalhada do Hardware</label>
            <textarea name="descricao" rows="4" placeholder="Indique especificações como precisão angular, alcance EDM, satélites, etc..."
                class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-medium min-h-[120px]">{{ old('descricao') }}</textarea>
        </div>

        {{-- Capa do Produto --}}
        <div>
            <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Foto Principal do Produto</label>
            <div class="group relative w-full bg-slate-50 border-2 border-dashed border-slate-300 p-8 rounded-3xl text-center hover:border-[#06458F] hover:bg-white transition-all cursor-pointer">
                <input type="file" name="imagem" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer">
                <div class="space-y-2">
                    <svg class="w-10 h-10 text-slate-400 mx-auto group-hover:text-[#06458F] transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    <p class="text-sm font-bold text-slate-600 uppercase tracking-widest group-hover:text-slate-900">Clique para carregar imagem</p>
                    <p class="text-[10px] text-slate-400 font-medium italic">Formatos: JPEG, PNG ou WebP (Máx. 2MB)</p>
                </div>
            </div>
        </div>

        {{-- Galeria de Imagens --}}
        <div>
            <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Imagens Adicionais (Galeria)</label>
            <div class="group relative w-full bg-slate-50 border-2 border-dashed border-slate-300 p-6 rounded-3xl text-center hover:border-[#06458F] hover:bg-white transition-all cursor-pointer">
                <input type="file" name="galeria_imagens[]" multiple accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer">
                <div class="space-y-1">
                    <p class="text-xs font-bold text-slate-500 uppercase tracking-wider group-hover:text-slate-700">Selecione Múltiplas Fotos</p>
                    <p class="text-[9px] text-slate-400 italic">Pode escolher várias fotos da galeria ao mesmo tempo.</p>
                </div>
            </div>
        </div>

        {{-- Botoes --}}
        <div class="flex flex-col sm:flex-row gap-4 pt-6 border-t border-slate-100">
            <button type="submit" class="flex-[2] bg-[#06458F] hover:bg-[#0a2348] text-white font-bold py-5 px-8 rounded-2xl shadow-lg shadow-blue-600/20 transition-all active:scale-[0.98] uppercase tracking-[0.1em] text-xs">
                Gravar Equipamento
            </button>
            <a href="{{ route('admin.loja') }}" class="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold py-5 px-8 rounded-2xl transition-all text-center uppercase tracking-[0.1em] text-xs">
                Cancelar
            </a>
        </div>
    </form>
</div>

<script>
    (function () {
        const tipo = document.getElementById('produto-tipo');
        const aluguelWrap = document.getElementById('preco-aluguer-wrap');
        const precoAluguer = document.getElementById('preco-aluguer');
        const precoVenda = document.getElementById('preco-venda');
        const precoVendaWrap = document.getElementById('preco-venda-wrap');

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

        tipo.addEventListener('change', toggleFields);
        document.addEventListener('DOMContentLoaded', toggleFields);
    })();
</script>
@endsection