@extends('layouts.owner')

@section('title', __('Faturamento — Lined'))
@section('page-title', __('Faturamento'))
@section('page-subtitle', __('Resumo financeiro dos agendamentos'))

@section('content')

@php
    $summary = (array) ($summary ?? []);
    $money   = fn($v) => 'R$ ' . number_format((float) $v, 2, ',', '.');

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

<div class="rounded-2xl border border-white/8 bg-white/3 p-6 mb-8">
    <style>
        #billingFilters input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; cursor: pointer; }
        #billingFilters input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

        /* Scrollbar personalizada para o dropdown de select (#profList, .ss-list) */
        #profList::-webkit-scrollbar,
        .ss-list::-webkit-scrollbar {
            width: 5px;
        }
        #profList::-webkit-scrollbar-track,
        .ss-list::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 8px;
        }
        #profList::-webkit-scrollbar-thumb,
        .ss-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 8px;
        }
        #profList::-webkit-scrollbar-thumb:hover,
        .ss-list::-webkit-scrollbar-thumb:hover {
            background: #22c55e;
        }
        #profList,
        .ss-list {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.04);
        }
    </style>
    <form id="billingFilters" method="GET" action="{{ route('owner.billing.index') }}" class="flex flex-wrap items-end gap-3" onsubmit="return validateDateRange() && billingSearchLoading(this)">

        <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>

        <div class="w-full sm:w-auto">
            <label class="block text-gray-500 text-[0.7rem] font-bold uppercase tracking-wider mb-1.5">{{ __('De') }}</label>
            <input type="date" name="date_from" id="dateFrom" value="{{ $dateFrom }}" max="{{ $dateTo }}"
                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">
        </div>

        <div class="w-full sm:w-auto">
            <label class="block text-gray-500 text-[0.7rem] font-bold uppercase tracking-wider mb-1.5">{{ __('Até') }}</label>
            <input type="date" name="date_to" id="dateTo" value="{{ $dateTo }}" min="{{ $dateFrom }}"
                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">
        </div>

        <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 ($selProfessional !== '' || $dateFrom !== '' || $dateTo !== '')
            <a href="{{ route('owner.billing.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>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-6">
    <div class="rounded-2xl border border-brand-green/25 bg-brand-green/5 p-6">
        <div class="text-brand-green text-sm font-semibold mb-1">{{ __('Total ganho') }}</div>
        <div class="font-heading font-bold text-white text-4xl leading-none">{{ $money($summary['completed_amount'] ?? 0) }}</div>
        <div class="text-gray-400 text-xs mt-2">{{ $summary['completed_count'] ?? 0 }} {{ __('agendamentos finalizados') }}</div>
    </div>
    <div class="rounded-2xl border border-amber-400/25 bg-amber-400/5 p-6">
        <div class="text-amber-400 text-sm font-semibold mb-1">{{ __('A receber') }}</div>
        <div class="font-heading font-bold text-white text-4xl leading-none">{{ $money($summary['pending_amount'] ?? 0) }}</div>
        <div class="text-gray-400 text-xs mt-2">{{ $summary['pending_count'] ?? 0 }} {{ __('agendamentos pendentes') }}</div>
    </div>
</div>

<div class="grid grid-cols-2 xl:grid-cols-4 gap-5 mb-8">
    <div class="rounded-2xl border border-white/8 bg-white/3 p-6">
        <div class="font-heading font-bold text-white text-3xl leading-none">{{ $summary['scheduled_count'] ?? 0 }}</div>
        <div class="text-gray-400 text-sm mt-2">{{ __('Agendadas') }}</div>
    </div>
    <div class="rounded-2xl border border-amber-400/20 bg-amber-400/5 p-6">
        <div class="font-heading font-bold text-amber-400 text-3xl leading-none">{{ $summary['pending_count'] ?? 0 }}</div>
        <div class="text-gray-400 text-sm mt-2">{{ __('Pendentes') }}</div>
    </div>
    <div class="rounded-2xl border border-brand-green/20 bg-brand-green/5 p-6">
        <div class="font-heading font-bold text-brand-green text-3xl leading-none">{{ $summary['completed_count'] ?? 0 }}</div>
        <div class="text-gray-400 text-sm mt-2">{{ __('Finalizadas') }}</div>
    </div>
    <div class="rounded-2xl border border-red-500/20 bg-red-500/5 p-6">
        <div class="font-heading font-bold text-red-400 text-3xl leading-none">{{ $summary['cancelled_count'] ?? 0 }}</div>
        <div class="text-gray-400 text-sm mt-2">{{ __('Canceladas') }}</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">
        <h3 class="font-heading font-bold text-white text-base">{{ __('Faturamento por profissional') }}</h3>
    </div>

    @if (count($byProfessional) > 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">{{ __('Profissional') }}</th>
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">{{ __('Agendadas') }}</th>
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase hidden md:table-cell">{{ __('Pendentes') }}</th>
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">{{ __('Finalizadas') }}</th>
                        <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase hidden md:table-cell">{{ __('Canceladas') }}</th>
                        <th class="text-right px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase hidden sm:table-cell">{{ __('A receber') }}</th>
                        <th class="text-right px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">{{ __('Total ganho') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/4">
                    @foreach ($byProfessional as $row)
                        @php $r = (object)(array) $row; @endphp
                        <tr class="hover:bg-white/3 transition-colors">
                            <td class="px-6 py-4">
                                <span class="text-white font-semibold text-sm">{{ $r->professional_name ?? '—' }}</span>
                            </td>
                            <td class="px-6 py-4 text-gray-300 text-sm">{{ (int) ($r->scheduled_count ?? 0) }}</td>
                            <td class="px-6 py-4 text-amber-400 text-sm hidden md:table-cell">{{ (int) ($r->pending_count ?? 0) }}</td>
                            <td class="px-6 py-4 text-brand-green text-sm">{{ (int) ($r->completed_count ?? 0) }}</td>
                            <td class="px-6 py-4 text-red-400 text-sm hidden md:table-cell">{{ (int) ($r->cancelled_count ?? 0) }}</td>
                            <td class="px-6 py-4 text-right text-amber-400 text-sm hidden sm:table-cell">{{ $money($r->pending_amount ?? 0) }}</td>
                            <td class="px-6 py-4 text-right text-white font-semibold text-sm">{{ $money($r->completed_amount ?? 0) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @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="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                </svg>
            </div>
            <h3 class="font-heading font-bold text-white text-lg mb-2">{{ __('Sem dados no período') }}</h3>
            <p class="text-gray-500 text-sm max-w-xs">{{ __('Ajuste os filtros para ver o faturamento.') }}</p>
        </div>
    @endif
</div>

@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',
    ];
@endphp

<div class="rounded-2xl border border-white/8 bg-white/3 overflow-hidden mt-8">
    <div class="px-6 py-5 border-b border-white/8">
        <h3 class="font-heading font-bold text-white text-base">{{ __('Detalhe dos agendamentos') }}</h3>
    </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">{{ __('Status') }}</th>
                        <th class="text-right px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">{{ __('Valor') }}</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">{{ $a->names ?? '—' }}</span>
                            </td>
                            <td class="px-6 py-4 text-gray-300 text-sm hidden md:table-cell">{{ $a->service_name ?? '—' }}</td>
                            <td class="px-6 py-4 text-gray-300 text-sm hidden lg:table-cell">{{ $a->professional_name ?? '—' }}</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="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 text-right text-white font-semibold text-sm">{{ $money($a->total_price ?? 0) }}</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">
            <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">{{ __('Ajuste os filtros para ver os agendamentos.') }}</p>
        </div>
    @endif
</div>

@push('scripts')
<script>
(function () {
    const from = document.getElementById('dateFrom');
    const to   = document.getElementById('dateTo');
    if (!from || !to) return;
    const sync = () => { to.min = from.value || ''; from.max = to.value || ''; };
    from.addEventListener('change', () => { sync(); to.setCustomValidity(''); });
    to.addEventListener('change', () => { sync(); to.setCustomValidity(''); });
    sync();
    window.validateDateRange = function () {
        if (from.value && to.value && from.value > to.value) {
            to.setCustomValidity('A data final não pode ser anterior à inicial.');
            to.reportValidity();
            return false;
        }
        to.setCustomValidity('');
        return true;
    };
})();

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');
});

function billingSearchLoading(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;
}
</script>
@endpush

@endsection