@extends('layouts.dental')
@section('title', isset($appointment) ? 'Editar Consulta' : 'Nova Consulta')
@section('content')
<div style="max-width:680px;margin:0 auto">
<form method="POST" action="{{ isset($appointment) ? route('appointments.update', $appointment) : route('appointments.store') }}" id="formConsulta">
@csrf
@if(isset($appointment)) @method('PUT') @endif

<div style="background:#fff;border-radius:16px;border:1px solid #e5e7eb;overflow:hidden;box-shadow:0 1px 8px rgba(0,0,0,.06)">

    {{-- Abas Consulta / Compromisso --}}
    <div style="display:flex;gap:8px;padding:16px 20px;border-bottom:1px solid #f3f4f6">
        <button type="button" style="background:#2563eb;color:#fff;padding:8px 20px;border-radius:999px;border:none;font-size:14px;font-weight:600;cursor:pointer">Consulta</button>
        <button type="button" style="background:#f3f4f6;color:#6b7280;padding:8px 20px;border-radius:999px;border:none;font-size:14px;cursor:pointer">Compromisso</button>
    </div>

    <div style="padding:20px">

        {{-- Busca de Paciente --}}
        <div style="margin-bottom:18px;position:relative">
            <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:4px">Paciente*</label>
            <div style="border:2px solid #2563eb;border-radius:10px;padding:10px 14px;display:flex;align-items:center">
                <input type="text" id="busca_paciente" placeholder="Buscar paciente"
                    autocomplete="off"
                    style="border:none;outline:none;font-size:14px;color:#111827;flex:1;background:transparent"
                    value="{{ isset($appointment) ? $appointment->patient->name : '' }}"
                    oninput="buscarPaciente(this.value)">
            </div>
            <input type="hidden" name="patient_id" id="patient_id" value="{{ old('patient_id', $appointment->patient_id ?? $selectedPatient ?? '') }}" required>
            <div id="lista_pacientes" style="display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:100;max-height:220px;overflow-y:auto;margin-top:4px"></div>
            <div style="display:flex;justify-content:flex-end;margin-top:4px">
                <a href="{{ route('patients.create') }}" style="font-size:12px;color:#2563eb;text-decoration:none">Cadastrar novo paciente</a>
            </div>
        </div>

        {{-- Profissional + Cadeira --}}
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px">
            <div>
                <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:4px">Profissional*</label>
                <div style="border:1.5px solid #e5e7eb;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between">
                    <select name="professional_id" required style="border:none;outline:none;font-size:14px;color:#111827;width:100%;background:transparent;cursor:pointer">
                        <option value="">Selecione</option>
                        @foreach($professionals as $p)
                        <option value="{{ $p->id }}" {{ old('professional_id', $appointment->professional_id ?? '') == $p->id ? 'selected' : '' }}>{{ $p->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div>
                <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:4px">Cadeira*</label>
                <div style="border:1.5px solid #e5e7eb;border-radius:10px;padding:10px 14px">
                    <select name="chair_id" style="border:none;outline:none;font-size:14px;color:#111827;width:100%;background:transparent;cursor:pointer">
                        <option value="">Selecione</option>
                        @foreach($chairs as $c)
                        <option value="{{ $c->id }}" {{ old('chair_id', $appointment->chair_id ?? '') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        {{-- Data + Hora + Duração --}}
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:6px">
            <div>
                <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:4px">Data da consulta*</label>
                <div style="border:1.5px solid #e5e7eb;border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px">
                    <input type="date" name="data_consulta" required
                        value="{{ old('data_consulta', isset($appointment) ? $appointment->starts_at->format('Y-m-d') : ($defaultDate ?? date('Y-m-d'))) }}"
                        style="border:none;outline:none;font-size:14px;color:#111827;background:transparent;width:100%">
                </div>
            </div>
            <div>
                <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:4px">Hora de início*</label>
                <div style="border:1.5px solid #e5e7eb;border-radius:10px;padding:10px 14px">
                    <input type="time" name="hora_consulta" required
                        value="{{ old('hora_consulta', isset($appointment) ? $appointment->starts_at->format('H:i') : ($defaultHour ?? '08:00')) }}"
                        style="border:none;outline:none;font-size:14px;color:#111827;background:transparent;width:100%">
                </div>
            </div>
            <div>
                <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:4px">Duração (min)*</label>
                <div style="border:1.5px solid #e5e7eb;border-radius:10px;padding:10px 14px">
                    <input type="number" name="duration_minutes" min="5" max="480" required
                        value="{{ old('duration_minutes', $appointment->duration_minutes ?? 30) }}"
                        style="border:none;outline:none;font-size:14px;color:#111827;background:transparent;width:100%">
                </div>
            </div>
        </div>
        <div style="text-align:center;margin-bottom:18px">
            <a href="#" style="font-size:12px;color:#2563eb;text-decoration:none">Encontrar horário livre</a>
        </div>

        {{-- Procedimento --}}
        <div style="margin-bottom:18px">
            <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:4px">Procedimento</label>
            <div style="border:1.5px solid #e5e7eb;border-radius:10px;padding:10px 14px">
                <select name="procedure_id" style="border:none;outline:none;font-size:14px;color:#111827;width:100%;background:transparent;cursor:pointer">
                    <option value="">Selecione</option>
                    @foreach($procedures as $p)
                    <option value="{{ $p->id }}" {{ old('procedure_id', $appointment->procedure_id ?? '') == $p->id ? 'selected' : '' }}>{{ $p->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Observação --}}
        <div style="margin-bottom:18px">
            <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:4px">Observação</label>
            <div style="border:1.5px solid #e5e7eb;border-radius:10px;padding:10px 14px">
                <textarea name="notes" rows="3" maxlength="500" id="obs"
                    style="border:none;outline:none;font-size:14px;color:#111827;background:transparent;width:100%;resize:none"
                    oninput="document.getElementById('obscount').textContent=this.value.length">{{ old('notes', $appointment->notes ?? '') }}</textarea>
            </div>
            <div style="text-align:right;font-size:11px;color:#9ca3af;margin-top:2px"><span id="obscount">0</span> / 500</div>
        </div>

        {{-- Toggle lembrete --}}
        <div style="display:flex;align-items:center;gap:10px;padding:14px 0;border-top:1px solid #f3f4f6">
            <label class="toggle" style="position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0">
                <input type="checkbox" name="send_reminder" checked style="opacity:0;width:0;height:0">
                <span style="position:absolute;cursor:pointer;inset:0;background:#2563eb;border-radius:34px;transition:.3s">
                    <span style="position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s"></span>
                </span>
            </label>
            <span style="font-size:13px;color:#374151">Enviar confirmação e lembrete de consulta automático</span>
        </div>

    </div>

    {{-- Footer com botões --}}
    <div style="display:flex;gap:10px;justify-content:flex-end;padding:16px 20px;border-top:1px solid #f3f4f6;background:#f9fafb">
        <a href="{{ route('appointments.index') }}" style="padding:10px 24px;border:1.5px solid #d1d5db;border-radius:10px;font-size:14px;font-weight:500;color:#374151;text-decoration:none">Cancelar</a>
        <button type="submit" style="background:#22c55e;color:#fff;padding:10px 28px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer">
            {{ isset($appointment) ? 'Salvar' : 'Agendar' }}
        </button>
    </div>
</div>

{{-- Hidden field starts_at montado via JS --}}
<input type="hidden" name="starts_at" id="starts_at">

</form>

@if(isset($appointment))
{{-- Ações rápidas --}}
<div style="background:#fff;border-radius:12px;border:1px solid #e5e7eb;padding:20px;margin-top:16px">
    <h3 style="font-weight:600;color:#111827;margin-bottom:14px;font-size:14px">Ações Rápidas</h3>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
        @if($appointment->status === 'agendado')
        <form method="POST" action="{{ route('appointments.confirm', $appointment) }}">@csrf @method('PATCH')
        <button style="background:#22c55e;color:#fff;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px">✓ Confirmar</button></form>
        @endif
        @if(in_array($appointment->status, ['agendado','confirmado']))
        <form method="POST" action="{{ route('appointments.checkin', $appointment) }}">@csrf @method('PATCH')
        <button style="background:#f97316;color:#fff;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px">▶ Em Atendimento</button></form>
        <form method="POST" action="{{ route('appointments.absent', $appointment) }}">@csrf @method('PATCH')
        <button style="background:#fee2e2;color:#991b1b;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px">✕ Faltou</button></form>
        @endif
        @if($appointment->status === 'em_atendimento')
        <form method="POST" action="{{ route('appointments.finish', $appointment) }}">@csrf @method('PATCH')
        <button style="background:#6b7280;color:#fff;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px">✓ Finalizar</button></form>
        @endif
    </div>
</div>
@endif

<script>
// Monta starts_at antes de submeter
document.getElementById('formConsulta').addEventListener('submit', function() {
    var data = document.querySelector('[name=data_consulta]').value;
    var hora = document.querySelector('[name=hora_consulta]').value;
    document.getElementById('starts_at').value = data + 'T' + hora;
});

// Busca de paciente via AJAX
var pacientes = @json($patients->map(fn($p) => ['id'=>$p->id,'name'=>$p->name,'phone'=>$p->phone]));

function buscarPaciente(q) {
    var lista = document.getElementById('lista_pacientes');
    if (!q || q.length < 1) { lista.style.display='none'; return; }
    q = q.toLowerCase();
    var filtrados = pacientes.filter(p =>
        p.name.toLowerCase().includes(q) ||
        (p.phone && p.phone.includes(q))
    ).slice(0, 8);
    if (!filtrados.length) { lista.style.display='none'; return; }
    lista.innerHTML = filtrados.map(p =>
        '<div onclick="selecionarPaciente('+p.id+',\''+p.name.replace(/'/g,"\\'")+'\')" style="padding:10px 14px;cursor:pointer;font-size:14px;border-bottom:1px solid #f3f4f6;color:#111827" onmouseover="this.style.background=\'#f0f9ff\'" onmouseout="this.style.background=\'\'">'+
        '<strong>'+p.name+'</strong>'+(p.phone?'<span style="color:#9ca3af;font-size:12px;margin-left:8px">'+p.phone+'</span>':'')+
        '</div>'
    ).join('');
    lista.style.display = 'block';
}

function selecionarPaciente(id, nome) {
    document.getElementById('busca_paciente').value = nome;
    document.getElementById('patient_id').value = id;
    document.getElementById('lista_pacientes').style.display = 'none';
}

document.addEventListener('click', function(e) {
    if (!e.target.closest('#lista_pacientes') && e.target.id !== 'busca_paciente') {
        document.getElementById('lista_pacientes').style.display = 'none';
    }
});
</script>
@endsection