{% block CasoClienteType_widget %}
    <div class="card card-materio border mb-3 caso-cliente-item shadow-sm" data-index="{{ form.vars.name }}">
        <div class="card-header bg-light d-flex justify-content-between align-items-center py-2 px-3 border-bottom">
            <div class="d-flex align-items-center gap-2">
                {% set clientNum = (form.vars.name matches '/^\\d+$/') ? (form.vars.name + 1) : 1 %}
                <span class="badge badge-soft-primary px-2 py-1 rounded-pill cliente-badge-num">
                    <i class="bx bx-user me-1"></i> Persona Involucrada #<span class="num-display">{{ clientNum }}</span>
                </span>
                <span class="fw-semibold text-dark client-name-preview">
                    {% if form.cliente.nombre.vars.value or form.cliente.apellido.vars.value %}
                        {{ form.cliente.nombre.vars.value }} {{ form.cliente.apellido.vars.value }}
                    {% else %}
                        <span class="text-muted fst-italic">(Completar DNI o datos del cliente)</span>
                    {% endif %}
                </span>
                <span class="badge ms-2 cliente-status-badge d-none"></span>
            </div>
            <button type="button" class="btn btn-outline-danger btn-sm rounded-pill px-3 cliente-remove-btn" title="Quitar cliente">
                <i class="bx bx-trash me-1"></i> Quitar
            </button>
        </div>
        <div class="card-body p-3">
            <div class="row g-3 mb-3">
                <div class="col-12 col-md-3">
                    <label class="form-label fw-semibold">DNI <small class="text-muted">(Búsqueda automática)</small></label>
                    <div class="input-group">
                        <span class="input-group-text px-2"><i class="bx bx-id-card"></i></span>
                        {{ form_widget(form.cliente.dni, {'attr': {'class': 'form-control px-2 cliente-dni-input dniCliente', 'placeholder': 'Ej: 35123456', 'autocomplete': 'off'}}) }}
                        <button type="button" class="btn btn-primary btn-buscar-dni px-2" title="Buscar cliente por DNI">
                            <i class="bx bx-search"></i>
                        </button>
                        <span class="input-group-text px-2 d-none dni-lookup-spinner"><i class="bx bx-loader-alt bx-spin text-primary"></i></span>
                    </div>
                    <div class="dni-lookup-feedback small mt-1"></div>
                    {{ form_errors(form.cliente.dni) }}
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-semibold">Nombre <span class="text-danger">*</span></label>
                    {{ form_widget(form.cliente.nombre, {'attr': {'class': 'form-control cliente-nombre-input', 'placeholder': 'Nombre(s)'}}) }}
                    {{ form_errors(form.cliente.nombre) }}
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-semibold">Apellido <span class="text-danger">*</span></label>
                    {{ form_widget(form.cliente.apellido, {'attr': {'class': 'form-control cliente-apellido-input', 'placeholder': 'Apellido(s)'}}) }}
                    {{ form_errors(form.cliente.apellido) }}
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-semibold">Teléfono / Celular</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bx bx-phone"></i></span>
                        {{ form_widget(form.cliente.telefono, {'attr': {'class': 'form-control cliente-telefono-input', 'placeholder': 'Ej: 3814123456'}}) }}
                    </div>
                    {{ form_errors(form.cliente.telefono) }}
                </div>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-12 col-md-4">
                    <label class="form-label fw-semibold">Dirección / Domicilio <span class="text-danger">*</span></label>
                    {{ form_widget(form.cliente.direccion, {'attr': {'class': 'form-control cliente-direccion-input', 'placeholder': 'Calle, N° y Localidad'}}) }}
                    {{ form_errors(form.cliente.direccion) }}
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-semibold">Barrio</label>
                    {{ form_widget(form.cliente.barrio, {'attr': {'class': 'form-control cliente-barrio-input', 'placeholder': 'Barrio'}}) }}
                    {{ form_errors(form.cliente.barrio) }}
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-semibold">Fecha de Nacimiento</label>
                    {{ form_widget(form.cliente.fechaNacimiento, {'attr': {'class': 'form-control cliente-nacimiento-input', 'placeholder': 'DD/MM/AAAA'}}) }}
                    {{ form_errors(form.cliente.fechaNacimiento) }}
                </div>
                <div class="col-12 col-md-2">
                    <label class="form-label fw-semibold">Oficio / Ocupación</label>
                    {{ form_widget(form.cliente.oficio, {'attr': {'class': 'form-control cliente-oficio-input', 'placeholder': 'Ej: Empleado'}}) }}
                    {{ form_errors(form.cliente.oficio) }}
                </div>
            </div>

            <div class="row g-3 mb-3 p-2 bg-light rounded-3">
                <div class="col-12 col-md-4">
                    <label class="form-label fw-semibold">Tipo de Daño</label>
                    {{ form_widget(form.tipoDanio) }}
                    {{ form_errors(form.tipoDanio) }}
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-semibold">Gravedad del Caso</label>
                    {{ form_widget(form.gravedad, {'attr': {'class': 'form-select'}}) }}
                    {{ form_errors(form.gravedad) }}
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label fw-semibold">Sueldo ($)</label>
                    {{ form_widget(form.sueldo, {'attr': {'class': 'form-control', 'placeholder': '0.00'}}) }}
                    {{ form_errors(form.sueldo) }}
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label fw-semibold">% Incapacidad Física</label>
                    {{ form_widget(form.porcentajeIncapacidad, {'attr': {'class': 'form-control', 'placeholder': 'Ej: 15.5'}}) }}
                    {{ form_errors(form.porcentajeIncapacidad) }}
                </div>
            </div>

            <div class="d-flex flex-wrap gap-4 pt-1">
                <div class="form-check form-switch">
                    {{ form_widget(form.esTitularVehiculo, {'attr': {'class': 'form-check-input'}}) }}
                    <label class="form-check-label fw-semibold" for="{{ form.esTitularVehiculo.vars.id }}"></label>
                </div>
                <div class="form-check form-switch">
                    {{ form_widget(form.esConductorVehiculo, {'attr': {'class': 'form-check-input'}}) }}
                    <label class="form-check-label fw-semibold" for="{{ form.esConductorVehiculo.vars.id }}"></label>
                </div>
                <div class="form-check form-switch">
                    {{ form_widget(form.esRepresentante, {'attr': {'class': 'form-check-input'}}) }}
                    <label class="form-check-label fw-semibold" for="{{ form.esRepresentante.vars.id }}"></label>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block tempusDominusBs4_widget %}
    {% set isTime = attr['data-date-format'] is defined and (attr['data-date-format'] == 'HH:mm' or 'H' in attr['data-date-format']) %}
    {% set iconClass = isTime ? 'bx bx-time' : 'bx bx-calendar' %}
    <div class="input-group date" id="{{ id }}_container" data-target-input="nearest">
        <input type="text"
            id="{{ id }}"
            name="{{ full_name }}"
            {% if value is not empty %}value="{{ value }}"{% endif %}
            class="form-control datetimepicker-input {{ attr.class|default('') }}"
            data-target="#{{ id }}_container"
            {% if placeholder is defined and placeholder is not empty %}placeholder="{{ placeholder }}"{% endif %}
            {% for attrname, attrvalue in attr %}
                {% if attrname not in ['class', 'placeholder'] %}
                    {{ attrname }}="{{ attrvalue }}"
                {% endif %}
            {% endfor %}
            {% if required %}required="required"{% endif %}
            autocomplete="off"
        />
        <span class="input-group-text cursor-pointer" data-target="#{{ id }}_container" data-toggle="datetimepicker" style="cursor: pointer;">
            <i class="{{ iconClass }} fs-5 text-primary"></i>
        </span>
    </div>
{% endblock %}