<!-- Modal Clente -->
<div class="modal fade" id="modal_cliente" tabindex="-1" aria-labelledby="nuevoCliente" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Cliente </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                    <div class="card-category text-primary pb-2" style="padding-left: 10px;"> <i class="fa fa-user"></i> Detalles del cliente</div><hr>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text btn-light" id="rif" style="width: 8rem;">Cédula / RIF</div>
                            </div>
                            <input type="text" id="rif_c" class="form-control" v-model="rif_c" aria-describedby="rif">
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <div class="input-group-text btn-light" id="nombre" style="width: 8rem;">Nombre</div>
                            </div>
                            <input type="text" id="nombre_c" class="form-control" v-model="nombre_c" aria-describedby="nombre">
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <div class="input-group-text btn-light" id="telefono" style="width: 8rem;">Teléfono</div>
                            </div>
                            <input type="text" id="telefono_c" class="form-control" v-model="telefono_c" aria-describedby="telefono">
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <div class="input-group-text btn-light" id="dir" style="width: 8rem;">Dirección</div>
                            </div>
                            <input type="text" id="dir_c" class="form-control" v-model="dir_c" aria-describedby="dir">
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <div class="input-group-text btn-light" id="email" style="width: 8rem;">Email</div>
                            </div>
                            <input type="email" id="email_c" class="form-control" v-model="email_c" aria-describedby="email">
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <div class="input-group-text btn-light" id="fecha" style="width: 12rem;">Fecha de nacimiento:</div>
                            </div>
                            <input type="date" id="fecha_c" class="form-control" v-model="fecha_c" aria-describedby="email">
                        </div>
                        <div class="input-group mt-3">
                            <div class="input-group-prepend">
                                <div class="input-group-text btn-light" id="captado" style="width: 8rem;">Captado por:</div>
                            </div>
                            <select id="captado" class="form-control" v-model="captado_agent">
                                <option value="">Seleccione una opcion</option>
                                <option value="Empresa">Empresa</option>
                                <option value="Instagram">Instagram</option>
                                <option value="Facebook">Facebook</option>
                                <option value="Twitter">Twitter</option>
                                <option value="Woocommerce">Woocommerce</option>
                                <option value="Tik-Tok">Tik-Tok</option>
                                <option value="Whatsapp">Whatsapp</option>
                                <option value="Telegram">Telegram</option>
                                <option value="E-mail">E-mail</option>
                                <option value="Wechat">Wechat</option>
                                <option value="Otros">Otros</option>
                            </select>
                        </div>
                        <div class="input-group mt-3 d-flex justify-content-end">
                            <button class="btn-primary btn btn-sm" style="box-shadow: #ddd 2px 6px 15px 0px;" @click="actualizarDetalles()"><i class="fa fa-edit"></i> Actualizar</button>
                        </div>
                    </div>
                    <div class="col-md-6">
                    <div class="card-category text-primary pb-2" style="padding-left: 10px;"> <i class="fas fa-plus"></i> Agregar/Editar Redes Sociales</div><hr>
                        <form @submit.prevent="editarGuardarRedes()" id="form-catie-modal">
                            <div class="form-group">
                                <label for="catie-descripcion">Tipo</label>
                                <div class="input-group">
                                    <select id="captado" class="form-control" v-model="form_redes">
                                        <option value="">Seleccione una opcion</option>
                                        <option value="Instagram">Instagram</option>
                                        <option value="Facebook">Facebook</option>
                                        <option value="Twitter">Twitter</option>
                                        <option value="Woocommerce">Woocommerce</option>
                                        <option value="Tik-Tok">Tik-Tok</option>
                                        <option value="Whatsapp">Whatsapp</option>
                                        <option value="Telegram">Telegram</option>
                                        <option value="E-mail">E-mail</option>
                                        <option value="Wechat">Wechat</option>
                                        <option value="Otros">Otros</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="catie-descripcion">Descripción</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-pencil-alt"></i>
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" v-model="form_descripcion">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="alert alert-warning" v-for="row in errorForm">{{ row }}</div>
                            </div>
                            <div class="form-group d-flex justify-content-end">
                                <button class="btn-primary btn btn-sm" style="box-shadow: #ddd 2px 6px 15px 0px;">Registrar</button>
                            </div>
                        </form>
                        <div class="card-category text-primary pb-2" style="padding-left: 10px;"> <i class="fas fa-list-ul"></i> Lista de Redes Sociales</div>
                        <div class="form-row">
                            <div class="col-12">
                                <ul class="list-group">
                                    <li class="list-group-item d-flex justify-content-between align-items-center" title="Eliminar Categoría" v-for="row in redesSociales" :key="row.clird_id" @click="verRedes(row)" style="cursor: pointer; padding: .25rem 1.25rem;">
                                        {{row.clird_type}} ({{row.clird_descripcion}})
                                        <button class="btn btn-icon btn-sm btn-light" @click="eliminarRedes(row)" style="box-shadow: #ddd 2px 6px 15px 0px;">
                                            <span class="fa fa-trash"></span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>