<div class="card-custom">
    <div class="d-flex justify-content-between mb-4"><h4>Clientes</h4><button class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modalCli">+ Nuevo</button></div>
    <div class="table-responsive">
    <table class="table align-middle table-hover"><thead><tr><th>Foto</th><th>Doc</th><th>Nombre</th><th>Tel</th><th>Dir</th></tr></thead>
    <tbody><?php $q=$conn->query("SELECT * FROM clientes ORDER BY id_cliente DESC"); while($c=$q->fetch_assoc()): ?>
        <tr>
            <td>
                <?php if($c['foto_url']): ?>
                    <img src="<?php echo h($c['foto_url']); ?>" class="rounded-circle shadow-sm" width="45" height="45" style="object-fit:cover; border:2px solid #fff">
                <?php else: ?>
                    <div class="bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width:45px;height:45px;border:2px solid #fff"><i class="fas fa-user"></i></div>
                <?php endif; ?>
            </td>
            <td><?php echo h($c['documento']); ?></td>
            <td class="fw-bold"><?php echo h($c['nombre']); ?></td>
            <td><?php echo h($c['telefono']); ?></td>
            <td class="small text-muted"><?php echo h($c['direccion']); ?></td>
        </tr><?php endwhile; ?></tbody></table></div>
</div>

<div class="modal fade" id="modalCli"><div class="modal-dialog"><form method="POST" class="modal-content p-4" enctype="multipart/form-data">
    <input type="hidden" name="action" value="save_cliente">
    <h5 class="mb-3">Nuevo Cliente</h5>
    
    <div class="text-center mb-3 p-3 bg-light rounded border border-dashed">
        <label class="d-block mb-1 small text-muted fw-bold">Fotografía (Opcional)</label>
        <input type="file" name="foto" class="form-control form-control-sm" accept="image/*">
    </div>

    <div class="mb-2"><label class="small fw-bold">DNI / RUC</label><input name="doc" class="form-control"></div>
    <div class="mb-2"><label class="small fw-bold">Nombre Completo</label><input name="nom" class="form-control" required></div>
    <div class="row mb-3">
        <div class="col-6"><label class="small fw-bold">Telefono</label><input name="tel" class="form-control"></div>
        <div class="col-6"><label class="small fw-bold">Dirección</label><input name="dir" class="form-control"></div>
    </div>
    
    <button class="btn btn-primary w-100 fw-bold">GUARDAR CLIENTE</button>
</form></div></div>