Viewing file:  ba66d7dfe57ab578272115418ac996f4.php (34.16 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php $__env->startSection('title','Import | Number'); ?>
<?php $__env->startSection('extra-css'); ?>
<link rel="stylesheet" href="<?php echo e(asset('plugins/select2/css/select2.min.css')); ?>">
<?php $__env->stopSection(); ?>
<style>
/* .tab {
display: none;
} */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
.step.finish {
background-color: #2e5cb8;
}
.card {
overflow: auto;
}
.alert-warning {
background: #ffbf00b3 !important;
border-color: #e5ba3ac4 !important;
}
.custom-switch {
position: relative;
display: inline-block;
width: 110px;
height: 25px;
}
.custom-switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #5b73e8 ;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 22px;
width: 23px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(82px);
}
/*------ ADDED CSS ---------*/
.on {
display: none;
}
.on, .off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
user-select:none;
}
input:checked + .slider .on {
display: block;
}
input:checked + .slider .off {
display: none;
}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.formbold-mb-5 {
margin-bottom: 20px;
}
.formbold-file-input input {
opacity: 0;
position: absolute;
width: 100%;
}
.formbold-file-input label {
position: relative;
border: 1px dashed #e0e0e0;
border-radius: 6px;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
text-align: center;
}
.formbold-drop-file {
display: block;
font-weight: 600;
color: #07074d;
font-size: 20px;
margin-bottom: 8px;
}
.import-file-sec {
margin: 5px 0px;
}
.download-sample-file {
margin: 10px 0px;
}
.form-file-icon-sec {
font-weight: 500;
font-size: 16px;
color: #6b7280;
display: block;
margin-bottom: 8px;
}
.form-file-icon {
color: #5b73e8;
font-size: 35px;
}
.paste-text-note-sec{
font-weight: 500;
font-size: 10px;
color: #5b73e8;
line-height: 17px;
}
.formbold-browse {
font-weight: 500;
font-size: 10px;
color: #5b73e8;
padding: 10px 20px;
}
.formbold-span-text {
color: red;
background: #c6c4c4;
padding: 1px 3px;
border-radius: 2px;
}
button.btn.btn-grp {
border: 1px solid #5b73e8;
}
.button-group-sec{
margin: 10px 0px;
}
.modal {
top: 40px !important;
}
.seperate-btn.active{
background: blue !important;
color: white !important;
}
</style>
<?php $__env->startSection('content'); ?>
<section class="content">
<div class="row">
<div class="col-12 mx-auto col-sm-10 mt-3">
<div class="card overflow-hidden">
<div class="card-header">
<h2 class="card-title"><?php echo app('translator')->get('customer.import_contact'); ?></h2>
</div>
<form method="post" role="form" id="importForm"
action="<?php echo e(route('customer.contact.import.contacts.store')); ?>" enctype="multipart/form-data">
<?php echo csrf_field(); ?>
<input type="hidden" value="comma" name="seperate_type">
<input type="hidden" name="input_headers[]" id="header-hidden-input">
<div class="card-body tab">
<div class="alert alert-warning" role="alert">
<strong>Make sure your phone number is not in exponential format</strong> <span class="float-right">
EX: 1.30981E+12
</div>
<div class="form-group mt-3">
<label for="import_name">Name * <span class="text-danger ml-2" id="err_msg"></span> </label>
<input value="" type="text" name="import_name" class="form-control" id="import_name" placeholder="Name">
</div>
<label class="custom-switch">
<input type="checkbox" id="contact-toggle-btn">
<div class="slider round"><!--ADDED HTML -->
<span class="on">Paste</span>
<span class="off">Import</span><!--END-->
</div>
</label>
<div class="sample-file-sec">
Sample File
</div>
<div class="download-sample-file">
<a target="_blank" href="<?php echo e(route('customer.download.sample',['type'=>'group'])); ?>" class="btn btn-primary btn-sm"><?php echo app('translator')->get('customer.download_sample'); ?></a>
</div>
<div id="import-contact-section">
<div class="import-file-sec">
<span>Import File <span class="text-danger" id="err_msg_csv"></span></span>
</div>
<div class="formbold-mb-5 formbold-file-input">
<input type="file" name="import_contact_csv" id="file">
<label for="file">
<div>
<span class="formbold-drop-file">Click here to upload</span>
<span class="form-file-icon-sec"><i class="fas fa-file form-file-icon" aria-hidden="true"></i></span>
<div class="formbold-browse">The file must contains <span class="formbold-span-text">Phone</span> Column, at the begining for a successful import. Support file: <span class="formbold-span-text">.csv, .xls, .xlsx.</span>
Date Columns, only these formats are supported: 2/1/90, 2/1/1990, and 1990-01-21.
</div>
</div>
</label>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" value="1">
<label class="form-check-label" for="exampleCheck1">File Containing Header Row?</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck2" name="add_default_country_code">
<label class="form-check-label" for="exampleCheck2">Add Leading 1 to Phone Column?</label>
</div>
</div>
</div>
</div>
<div id="contact-past-sec" class="d-none">
<div class="paste-text-box">
Paste Text
</div>
<div class="form-group">
<textarea class="form-control form-contact-paste" name="paste_contacts" id="form_contact_paste" cols="4" rows="5"></textarea>
</div>
<div class="paste-text-note-sec">
Note: You can upload a maxium of <span class="formbold-span-text">1000 rows</span>by copy-pasting. If you have more rows you'd like to import in one go, please save them in a file and upload the file.
Every number needs to include a <span class="formbold-span-text">county code</span> for a successful import.
</div>
<div class="button-group-sec">
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" data-type="comma" class="btn btn-grp seperate-btn active">,(Comma)</button>
<button type="button" data-type="semiclone" class="btn btn-grp seperate-btn ml-2">;(Semicolon)</button>
<button type="button" data-type="bar" class="btn btn-grp seperate-btn ml-2">|(Bar)</button>
<button type="button" data-type="tab" class="btn btn-grp seperate-btn ml-2">Tab</button>
<button type="button" data-type="new_line" class="btn btn-grp seperate-btn ml-2">New Line</button>
</div>
</div>
</div>
</div>
<div class="card-body tab d-none">
<table class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th><?php echo app('translator')->get('customer.number'); ?></th>
<th><?php echo app('translator')->get('customer.name'); ?></th>
<th><?php echo app('translator')->get('customer.email'); ?></th>
<th><?php echo app('translator')->get('customer.address'); ?></th>
<th><?php echo app('translator')->get('customer.city'); ?></th>
<th><?php echo app('translator')->get('customer.state'); ?></th>
<th><?php echo app('translator')->get('customer.zip_code'); ?></th>
<th><?php echo app('translator')->get('customer.company'); ?></th>
<th><?php echo app('translator')->get('customer.note'); ?></th>
</tr>
</thead>
<tbody id="import_contacts">
</tbody>
</table>
</div>
<div class="text-right" style="margin-right: 23px;">
<button class="btn btn-default" type="button" id="prevBtn">Previous
</button>
<button class="btn btn-primary" type="button" id="nextBtn">Next
</button>
<button type="submit" class="btn btn-primary d-none" id="submitFormButton">Submit
</button>
</div>
<div style="text-align:center;">
<span class="step"></span>
<span class="step"></span>
</div>
<div class="modal fade" id="dynamicModalImport" tabindex="-1" role="dialog" aria-labelledby="dynamicModalImportLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dynamicModalImportLabel">Dynamic Import</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select Country Code</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="country_code" class="form-control" id="country-code-select-modal">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select Number</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="number" class="form-control" id="number-select-modal">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select First Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="first_name" class="form-control" id="first-name-select-modal">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select Last Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="last_name" class="form-control" id="last-name-select-modal">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select Email</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="email" class="form-control" id="email-select-modal">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select Address</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="address" class="form-control" id="address-select-modal">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select City</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="city" class="form-control" id="city-select-modal">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select Zipcode</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="zip_code" class="form-control" id="zipcode-select-modal">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select Company</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="company" class="form-control" id="company-select-modal">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="pt-2" for="">Select Note</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="note" class="form-control" id="note-select-modal">
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary modal-sv-btn" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
<?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-scripts'); ?>
<script src="<?php echo e(asset('plugins/jquery-validation/jquery.validate.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/select2/js/select2.full.min.js')); ?>"></script>
<script !src="">
"use strict";
$(function () {
$('.select2').select2();
});
$(document).on('change', '.form-contact-paste', function(e){
const paste_numbers=$(this).val();
const seperate_type=$('input[name=seperate_type]').val();
let type=',';
if(seperate_type=='comma'){
type=',';
}else if(seperate_type=='semiclone'){
type=';';
}else if(seperate_type=='bar'){
type='|';
}else if(seperate_type=='tab'){
type=' ';
}
const split_paste_numbers = paste_numbers.split(type);
if(split_paste_numbers.length > 1000){
$(this).oldValue = $(this).value!=$(this).oldValue?$(this).value:$(this).oldValue;
$(this).value = $(this).oldValue?$(this).oldValue:"";
return false;
}
return true;
})
$(document).on('click', '.seperate-btn', function(e){
e.preventDefault();
const type=$(this).attr('data-type');
$('input[name=seperate_type]').val(type);
$('.seperate-btn').removeClass('active');
$(this).addClass('active');
});
$(document).ready(function () {
$('.form-contact-paste').on('keyup or paste', function () {
var all_contact_number = $(this).val();
var contact_number = all_contact_number.replace(/[\n\r\s|]+/g, '');
$('#form_contact_paste').text(contact_number?contact_number:'0');
});
});
$(function () {
$('#nextBtn').on('click', function () {
const input_name = $('#import_name').val();
if (input_name == '') {
$('#import_name').css('border', '1px solid red');
$('#err_msg').html('<small class="float-right"> Please enter the name</small>')
} else {
$('#import_name').css('border', '1px solid #ced4da');
$('#err_msg').html(' ')
}
const import_contact_csv = $('#file').val();
const contact_numbers = $('.form-contact-paste').val();
var contactNumbers = contact_numbers.replace(/[\n\r\s|]+/g, '');
let form = $('#importForm');
formValidate(form);
let formData = new FormData(form[0]);
formData.append('_token', '<?php echo e(csrf_token()); ?>');
formData.append('form_contact_numbers',contactNumbers);
if(import_contact_csv){
formData.append('file', $('input[type=file]')[0].files[0]);
}
$('#import_contacts').html("<tr class='text-center'> <td colspan='8'> <span> <i class='fas fa-spinner fa-pulse'></i> Generating</span></tr> </td>");
$.ajax({
method: "POST",
url: "<?php echo e(route('customer.contact.import.contacts.show')); ?>",
data: formData,
processData: false,
contentType: false,
success: function (res) {
if (res.status == 'success') {
if(res.type=='contact_paste'){
let html = '';
$.each(res.data, function (index, value) {
html += `
<tr>
<td>${value.number}</td>
</tr>
`
});
$('#import_contacts').html(html);
}else{
let country_code = '<option value="">--Select--</option>';
let number = '<option value="">--Select--</option>';
let first_name = '<option value="">--Select--</option>';
let last_name = '<option value="">--Select--</option>';
let email = '<option value="">--Select--</option>';
let address = '<option value="">--Select--</option>';
let city = '<option value="">--Select--</option>';
let state = '<option value="">--Select--</option>';
let zipcode = '<option value="">--Select--</option>';
let company = '<option value="">--Select--</option>';
let note = '<option value="">--Select--</option>';
$.each(res.headers, function (index, value) {
country_code += `
<option value="${value}">${value}</option>
`;
number += `
<option value="${value}">${value}</option>
`;
first_name += `
<option value="${value}">${value}</option>
`;
last_name += `
<option value="${value}">${value}</option>
`;
email += `
<option value="${value}">${value}</option>
`;
address += `
<option value="${value}">${value}</option>
`;
city += `
<option value="${value}">${value}</option>
`;
state += `
<option value="${value}">${value}</option>
`;
zipcode += `
<option value="${value}">${value}</option>
`;
company += `
<option value="${value}">${value}</option>
`;
note += `
<option value="${value}">${value}</option>
`;
});
$("#dynamicModalImport").modal('show');
$('#country-code-select-modal').html(country_code).trigger('change');
$('#number-select-modal').html(number).trigger('change');
$('#first-name-select-modal').html(first_name).trigger('change');
$('#last-name-select-modal').html(last_name).trigger('change');
$('#email-select-modal').html(email).trigger('change');
$('#address-select-modal').html(address).trigger('change');
$('#city-select-modal').html(city).trigger('change');
$('#state-select-modal').html(state).trigger('change');
$('#zipcode-select-modal').html(zipcode).trigger('change');
$('#company-select-modal').html(company).trigger('change');
$('#note-select-modal').html(note).trigger('change');
}
}
}
});
});
});
function formValidate(form_name) {
$(form_name).validate({
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
}
$(document).on('change', '#contact-toggle-btn', function (e) {
const checkbox = $('#contact-toggle-btn').is(':checked');
if(checkbox){
$('#contact-past-sec').removeClass("d-none");
$('#submitFormButton').removeClass("d-none");
$('#import-contact-section').addClass("d-none");
$('#nextBtn').addClass("d-none");
}else{
$('#contact-past-sec').addClass("d-none")
$('#submitFormButton').addClass("d-none")
$('#import-contact-section').removeClass("d-none");
$('#nextBtn').removeClass("d-none");
}
});
$(document).ready(function() {
let import_header = [];
$("#country-code-select-modal").change(function() {
const countryCode = $("#country-code-select-modal").val();
import_header.push(countryCode);
$("#header-hidden-input").val(import_header);
});
$("#number-select-modal").change(function() {
const numberSelect = $("#number-select-modal").val();
import_header.push(numberSelect);
$("#header-hidden-input").val(import_header);
});
$("#first-name-select-modal").change(function() {
const firstNameSelect = $("#first-name-select-modal").val();
import_header.push(firstNameSelect);
$("#header-hidden-input").val(import_header);
});
$("#last-name-select-modal").change(function() {
const lastNameSelect = $("#last-name-select-modal").val();
import_header.push(lastNameSelect);
});
$("#email-select-modal").change(function() {
const emailSelect = $("#email-select-modal").val();
import_header.push(emailSelect);
$("#header-hidden-input").val(import_header);
});
$("#address-select-modal").change(function() {
const addressSelect = $("#address-select-modal").val();
import_header.push(addressSelect);
$("#header-hidden-input").val(import_header);
});
$("#city-select-modal").change(function() {
const citySelect = $("#city-select-modal").val();
import_header.push(citySelect);
});
$("#state-select-modal").change(function() {
const stateSelect = $("#state-select-modal").val();
import_header.push(stateSelect);
$("#header-hidden-input").val(import_header);
});
$("#zipcode-select-modal").change(function() {
const zipcodeSelect = $("#zipcode-select-modal").val();
import_header.push(zipcodeSelect);
$("#header-hidden-input").val(import_header);
});
$("#company-select-modal").change(function() {
const companySelect = $("#company-select-modal").val();
import_header.push(companySelect);
$("#header-hidden-input").val(import_header);
});
$("#note-select-modal").change(function() {
const noteSelect = $("#note-select-modal").val();
import_header.push(noteSelect);
$("#header-hidden-input").val(import_header);
});
$('.modal-sv-btn').on('click', function () {
$('#dynamicModalImport').modal('hide');
$('#nextBtn').addClass('d-none');
$('#submitFormButton').removeClass('d-none');
});
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.customer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH E:\Project\Pico-SMS-v-2\picosms\resources\views/customer/contacts/import_create.blade.php ENDPATH**/ ?>
|