@extends('layouts.owner')

@section('title', __('Agendamentos — Lined'))
@section('page-title', __('Agendamentos'))
@section('page-subtitle', __('Gerencie os agendamentos'))

@section('content')

@php
    $statusLabels = [
        0 => __('Pendente'),
        1 => __('Finalizado'),
        2 => __('Cancelado'),
    ];
    $statusClasses = [
        0 => 'bg-amber-400/10 border-amber-400/25 text-amber-400',
        1 => 'bg-brand-green/10 border-brand-green/25 text-brand-green',
        2 => 'bg-red-500/10 border-red-500/25 text-red-400',
    ];

    $stats        = (array) ($stats ?? []);
    $selCustomer  = $idcustomer ?? '';
    $selCustomerName = '';
    foreach ($customers as $c) {
        $c = (object)(array) $c;
        if ((string)($c->idcustomer ?? '') === (string) $selCustomer) { $selCustomerName = $c->name ?? ''; break; }
    }

    $selProfessional = $idprofessional ?? '';
    $selProfessionalName = '';
    foreach ($professionals as $p) {
        $p = (object)(array) $p;
        if ((string)($p->idprofessional ?? '') === (string) $selProfessional) { $selProfessionalName = $p->name ?? ''; break; }
    }
@endphp

<div class="grid grid-cols-2 xl:grid-cols-4 gap-5 mb-8">
    <div class="rounded-2xl border border-brand-green/25 bg-brand-green/5 p-6 hover:border-brand-green/40 transition-all duration-200">
        <div class="text-brand-green text-sm font-semibold mb-1">{{ __('Total de agendamentos') }}</div>
        <div class="font-heading font-bold text-white text-4xl leading-none">{{ $stats['total'] ?? 0 }}</div>
    </div>
    <div class="rounded-2xl border border-sky-400/25 bg-sky-400/5 p-6 hover:border-sky-400/40 transition-all duration-200">
        <div class="text-sky-400 text-sm font-semibold mb-1">{{ __('Hoje') }}</div>
        <div class="font-heading font-bold text-white text-4xl leading-none">{{ $stats['today'] ?? 0 }}</div>
    </div>
    <div class="rounded-2xl border border-amber-400/25 bg-amber-400/5 p-6 hover:border-amber-400/40 transition-all duration-200">
        <div class="text-amber-400 text-sm font-semibold mb-1">{{ __('Pendentes') }}</div>
        <div class="font-heading font-bold text-white text-4xl leading-none">{{ $stats['pending'] ?? 0 }}</div>
    </div>
    <div class="rounded-2xl border border-red-500/25 bg-red-500/5 p-6 hover:border-red-500/40 transition-all duration-200">
        <div class="text-red-400 text-sm font-semibold mb-1">{{ __('Cancelados') }}</div>
        <div class="font-heading font-bold text-white text-4xl leading-none">{{ $stats['cancelled'] ?? 0 }}</div>
    </div>
</div>

<div class="rounded-2xl border border-white/8 bg-white/3 overflow-hidden">

    <div class="px-6 py-5 border-b border-white/8 flex items-center justify-between gap-4">
        <h3 class="font-heading font-bold text-white text-base">{{ __('Lista de agendamentos') }}</h3>
        <a href="{{ route('owner.quotes.create') }}"
            class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-brand-green text-black text-xs font-bold hover:bg-brand-green/90 transition-all no-underline shrink-0">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            {{ __('Novo agendamento') }}
        </a>
    </div>

    {{-- Filtros --}}
    <div class="px-6 py-4 border-b border-white/8">
        <style>
            #apptFilters input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; cursor: pointer; }
            #apptFilters input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

            /* Scrollbar personalizada para os dropdowns de select (#custList, #profList, .ss-list) */
            #custList::-webkit-scrollbar,
            #profList::-webkit-scrollbar,
            .ss-list::-webkit-scrollbar {
                width: 5px;
            }
            #custList::-webkit-scrollbar-track,
            #profList::-webkit-scrollbar-track,
            .ss-list::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.04);
                border-radius: 8px;
            }
            #custList::-webkit-scrollbar-thumb,
            #profList::-webkit-scrollbar-thumb,
            .ss-list::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.2);
                border-radius: 8px;
            }
            #custList::-webkit-scrollbar-thumb:hover,
            #profList::-webkit-scrollbar-thumb:hover,
            .ss-list::-webkit-scrollbar-thumb:hover {
                background: #22c55e;
            }
            #custList,
            #profList,
            .ss-list {
                scrollbar-width: thin;
                scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.04);
            }
        </style>
        <form id="apptFilters" method="GET" action="{{ route('owner.quotes.index') }}" class="flex flex-wrap items-end gap-3" onsubmit="return apptSearchLoading(this)">
            {{-- Cliente (buscável) --}}
            <div class="relative w-full sm:w-64" id="custWrap">
                <label class="block text-gray-500 text-[0.7rem] font-bold uppercase tracking-wider mb-1.5">{{ __('Cliente') }}</label>
                <button type="button" onclick="toggleCustDD(event)"
                    class="w-full flex items-center justify-between gap-2 px-4 py-2.5 rounded-xl bg-[#0a0a0a] border border-white/10 text-sm hover:border-white/20 transition-all cursor-pointer">
                    <span id="custLabel" class="truncate {{ $selCustomer === '' ? 'text-gray-500' : 'text-white' }}">{{ $selCustomer === '' ? __('Todos os clientes') : $selCustomerName }}</span>
                    <i class="fa-solid fa-chevron-down text-[0.6rem] text-gray-400 shrink-0"></i>
                </button>
                <input type="hidden" name="idcustomer" id="idcustomer" value="{{ $selCustomer }}">

                <div id="custDD" class="hidden absolute z-30 mt-1 w-full rounded-xl border border-white/12 bg-[#111111] shadow-2xl shadow-black/60 overflow-hidden">
                    <div class="p-2 border-b border-white/8">
                        <input type="text" id="custSearch" oninput="filterCust()" placeholder="{{ __('Buscar cliente...') }}"
                            class="w-full px-3 py-2 rounded-lg bg-[#0a0a0a] border border-white/10 text-white text-sm placeholder-gray-600 focus:border-brand-green/50 focus:outline-none">
                    </div>
                    <ul id="custList" class="max-h-56 overflow-y-auto py-1">
                        <li>
                            <button type="button" onclick="pickCust('', @js(__('Todos os clientes')))"
                                class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-white/6 cursor-pointer bg-transparent border-0">{{ __('Todos os clientes') }}</button>
                        </li>
                        @foreach ($customers as $c)
                            @php $c = (object)(array) $c; @endphp
                            <li data-name="{{ \Illuminate\Support\Str::lower($c->name ?? '') }}">
                                <button type="button" onclick="pickCust('{{ $c->idcustomer }}', @js($c->name ?? ''))"
                                    class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-white/6 cursor-pointer bg-transparent border-0 truncate">{{ $c->name ?? '—' }}</button>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="relative w-full sm:w-64" id="profWrap">
                <label class="block text-gray-500 text-[0.7rem] font-bold uppercase tracking-wider mb-1.5">{{ __('Profissional') }}</label>
                <button type="button" onclick="toggleProfDD(event)"
                    class="w-full flex items-center justify-between gap-2 px-4 py-2.5 rounded-xl bg-[#0a0a0a] border border-white/10 text-sm hover:border-white/20 transition-all cursor-pointer">
                    <span id="profLabel" class="truncate {{ $selProfessional === '' ? 'text-gray-500' : 'text-white' }}">{{ $selProfessional === '' ? __('Todos os profissionais') : $selProfessionalName }}</span>
                    <i class="fa-solid fa-chevron-down text-[0.6rem] text-gray-400 shrink-0"></i>
                </button>
                <input type="hidden" name="idprofessional" id="idprofessional" value="{{ $selProfessional }}">

                <div id="profDD" class="hidden absolute z-30 mt-1 w-full rounded-xl border border-white/12 bg-[#111111] shadow-2xl shadow-black/60 overflow-hidden">
                    <div class="p-2 border-b border-white/8">
                        <input type="text" id="profSearch" oninput="filterProf()" placeholder="{{ __('Buscar profissional...') }}"
                            class="w-full px-3 py-2 rounded-lg bg-[#0a0a0a] border border-white/10 text-white text-sm placeholder-gray-600 focus:border-brand-green/50 focus:outline-none">
                    </div>
                    <ul id="profList" class="max-h-56 overflow-y-auto py-1">
                        <li>
                            <button type="button" onclick="pickProf('', @js(__('Todos os profissionais')))"
                                class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-white/6 cursor-pointer bg-transparent border-0">{{ __('Todos os profissionais') }}</button>
                        </li>
                        @foreach ($professionals as $p)
                            @php $p = (object)(array) $p; @endphp
                            <li data-name="{{ \Illuminate\Support\Str::lower($p->name ?? '') }}">
                                <button type="button" onclick="pickProf('{{ $p->idprofessional }}', @js($p->name ?? ''))"
                                    class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-white/6 cursor-pointer bg-transparent border-0 truncate">{{ $p->name ?? '—' }}</button>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            {{-- Data --}}
            <div class="w-full sm:w-auto">
                <label class="block text-gray-500 text-[0.7rem] font-bold uppercase tracking-wider mb-1.5">{{ __('Data') }}</label>
                <div class="flex items-center gap-1.5">
                    <input type="date" name="date" id="dateInput" value="{{ $date }}"
                        class="px-4 py-2.5 rounded-xl bg-[#0a0a0a] border border-white/10 text-white text-sm focus:border-brand-green/50 focus:outline-none cursor-pointer">
                    <button type="button" onclick="clearDate()" id="dateClear" title="{{ __('Limpar data') }}"
                        class="{{ $date === '' ? 'hidden ' : '' }}p-2.5 rounded-xl border border-white/10 text-gray-500 hover:text-white hover:bg-white/8 transition-all cursor-pointer bg-transparent">
                        <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>

            {{-- Buscar --}}
            <button type="submit"
                class="search-btn inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-brand-green text-white text-xs font-bold hover:bg-brand-green-dark transition-colors cursor-pointer border-0">
                <i class="fa-solid fa-magnifying-glass text-[0.7rem]"></i> {{ __('Buscar') }}
            </button>

            @if ($selCustomer !== '' || $selProfessional !== '' || $date !== '')
                <a href="{{ route('owner.quotes.index') }}"
                    class="px-4 py-2.5 rounded-xl border border-white/10 text-gray-400 text-xs font-semibold hover:text-white hover:border-white/25 transition-all no-underline">
                    {{ __('Limpar') }}
                </a>
            @endif
        </form>
    </div>

    @if (count($appointments) > 0)

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-white/6">
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">{{ __('Cliente') }}</th>
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase hidden md:table-cell">{{ __('Serviço') }}</th>
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase hidden lg:table-cell">{{ __('Profissional') }}</th>
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">{{ __('Data & Hora') }}</th>
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">{{ __('Valor') }}</th>
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">{{ __('Status') }}</th>
                        <th class="px-6 py-4"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/4">
                    @foreach ($appointments as $appointment)
                        @php
                            $a   = (object)(array) $appointment;
                            $st  = (int) ($a->status ?? 0);
                            $dateFmt = !empty($a->appointment_date)
                                ? \Carbon\Carbon::parse($a->appointment_date)->format('d/m/Y')
                                : '—';
                        @endphp
                        <tr class="hover:bg-white/3 transition-colors">
                            <td class="px-6 py-4">
                                <span class="text-white font-semibold text-sm block">{{ $a->names ?? '—' }}</span>
                                <span class="text-gray-500 text-xs">{{ $a->phone ?? '' }}</span>
                            </td>
                            <td class="px-6 py-4 hidden md:table-cell">
                                <span class="text-gray-300 text-sm">{{ $a->service_name ?? '—' }}</span>
                            </td>
                            <td class="px-6 py-4 hidden lg:table-cell">
                                <span class="text-gray-300 text-sm">{{ $a->professional_name ?? '—' }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-white text-sm block">{{ $dateFmt }}</span>
                                <span class="text-brand-green text-xs font-semibold">{{ $a->appointment_interval ?? '' }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-white text-sm font-semibold">R$ {{ number_format((float) ($a->total_price ?? 0), 2, ',', '.') }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-2.5 py-1 rounded-lg border text-[0.68rem] font-bold uppercase tracking-wider {{ $statusClasses[$st] ?? $statusClasses[0] }}">
                                    {{ $statusLabels[$st] ?? $st }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                @if ($st === 0)
                                    <div class="flex items-center gap-2 justify-end">
                                        <button type="button"
                                                data-id="{{ $a->idappointment }}"
                                                onclick="markCompleted(this)"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-brand-green/30 text-brand-green text-xs font-semibold hover:bg-brand-green/10 transition-colors cursor-pointer">
                                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                                <polyline points="20 6 9 17 4 12"/>
                                            </svg>
                                            {{ __('Finalizar') }}
                                        </button>
                                        <button type="button"
                                                data-id="{{ $a->idappointment }}"
                                                onclick="openCancelOwner(this)"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-red-500/30 text-red-400 text-xs font-semibold hover:bg-red-500/10 transition-colors cursor-pointer">
                                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                                            </svg>
                                            {{ __('Cancelar') }}
                                        </button>
                                    </div>
                                @elseif ($st === 2)
                                    <div class="flex items-center justify-end">
                                        <button type="button"
                                                data-reason="{{ $a->notes }}"
                                                onclick="openReasonModal(this)"
                                                title="{{ __('Ver motivo do cancelamento') }}"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-red-500/30 text-red-400 text-xs font-semibold hover:bg-red-500/10 transition-colors cursor-pointer">
                                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                                <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
                                            </svg>
                                            {{ __('Motivo') }}
                                        </button>
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if ($pagination['last_page'] > 1)
            <div class="px-6 py-4 border-t border-white/6 flex items-center justify-between">
                <p class="text-gray-500 text-xs">
                    {{ __('Exibindo') }}
                    <span class="text-white font-medium">{{ $pagination['from'] }}</span>
                    {{ __('a') }}
                    <span class="text-white font-medium">{{ $pagination['to'] }}</span>
                    {{ __('de') }}
                    <span class="text-white font-medium">{{ $pagination['total'] }}</span>
                </p>
                <div class="flex items-center gap-1.5">
                    @if ($pagination['current_page'] > 1)
                        <a href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] - 1]) }}"
                            class="px-3 py-1.5 rounded-lg border border-white/10 text-gray-400 text-xs font-medium hover:border-white/25 hover:text-white transition-all no-underline">
                            ← {{ __('Anterior') }}
                        </a>
                    @else
                        <span class="px-3 py-1.5 rounded-lg border border-white/5 text-gray-600 text-xs font-medium cursor-not-allowed">← {{ __('Anterior') }}</span>
                    @endif

                    @for ($i = max(1, $pagination['current_page'] - 2); $i <= min($pagination['last_page'], $pagination['current_page'] + 2); $i++)
                        <a href="{{ request()->fullUrlWithQuery(['page' => $i]) }}"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium no-underline transition-all
                            {{ $i === $pagination['current_page']
                                ? 'bg-brand-green text-white border border-brand-green/50'
                                : 'border border-white/10 text-gray-400 hover:border-white/25 hover:text-white' }}">
                            {{ $i }}
                        </a>
                    @endfor

                    @if ($pagination['current_page'] < $pagination['last_page'])
                        <a href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] + 1]) }}"
                            class="px-3 py-1.5 rounded-lg border border-white/10 text-gray-400 text-xs font-medium hover:border-white/25 hover:text-white transition-all no-underline">
                            {{ __('Próximo') }} →
                        </a>
                    @else
                        <span class="px-3 py-1.5 rounded-lg border border-white/5 text-gray-600 text-xs font-medium cursor-not-allowed">{{ __('Próximo') }} →</span>
                    @endif
                </div>
            </div>
        @endif

    @else
        <div class="p-12 flex flex-col items-center justify-center text-center">
            <div class="w-14 h-14 rounded-2xl bg-brand-green/10 border border-brand-green/20 flex items-center justify-center mb-5">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="4" width="18" height="18" rx="2"/>
                    <line x1="16" y1="2" x2="16" y2="6"/>
                    <line x1="8" y1="2" x2="8" y2="6"/>
                    <line x1="3" y1="10" x2="21" y2="10"/>
                </svg>
            </div>
            <h3 class="font-heading font-bold text-white text-lg mb-2">{{ __('Nenhum agendamento encontrado') }}</h3>
            <p class="text-gray-500 text-sm max-w-xs">{{ __('Os agendamentos dos seus clientes aparecerão aqui.') }}</p>
        </div>
    @endif

</div>

<div id="reasonModal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4">
    <div onclick="closeReasonModal()" class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
    <div class="relative w-full max-w-md rounded-2xl border border-white/10 bg-[#0d0d0d] overflow-hidden shadow-2xl shadow-black z-10">
        <div class="flex items-center justify-between px-5 py-4 border-b border-white/8">
            <div class="flex items-center gap-2.5">
                <span class="w-8 h-8 rounded-lg bg-red-500/10 border border-red-500/25 flex items-center justify-center text-red-400 shrink-0">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                        <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
                    </svg>
                </span>
                <h3 class="font-heading font-bold text-white text-base">{{ __('Motivo do cancelamento') }}</h3>
            </div>
            <button type="button" onclick="closeReasonModal()" class="bg-transparent border-0 text-gray-500 hover:text-white cursor-pointer transition-colors flex items-center justify-center p-1">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </div>
        <div class="px-5 py-5">
            <p id="reasonModalText" class="text-gray-300 text-sm leading-relaxed whitespace-pre-line break-words m-0"></p>
        </div>
        <div class="px-5 py-4 border-t border-white/8 flex justify-end">
            <button type="button" onclick="closeReasonModal()" 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">
                {{ __('Fechar') }}
            </button>
        </div>
    </div>
</div>

<x-cancel-reason />

@push('scripts')
<script>
const CHANGE_STATUS_URL = "{{ route('owner.quotes.change-status') }}";
const CSRF              = "{{ csrf_token() }}";

function openReasonModal(btn) {
    const reason = (btn.dataset.reason || '').trim();
    document.getElementById('reasonModalText').textContent = reason !== '' ? reason : "{{ __('Nenhum motivo informado.') }}";
    document.getElementById('reasonModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeReasonModal() {
    document.getElementById('reasonModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeReasonModal();
});

// ── Dropdown buscável de clientes ──
function toggleCustDD(e) {
    e.stopPropagation();
    const dd = document.getElementById('custDD');
    dd.classList.toggle('hidden');
    if (!dd.classList.contains('hidden')) {
        const s = document.getElementById('custSearch');
        s.value = ''; filterCust(); s.focus();
    }
}
function filterCust() {
    const term = (document.getElementById('custSearch').value || '').toLowerCase();
    document.querySelectorAll('#custList li[data-name]').forEach(li => {
        li.style.display = li.dataset.name.includes(term) ? '' : 'none';
    });
}
function pickCust(id, name) {
    document.getElementById('idcustomer').value = id;
    const lbl = document.getElementById('custLabel');
    lbl.textContent = name;
    lbl.classList.toggle('text-gray-500', id === '');
    lbl.classList.toggle('text-white', id !== '');
    document.getElementById('custDD').classList.add('hidden');
}
document.addEventListener('click', function (e) {
    const wrap = document.getElementById('custWrap');
    if (wrap && !wrap.contains(e.target)) document.getElementById('custDD')?.classList.add('hidden');
});

function toggleProfDD(e) {
    e.stopPropagation();
    const dd = document.getElementById('profDD');
    dd.classList.toggle('hidden');
    if (!dd.classList.contains('hidden')) {
        const s = document.getElementById('profSearch');
        s.value = ''; filterProf(); s.focus();
    }
}
function filterProf() {
    const term = (document.getElementById('profSearch').value || '').toLowerCase();
    document.querySelectorAll('#profList li[data-name]').forEach(li => {
        li.style.display = li.dataset.name.includes(term) ? '' : 'none';
    });
}
function pickProf(id, name) {
    document.getElementById('idprofessional').value = id;
    const lbl = document.getElementById('profLabel');
    lbl.textContent = name;
    lbl.classList.toggle('text-gray-500', id === '');
    lbl.classList.toggle('text-white', id !== '');
    document.getElementById('profDD').classList.add('hidden');
}
document.addEventListener('click', function (e) {
    const wrap = document.getElementById('profWrap');
    if (wrap && !wrap.contains(e.target)) document.getElementById('profDD')?.classList.add('hidden');
});

// Limpar o campo de data (aplica ao clicar em Buscar)
function clearDate() {
    document.getElementById('dateInput').value = '';
    document.getElementById('dateClear')?.classList.add('hidden');
}

// Estado "Buscando..." no botão
function apptSearchLoading(form) {
    const b = form.querySelector('.search-btn');
    if (b) {
        b.disabled = true;
        b.classList.add('opacity-75', 'cursor-not-allowed');
        b.innerHTML = '<i class="fa-solid fa-spinner fa-spin text-[0.7rem]"></i> {{ __('Buscando...') }}';
    }
    return true;
}

async function markCompleted(btn) {
    const id = btn.dataset.id;

    confirm({
        title:       '{{ __('Finalizar agendamento') }}',
        message:     '{{ __('Tem certeza que deseja marcar este agendamento como finalizado?') }}',
        confirmText: '{{ __('Sim, finalizar') }}',
        danger:      false,
        onConfirm:   async () => {
            try {
                const res  = await fetch(CHANGE_STATUS_URL, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
                    body: JSON.stringify({ idappointment: parseInt(id), status: 1 }),
                });
                const json = await res.json();

                if (json.ok) {
                    showToast(json.message, 'success');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showToast(json.message || '{{ __('Erro ao finalizar.') }}', 'error');
                }
            } catch {
                showToast('{{ __('Erro de conexão.') }}', 'error');
            }
        },
    });
}

function openCancelOwner(btn) {
    const id = btn.dataset.id;

    cancelWithReason({
        title:       '{{ __('Cancelar agendamento') }}',
        message:     '{{ __('Informe o motivo do cancelamento.') }}',
        confirmText: '{{ __('Confirmar cancelamento') }}',
        onConfirm:   async (reason) => {
            try {
                const res  = await fetch(CHANGE_STATUS_URL, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
                    body: JSON.stringify({ idappointment: parseInt(id), status: 2, reason }),
                });
                const json = await res.json();

                if (json.ok) {
                    closeCancelReason();
                    showToast(json.message, 'success');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    unlockCancelReason();
                    showToast(json.message || '{{ __('Erro ao cancelar.') }}', 'error');
                }
            } catch {
                unlockCancelReason();
                showToast('{{ __('Erro de conexão.') }}', 'error');
            }
        },
    });
}
</script>
@endpush

@endsection