@extends('layouts.admin')

@section('title', 'Novo Produto')

@section('content')
<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
    <header class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6 pt-6">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <span class="w-8 h-[2px] bg-brand"></span>
                <span class="font-bold text-[10px] uppercase tracking-[0.4em] text-brand">Produtos</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold italic tracking-tighter uppercase text-brand">NOVO PRODUTO</h1>
            <p class="text-slate-500 font-medium mt-1">Adicionar um novo produto ao catálogo</p>
        </div>
        <a href="{{ route('admin.products.index') }}" class="inline-flex items-center gap-2 px-5 py-3 bg-white border border-slate-200 hover:border-brand text-slate-600 hover:text-brand font-bold text-xs uppercase tracking-widest rounded-2xl shadow-sm transition-all">
            <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"/></svg>
            Voltar
        </a>
    </header>

    <div class="bg-white border border-slate-100 rounded-2xl shadow-sm p-6 lg:p-8">
        <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label for="name" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Nome <span class="text-red-400">*</span></label>
                    <input type="text" id="name" name="name" value="{{ old('name') }}" required
                        class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-900 placeholder:text-slate-300 focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand transition-all">
                    @error('name') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label for="category_id" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Categoria</label>
                    <select id="category_id" name="category_id"
                        class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-900 focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand transition-all">
                        <option value="">Seleccionar categoria</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                        @endforeach
                    </select>
                    @error('category_id') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label for="brand_id" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Marca</label>
                    <select id="brand_id" name="brand_id"
                        class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-900 focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand transition-all">
                        <option value="">Seleccionar marca</option>
                        @foreach($brands as $brand)
                        <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                        @endforeach
                    </select>
                    @error('brand_id') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="price" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Preço (Kz)</label>
                        <input type="number" id="price" name="price" value="{{ old('price') }}" step="0.01"
                            class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-900 placeholder:text-slate-300 focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand transition-all">
                        @error('price') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div class="space-y-2">
                        <label for="original_price" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Preço Original (Kz)</label>
                        <input type="number" id="original_price" name="original_price" value="{{ old('original_price') }}" step="0.01"
                            class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-900 placeholder:text-slate-300 focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand transition-all">
                        @error('original_price') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="space-y-2 lg:col-span-2">
                    <label for="description" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Descrição</label>
                    <textarea id="description" name="description" rows="5"
                        class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-900 placeholder:text-slate-300 focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand transition-all resize-none">{{ old('description') }}</textarea>
                    @error('description') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="badge" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Badge</label>
                        <input type="text" id="badge" name="badge" value="{{ old('badge') }}" placeholder="Ex: Novo, Promoção"
                            class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-900 placeholder:text-slate-300 focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand transition-all">
                        @error('badge') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div class="space-y-2">
                        <label for="badge_color" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Cor do Badge</label>
                        <div class="flex gap-2">
                            <input type="color" id="badge_color" name="badge_color" value="{{ old('badge_color', '#00477D') }}"
                                class="w-12 h-11 rounded-xl border border-slate-200 bg-white cursor-pointer p-1">
                            <input type="text" name="badge_color_hex" value="{{ old('badge_color', '#00477D') }}" placeholder="#00477D"
                                class="flex-1 px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-900 placeholder:text-slate-300 focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand transition-all">
                        </div>
                        @error('badge_color') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="space-y-2 lg:col-span-2">
                    <label for="image" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Imagem</label>
                    <input type="file" id="image" name="image" accept="image/*"
                        class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-[10px] file:font-bold file:uppercase file:tracking-widest file:bg-brand/5 file:text-brand hover:file:bg-brand/10 transition-all">
                    @error('image') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label for="sort_order" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Ordem</label>
                    <input type="number" id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}"
                        class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm font-bold text-slate-900 placeholder:text-slate-300 focus:outline-none focus:ring-2 focus:ring-brand/20 focus:border-brand transition-all">
                    @error('sort_order') <p class="text-red-400 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="flex flex-wrap gap-6 pt-4 border-t border-slate-100">
                <label class="flex items-center gap-3 cursor-pointer group">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                        class="w-4 h-4 rounded border-slate-300 text-brand focus:ring-brand/20">
                    <span class="text-xs font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Produto Activo</span>
                </label>
                <label class="flex items-center gap-3 cursor-pointer group">
                    <input type="checkbox" name="featured" value="1" {{ old('featured') ? 'checked' : '' }}
                        class="w-4 h-4 rounded border-slate-300 text-brand focus:ring-brand/20">
                    <span class="text-xs font-bold text-slate-600 group-hover:text-slate-900 transition-colors">Produto em Destaque</span>
                </label>
            </div>

            <div class="flex items-center gap-4 pt-4">
                <button type="submit" class="px-8 py-3.5 bg-brand hover:bg-brand-700 text-white font-bold text-xs uppercase tracking-widest rounded-2xl shadow-sm transition-all hover:-translate-y-0.5">
                    <span class="flex items-center gap-2">
                        <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="M5 13l4 4L19 7"/></svg>
                        Guardar Produto
                    </span>
                </button>
                <a href="{{ route('admin.products.index') }}" class="px-6 py-3.5 bg-white border border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-700 font-bold text-xs uppercase tracking-widest rounded-2xl transition-all">Cancelar</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const colorPicker = document.getElementById('badge_color');
        const hexInput = document.querySelector('input[name="badge_color_hex"]');
        if (colorPicker && hexInput) {
            colorPicker.addEventListener('input', function () { hexInput.value = this.value; });
            hexInput.addEventListener('input', function () {
                if (/^#[0-9a-fA-F]{6}$/.test(this.value)) { colorPicker.value = this.value; }
            });
        }
    });
</script>
@endpush
@endsection
