<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recebimento - Agendamentos</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="./src/css/style.css">
    <link rel="manifest" href="./manifest.json" />
    <link rel="icon" type="image/png" href="./logo.png" />
</head>
<body class="bg-[#f1f5f9] text-slate-900">

    <button class="btn-sidebar-show visible" id="btnShowSidebar" onclick="toggleSidebar()" title="Mostrar menu">
        <i class="fas fa-bars"></i>
    </button>

    <div class="app-wrapper">
        <aside class="sidebar collapsed" id="sidebar">
            <div class="sidebar-content" style="display:flex;flex-direction:column;height:100%;">
                <div class="sidebar-brand">
                    <div class="sidebar-brand-icon">
                        <i class="fas fa-boxes-stacked"></i>
                    </div>
                    <div class="sidebar-brand-text">
                        <span class="sidebar-brand-title">Recebimento</span>
                        <span class="sidebar-brand-sub">Agendamentos</span>
                    </div>
                </div>

                <div style="flex:1;">
                    <button onclick="openModal()" class="w-full bg-indigo-600 hover:bg-indigo-500 text-sm font-bold py-3.5 rounded-xl transition-all shadow-lg active:scale-95 flex items-center justify-center gap-2 mb-3 text-white">
                        <i class="fas fa-plus-circle"></i> NOVO RECEBIMENTO
                    </button>

                    <button onclick="openAgendaModal()" class="w-full bg-slate-700 hover:bg-slate-600 text-sm font-bold py-3.5 rounded-xl transition-all shadow-lg active:scale-95 flex items-center justify-center gap-2 mb-3 text-white">
                        <i class="fas fa-calendar-alt"></i> VER DISPONIBILIDADE
                    </button>

                    <button class="btn-sidebar-toggle" onclick="toggleSidebar()" title="Ocultar menu">
                        <i class="fas fa-chevron-left" id="sidebarToggleIcon"></i>
                    </button>
                </div>
            </div>
        </aside>

        <main class="main-content">
            <div class="main-inner">
                <div class="mb-8">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-sm font-black text-indigo-900 uppercase tracking-wider flex items-center gap-2">
                            <i class="fas fa-clock text-indigo-500"></i> Resumo de Agendamentos: Hoje
                        </h2>
                        <div class="flex items-center gap-2">
                            <span id="dataAtualTxt" class="text-[10px] font-bold text-slate-400 bg-slate-200 px-3 py-1 rounded-full" style="font-family:Arial,sans-serif;">--/--/--</span>
                            <button onclick="exportToExcel()" title="Exportar para Excel" class="flex items-center gap-2 px-3 py-1.5 bg-emerald-500 hover:bg-emerald-600 text-white text-[10px] font-bold rounded-lg transition-all shadow-sm">
                                <i class="fas fa-file-excel"></i>
                                <span class="hidden sm:inline">RELATÓRIO</span>
                            </button>
                            <button onclick="toggleDarkMode()" id="btnDarkMode" title="Alternar modo noturno" class="dark-toggle-btn">
                                <span class="dark-toggle-track">
                                    <span class="dark-toggle-thumb" id="darkModeThumb">
                                        <i class="fas fa-sun" id="darkModeIcon"></i>
                                    </span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div id="containerResumoHoje" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"></div>
                </div>

                <hr class="mb-8 border-slate-200">

                <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <div class="glass-card p-4 rounded-xl border-l-4 border-indigo-500 shadow-sm">
                        <p class="text-[10px] font-bold text-slate-400 uppercase">Total Geral</p>
                        <h3 id="statTotalRecusas" class="text-xl font-black text-slate-700">0</h3>
                    </div>
                    <div class="glass-card p-4 rounded-xl border-l-4 border-blue-400 shadow-sm">
                        <p class="text-[10px] font-bold text-slate-400 uppercase">Em Descarga</p>
                        <h3 id="statAndamento" class="text-xl font-black text-slate-700">0</h3>
                    </div>
                    <div class="glass-card p-4 rounded-xl border-l-4 border-slate-500 shadow-sm">
                        <p class="text-[10px] font-bold text-slate-400 uppercase">Volume Total</p>
                        <h3 id="statQtd" class="text-xl font-black text-slate-700">0</h3>
                    </div>
                    <div class="glass-card p-4 rounded-xl border-l-4 border-emerald-500 shadow-sm">
                        <p class="text-[10px] font-bold text-slate-400 uppercase">Custo da Carga</p>
                        <h3 id="statValor" class="text-lg font-black text-emerald-600 truncate">R$ 0,00</h3>
                    </div>
                </div>

                <div class="flex flex-col lg:flex-row gap-6 mb-6">
                    <div class="lg:w-1/2 flex flex-col gap-4">
                        <div class="glass-card p-5 rounded-2xl shadow-sm">
                            <label class="text-[10px] font-bold text-slate-400 uppercase mb-2 block italic">Pesquisar Fluxo Completo</label>
                            <input type="text" id="globalSearch" placeholder="NF, Fornecedor ou Produto..." class="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm outline-none focus:border-indigo-400 mb-4">
                            <div class="flex items-end gap-2 mb-4">
                                <div class="flex-1">
                                    <label class="text-[9px] font-bold text-slate-400 uppercase">De (Previsão)</label>
                                    <input type="date" id="filterDateStart" class="w-full px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-xs outline-none focus:border-indigo-400">
                                </div>
                                <div class="flex-1">
                                    <label class="text-[9px] font-bold text-slate-400 uppercase">Até (Previsão)</label>
                                    <input type="date" id="filterDateEnd" class="w-full px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-xs outline-none focus:border-indigo-400">
                                </div>
                                <button onclick="clearAllFilters()" title="Limpar filtros" class="px-3 py-1.5 bg-slate-200 hover:bg-red-500 hover:text-white text-slate-500 text-xs font-bold rounded-lg transition-all">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div class="flex p-1 bg-slate-100 rounded-lg border border-slate-200 w-full overflow-x-auto no-scrollbar">
                                <button onclick="setStatusFilter('Todos')" id="btnTodos" class="flex-1 py-1.5 px-2 text-[10px] font-bold rounded-md transition-all bg-white shadow text-indigo-600 whitespace-nowrap">TODOS</button>
                                <button onclick="setStatusFilter('Agendado')" id="btnAgendado" class="flex-1 py-1.5 px-2 text-[10px] font-bold rounded-md transition-all text-slate-500 whitespace-nowrap">AGENDADO</button>
                                <button onclick="setStatusFilter('Em Descarga')" id="btnAndamento" class="flex-1 py-1.5 px-2 text-[10px] font-bold rounded-md transition-all text-slate-500 whitespace-nowrap">DESCARGA</button>
                                <button onclick="setStatusFilter('Concluído')" id="btnFinalizado" class="flex-1 py-1.5 px-2 text-[10px] font-bold rounded-md transition-all text-slate-500 whitespace-nowrap">CONCLUÍDO</button>
                            </div>
                        </div>
                    </div>

                    <div class="lg:w-1/2 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="glass-card p-4 rounded-2xl shadow-sm chart-card-wrapper" id="chartWrapStatus">
                            <h4 class="text-[10px] font-black text-slate-400 uppercase mb-2">Status Operacional</h4>
                            <button class="btn-expand-chart" title="Tela cheia" onclick="expandChart('chartWrapStatus')">
                                <i class="fas fa-expand"></i>
                            </button>
                            <div class="chart-box"><canvas id="chartStatus"></canvas></div>
                        </div>
                        <div class="glass-card p-4 rounded-2xl shadow-sm chart-card-wrapper" id="chartWrapForn">
                            <h4 class="text-[10px] font-black text-slate-400 uppercase mb-2">Agendamentos Solicitados</h4>
                            <button class="btn-expand-chart" title="Tela cheia" onclick="expandChart('chartWrapForn')">
                                <i class="fas fa-expand"></i>
                            </button>
                            <div class="chart-box"><canvas id="chartFornecedor"></canvas></div>
                        </div>
                    </div>
                </div>

                <div class="glass-card rounded-2xl shadow-sm border border-slate-200 flex flex-col bg-white">
                    <div class="overflow-x-auto overflow-y-auto max-h-[380px] custom-scroll relative rounded-2xl">
                        <table class="w-full text-left border-collapse">
                            <thead class="bg-slate-50 text-[10px] text-slate-400 uppercase font-bold sticky top-0 z-10 shadow-sm">
                                <tr>
                                    <th class="px-6 py-4 bg-slate-50">Fornecedor</th>
                                    <th class="px-6 py-4 bg-slate-50">Carga / NF</th>
                                    <th class="px-6 py-4 bg-slate-50">Agendamento</th>
                                    <th class="px-6 py-4 bg-slate-50">Volume / Valor</th>
                                    <th class="px-6 py-4 bg-slate-50">Status</th>
                                    <th class="px-6 py-4 bg-slate-50 text-center">Ações</th>
                                </tr>
                            </thead>
                            <tbody id="tableBody" class="divide-y divide-slate-100 text-xs"></tbody>
                        </table>
                    </div>
                </div>
                <div style="height:1.5rem;"></div>
            </div>
        </main>
    </div>

    <div id="modal" class="modal-overlay fixed inset-0 bg-slate-900/60 backdrop-blur-sm items-center justify-center p-4 z-50">
        <div class="bg-white rounded-3xl w-full max-w-4xl p-8 shadow-2xl max-h-[95vh] overflow-y-auto custom-scroll">
            <div class="flex justify-between items-center mb-6 border-b pb-4">
                <h2 id="modalTitle" class="text-xl font-black text-slate-800 uppercase">Entrada de Mercadoria</h2>
                <button onclick="closeModal()" class="text-slate-400 hover:text-red-500 transition"><i class="fas fa-times text-xl"></i></button>
            </div>
            <form id="recusaForm" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <input type="hidden" id="editIndex">
                <div class="md:col-span-2">
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Fornecedor</label>
                    <input required type="text" id="fornecedor" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                </div>
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase">NF(s) Entrada</label>
                    <input required type="text" id="nfO" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                </div>
                <div class="md:col-span-3">
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Produto Principal</label>
                    <input required type="text" id="prod" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                </div>
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Solicitação</label>
                    <input required type="date" id="dataSolicitacao" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                </div>
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Previsão</label>
                    <input required type="date" id="dataPrevisao" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                </div>
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="text-[10px] font-bold text-slate-400 uppercase">H. Início</label>
                        <input required type="time" id="horarioPrevisto" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                    </div>
                    <div>
                        <label class="text-[10px] font-bold text-slate-400 uppercase">H. Término</label>
                        <input required type="time" id="horarioFim" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                    </div>
                </div>
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Status Operacional</label>
                    <select id="status" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                        <option value="Agendado">Agendado</option>
                        <option value="Em Descarga">Em Descarga</option>
                        <option value="Concluído">Concluído</option>
                    </select>
                </div>
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Volume</label>
                    <input required type="number" id="qtd" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                </div>
                <div>
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Valor Total (R$)</label>
                    <input required type="text" id="vUnit" oninput="formatarMoeda(this)" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400">
                </div>
                <div class="md:col-span-3">
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Observações</label>
                    <textarea id="observacoes" rows="2" class="w-full p-2.5 bg-slate-50 border rounded-lg outline-none focus:border-indigo-400 resize-none" placeholder="Detalhes adicionais..."></textarea>
                </div>
                <div class="md:col-span-3 pt-4">
                    <button type="submit" class="w-full bg-indigo-600 text-white font-bold py-3.5 rounded-xl hover:bg-indigo-700 shadow-lg uppercase transition">Confirmar Recebimento</button>
                </div>
            </form>
        </div>
    </div>

    <div id="agendaModal" class="modal-overlay fixed inset-0 bg-slate-900/60 backdrop-blur-sm items-center justify-center p-4 z-50">
        <div class="bg-white rounded-3xl w-full max-w-2xl p-6 shadow-2xl max-h-[85vh] flex flex-col">
            <div class="flex justify-between items-center mb-4 border-b pb-4">
                <div>
                    <h2 class="text-lg font-black text-slate-800 uppercase leading-none">Disponibilidade de Horários</h2>
                    <p class="text-[10px] text-slate-400 font-bold uppercase mt-1">Grade: 08:00 às 18:00 (30 min)</p>
                </div>
                <button onclick="closeAgendaModal()" class="text-slate-400 hover:text-red-500 transition"><i class="fas fa-times text-xl"></i></button>
            </div>
            <div class="mb-4">
                <label class="text-[9px] font-bold text-slate-400 uppercase">Selecionar Data:</label>
                <input type="date" id="checkAgendaDate" onchange="renderAgendaGrid()" class="w-full p-2 bg-slate-50 border rounded-lg text-sm outline-none">
            </div>
            <div class="overflow-y-auto flex-1 pr-2 custom-scroll">
                <table class="w-full text-sm">
                    <thead class="bg-slate-50 sticky top-0 z-10">
                        <tr class="text-[10px] uppercase text-slate-400 border-b">
                            <th class="p-3 text-left bg-slate-50">Horário</th>
                            <th class="p-3 text-left bg-slate-50">Status / Fornecedor</th>
                        </tr>
                    </thead>
                    <tbody id="agendaGridBody" class="divide-y text-xs"></tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="deleteConfirmModal">
        <div class="delete-modal-box">
            <div class="delete-modal-icon"><i class="fas fa-trash-alt"></i></div>
            <div class="delete-modal-title">Excluir Registro</div>
            <div class="delete-modal-desc">Tem certeza que deseja excluir este registro?<br><strong>Esta ação não poderá ser desfeita.</strong></div>
            <div class="delete-modal-actions">
                <button class="btn-cancel-delete" onclick="closeDeleteModal()"><i class="fas fa-times" style="margin-right:6px;"></i>Cancelar</button>
                <button class="btn-confirm-delete" id="btnConfirmDelete"><i class="fas fa-trash-alt" style="margin-right:6px;"></i>Excluir</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script src="./supabase-config.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <script src="./src/js/script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</body>
</html>