@extends('layouts.owner')

@section('title', 'Editar Negócio — Lined')
@section('page-title', 'Editar Negócio')
@section('page-subtitle', 'Dados da empresa e do negócio')

@section('content')

    @if (session('error'))
        <div class="mb-6 px-5 py-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
            {{ session('error') }}
        </div>
    @endif

    <form method="POST" action="{{ route('owner.establishment.update') }}" id="establishment-form"
        onsubmit="return handleSubmit()">
        @csrf

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

            {{-- ── Coluna principal ── --}}
            <div class="lg:col-span-2 flex flex-col gap-6">

                {{-- Empresa --}}
                <div class="rounded-2xl border border-white/8 bg-white/3 p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-6">Informações da empresa</h3>

                    <div class="flex flex-col gap-5">

                        <div class="flex flex-col gap-1.5">
                            <label class="text-sm font-medium text-gray-300">Razão social <span class="text-red-400 ml-0.5">*</span></label>
                            <input type="text" name="name_company" value="{{ old('name_company', $company->name_company ?? '') }}" required
                                placeholder="Ex: Minha Empresa LTDA"
                                class="px-4 py-3 rounded-xl bg-black/30 border @error('name_company') border-red-500/60 @else border-white/10 @enderror text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            @error('name_company')<span class="text-red-400 text-xs">{{ $message }}</span>@enderror
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <label class="text-sm font-medium text-gray-300">Nome fantasia</label>
                            <input type="text" name="trade_name" value="{{ old('trade_name', $company->trade_name ?? '') }}"
                                placeholder="Ex: Studio Glam"
                                class="px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">E-mail da empresa</label>
                                <input type="email" name="company_email" value="{{ old('company_email', $company->email ?? '') }}"
                                    placeholder="contato@empresa.com"
                                    class="px-4 py-3 rounded-xl bg-black/30 border @error('company_email') border-red-500/60 @else border-white/10 @enderror text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                                @error('company_email')<span class="text-red-400 text-xs">{{ $message }}</span>@enderror
                            </div>
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">Telefone da empresa</label>
                                <x-phone-input id="company_phone" name="company_phone" :required="false"
                                    :value="old('company_phone', $company->phone ?? '')" placeholder="(11) 99999-9999"
                                    input-class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors" />
                            </div>
                        </div>

                        <div class="flex flex-col gap-2" data-upload-field data-aspect="1">
                            <label class="text-sm font-medium text-gray-300">Logo da empresa <span class="text-gray-500 text-xs font-normal">(quadrada 1:1)</span></label>
                            @php $logoVal = old('logo', $company->logo ?? ''); @endphp
                            <div class="flex items-center gap-4">
                                <div class="w-24 h-24 shrink-0 rounded-xl border border-white/10 bg-black/30 overflow-hidden flex items-center justify-center">
                                    <img class="upload-img w-full h-full object-cover {{ $logoVal ? '' : 'hidden' }}" src="{{ $logoVal }}" alt="Logo">
                                    <svg class="upload-placeholder size-7 text-gray-600 {{ $logoVal ? 'hidden' : '' }}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 19.5h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5z" /></svg>
                                </div>
                                <div class="flex-1 flex flex-col gap-1.5">
                                    <label class="inline-flex w-fit cursor-pointer px-4 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm font-medium hover:bg-white/10 transition-colors">
                                        <input type="file" accept="image/*" class="hidden" onchange="uploadImage(this)">
                                        Enviar imagem
                                    </label>
                                    <span class="upload-status text-xs text-gray-500"></span>
                                </div>
                            </div>
                            <input type="hidden" name="logo" value="{{ $logoVal }}">
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <label class="text-sm font-medium text-gray-300">Descrição</label>
                            <textarea name="description" rows="3" placeholder="Descreva a empresa brevemente..."
                                class="px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors resize-none">{{ old('description', $company->description ?? '') }}</textarea>
                        </div>

                    </div>
                </div>

                {{-- Negócio --}}
                <div class="rounded-2xl border border-white/8 bg-white/3 p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-6">Informações do negócio</h3>

                    <div class="flex flex-col gap-5">

                        <div class="flex flex-col gap-1.5">
                            <label class="text-sm font-medium text-gray-300">Nome do negócio <span class="text-red-400 ml-0.5">*</span></label>
                            <input type="text" name="branch_name" value="{{ old('branch_name', $branch->name ?? '') }}" required
                                placeholder="Ex: Unidade Centro"
                                class="px-4 py-3 rounded-xl bg-black/30 border @error('branch_name') border-red-500/60 @else border-white/10 @enderror text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            @error('branch_name')<span class="text-red-400 text-xs">{{ $message }}</span>@enderror
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                            {{-- CEP --}}
                            <div class="flex flex-col gap-1.5 sm:col-span-2">
                                <label for="branch_cpe" class="text-sm font-medium text-gray-300">CEP</label>
                                <div class="flex gap-2">
                                    <input id="branch_cpe" type="text" name="branch_cpe" value="{{ old('branch_cpe', $branch->cpe ?? '') }}"
                                        placeholder="00000-000" maxlength="9" oninput="formatCEP(this)"
                                        onkeydown="if(event.key==='Enter'){event.preventDefault();lookupCEP();}"
                                        class="flex-1 px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                                    <button type="button" onclick="lookupCEP()"
                                        class="px-4 py-3 rounded-xl bg-brand-green/10 border border-brand-green/25 text-brand-green text-sm font-semibold hover:bg-brand-green/20 transition-all cursor-pointer flex items-center gap-2 shrink-0">
                                        <svg id="cep-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                                        </svg>
                                        <svg id="cep-spinner" class="hidden animate-spin" width="15" height="15" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                                        </svg>
                                        Buscar
                                    </button>
                                </div>
                                <span id="cep-feedback" class="text-xs hidden"></span>
                            </div>

                            {{-- Estado --}}
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">Estado</label>
                                <input id="branch_cpe_state" type="text" name="branch_cpe_state" value="{{ old('branch_cpe_state', $branch->cpe_state ?? '') }}"
                                    placeholder="SP" oninput="assembleAddress()"
                                    class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            </div>

                            {{-- Cidade --}}
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">Cidade</label>
                                <input id="branch_cpe_city" type="text" name="branch_cpe_city" value="{{ old('branch_cpe_city', $branch->cpe_city ?? '') }}"
                                    placeholder="São Paulo" oninput="assembleAddress()"
                                    class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            </div>

                            {{-- Bairro --}}
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">Bairro</label>
                                <input id="branch_cep_neighborhood" type="text" name="branch_cep_neighborhood" value="{{ old('branch_cep_neighborhood', $branch->cep_neighborhood ?? '') }}"
                                    placeholder="Centro" oninput="assembleAddress()"
                                    class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            </div>

                            {{-- Rua --}}
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">Rua</label>
                                <input id="branch_cep_street" type="text" name="branch_cep_street" value="{{ old('branch_cep_street', $branch->cep_street ?? '') }}"
                                    placeholder="Rua das Flores" oninput="assembleAddress()" onblur="geocodeAndCenter()"
                                    class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            </div>

                            {{-- Número --}}
                            <div class="flex flex-col gap-1.5">
                                <label for="branch_cep_placenumber" class="text-sm font-medium text-gray-300">Número</label>
                                <input id="branch_cep_placenumber" type="text" name="branch_cep_placenumber" value="{{ old('branch_cep_placenumber', $branch->cep_placenumber ?? '') }}"
                                    placeholder="123" oninput="assembleAddress()" onblur="geocodeAndCenter()"
                                    class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            </div>

                            {{-- Complemento --}}
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">Complemento</label>
                                <input id="branch_cep_complement" type="text" name="branch_cep_complement" value="{{ old('branch_cep_complement', $branch->cep_complement ?? '') }}"
                                    placeholder="Apto 4, Sala 2..." oninput="assembleAddress()" onblur="geocodeAndCenter()"
                                    class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            </div>

                            {{-- Endereço completo --}}
                            <div class="flex flex-col gap-1.5 sm:col-span-2">
                                <label class="text-sm font-medium text-gray-300">Endereço completo</label>
                                <div id="branch_address_display"
                                    class="w-full px-4 py-3 rounded-xl bg-white/3 border border-white/5 text-gray-500 text-sm min-h-[48px] leading-relaxed">
                                    {{ old('branch_address', $branch->address ?? '') ?: '—' }}
                                </div>
                                <input type="hidden" id="branch_address" name="branch_address" value="{{ old('branch_address', $branch->address ?? '') }}">
                            </div>

                        </div>

                        {{-- Mapa --}}
                        <div class="flex flex-col gap-2">
                            <div class="flex items-center justify-between">
                                <label class="text-sm font-medium text-gray-300">Localização no mapa</label>
                                <span class="text-gray-600 text-xs">Clique ou arraste o marcador para ajustar</span>
                            </div>
                            <div id="branch-map" class="w-full rounded-xl overflow-hidden border border-white/10" style="height: 240px; z-index: 0;"></div>
                            <div class="flex gap-3 text-xs text-gray-600">
                                <span>Lat: <span id="lat-display">{{ old('branch_latitude', $branch->latitude ?? '—') }}</span></span>
                                <span>Lng: <span id="lng-display">{{ old('branch_longitude', $branch->longitude ?? '—') }}</span></span>
                            </div>
                            <input type="hidden" id="branch_latitude"  name="branch_latitude"  value="{{ old('branch_latitude', $branch->latitude ?? '') }}">
                            <input type="hidden" id="branch_longitude" name="branch_longitude" value="{{ old('branch_longitude', $branch->longitude ?? '') }}">
                        </div>

                    </div>
                </div>

                {{-- Categorias de serviços --}}
                <div class="rounded-2xl border border-white/8 bg-white/3 p-6">
                    @php
                        $currentCategories = collect($categories)->pluck('idcategory')->map(fn($id) => (int) $id)->all();
                    @endphp
                    <x-category-picker
                        :categories="$allCategories"
                        :selected="old('categories', $currentCategories)"
                        :hint="__('Selecione tudo o que este negócio oferece.')" />
                </div>

            </div>

            {{-- ── Coluna lateral ── --}}
            <div class="flex flex-col gap-6">

                {{-- Imagens do negócio --}}
                <div class="rounded-2xl border border-white/8 bg-white/3 p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-6">Imagens do negócio</h3>

                    <div class="flex flex-col gap-5">

                        <div class="flex flex-col gap-2" data-upload-field data-aspect="1">
                            <label class="text-sm font-medium text-gray-300">Logo do negócio <span class="text-gray-500 text-xs font-normal">(quadrada 1:1)</span></label>
                            @php $branchLogoVal = old('branch_logo', $branch->logo ?? ''); @endphp
                            <div class="flex items-center gap-4">
                                <div class="w-24 h-24 shrink-0 rounded-xl border border-white/10 bg-black/30 overflow-hidden flex items-center justify-center">
                                    <img class="upload-img w-full h-full object-cover {{ $branchLogoVal ? '' : 'hidden' }}" src="{{ $branchLogoVal }}" alt="Logo">
                                    <svg class="upload-placeholder size-7 text-gray-600 {{ $branchLogoVal ? 'hidden' : '' }}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 19.5h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5z" /></svg>
                                </div>
                                <div class="flex-1 flex flex-col gap-1.5">
                                    <label class="inline-flex w-fit cursor-pointer px-4 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm font-medium hover:bg-white/10 transition-colors">
                                        <input type="file" accept="image/*" class="hidden" onchange="uploadImage(this)">
                                        Enviar imagem
                                    </label>
                                    <span class="upload-status text-xs text-gray-500"></span>
                                </div>
                            </div>
                            <input type="hidden" name="branch_logo" value="{{ $branchLogoVal }}">
                        </div>

                        <div class="flex flex-col gap-2" data-upload-field data-aspect="1.5">
                            <label class="text-sm font-medium text-gray-300">Imagem de fundo <span class="text-gray-500 text-xs font-normal">(paisagem 3:2)</span></label>
                            @php $bgVal = old('branch_background_photo', $branch->background_photo ?? ''); @endphp
                            <div class="w-full aspect-[3/2] max-w-md rounded-xl border border-white/10 bg-black/30 overflow-hidden flex items-center justify-center">
                                <img class="upload-img w-full h-full object-cover {{ $bgVal ? '' : 'hidden' }}" src="{{ $bgVal }}" alt="Fundo">
                                <svg class="upload-placeholder size-9 text-gray-600 {{ $bgVal ? 'hidden' : '' }}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 19.5h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5z" /></svg>
                            </div>
                            <div class="flex items-center gap-3">
                                <label class="inline-flex w-fit cursor-pointer px-4 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm font-medium hover:bg-white/10 transition-colors">
                                    <input type="file" accept="image/*" class="hidden" onchange="uploadImage(this)">
                                    Enviar imagem
                                </label>
                                <span class="upload-status text-xs text-gray-500"></span>
                            </div>
                            <input type="hidden" name="branch_background_photo" value="{{ $bgVal }}">
                        </div>

                    </div>
                </div>

                {{-- Ações --}}
                <div class="rounded-2xl border border-white/8 bg-white/3 p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-6">Ações</h3>
                    <div class="flex flex-col gap-3">
                        <button id="submit-btn" type="submit"
                            class="w-full py-3 px-4 rounded-xl bg-brand-green text-white text-sm font-bold hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 shadow-[0_4px_16px_-4px_rgba(34,197,94,0.4)] flex items-center justify-center gap-2">
                            <span id="submit-text">Salvar alterações</span>
                            <svg id="submit-spinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
                            </svg>
                        </button>
                        <a id="cancel-btn" href="{{ route('owner.establishment.index') }}" onclick="handleCancel(event)"
                            class="w-full py-3 px-4 rounded-xl bg-white/5 border border-white/10 text-white text-sm font-semibold text-center hover:bg-white/10 transition-all no-underline flex items-center justify-center gap-2">
                            <span id="cancel-text">Cancelar</span>
                            <svg id="cancel-spinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
                            </svg>
                        </a>
                    </div>
                </div>

            </div>

        </div>
    </form>

    {{-- Modal de recorte --}}
    <div id="crop-modal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-black/80 backdrop-blur-sm p-4">
        <div class="w-full max-w-lg rounded-2xl border border-white/10 bg-[#0d0d0d] overflow-hidden flex flex-col max-h-[90vh]">
            <div class="px-5 py-4 border-b border-white/8 flex items-center justify-between shrink-0">
                <h3 class="font-heading font-bold text-white text-base">Recortar imagem</h3>
                <span id="crop-ratio-label" class="text-xs text-gray-500"></span>
            </div>
            <div class="p-4 overflow-auto bg-black/40">
                <div class="w-full max-h-[55vh]">
                    <img id="crop-image" class="max-w-full block" alt="Recorte">
                </div>
            </div>
            <div class="px-5 py-4 border-t border-white/8 flex items-center justify-end gap-3 shrink-0">
                <button type="button" onclick="cancelCrop()"
                    class="px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm font-semibold hover:bg-white/10 transition-all cursor-pointer">
                    Cancelar
                </button>
                <button type="button" id="crop-confirm" onclick="confirmCrop()"
                    class="px-4 py-2.5 rounded-xl bg-brand-green text-white text-sm font-bold hover:bg-brand-green-dark transition-all cursor-pointer flex items-center gap-2">
                    <span>Recortar e enviar</span>
                </button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <link rel="stylesheet" href="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.css"/>
    <style>
        #branch-map { background: #e5e7eb; }
        #crop-modal.flex { display: flex; }
    </style>
    <script src="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.js"></script>
    <x-mapbox-assets />
    <script>
        function lockButtons() {
            const submitBtn = document.getElementById('submit-btn');
            const cancelBtn = document.getElementById('cancel-btn');
            submitBtn.disabled = true;
            submitBtn.classList.remove('hover:-translate-y-0.5', 'hover:shadow-lg', 'hover:shadow-brand-green/25', 'cursor-pointer');
            submitBtn.classList.add('opacity-60', 'cursor-not-allowed');
            cancelBtn.style.pointerEvents = 'none';
            cancelBtn.classList.add('opacity-60', 'cursor-not-allowed');
        }

        function handleSubmit() {
            if (typeof selectedCategories === 'function' && selectedCategories().length === 0) {
                showToast('Selecione ao menos uma categoria de serviços.', 'error');
                return false;
            }

            // Envia apenas dígitos no telefone (DDI + número)
            const phone = document.getElementById('company_phone');
            if (phone && window.PhoneInput) phone.value = window.PhoneInput.digits('company_phone');

            lockButtons();
            document.getElementById('submit-text').textContent = 'Salvando...';
            document.getElementById('submit-spinner').classList.remove('hidden');
            return true;
        }

        function handleCancel(e) {
            e.preventDefault();
            lockButtons();
            document.getElementById('cancel-text').textContent = 'Cancelando...';
            document.getElementById('cancel-spinner').classList.remove('hidden');
            window.location.href = e.currentTarget.href;
        }

        // ── Upload de imagens com recorte (logo empresa, logo filial, fundo) ──
        const UPLOAD_URL   = "{{ route('owner.establishment.upload') }}";
        const UPLOAD_TOKEN = "{{ csrf_token() }}";

        let cropper = null;
        let cropField = null;       // [data-upload-field] alvo
        let cropFileName = 'image.png';

        // Abre o modal de recorte ao escolher um arquivo
        function uploadImage(input) {
            const file = input.files[0];
            if (!file) return;

            cropField    = input.closest('[data-upload-field]');
            cropFileName = (file.name || 'image').replace(/\.[^.]+$/, '') + '.png';
            const aspect = parseFloat(cropField.getAttribute('data-aspect')) || 1;

            const modal = document.getElementById('crop-modal');
            const image = document.getElementById('crop-image');
            const label = document.getElementById('crop-ratio-label');
            label.textContent = aspect === 1 ? 'Proporção 1:1' : 'Proporção 3:2';

            const reader = new FileReader();
            reader.onload = function (e) {
                image.src = e.target.result;
                modal.classList.remove('hidden');
                modal.classList.add('flex');

                if (cropper) cropper.destroy();
                cropper = new Cropper(image, {
                    aspectRatio: aspect,
                    viewMode: 1,
                    autoCropArea: 1,
                    background: false,
                    responsive: true,
                });
            };
            reader.readAsDataURL(file);

            input.value = ''; // permite reescolher o mesmo arquivo
        }

        function cancelCrop() {
            const modal = document.getElementById('crop-modal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            if (cropper) { cropper.destroy(); cropper = null; }
            cropField = null;
        }

        function confirmCrop() {
            if (!cropper || !cropField) return;

            const btn = document.getElementById('crop-confirm');
            btn.disabled = true;
            btn.classList.add('opacity-60', 'cursor-not-allowed');

            const canvas = cropper.getCroppedCanvas({
                maxWidth: 1600,
                maxHeight: 1600,
                imageSmoothingQuality: 'high',
            });

            const field = cropField;

            canvas.toBlob(function (blob) {
                // Pré-visualização imediata no campo
                const img    = field.querySelector('.upload-img');
                const holder = field.querySelector('.upload-placeholder');
                img.src = canvas.toDataURL('image/png');
                img.classList.remove('hidden');
                if (holder) holder.classList.add('hidden');

                cancelCrop();
                doUpload(field, blob);

                btn.disabled = false;
                btn.classList.remove('opacity-60', 'cursor-not-allowed');
            }, 'image/png');
        }

        // Envia o blob recortado ao servidor
        async function doUpload(field, blob) {
            const urlInput  = field.querySelector('input[type="hidden"]');
            const img       = field.querySelector('.upload-img');
            const holder    = field.querySelector('.upload-placeholder');
            const status    = field.querySelector('.upload-status');
            const submitBtn = document.getElementById('submit-btn');

            status.textContent = 'Enviando...';
            status.className   = 'upload-status text-xs text-yellow-400';
            if (submitBtn) submitBtn.disabled = true;

            try {
                const fd = new FormData();
                fd.append('file', blob, cropFileName);
                fd.append('_token', UPLOAD_TOKEN);

                const res  = await fetch(UPLOAD_URL, {
                    method: 'POST',
                    headers: { 'Accept': 'application/json' },
                    body: fd,
                });
                const data = await res.json();

                if (!res.ok || data.status != 200 || !data.url) {
                    throw new Error(data.message || 'Erro ao enviar a imagem.');
                }

                urlInput.value     = data.url;
                img.src            = data.url;
                status.textContent = 'Enviado ✓';
                status.className   = 'upload-status text-xs text-brand-green';
            } catch (err) {
                urlInput.value = '';
                img.classList.add('hidden');
                if (holder) holder.classList.remove('hidden');
                status.textContent = err.message || 'Erro ao enviar a imagem.';
                status.className   = 'upload-status text-xs text-red-400';
            } finally {
                if (submitBtn) submitBtn.disabled = false;
            }
        }

        // ── CEP ──────────────────────────────────────────────────────
        function formatCEP(input) {
            let v = input.value.replace(/\D/g, '').slice(0, 8);
            if (v.length > 5) v = v.replace(/^(\d{5})(\d+)$/, '$1-$2');
            input.value = v;
        }

        async function lookupCEP() {
            const cepVal = document.getElementById('branch_cpe').value.replace(/\D/g, '');
            if (cepVal.length !== 8) return;

            const icon     = document.getElementById('cep-icon');
            const spinner  = document.getElementById('cep-spinner');
            const feedback = document.getElementById('cep-feedback');
            icon.classList.add('hidden');
            spinner.classList.remove('hidden');
            feedback.className = 'text-xs hidden';

            try {
                const res = await fetch('{{ route('cep-lookup') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ cep: cepVal }),
                });
                const json = await res.json();

                if (json.ok && json.data) {
                    const d = json.data;
                    document.getElementById('branch_cpe_state').value        = d.state        ?? '';
                    document.getElementById('branch_cpe_city').value         = d.city         ?? '';
                    document.getElementById('branch_cep_street').value       = d.street       ?? '';
                    document.getElementById('branch_cep_neighborhood').value = d.neighborhood ?? '';
                    assembleAddress();

                    feedback.textContent = 'Endereço encontrado.';
                    feedback.className   = 'text-xs text-brand-green';

                    initMap();
                    geocodeAndCenter();
                } else {
                    feedback.textContent = 'CEP não encontrado.';
                    feedback.className   = 'text-xs text-red-400';
                }
            } catch {
                feedback.textContent = 'Erro ao buscar CEP.';
                feedback.className   = 'text-xs text-red-400';
            } finally {
                icon.classList.remove('hidden');
                spinner.classList.add('hidden');
            }
        }

        function assembleAddress() {
            const street     = document.getElementById('branch_cep_street')?.value?.trim()      ?? '';
            const number     = document.getElementById('branch_cep_placenumber')?.value?.trim() ?? '';
            const complement = document.getElementById('branch_cep_complement')?.value?.trim()  ?? '';
            const hood       = document.getElementById('branch_cep_neighborhood')?.value?.trim() ?? '';
            const city       = document.getElementById('branch_cpe_city')?.value?.trim()        ?? '';
            const state      = document.getElementById('branch_cpe_state')?.value?.trim()       ?? '';

            const streetPart = [street, number, complement].filter(Boolean).join(', ');
            const parts      = [streetPart, hood, city + (state ? ' - ' + state : '')].filter(Boolean);
            const address    = parts.join(' - ');

            const hidden  = document.getElementById('branch_address');
            const display = document.getElementById('branch_address_display');
            if (hidden)  hidden.value        = address;
            if (display) display.textContent = address || '—';
        }

        // ── Mapa (Mapbox) ─────────────────────────────────────────────
        let map = null, marker = null;
        const DEFAULT_LAT = -23.5505, DEFAULT_LNG = -46.6333;

        function initMap() {
            if (map) return;
            const el = document.getElementById('branch-map');
            if (!mapboxReady(el, '{{ __('Mapa indisponível') }}')) return;

            const hasCoords = !!document.getElementById('branch_latitude').value;
            const lat = parseFloat(document.getElementById('branch_latitude').value)  || DEFAULT_LAT;
            const lng = parseFloat(document.getElementById('branch_longitude').value) || DEFAULT_LNG;

            map = new mapboxgl.Map({
                container: el,
                style: window.MAPBOX_STYLE,
                center: [lng, lat],
                zoom: hasCoords ? 15 : 12,
                attributionControl: false,
            });

            map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-right');
            map.addControl(new mapboxgl.AttributionControl({ compact: true }));

            if (hasCoords) createMarker(lat, lng);

            map.on('click', function (e) {
                const clat = e.lngLat.lat;
                const clng = e.lngLat.lng;
                if (marker) marker.setLngLat([clng, clat]);
                else createMarker(clat, clng);
                updateCoords(clat, clng);
            });
        }

        function createMarker(lat, lng) {
            marker = new mapboxgl.Marker({ element: mapboxPinElement(), draggable: true })
                .setLngLat([lng, lat])
                .addTo(map);

            marker.on('dragend', function () {
                const p = marker.getLngLat();
                updateCoords(p.lat, p.lng);
            });
        }

        function updateCoords(lat, lng) {
            const latR = parseFloat(lat).toFixed(6);
            const lngR = parseFloat(lng).toFixed(6);
            document.getElementById('branch_latitude').value   = latR;
            document.getElementById('branch_longitude').value  = lngR;
            document.getElementById('lat-display').textContent = latR;
            document.getElementById('lng-display').textContent = lngR;
        }

        async function geocodeAndCenter() {
            const street     = document.getElementById('branch_cep_street').value.trim();
            const number     = document.getElementById('branch_cep_placenumber').value.trim();
            const complement = document.getElementById('branch_cep_complement').value.trim();
            const hood       = document.getElementById('branch_cep_neighborhood').value.trim();
            const city       = document.getElementById('branch_cpe_city').value.trim();
            const state      = document.getElementById('branch_cpe_state').value.trim();
            if (!city || !map) return;

            const streetLine = [street, number, complement].filter(Boolean).join(', ');
            const tries = [
                [streetLine, hood, city, state, 'Brasil'],
                [[street, number].filter(Boolean).join(', '), hood, city, state, 'Brasil'],
                [street, city, state, 'Brasil'],
            ];

            for (const parts of tries) {
                const q   = encodeURIComponent(parts.filter(Boolean).join(', '));
                const url = `https://nominatim.openstreetmap.org/search?q=${q}&format=json&limit=1`;
                try {
                    const res  = await fetch(url, { headers: { 'Accept-Language': 'pt-BR' } });
                    const data = await res.json();
                    if (data.length > 0) {
                        const lat = parseFloat(data[0].lat);
                        const lng = parseFloat(data[0].lon);
                        map.flyTo({ center: [lng, lat], zoom: 17 });
                        if (marker) marker.setLngLat([lng, lat]);
                        else createMarker(lat, lng);
                        updateCoords(lat, lng);
                        return;
                    }
                } catch { /* tenta o próximo formato */ }
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            assembleAddress();
            initMap();
        });
    </script>
@endpush