{% extends "base.html" %}

{% block content %}
<div id="user-id" data-user-id="{{ session.get('user_id') }}"></div>
<div class="c-form">
    <div class="container pt-5">
        <!-- Botones de navegación -->
        <div class="row">
            <div class="col">
                <a class="c-btn c-btn-primary c-btn-block mb-3" href="{{ url_for('routes.menu_salesman', user_id=user_id) }}">Volver</a>
            </div>
            <div class="col">
                <a class="c-btn c-btn-primary c-btn-block mb-3" href="{{ url_for('routes.client_list', user_id=user_id) }}">Clientes</a>
            </div>
        </div>

        <!-- Formulario principal -->
        <div class="row">
            <div class="col">
                <div class="c-form__container c-form--mobile">
                    <h2 class="c-form__title">Crear Nuevo Cliente</h2>
                    
                    <form action="{{ url_for('routes.create_client', user_id=user_id) }}" method="POST">
                        <fieldset>
                            <legend>Información Personal</legend>
                            
                            <div class="c-form__group">
                                <label for="first_name" class="c-form__label c-form__label--required">Nombre</label>
                                <input type="text" 
                                       class="c-form__input" 
                                       name="first_name" 
                                       id="first_name" 
                                       placeholder="Ingrese el nombre del cliente"
                                       required>
                            </div>
                            
                            <div class="c-form__group">
                                <label for="last_name" class="c-form__label c-form__label--required">Apellido</label>
                                <input type="text" 
                                       class="c-form__input" 
                                       name="last_name" 
                                       id="last_name" 
                                       placeholder="Ingrese el apellido del cliente"
                                       required>
                            </div>
                            
                            <div class="c-form__group">
                                <label for="alias" class="c-form__label">Alias</label>
                                <input type="text" 
                                       class="c-form__input" 
                                       name="alias" 
                                       id="alias" 
                                       placeholder="Alias o nombre comercial">
                            </div>
                            
                            <div class="c-form__group">
                                <label for="document" class="c-form__label c-form__label--required">DNI</label>
                                <input type="text" 
                                       class="c-form__input" 
                                       name="document" 
                                       id="document" 
                                       placeholder="Número de documento"
                                       required>
                            </div>
                            
                            <div class="c-form__group">
                                <label for="cellphone" class="c-form__label c-form__label--required">Teléfono</label>
                                <input type="tel" 
                                       class="c-form__input" 
                                       name="cellphone" 
                                       id="cellphone" 
                                       placeholder="Número de teléfono"
                                       required>
                            </div>
                            
                            <div class="c-form__group">
                                <label for="address" class="c-form__label">Dirección</label>
                                <input type="text" 
                                       class="c-form__input" 
                                       name="address" 
                                       id="address" 
                                       placeholder="Dirección completa">
                            </div>
                            
                            <div class="c-form__group">
                                <label for="neighborhood" class="c-form__label">Barrio</label>
                                <input type="text" 
                                       class="c-form__input" 
                                       name="neighborhood" 
                                       id="neighborhood" 
                                       placeholder="Barrio">
                            </div>
                        </fieldset>
                        
                        <fieldset>
                            <legend>Datos del préstamo</legend>
                            
                            <div class="c-form__group">
                                <label for="amount" class="c-form__label">Monto</label>
                                <input type="text" 
                                       class="c-form__input js-number" 
                                       name="amount" 
                                       id="amount" 
                                       placeholder="Monto">
                            </div>
                            
                            <div class="c-form__group">
                                <label for="dues" class="c-form__label">Cuotas</label>
                                <select class="c-form__select" name="dues" id="dues" aria-label="dues">
                                    <option selected>Seleccionar</option>
                                </select>
                            </div>
                            
                            <div class="c-form__group">
                                <label for="interest" class="c-form__label">Interés</label>
                                <select class="c-form__select" name="interest" id="interest" aria-label="interest">
                                    <option selected>Seleccionar</option>
                                </select>
                            </div>
                            
                            <div class="c-form__group">
                                <label for="amountPerPay" class="c-form__label">Monto por cuota</label>
                                <input type="text" 
                                       class="c-form__input js-number" 
                                       name="amountPerPay" 
                                       id="amountPerPay" 
                                       placeholder="Monto por cuota" 
                                       readonly>
                            </div>
                        </fieldset>
                        
                        <div class="c-form__actions">
                            <button class="c-btn c-btn-primary" type="submit">Crear Cliente</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}