@extends('layouts.owner')

@section('title', __('Novo Agendamento — Lined'))
@section('page-title', __('Novo Agendamento'))

@push('styles')
<style>
    #professionalOptions::-webkit-scrollbar,
    #serviceOptions::-webkit-scrollbar {
        width: 5px;
    }
    #professionalOptions::-webkit-scrollbar-track,
    #serviceOptions::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
    }
    #professionalOptions::-webkit-scrollbar-thumb,
    #serviceOptions::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 8px;
    }
    #professionalOptions::-webkit-scrollbar-thumb:hover,
    #serviceOptions::-webkit-scrollbar-thumb:hover {
        background: #22c55e;
    }
    #professionalOptions,
    #serviceOptions {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.04);
        max-height: 220px;
        overflow-y: auto;
    }
</style>
@endpush

@section('content')

@php
    $professionals = array_map(fn($p) => (object)(array) $p, (array) $professionals);
@endphp

<div class="max-w-2xl mx-auto space-y-6">

    <a href="{{ route('owner.quotes.index') }}"
        class="inline-flex items-center gap-2 text-gray-400 hover:text-white text-sm no-underline transition-colors">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <polyline points="15 18 9 12 15 6"/>
        </svg>
        {{ __('Voltar para agendamentos') }}
    </a>

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

    <form method="POST" action="{{ route('owner.quotes.store') }}" id="appointmentForm" novalidate>
        @csrf

        <input type="hidden" name="appointment_interval" id="appointment_interval" value="{{ old('appointment_interval') }}">
        <input type="hidden" name="idprofessional"       id="professionalValue"    value="{{ old('idprofessional') }}">
        <input type="hidden" name="idservice"            id="serviceValue"         value="{{ old('idservice') }}">

        {{-- Appointment details --}}
        <div class="rounded-2xl border border-white/8 bg-white/3 overflow-hidden mb-6">
            <div class="px-6 py-5 border-b border-white/8">
                <h3 class="font-heading font-bold text-white text-base">{{ __('Detalhes do Agendamento') }}</h3>
            </div>
            <div class="p-6 space-y-4">

                {{-- Professional --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-400 mb-1.5 uppercase tracking-wider">Profissional</label>
                    @if (count($professionals) > 0)
                        <div class="relative" id="professionalDropdown">
                            <button type="button" id="professionalTrigger" onclick="toggleProfessionalDropdown()"
                                class="w-full flex items-center justify-between px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-sm transition-all cursor-pointer hover:border-white/20 focus:outline-none">
                                <span id="professionalTriggerText" class="text-gray-500">Selecione um profissional</span>
                                <svg id="professionalChevron" class="w-4 h-4 text-gray-500 transition-transform duration-200 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                    <polyline points="6 9 12 15 18 9"/>
                                </svg>
                            </button>
                            <div id="professionalOptions"
                                class="hidden absolute z-50 w-full mt-1.5 rounded-xl border border-white/10 bg-[#111] shadow-2xl overflow-hidden">
                                @foreach ($professionals as $pro)
                                    <button type="button"
                                        class="professional-option w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-300 hover:bg-white/6 hover:text-white transition-colors cursor-pointer text-left"
                                        data-value="{{ $pro->idprofessional }}"
                                        data-label="{{ $pro->name }}"
                                        onclick="selectProfessional(this)">
                                        <div class="w-7 h-7 rounded-lg bg-brand-green/15 border border-brand-green/20 flex items-center justify-center shrink-0 text-xs font-bold text-brand-green">
                                            {{ strtoupper(substr($pro->name, 0, 1)) }}
                                        </div>
                                        <span>{{ $pro->name }}</span>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <p class="text-gray-500 text-sm px-4 py-2.5 rounded-xl bg-white/3 border border-white/8">
                            Nenhum profissional disponível nesta filial.
                        </p>
                    @endif
                    @error('idprofessional')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Service --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-400 mb-1.5 uppercase tracking-wider">Serviço</label>
                    <div class="relative" id="serviceDropdown">
                        <button type="button" id="serviceTrigger" onclick="toggleServiceDropdown()"
                            class="w-full flex items-center justify-between px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-sm transition-all cursor-pointer hover:border-white/20 focus:outline-none">
                            <span id="serviceTriggerText" class="text-gray-500">Selecione um profissional primeiro</span>
                            <svg id="serviceChevron" class="w-4 h-4 text-gray-500 transition-transform duration-200 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                <polyline points="6 9 12 15 18 9"/>
                            </svg>
                        </button>
                        <div id="serviceOptions"
                            class="hidden absolute z-40 w-full mt-1.5 rounded-xl border border-white/10 bg-[#111] shadow-2xl overflow-hidden">
                        </div>
                    </div>
                    @error('idservice')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Date --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-400 mb-1.5 uppercase tracking-wider">Data</label>
                    <input type="date" id="dateInput" name="appointment_date" value="{{ old('appointment_date') }}"
                        min="{{ date('Y-m-d') }}"
                        onchange="onDateChange()"
                        class="w-full px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:border-brand-green/50 focus:ring-1 focus:ring-brand-green/20 transition-all cursor-pointer">
                    @error('appointment_date')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Slots --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-400 mb-1.5 uppercase tracking-wider">Horário</label>
                    <div id="slotsContainer">
                        <p class="text-gray-600 text-sm px-4 py-2.5 rounded-xl bg-white/3 border border-white/5">
                            Selecione profissional, serviço e data para ver os horários.
                        </p>
                    </div>
                    @error('appointment_interval')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Notes --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-400 mb-1.5 uppercase tracking-wider">
                        Observações <span class="text-gray-600 font-normal normal-case">(opcional)</span>
                    </label>
                    <textarea name="notes" rows="3" placeholder="Notas sobre o agendamento..."
                        class="w-full px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-brand-green/50 focus:ring-1 focus:ring-brand-green/20 transition-all resize-none">{{ old('notes') }}</textarea>
                </div>

            </div>
        </div>

        {{-- Patient lookup --}}
        <div class="rounded-2xl border border-white/8 bg-white/3 overflow-hidden mb-6">
            <div class="px-6 py-5 border-b border-white/8">
                <h3 class="font-heading font-bold text-white text-base">Buscar Cliente</h3>
                <p class="text-gray-500 text-xs mt-0.5">Busque pelo e-mail. Se não existir, será criado automaticamente.</p>
            </div>
            <div class="p-6 space-y-4">

                <div>
                    <label class="block text-xs font-semibold text-gray-400 mb-1.5 uppercase tracking-wider">E-mail do cliente</label>
                    <div class="flex gap-2">
                        <input type="email" id="patientEmail" name="email" value="{{ old('email') }}"
                            placeholder="cliente@email.com"
                            class="flex-1 px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-brand-green/50 focus:ring-1 focus:ring-brand-green/20 transition-all">
                        <button type="button" id="searchBtn" onclick="searchPatient()"
                            class="px-4 py-2.5 rounded-xl bg-brand-green/15 border border-brand-green/30 text-brand-green text-sm font-semibold hover:bg-brand-green/25 transition-all cursor-pointer whitespace-nowrap">
                            <span id="searchBtnText">Buscar</span>
                            <svg id="searchSpinner" class="hidden animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
                            </svg>
                        </button>
                    </div>
                    @error('email')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div id="patientStatus" class="hidden px-3 py-2 rounded-lg text-xs font-semibold"></div>

                <div id="patientFields" class="{{ old('names') ? '' : 'hidden' }} space-y-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-400 mb-1.5 uppercase tracking-wider">Nome completo</label>
                        <input type="text" id="patientName" name="names" value="{{ old('names') }}"
                            placeholder="Nome do cliente"
                            class="w-full px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-brand-green/50 focus:ring-1 focus:ring-brand-green/20 transition-all">
                        @error('names')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-400 mb-1.5 uppercase tracking-wider">Telefone</label>
                        <input type="text" id="patientPhone" name="phone"
                            value="{{ old('phone') ? preg_replace('/\D/', '', old('phone')) : '' }}"
                            placeholder="(00) 00000-0000"
                            class="w-full px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm placeholder-gray-600 focus:outline-none focus:border-brand-green/50 focus:ring-1 focus:ring-brand-green/20 transition-all">
                        @error('phone')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>

            </div>
        </div>

        {{-- Actions --}}
        <div class="flex items-center gap-3 justify-end">
            <a id="cancel-btn" href="{{ route('owner.quotes.index') }}" onclick="handleCancel(event)"
                class="py-3 px-6 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>
            <button id="submit-btn" type="submit" onclick="handleSubmit(event)"
                class="py-3 px-6 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 Agendamento</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>
        </div>

    </form>
</div>

@push('scripts')
<script>
const CHECK_EMAIL_URL       = "{{ route('owner.quotes.check-email') }}";
const SLOTS_URL             = "{{ route('owner.quotes.slots') }}";
const PRO_SERVICES_URL      = "{{ route('owner.quotes.professional-services') }}";
const CSRF                  = "{{ csrf_token() }}";

let selectedProfessional = null;
let selectedService      = null;
let selectedPeriod       = null;
let selectedDate         = null;

// ── Professional dropdown ─────────────────────────────────────────────────────

function toggleProfessionalDropdown() {
    const opts    = document.getElementById('professionalOptions');
    const chevron = document.getElementById('professionalChevron');
    const isOpen  = !opts.classList.contains('hidden');
    isOpen ? closeProfessionalDropdown() : openDropdown(opts, chevron, 'professionalTrigger');
}

function closeProfessionalDropdown() {
    closeDropdown(document.getElementById('professionalOptions'), document.getElementById('professionalChevron'), 'professionalTrigger');
}

async function selectProfessional(btn) {
    const value = btn.dataset.value;
    const label = btn.dataset.label;

    document.getElementById('professionalValue').value          = value;
    document.getElementById('professionalTriggerText').textContent = label;
    setTriggerSelected('professionalTriggerText');

    document.querySelectorAll('.professional-option').forEach(b => {
        b.classList.toggle('text-brand-green', b.dataset.value === value);
        b.classList.toggle('bg-brand-green/8',  b.dataset.value === value);
        b.classList.toggle('text-gray-300',      b.dataset.value !== value);
    });

    closeProfessionalDropdown();
    selectedProfessional = value;

    // Reset service and slots
    resetService();
    resetSlots();

    // Load services for this professional
    await loadProfessionalServices(value);
}

async function loadProfessionalServices(idprofessional) {
    const triggerText = document.getElementById('serviceTriggerText');
    triggerText.textContent = 'Carregando serviços...';

    try {
        const res  = await fetch(PRO_SERVICES_URL, {
            method:  'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
            body:    JSON.stringify({ idprofessional }),
        });
        const json = await res.json();
        renderServiceOptions(json.services ?? []);
    } catch {
        document.getElementById('serviceTriggerText').textContent = 'Erro ao carregar serviços';
    }
}

function renderServiceOptions(services) {
    const opts = document.getElementById('serviceOptions');
    opts.innerHTML = '';

    if (!services.length) {
        opts.innerHTML = '<p class="px-4 py-3 text-gray-500 text-sm">Nenhum serviço disponível.</p>';
        document.getElementById('serviceTriggerText').textContent = 'Nenhum serviço disponível';
        return;
    }

    document.getElementById('serviceTriggerText').textContent = 'Selecione um serviço';
    document.getElementById('serviceTriggerText').classList.add('text-gray-500');
    document.getElementById('serviceTriggerText').classList.remove('text-white');

    services.forEach(s => {
        const btn       = document.createElement('button');
        btn.type        = 'button';
        btn.className   = 'service-option w-full flex items-center justify-between px-4 py-2.5 text-sm text-gray-300 hover:bg-white/6 hover:text-white transition-colors cursor-pointer text-left';
        btn.dataset.value  = s.idservice ?? s.idservice;
        btn.dataset.period = s.period;
        btn.dataset.label  = `${s.name} — R$ ${parseFloat(s.price).toFixed(2).replace('.', ',')}`;
        btn.innerHTML = `<span>${s.name}</span><span class="text-brand-green font-semibold text-xs shrink-0 ml-3">R$ ${parseFloat(s.price).toFixed(2).replace('.', ',')}</span>`;
        btn.addEventListener('click', () => selectService(btn));
        opts.appendChild(btn);
    });
}

// ── Service dropdown ──────────────────────────────────────────────────────────

function toggleServiceDropdown() {
    if (!selectedProfessional) { showToast('Selecione um profissional primeiro.', 'error'); return; }
    const opts    = document.getElementById('serviceOptions');
    const chevron = document.getElementById('serviceChevron');
    const isOpen  = !opts.classList.contains('hidden');
    isOpen ? closeServiceDropdown() : openDropdown(opts, chevron, 'serviceTrigger');
}

function closeServiceDropdown() {
    closeDropdown(document.getElementById('serviceOptions'), document.getElementById('serviceChevron'), 'serviceTrigger');
}

function selectService(btn) {
    const value  = btn.dataset.value;
    const label  = btn.dataset.label;
    selectedPeriod = parseInt(btn.dataset.period ?? '30');

    document.getElementById('serviceValue').value          = value;
    document.getElementById('serviceTriggerText').textContent = label;
    setTriggerSelected('serviceTriggerText');

    document.querySelectorAll('.service-option').forEach(b => {
        b.classList.toggle('text-brand-green', b.dataset.value === value);
        b.classList.toggle('bg-brand-green/8',  b.dataset.value === value);
        b.classList.toggle('text-gray-300',      b.dataset.value !== value);
    });

    closeServiceDropdown();
    selectedService = value;
    loadSlots();
}

function resetService() {
    selectedService = null;
    selectedPeriod  = null;
    document.getElementById('serviceValue').value             = '';
    document.getElementById('serviceTriggerText').textContent = 'Selecione um serviço';
    document.getElementById('serviceTriggerText').classList.add('text-gray-500');
    document.getElementById('serviceTriggerText').classList.remove('text-white');
    document.getElementById('serviceOptions').innerHTML = '';
}

// ── Generic dropdown helpers ──────────────────────────────────────────────────

function openDropdown(opts, chevron, triggerId) {
    opts.classList.remove('hidden');
    chevron.style.transform = 'rotate(180deg)';
    document.getElementById(triggerId).classList.add('border-brand-green/50', 'ring-1', 'ring-brand-green/20');
}

function closeDropdown(opts, chevron, triggerId) {
    opts.classList.add('hidden');
    chevron.style.transform = '';
    document.getElementById(triggerId).classList.remove('border-brand-green/50', 'ring-1', 'ring-brand-green/20');
}

function setTriggerSelected(textId) {
    document.getElementById(textId).classList.remove('text-gray-500');
    document.getElementById(textId).classList.add('text-white');
}

document.addEventListener('click', e => {
    if (!document.getElementById('professionalDropdown')?.contains(e.target)) closeProfessionalDropdown();
    if (!document.getElementById('serviceDropdown')?.contains(e.target))      closeServiceDropdown();
});

// ── Slots ─────────────────────────────────────────────────────────────────────

function onDateChange() {
    selectedDate = document.getElementById('dateInput').value || null;
    loadSlots();
}

function resetSlots() {
    document.getElementById('appointment_interval').value = '';
    document.getElementById('slotsContainer').innerHTML =
        '<p class="text-gray-600 text-sm px-4 py-2.5 rounded-xl bg-white/3 border border-white/5">Selecione profissional, serviço e data para ver os horários.</p>';
}

async function loadSlots() {
    if (!selectedProfessional || !selectedService || !selectedDate) return;

    document.getElementById('slotsContainer').innerHTML =
        '<p class="text-gray-500 text-sm animate-pulse">Carregando horários...</p>';
    document.getElementById('appointment_interval').value = '';

    try {
        const res  = await fetch(`${SLOTS_URL}?idprofessional=${selectedProfessional}&idservice=${selectedService}&date=${selectedDate}`);
        const json = await res.json();

        let slots = json.slots ?? [];

        const now      = new Date();
        const todayStr = now.getFullYear() + '-'
            + String(now.getMonth() + 1).padStart(2, '0') + '-'
            + String(now.getDate()).padStart(2, '0');

        if (selectedDate === todayStr) {
            const nowMin = now.getHours() * 60 + now.getMinutes();
            slots = slots.filter(h => {
                const [hh, mm] = h.split(':').map(Number);
                return (hh * 60 + mm) > nowMin;
            });
        }

        renderSlots(slots);
    } catch {
        document.getElementById('slotsContainer').innerHTML =
            '<p class="text-red-400 text-xs">Erro ao carregar horários.</p>';
    }
}

function renderSlots(slots) {
    const container = document.getElementById('slotsContainer');

    if (!slots.length) {
        container.innerHTML =
            '<p class="text-gray-500 text-sm px-4 py-2.5 rounded-xl bg-white/3 border border-white/5">Nenhum horário disponível para esta data.</p>';
        return;
    }

    const period = selectedPeriod ?? 30;
    container.innerHTML = '<div class="flex flex-wrap gap-2" id="slotGrid"></div>';
    const grid = document.getElementById('slotGrid');

    slots.forEach(slot => {
        const [h, m] = slot.split(':').map(Number);
        const endMin = h * 60 + m + period;
        const endStr = `${String(Math.floor(endMin / 60)).padStart(2, '0')}:${String(endMin % 60).padStart(2, '0')}`;
        const interval = `${slot} - ${endStr}`;

        const btn       = document.createElement('button');
        btn.type        = 'button';
        btn.textContent = slot;
        btn.dataset.interval = interval;
        btn.className   = slotClass(false);
        btn.addEventListener('click', () => selectSlot(btn, interval));
        grid.appendChild(btn);
    });
}

function slotClass(active) {
    return active
        ? 'px-3 py-1.5 rounded-lg border text-xs font-semibold transition-all cursor-pointer bg-brand-green/15 border-brand-green/40 text-brand-green'
        : 'px-3 py-1.5 rounded-lg border text-xs font-semibold transition-all cursor-pointer border-white/10 text-gray-300 hover:border-brand-green/40 hover:text-brand-green hover:bg-brand-green/8';
}

function selectSlot(btn, interval) {
    document.querySelectorAll('#slotGrid button').forEach(b => b.className = slotClass(false));
    btn.className = slotClass(true);
    document.getElementById('appointment_interval').value = interval;
}

// ── Patient search ────────────────────────────────────────────────────────────

function formatPhone(value) {
    const d = value.replace(/\D/g, '').slice(0, 11);
    if (!d.length)       return '';
    if (d.length <= 2)   return `(${d}`;
    if (d.length <= 6)   return `(${d.slice(0,2)}) ${d.slice(2)}`;
    if (d.length <= 9)   return `(${d.slice(0,2)}) ${d.slice(2,5)}-${d.slice(5)}`;   // fijo antiguo XXX-XXXX
    if (d.length === 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`;   // fijo XXXX-XXXX
    return                      `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;   // celular XXXXX-XXXX
}

const phoneInput = document.getElementById('patientPhone');
phoneInput.addEventListener('input', function () {
    const start   = this.selectionStart;
    const prevLen = this.value.length;
    this.value    = formatPhone(this.value);
    const diff    = this.value.length - prevLen;
    this.setSelectionRange(start + diff, start + diff);
});
phoneInput.value = formatPhone(phoneInput.value);

async function searchPatient() {
    const email = document.getElementById('patientEmail').value.trim();
    if (!email) { showToast('Informe o e-mail do cliente.', 'error'); return; }

    setSearchLoading(true);

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

        if (json.ok && json.data) {
            const u = json.user ?? {};
            document.getElementById('patientName').value  = u.name  ?? '';
            document.getElementById('patientPhone').value = formatPhone((u.phone ?? '').replace(/\D/g, ''));
            showStatus('Cliente encontrado. Confirme ou ajuste os dados.', 'success');
        } else if (json.data && (json.data.name || json.data.email)) {
            document.getElementById('patientName').value  = json.data.name  ?? '';
            document.getElementById('patientPhone').value = formatPhone((json.data.phone ?? '').replace(/\D/g, ''));
            showStatus('Usuário encontrado. Será vinculado como cliente ao salvar.', 'warning');
        } else {
            document.getElementById('patientName').value  = '';
            document.getElementById('patientPhone').value = '';
            showStatus('Cliente não encontrado. Preencha os dados para criar a conta.', 'info');
        }

        document.getElementById('patientFields').classList.remove('hidden');
    } catch {
        showToast('Erro de conexão.', 'error');
    } finally {
        setSearchLoading(false);
    }
}

function showStatus(msg, type) {
    const el      = document.getElementById('patientStatus');
    const classes = {
        success: 'bg-brand-green/10 border border-brand-green/25 text-brand-green',
        warning: 'bg-amber-400/10 border border-amber-400/25 text-amber-400',
        info:    'bg-blue-400/10 border border-blue-400/25 text-blue-300',
        error:   'bg-red-500/10 border border-red-500/25 text-red-400',
    };
    el.className   = 'px-3 py-2 rounded-lg text-xs font-semibold ' + (classes[type] ?? classes.info);
    el.textContent = msg;
    el.classList.remove('hidden');
}

function setSearchLoading(loading) {
    document.getElementById('searchBtn').disabled        = loading;
    document.getElementById('searchBtnText').classList.toggle('hidden', loading);
    document.getElementById('searchSpinner').classList.toggle('hidden', !loading);
}

// ── Submit ────────────────────────────────────────────────────────────────────

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 handleCancel(e) {
    e.preventDefault();
    lockButtons();
    document.getElementById('cancel-text').textContent = 'Cancelando...';
    document.getElementById('cancel-spinner').classList.remove('hidden');
    window.location.href = e.currentTarget.href;
}

function handleSubmit(e) {
    e.preventDefault();

    const email    = document.getElementById('patientEmail').value.trim();
    const name     = document.getElementById('patientName')?.value.trim();
    const phone    = document.getElementById('patientPhone')?.value.trim();
    const pro      = document.getElementById('professionalValue').value;
    const service  = document.getElementById('serviceValue').value;
    const date     = document.getElementById('dateInput').value;
    const interval = document.getElementById('appointment_interval').value;

    if (!pro)      { showToast('Selecione um profissional.', 'error');          return; }
    if (!service)  { showToast('Selecione um serviço.', 'error');               return; }
    if (!date)     { showToast('Selecione uma data.', 'error');                 return; }
    if (!interval) { showToast('Selecione um horário.', 'error');               return; }
    if (!email)    { showToast('Informe o e-mail do cliente.', 'error');       return; }
    if (!name)     { showToast('Informe o nome do cliente.', 'error');         return; }
    if (!phone)    { showToast('Informe o telefone do cliente.', 'error');     return; }

    phoneInput.value = phoneInput.value.replace(/\D/g, '');

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

document.getElementById('patientEmail')?.addEventListener('keydown', e => {
    if (e.key === 'Enter') { e.preventDefault(); searchPatient(); }
});
</script>
@endpush

@endsection