@extends('layouts.admin')

@section('title', 'Nova Loja')

@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-10 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">Gestão</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold italic tracking-tighter uppercase text-brand">Nova Loja</h1>
            <p class="text-slate-500 font-medium mt-1">Preencha os dados para registar uma nova loja</p>
        </div>
        <a href="{{ route('admin.stores.index') }}"
           class="inline-flex items-center gap-2 py-3 px-6 bg-white border border-slate-200 hover:border-brand text-slate-600 hover:text-brand font-bold uppercase tracking-widest text-xs rounded-xl transition-all duration-200">
            <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-8">
        <form action="{{ route('admin.stores.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>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Nome <span class="text-red-400">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" required
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('name') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Tipo <span class="text-red-400">*</span></label>
                    <select name="type" required
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                        <option value="">Seleccionar</option>
                        <option value="hiper" @selected(old('type') === 'hiper')>Hipermercado</option>
                        <option value="mix" @selected(old('type') === 'mix')>Mix</option>
                    </select>
                    @error('type') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

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

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Província <span class="text-red-400">*</span></label>
                    <select name="province_id" required
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                        <option value="">Seleccionar</option>
                        @foreach($provinces as $province)
                        <option value="{{ $province->id }}" @selected(old('province_id') == $province->id)>{{ $province->name }}</option>
                        @endforeach
                    </select>
                    @error('province_id') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Município</label>
                    <input type="text" name="municipality_id" value="{{ old('municipality_id') }}"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('municipality_id') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Bairro</label>
                    <input type="text" name="neighborhood" value="{{ old('neighborhood') }}"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('neighborhood') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Endereço</label>
                    <input type="text" name="address_line" value="{{ old('address_line') }}"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('address_line') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Ponto de Referência</label>
                    <input type="text" name="reference_point" value="{{ old('reference_point') }}"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('reference_point') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Latitude</label>
                    <input type="number" name="latitude" value="{{ old('latitude') }}" step="0.000001"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('latitude') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Longitude</label>
                    <input type="number" name="longitude" value="{{ old('longitude') }}" step="0.000001"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('longitude') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Telefone</label>
                    <input type="text" name="phone" value="{{ old('phone') }}"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('phone') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">WhatsApp</label>
                    <input type="text" name="whatsapp" value="{{ old('whatsapp') }}"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('whatsapp') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('email') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Website</label>
                    <input type="url" name="website" value="{{ old('website') }}"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                    @error('website') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Foto</label>
                    <input type="file" name="photo" accept="image/jpeg,image/png,image/webp"
                           class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 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 file:text-white hover:file:bg-brand-700 transition-all">
                    @error('photo') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="border-t border-slate-100 pt-6">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Estado <span class="text-red-400">*</span></label>
                        <select name="status" required
                                class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                            <option value="open" @selected(old('status') === 'open')>Aberto</option>
                            <option value="closed" @selected(old('status') === 'closed')>Fechado</option>
                            <option value="renovation" @selected(old('status') === 'renovation')>Em renovação</option>
                        </select>
                        @error('status') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Ordem</label>
                        <input type="number" name="sort_order" value="{{ old('sort_order') }}"
                               class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3.5 text-sm text-slate-800 placeholder:text-slate-300 focus:border-brand focus:ring-1 focus:ring-brand outline-none transition-all">
                        @error('sort_order') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                    </div>

                    <div class="flex items-end">
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', true))
                                   class="w-5 h-5 rounded-xl border-slate-300 text-brand focus:ring-brand transition-all">
                            <span class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Loja Activa</span>
                        </label>
                        @error('is_active') <p class="mt-1 text-[10px] font-semibold text-red-500">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-4 pt-4 border-t border-slate-100">
                <button type="submit"
                        class="py-3 px-8 bg-brand hover:bg-brand-700 text-white font-bold uppercase tracking-widest text-xs rounded-xl transition-all duration-200 active:scale-[0.98] shadow-md shadow-brand/20">
                    Criar Loja
                </button>
                <a href="{{ route('admin.stores.index') }}"
                   class="py-3 px-8 text-slate-500 hover:text-slate-700 font-bold uppercase tracking-widest text-xs rounded-xl transition-all">
                    Cancelar
                </a>
            </div>
        </form>
    </div>
</div>
@endsection