<style>
    #switch1:checked+.lbl::after {
        left: 36px;
    }

    #switch1:checked+.lbl {
        background: #6861CE;
    }

    #switch1 {
        display: none;
    }
</style>
<div id="appConfiguracionEmpresa" v-cloak>
    <div class="row">
        <div class="col">
            <div class="ml-md-auto pull-right" style="display: flex;">

                <div class="btn-group" role="group" aria-label="Basic example" style="box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.1);">
                    <div class="suiche btn btn-light" style="justify-content: initial; width: 270px;">
                        <input type="checkbox" name="value" class="selectgroup-input" :checked="iva" @change="toggleIva()" id="switch2">
                        <label for="switch2" class="lbl2" style="margin-bottom: 4px; background: #212529;"></label>
                        <label for="switch2" v-if="iva" style="color: #212529 !important;">Habilitar Iva</label>
                        <label for="switch2" v-else style="color: #212529 !important;">Deshabilitar Iva</label>
                    </div>
                    <div class="suiche btn btn-light" style="justify-content: initial; width: 270px;">
                        <input type="checkbox" name="value" class="selectgroup-input" :checked="agente" @change="toggleAgente" id="switch1">
                        <label for="switch1" class="lbl" style="margin-bottom: 4px; background: #212529;"></label>
                        <label for="switch1" v-if="agente" style="color: #212529 !important;">Deshabilitar Figura Agente</label>
                        <label for="switch1" v-else style="color: #212529 !important;">Habilitar Figura Agente</label>
                    </div>
                    <button type="button" class="btn btn-light" v-if="cargando_correo"><i class="loader loader-info loader-sm"></i></button>
                    <?php if ($_SESSION['user_data']['emp_id'] == 1) : ?>
                        <button type="button" class="btn btn-light" v-else @click.prevent="probarCorreo"><span class="btn-label"><i class="fas fa-envelope"></i></span>
                            Chequear correo</button>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <div class="col mt-3">
        <div class="card row">
            <div class="card-header">
                <div class="card-head-row">
                    <div class="card-title">Información de la Empresa</div>
                </div>
            </div>
            <form @submit.prevent="submitEmpresa" id="form_empresa" autocomplete="off">
                <div class="card-body">
                    <div class="form-row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="ne">Nombre de la Empresa</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-building fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="ne" class="form-control" maxlength="100" v-model="dataForm.ne">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="nce">Nombre Corto</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-address-book fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="nce" class="form-control" maxlength="32" v-model="dataForm.nce">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="rde">Id. Fiscal</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-id-card fa-fw"></i>
                                        </span>
                                    </div>
                                    <select id="rde" class="form-control custom-select" v-model="dataForm.rde">
                                        <option value="CI">CI</option>
                                        <option value="CIF">CIF</option>
                                        <option value="CUIL">CUIL</option>
                                        <option value="CUIT">CUIT</option>
                                        <option value="DNI">DNI</option>
                                        <option value="NIE">NIE</option>
                                        <option value="NIF">NIF</option>
                                        <option value="NIT">NIT</option>
                                        <option value="Pasaporte">Pasaporte</option>
                                        <option value="RFC">RFC</option>
                                        <option value="RIF">RIF</option>
                                        <option value="RNC">RNC</option>
                                        <option value="RUC">RUC</option>
                                        <option value="RUN">RUN</option>
                                        <option value="RUT">RUT</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="re">Núm. rif</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-id-card fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="re" class="form-control" v-model="dataForm.re" maxlength="30">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label d-block">Tipo de Host del Correo Electrónico</label>
                                <div class="selectgroup selectgroup-pills">
                                    <label class="selectgroup-item">
                                        <input type="radio" class="selectgroup-input" value="smtp.gmail.com" v-model="picked" @change="cambiarHostPuerto">
                                        <span class="selectgroup-button ">Gmail</span>
                                    </label>
                                    <label class="selectgroup-item">
                                        <input type="radio" class="selectgroup-input" value="smtp.hotmail.com" v-model="picked" @change="cambiarHostPuerto">
                                        <span class="selectgroup-button">Hotmail</span>
                                    </label>
                                    <label class="selectgroup-item">
                                        <input type="radio" class="selectgroup-input" value="" v-model="picked" @change="cambiarHostPuerto">
                                        <span class="selectgroup-button">Otro</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="ptce">Puerto correo</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-broadcast-tower fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="ptce" class="form-control" v-model="dataForm.ptce">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label for="coe">Dirección de Correo Electrónico</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-envelope fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="email" id="coe" class="form-control" maxlength="100" v-model="dataForm.coe">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="passwd">Contraseña Correo</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-fingerprint fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="passwd" class="form-control" v-model="dataForm.passwd">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="hce">Host del Correo Electrónico</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-hdd fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="che" class="form-control" v-model="dataForm.hce">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row ">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="t1e">Teléfono</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-phone fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="t1e" class="form-control" v-model="dataForm.t1e" v-mask="'(####) ###-####'">
                                </div>
                                <small class="form-text text-muted">(0000) 000-0000</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="t2e">Teléfono 2</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-mobile-alt fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="t2e" class="form-control" maxlength="30" v-model="dataForm.t2e" v-mask="'(####) ###-####'">
                                </div>
                                <small class="form-text text-muted">(0000) 000-0000</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="fae">Fax</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-fax fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="fae" class="form-control" maxlength="30" v-model="dataForm.fae">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="pide">País</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-map-marked-alt fa-fw"></i>
                                        </span>
                                    </div>
                                    <select id="pide" class="form-control custom-select" v-model="dataForm.pide">
                                        <?php foreach ($paises as $row) : ?>
                                            <option value="<?= $row['pa_id'] ?>"><?= $row['pa_nombre'] ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="ee">Estado</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-map-signs fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="ee" class="form-control" v-model="dataForm.ee">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="ce">Ciudad</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-map-marker-alt fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="ce" class="form-control" v-model="dataForm.ce">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row ">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="de">Dirección</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-crosshairs fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="de" class="form-control" v-model="dataForm.de" maxlength="100">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group">
                                <label for="de_cantidad">Cantidad (decimales)</label>
                                <input type="text" id="de_cantidad" name="de_cantidad" class="form-control" v-model="dataForm.cantidad">
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group">
                                <label for="cpe">Código Postal</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-map-pin fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" id="cpe" class="form-control" v-model="dataForm.cpe" maxlength="10">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="oe">Observaciones</label>
                        <textarea rows="3" id="oe" class="form-control" v-model="dataForm.oe"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class=" alert alert-warning" role="alert" v-for="row in errorForm">
                                {{ row }}
                            </div>
                        </div>
                    </div>
                </div>
                <?php if ($_SESSION['user_data']['emp_id'] == 1) : ?>
                    <div class="card-action text-right">
                        <div class="row">
                            <div class="col text-right">
                                <button v-if="cargando" class="btn btn-light" style="box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.1);" disabled>
                                    <i class="loader loader-info"></i>
                                </button>
                                <button v-else class="btn btn-light" style="box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.1);" type="submit">
                                    <i class="fas fa-save fa-fw" aria-hidden="true"></i>
                                    <span class="d-none d-sm-inline-block">Actualizar</span>
                                </button>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </form>
        </div>
    </div>
</div>


<script src="<?= asset('assetsvuejs/empresas/configuracionempresas.js') ?>"></script>