@extends('layouts.owner')

@section('title', 'Novo Profissional — Lined')
@section('page-title', 'Novo Profissional')
@section('page-subtitle', 'Adicionar um novo profissional à equipe')

@section('content')

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

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

            {{-- Coluna principal --}}
            <div class="lg:col-span-2 flex flex-col gap-5 min-w-0">

                <div class="rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-5 sm:mb-6">Dados pessoais</h3>

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

                        {{-- Email com busca --}}
                        <div id="email-search-section" class="flex flex-col gap-1.5">
                            <label class="text-sm font-medium text-gray-300">E-mail <span class="text-red-400 ml-0.5">*</span></label>
                            <div class="relative">
                                <input id="email-input" type="email" name="email" value="{{ old('email') }}" required
                                    placeholder="profissional@email.com"
                                    class="w-full px-4 py-3 pr-12 rounded-xl bg-black/30 border @error('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">
                                <button type="button" onclick="checkEmail()"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-brand-green transition-colors bg-transparent border-0 cursor-pointer">
                                    <svg id="search-icon" width="17" height="17" 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="search-spinner" class="hidden animate-spin" width="17" height="17" 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>
                            </div>
                            <span id="email-feedback" class="text-xs hidden"></span>
                            @error('email')
                                <span class="text-red-400 text-xs">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- Email display após busca --}}
                        <div id="email-display-section" class="hidden flex-col gap-2">
                            <div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 px-4 py-3 rounded-xl bg-black/20 border border-white/8">
                                <div class="flex items-center gap-2 min-w-0">
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" class="shrink-0">
                                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
                                    </svg>
                                    <p id="email-display-text" class="text-white text-sm font-medium truncate min-w-0"></p>
                                </div>
                                <button type="button" onclick="resetEmailSearch()"
                                    class="shrink-0 text-xs text-gray-400 hover:text-brand-green transition-colors bg-transparent border-0 cursor-pointer underline">
                                    Buscar novamente
                                </button>
                            </div>
                            <span id="email-display-feedback" class="text-xs hidden"></span>
                        </div>

                        {{-- Campos ocultos até buscar email --}}
                        <div id="form-fields" class="hidden flex-col gap-5">

                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">Nome completo <span class="text-red-400 ml-0.5">*</span></label>
                                <input type="text" id="name-input" name="name" value="{{ old('name') }}" required
                                    placeholder="Ex: João Silva"
                                    class="px-4 py-3 rounded-xl bg-black/30 border @error('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('name')
                                    <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</label>
                                <x-phone-input id="phone-input" name="phone" :required="false"
                                    :value="old('phone') ? preg_replace('/\D/', '', old('phone')) : ''"
                                    placeholder="(00) 00000-0000"
                                    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 class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">CPF / Identificador</label>
                                <input type="text" id="cpf-input" name="identifier" inputmode="numeric" maxlength="14" value="{{ old('identifier') }}"
                                    placeholder="000.000.000-00"
                                    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>

                    </div>
                </div>

                {{-- Serviços --}}
                <div id="services-section" class="hidden rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-1">Serviços</h3>
                    <p class="text-gray-500 text-xs mb-4">Selecione os serviços que este profissional realiza</p>
                    @if(count($services) > 0)
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                            @foreach($services as $service)
                                @php $sv = (object)(array) $service; @endphp
                                <label class="flex items-center gap-3 px-4 py-3 rounded-xl border border-white/8 bg-black/20 hover:border-brand-green/30 hover:bg-brand-green/5 transition-all cursor-pointer group has-[:checked]:border-brand-green/40 has-[:checked]:bg-brand-green/8">
                                    <input type="checkbox" name="services[]" value="{{ $sv->idservice }}"
                                        {{ in_array((int)$sv->idservice, array_map('intval', (array) old('services', []))) ? 'checked' : '' }}
                                        class="w-4 h-4 accent-brand-green shrink-0 rounded">
                                    <span class="text-gray-300 text-sm group-has-[:checked]:text-white transition-colors min-w-0 break-words">{{ $sv->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    @else
                        <p class="text-gray-500 text-xs">Nenhum serviço disponível para esta filial.</p>
                    @endif
                </div>

            </div>

            {{-- Coluna lateral --}}
            <div class="flex flex-col gap-5 min-w-0">

                <div class="rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-2">Acesso</h3>
                    <p class="text-red-400 text-xs">Se for um novo usuário, uma senha aleatória será gerada e enviada ao e-mail do profissional junto com o link de acesso.</p>
                </div>

                {{-- Ações (aparece após verificar email) --}}
                <div id="actions-section" class="hidden rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-5">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">Criar profissional</span>
                            <svg id="submit-spinner-btn" 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.professionals.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 id="cancel-only-section" class="rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
                    <a href="{{ route('owner.professionals.index') }}"
                        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 block">
                        Cancelar
                    </a>
                </div>

            </div>

        </div>
    </form>

@endsection

@push('scripts')
<script>
    const emailInput      = document.getElementById('email-input');
    const emailFeedback   = document.getElementById('email-feedback');
    const formFields      = document.getElementById('form-fields');
    const servicesSection = document.getElementById('services-section');
    const actionsSection  = document.getElementById('actions-section');
    const cancelOnly      = document.getElementById('cancel-only-section');
    const phoneInput      = document.getElementById('phone-input');
    let emailVerified     = false;

    emailInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); checkEmail(); }
    });

    async function checkEmail() {
        const val = emailInput.value.trim();
        if (!val || !val.includes('@')) {
            emailFeedback.textContent = 'Informe um e-mail válido.';
            emailFeedback.className   = 'text-xs text-red-400';
            emailFeedback.classList.remove('hidden');
            return;
        }

        document.getElementById('search-icon').classList.add('hidden');
        document.getElementById('search-spinner').classList.remove('hidden');
        emailFeedback.className = 'text-xs hidden';

        try {
            const res  = await fetch('{{ route('owner.professionals.check-email') }}', {
                method:  'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body:    JSON.stringify({ email: val }),
            });
            const data = await res.json();

            if (data.status === 'already_registered') {
                emailFeedback.textContent = 'Este e-mail já está cadastrado como profissional.';
                emailFeedback.className   = 'text-xs text-red-400';
                emailFeedback.classList.remove('hidden');
                emailVerified = false;
                return;
            }

            if (data.status === 'user_exists' && data.user) {
                document.getElementById('name-input').value = data.user.name ?? '';
                if (data.user.phone && window.PhoneInput) window.PhoneInput.setNumber('phone-input', data.user.phone);
                showForm('Conta encontrada. Confirme os dados e clique em criar.', 'text-yellow-400');
            } else {
                showForm('E-mail disponível. Preencha os dados para criar o profissional.', 'text-brand-green');
            }
        } catch (_) {
            emailFeedback.textContent = 'Erro ao verificar e-mail. Tente novamente.';
            emailFeedback.className   = 'text-xs text-red-400';
            emailFeedback.classList.remove('hidden');
        } finally {
            document.getElementById('search-icon').classList.remove('hidden');
            document.getElementById('search-spinner').classList.add('hidden');
        }
    }

    function showForm(msg, msgClass) {
        document.getElementById('email-search-section').classList.add('hidden');
        const displaySection = document.getElementById('email-display-section');
        displaySection.classList.remove('hidden');
        displaySection.classList.add('flex');
        document.getElementById('email-display-text').textContent = emailInput.value.trim();
        const fb = document.getElementById('email-display-feedback');
        fb.textContent = msg;
        fb.className   = 'text-xs ' + msgClass;
        fb.classList.remove('hidden');

        formFields.classList.remove('hidden');
        formFields.classList.add('flex');
        servicesSection.classList.remove('hidden');
        actionsSection.classList.remove('hidden');
        cancelOnly.classList.add('hidden');
        emailVerified = true;
    }

    function resetEmailSearch() {
        emailVerified = false;
        emailInput.value = document.getElementById('email-display-text').textContent;

        document.getElementById('email-display-section').classList.add('hidden');
        document.getElementById('email-display-section').classList.remove('flex');
        document.getElementById('email-search-section').classList.remove('hidden');

        formFields.classList.add('hidden');
        formFields.classList.remove('flex');
        servicesSection.classList.add('hidden');
        actionsSection.classList.add('hidden');
        cancelOnly.classList.remove('hidden');

        document.getElementById('name-input').value = '';
        phoneInput.value = '';
        emailFeedback.className = 'text-xs hidden';
    }

    const cpfInput = document.getElementById('cpf-input');

    function formatCpf(value) {
        const d = value.replace(/\D/g, '').slice(0, 11);
        if (d.length <= 3) return d;
        if (d.length <= 6) return `${d.slice(0,3)}.${d.slice(3)}`;
        if (d.length <= 9) return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6)}`;
        return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6,9)}-${d.slice(9)}`;
    }

    cpfInput.addEventListener('input', function () {
        const start = this.selectionStart;
        const prevLen = this.value.length;
        this.value = formatCpf(this.value);
        const diff = this.value.length - prevLen;
        this.setSelectionRange(start + diff, start + diff);
    });
    cpfInput.value = formatCpf(cpfInput.value);

    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');
        if (cancelBtn) {
            cancelBtn.style.pointerEvents = 'none';
            cancelBtn.classList.add('opacity-60', 'cursor-not-allowed');
        }
    }

    function handleSubmit() {
        if (!emailVerified) {
            emailFeedback.textContent = 'Verifique o e-mail antes de continuar.';
            emailFeedback.className   = 'text-xs text-red-400';
            emailFeedback.classList.remove('hidden');
            emailInput.focus();
            return false;
        }
        if (window.PhoneInput) phoneInput.value = window.PhoneInput.digits('phone-input');
        cpfInput.value = cpfInput.value.replace(/\D/g, '');
        lockButtons();
        document.getElementById('submit-text').textContent = 'Salvando...';
        document.getElementById('submit-spinner-btn').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;
    }

    @if($errors->any() || old('name'))
        formFields.classList.remove('hidden');
        formFields.classList.add('flex');
        servicesSection.classList.remove('hidden');
        actionsSection.classList.remove('hidden');
        cancelOnly.classList.add('hidden');
        emailVerified = true;
        document.getElementById('email-search-section').classList.add('hidden');
        const ds = document.getElementById('email-display-section');
        ds.classList.remove('hidden');
        ds.classList.add('flex');
        document.getElementById('email-display-text').textContent = '{{ old('email') }}';
    @endif
</script>
@endpush