{% extends 'base.html' %}
{% block content %}
<div class="page-toolbar">
  <div><h1 class="h3 mb-1">Servicios</h1><p class="text-muted mb-0">Definí prestaciones, tiempos, precios y profesionales habilitados.</p></div>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#serviceModal"><i class="bi bi-plus-circle"></i> {{ 'Editar servicio' if edit_service else 'Nuevo servicio' }}</button>
</div>
<div class="card table-panel">
  <div class="card-header">
    <div class="filter-toolbar row g-3 align-items-end">
      <div class="col-lg-8"><label class="form-label">Filtro rápido</label><input class="form-control" data-table-filter-target="#servicesTable" placeholder="Buscar por nombre, modalidad o profesional"></div>
      <div class="col-lg-4 text-muted small">Administrá el alta y edición desde un modal.</div>
    </div>
  </div>
  <div class="table-responsive wide-table">
    <table class="table align-middle mb-0" id="servicesTable">
      <thead><tr><th>Nombre</th><th>Descripción</th><th>Duración</th><th>Precio</th><th>Activo</th><th class="text-end">Acciones</th></tr></thead>
      <tbody>
      {% for item in services %}
      <tr>
        <td>{{ item.name }}<br><span class="small text-muted">{{ item.mode }}</span></td>
        <td>{{ item.description or '—' }}</td>
        <td>{{ item.duration_minutes }} min</td>
        <td>${{ '%.2f'|format(item.price) }}</td>
        <td>{{ 'Sí' if item.active else 'No' }}</td>
        <td class="text-end"><div class="d-flex justify-content-end gap-2"><a class="btn btn-sm btn-outline-primary" href="{{ url_for('admin_services', edit=item.id) }}">Editar</a><form method="post" action="{{ url_for('admin_service_delete', service_id=item.id) }}" onsubmit="return confirm('¿Eliminar?')"><button class="btn btn-sm btn-outline-danger">Eliminar</button></form></div></td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="modal fade" id="serviceModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">{{ 'Editar servicio' if edit_service else 'Nuevo servicio' }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <form method="post">
        <div class="modal-body"><div class="row g-4 modal-form-grid">
          {% if edit_service %}<input type="hidden" name="service_id" value="{{ edit_service.id }}">{% endif %}
          <div class="col-12"><div class="section-card"><div class="section-title">Datos principales</div><div class="row g-3"><div class="col-md-6"><label class="form-label">Nombre</label><input class="form-control field-placeholder" name="name" placeholder="Ej.: Consulta inicial" value="{{ edit_service.name if edit_service else '' }}" required></div><div class="col-md-6"><label class="form-label">Modalidad</label><input class="form-control field-placeholder" name="mode" placeholder="Presencial, virtual, telefónica" value="{{ edit_service.mode if edit_service else 'Presencial' }}"></div><div class="col-12"><label class="form-label">Descripción</label><textarea class="form-control field-placeholder" name="description" rows="3" placeholder="Descripción corta del servicio">{{ edit_service.description if edit_service else '' }}</textarea></div></div></div></div>
          <div class="col-lg-6"><div class="section-card h-100"><div class="section-title">Reglas de agenda</div><div class="row g-3"><div class="col-md-6"><label class="form-label">Duración (min.)</label><input class="form-control" name="duration_minutes" type="number" value="{{ edit_service.duration_minutes if edit_service else 30 }}"></div><div class="col-md-6"><label class="form-label">Precio</label><input class="form-control" name="price" type="number" step="0.01" value="{{ edit_service.price if edit_service else 0 }}"></div><div class="col-md-6"><label class="form-label">Buffer antes</label><input class="form-control" name="buffer_before_minutes" type="number" value="{{ edit_service.buffer_before_minutes if edit_service else 0 }}"></div><div class="col-md-6"><label class="form-label">Buffer después</label><input class="form-control" name="buffer_after_minutes" type="number" value="{{ edit_service.buffer_after_minutes if edit_service else 0 }}"></div><div class="col-md-6"><label class="form-label">Aviso mínimo (hs)</label><input class="form-control" name="min_notice_hours" type="number" value="{{ edit_service.min_notice_hours if edit_service else 4 }}"></div><div class="col-md-6"><label class="form-label">Cancelación hasta (hs)</label><input class="form-control" name="cancel_notice_hours" type="number" value="{{ edit_service.cancel_notice_hours if edit_service else 12 }}"></div></div></div></div>
          <div class="col-lg-6"><div class="section-card h-100"><div class="section-title">Asignación y visibilidad</div><div class="row g-3"><div class="col-12"><label class="form-label">Profesionales habilitados</label><select class="form-select searchable-select" name="professional_ids" multiple data-placeholder="Seleccionar profesionales">{% for prof in professionals %}<option value="{{ prof.id }}" {% if edit_service and prof in edit_service.professionals %}selected{% endif %}>{{ prof.display_name }}</option>{% endfor %}</select><div class="form-hint mt-2">Podés buscar dentro del mismo selector.</div></div><div class="col-md-6"><div class="form-check mt-2"><input class="form-check-input" type="checkbox" name="allow_online_cancel" {% if not edit_service or edit_service.allow_online_cancel %}checked{% endif %}><label class="form-check-label">Permite cancelación online</label></div></div><div class="col-md-6"><div class="form-check mt-2"><input class="form-check-input" type="checkbox" name="active" {% if not edit_service or edit_service.active %}checked{% endif %}><label class="form-check-label">Activo</label></div></div></div></div></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button><button class="btn btn-primary">Guardar servicio</button></div>
      </form>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}{{ super() }}{% if edit_service %}<script>document.addEventListener('DOMContentLoaded',function(){ new bootstrap.Modal(document.getElementById('serviceModal')).show(); });</script>{% endif %}{% endblock %}