@extends('layouts.dental')
@section('title', 'Procedimentos')
@section('content')
<div style="max-width:800px;margin:0 auto;padding:24px 16px">

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px">
    <h2 style="font-size:20px;font-weight:700;color:#111827">⚙️ Procedimentos</h2>
    <button onclick="document.getElementById('modal_novo').style.display='flex'" style="background:#2563eb;color:#fff;padding:8px 18px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer">+ Novo Procedimento</button>
</div>

@if(session('success'))
<div style="background:#f0fdf4;border:1px solid #86efac;color:#166534;padding:10px 16px;border-radius:8px;margin-bottom:16px;font-size:13px">{{ session('success') }}</div>
@endif

<div style="background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden">
@forelse($procedures as $p)
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #f3f4f6">
    <div style="width:16px;height:16px;border-radius:50%;background:{{ $p->color }};flex-shrink:0"></div>
    <div style="flex:1">
        <div style="font-size:14px;font-weight:600;color:#111827">{{ $p->name }}</div>
        @if($p->description)<div style="font-size:12px;color:#9ca3af">{{ $p->description }}</div>@endif
    </div>
    <div style="font-size:12px;color:#6b7280;white-space:nowrap">{{ $p->default_duration }}min</div>
    <div style="font-size:12px;color:#6b7280;white-space:nowrap">R$ {{ number_format($p->default_price,2,',','.') }}</div>
    <span style="padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:{{ $p->active?'#dcfce7':'#f3f4f6' }};color:{{ $p->active?'#166534':'#6b7280' }}">{{ $p->active?'Ativo':'Inativo' }}</span>
    <button onclick="editarProcedimento({{ $p->id }},'{{ addslashes($p->name) }}','{{ addslashes($p->description) }}','{{ $p->default_duration }}','{{ $p->default_price }}','{{ $p->color }}',{{ $p->active?'true':'false' }})" style="background:#f3f4f6;border:none;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;color:#374151">✏️ Editar</button>
    <form method="POST" action="{{ route('procedures.destroy',$p->id) }}" onsubmit="return confirm('Remover?')" style="margin:0">
        @csrf @method('DELETE')
        <button type="submit" style="background:#fff;border:1px solid #fca5a5;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;color:#dc2626">🗑</button>
    </form>
</div>
@empty
<div style="padding:40px;text-align:center;color:#9ca3af;font-size:14px">Nenhum procedimento cadastrado ainda.</div>
@endforelse
</div>
</div>

{{-- MODAL NOVO --}}
<div id="modal_novo" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;padding:16px">
<div style="background:#fff;border-radius:16px;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f3f4f6">
<h3 style="font-weight:700;font-size:15px;color:#111827">Novo Procedimento</h3>
<button onclick="document.getElementById('modal_novo').style.display='none'" style="background:none;border:none;font-size:24px;color:#9ca3af;cursor:pointer">×</button>
</div>
<form method="POST" action="{{ route('procedures.store') }}" style="padding:20px">
@csrf
<div style="margin-bottom:14px">
    <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Nome *</label>
    <input type="text" name="name" required placeholder="Ex: Limpeza, Extração..." style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;box-sizing:border-box">
</div>
<div style="margin-bottom:14px">
    <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Descrição</label>
    <input type="text" name="description" placeholder="Opcional" style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;box-sizing:border-box">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 80px;gap:12px;margin-bottom:14px">
    <div>
        <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Duração (min) *</label>
        <input type="number" name="default_duration" value="30" min="5" required style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;box-sizing:border-box">
    </div>
    <div>
        <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Preço (R$) *</label>
        <input type="number" name="default_price" value="0" min="0" step="0.01" required style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;box-sizing:border-box">
    </div>
    <div>
        <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Cor</label>
        <input type="color" name="color" value="#9C27B0" style="width:100%;height:42px;border:1.5px solid #e5e7eb;border-radius:10px;cursor:pointer;box-sizing:border-box">
    </div>
</div>
<div style="display:flex;gap:10px;justify-content:flex-end;margin-top:8px">
    <button type="button" onclick="document.getElementById('modal_novo').style.display='none'" style="padding:10px 20px;border:1.5px solid #d1d5db;border-radius:10px;font-size:14px;background:#fff;cursor:pointer">Cancelar</button>
    <button type="submit" style="background:#22c55e;color:#fff;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer">Salvar</button>
</div>
</form>
</div>
</div>

{{-- MODAL EDITAR --}}
<div id="modal_editar" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;padding:16px">
<div style="background:#fff;border-radius:16px;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f3f4f6">
<h3 style="font-weight:700;font-size:15px;color:#111827">Editar Procedimento</h3>
<button onclick="document.getElementById('modal_editar').style.display='none'" style="background:none;border:none;font-size:24px;color:#9ca3af;cursor:pointer">×</button>
</div>
<form method="POST" id="formEditar" style="padding:20px">
@csrf @method('PUT')
<div style="margin-bottom:14px">
    <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Nome *</label>
    <input type="text" name="name" id="edit_name" required style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;box-sizing:border-box">
</div>
<div style="margin-bottom:14px">
    <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Descrição</label>
    <input type="text" name="description" id="edit_desc" style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;box-sizing:border-box">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 80px;gap:12px;margin-bottom:14px">
    <div>
        <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Duração (min) *</label>
        <input type="number" name="default_duration" id="edit_duration" min="5" required style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;box-sizing:border-box">
    </div>
    <div>
        <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Preço (R$) *</label>
        <input type="number" name="default_price" id="edit_price" min="0" step="0.01" required style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:14px;box-sizing:border-box">
    </div>
    <div>
        <label style="font-size:12px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px">Cor</label>
        <input type="color" name="color" id="edit_color" style="width:100%;height:42px;border:1.5px solid #e5e7eb;border-radius:10px;cursor:pointer;box-sizing:border-box">
    </div>
</div>
<div style="margin-bottom:14px">
    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#374151">
        <input type="checkbox" name="active" id="edit_active" value="1" style="width:16px;height:16px">
        Procedimento ativo
    </label>
</div>
<div style="display:flex;gap:10px;justify-content:flex-end;margin-top:8px">
    <button type="button" onclick="document.getElementById('modal_editar').style.display='none'" style="padding:10px 20px;border:1.5px solid #d1d5db;border-radius:10px;font-size:14px;background:#fff;cursor:pointer">Cancelar</button>
    <button type="submit" style="background:#2563eb;color:#fff;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer">Salvar</button>
</div>
</form>
</div>
</div>

<script>
function editarProcedimento(id,name,desc,duration,price,color,active){
    var base='{{ config("app.url") }}/procedures/';
    document.getElementById('formEditar').action=base+id;
    document.getElementById('edit_name').value=name;
    document.getElementById('edit_desc').value=desc;
    document.getElementById('edit_duration').value=duration;
    document.getElementById('edit_price').value=price;
    document.getElementById('edit_color').value=color;
    document.getElementById('edit_active').checked=active;
    document.getElementById('modal_editar').style.display='flex';
}
document.addEventListener('keydown',function(e){
    if(e.key==='Escape'){
        document.getElementById('modal_novo').style.display='none';
        document.getElementById('modal_editar').style.display='none';
    }
});
</script>
@endsection