%PDF-
%PDF-
Mini Shell
Mini Shell
@extends('layouts.backend')
@section('title', $siteTitle)
@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/css/intlTelInput.css" />
<style>
label[for="all_checked"]::before{
border-color: #ffffff !important;
}
.table:not(.table-dark) thead th,
.table:not(.table-dark) tfoot th,
.table:not(.table-dark) td,
.table:not(.table-dark) th {
padding: 0.3em 1em !important;
}
.table thead th {
vertical-align: middle !important;
}
.filter-row-bg{
background: #0c2e66d1;
}
td input, td select {
height: 24px;
padding: 3px 5px;
border: 0;
width: 100%
}
input:focus,
select:focus{
outline: none;
}
ul{
list-style: none;
}
.col-form-label{
font-size: 12px !important;
}
.text-sm{
font-size: 14px !important;
}
.contact-ul li{
margin-bottom: 5px;
}
.v-scroll {
width: 100%;
max-height: 350px;
height: 350px;
overflow-y: auto;
}
.comment-form textarea{
height: 40px;
width: 100%;
border: 1px solid #ddd;
overflow: hidden;
}
textarea:focus{
outline: none;
}
.comment-form button {
border: 0;
width: 40px;
color: #fff;
height: 40px;
text-align: center;
}
input[type="tel"] {
height: 32px;
width: 100%;
border: 1px solid #dddddd !important;
border-radius: 2px;
}
.iti.iti--allow-dropdown {
width: 100%;
}
tbody tr td a{
min-height: 30px;
display: block;
line-height: 30px;
}
</style>
@endpush
@section('content')
@isset($edit)
<form action="{{ route('app.fresh-lead.agent.update', $edit) }}" method="POST">
@csrf
@method('PUT')
<div class="text-left">
<button class="btn btn-sm btn-primary" type="submit"><i class="fas fa-plus fa-sm"></i>
Update Lead
</button>
</div>
<div class="border rounded p-2 mt-3">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<div class="agent-box">
<div class="agent-profile d-flex align-items-center">
<img class="rounded-circle" src="https://placehold.co/50x50" alt="">
<div class="agent-content ml-2">
<strong class="d-block text-primary">{{ $edit->name ?? 'N/A' }}</strong>
<span class="d-block text-primary">{{ $edit->reference_id ?? 'N/A' }}</span>
</div>
</div>
<ul class="m-0 p-0 contact-ul mt-3">
<li><i class="fas fa-phone"></i> {{ $edit->phone ?? 'N/A' }}</li>
<li><i class="fas fa-phone"></i> {{ $edit->number_1 ?? 'N/A' }}</li>
<li><i class="fas fa-envelope"></i> {{ $edit->email ?? 'N/A' }}</li>
</ul>
</div>
<div class="agent-field mt-4">
<x-form.vertical.text labelName="Agent:" data="{{ $edit->agent->name }}"/>
<x-form.vertical.text labelName="Reference:" data="{{ $edit->reference_id }}"/>
<x-form.vertical.text data="{{ date_formats($edit->enquiry_date,'Y-m-d H:i a') }}" labelName="Enquiry Date:"/>
<x-form.vertical.text labelName="Created By:" data="{{ $edit->createdBy->name }}"/>
<x-form.vertical.text labelName="Lead Type:" data="{{ $edit->leadType->name }}"/>
<x-form.vertical.selectbox name="hot_link" labelName="Hot Link">
<option value="">-- Select --</option>
@forelse (HOT_LINK as $key=>$value)
<option value="{{ $key }}" @isset($edit) {{ $edit->hot_link == $key ? 'selected' : '' }} @endisset>{{ $value }}</option>
@empty
@endforelse
</x-form.vertical.selectbox>
<x-form.vertical.selectbox name="status" onchange="select_status(this.value)" labelName="Status">
<option value="">-- Select --</option>
@forelse ($statuses as $status)
<option value="{{ $status->id }}" @isset($edit) {{ $edit->status_id == $status->id ? 'selected' : '' }} @endisset>{{ $status->name }}</option>
@empty
@endforelse
</x-form.vertical.selectbox>
<x-form.vertical.selectbox name="sub_status" labelName="Sub Status">
<option value="">-- Select --</option>
</x-form.vertical.selectbox>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div id="accordion">
<div class="border mb-2 bg-light">
<div class="" id="property-head2">
<h5 class="mb-0">
<button type="button" class="btn btn-sm w-100 text-sm text-left shadow-none collapsed" data-toggle="collapse" data-target="#property2" aria-expanded="false" aria-controls="property2">
Client Details
</button>
</h5>
</div>
<div id="property2" class="collapse @isset($edit) show @endisset px-2" aria-labelledby="property-head2" data-parent="#accordion">
<div class="form-group row">
<strong class="col-md-4 col-4">Phone</strong>
<div class="col-md-8 col-8">
<div class="county-flag">
@if ($edit->phone != '')
<img width="15" src="https://flagicons.lipis.dev/flags/4x3/{{ $edit->phone_country }}.svg" alt="">
<strong>{{ $edit->phone }}</strong>
@else
N/A
@endif
</div>
</div>
</div>
<div class="form-group row">
<strong class="col-md-4 col-4">Number1</strong>
<div class="col-md-8 col-8">
<div class="county-flag">
@if ($edit->number_1 != '')
<img width="15" src="https://flagicons.lipis.dev/flags/4x3/{{ $edit->number_1_country }}.svg" alt="">
<strong>{{ $edit->number_1 }}</strong>
@else
N/A
@endif
</div>
</div>
</div>
<div class="form-group row">
<strong class="col-md-4 col-4">Number2</strong>
<div class="col-md-8 col-8">
<div class="county-flag">
@if ($edit->number_2 != '')
<img width="15" src="https://flagicons.lipis.dev/flags/4x3/{{ $edit->number_2_country }}.svg" alt="">
<strong>{{ $edit->number_2 }}</strong>
@else
N/A
@endif
</div>
</div>
</div>
<x-form.vertical.text labelName="Country:" data="{{ $edit->country }}"/>
<x-form.vertical.selectbox name="potential" labelName="Potential">
<option value="">-- Select --</option>
@forelse (POTENTIAL as $key=>$value)
<option value="{{ $key }}" @isset($edit) {{ $edit->potential == $key ? 'selected' : '' }} @endisset>{{ $value }}</option>
@empty
@endforelse
</x-form.vertical.selectbox>
</div>
</div>
<div class="border bg-light">
<div class="" id="property-head1">
<h5 class="mb-0">
<button type="button" class="btn btn-sm w-100 text-sm text-left shadow-none collapsed" data-toggle="collapse" data-target="#property1" aria-expanded="false" aria-controls="property1">
Property Details
</button>
</h5>
</div>
<div id="property1" class="collapse px-2" aria-labelledby="property-head1" data-parent="#accordion">
<x-form.vertical.text labelName="Category:" data="{{ $edit->category ? $edit->category->name : 'N/A' }}"/>
<x-form.vertical.text labelName="Campaign:" data="{{ $edit->campaign ? $edit->campaign->name : 'N/A' }}"/>
<x-form.vertical.text labelName="Emirate:" data="{{ $edit->emirate ? $edit->emirate->name : 'N/A' }}"/>
<x-form.vertical.text labelName="Channel:" data="{{ $edit->channel ? $edit->channel->name : 'N/A' }}"/>
<x-form.vertical.text labelName="Source:" data="{{ $edit->source ? $edit->source->name : 'N/A' }}"/>
<x-form.vertical.text labelName="Location:" data="{{ $edit->location ? $edit->location->name : 'N/A' }}"/>
<x-form.vertical.text labelName="Sub-Location:" data="{{ $edit->subLocation ? $edit->subLocation->name : 'N/A' }}"/>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<div class="v-scroll">
</div>
@isset($edit)
<div class="comment-form d-flex mt-2">
<textarea rows="3" type="text" name="comment" class="px-2" placeholder="Write comment.."></textarea>
<input type="hidden" value="{{ $edit->id }}" name="calling_id">
<button class="comment-submit bg-primary" type="button"><i class="far fa-paper-plane"></i></button>
</div>
@endisset
</div>
</div>
</div>
</div>
</div>
</form>
@endisset
<div class="row mt-3">
<div class="col-12">
<div class="card">
<div class="card-body px-0">
<div class="table-responsive">
<table class="table table-sm table-bordered table-hover table-style" id="fresh-datatables">
<thead>
<tr class="bg-primary text-light">
<th style="min-width: 90px">Ref</th>
<th style="min-width: 130px">Campaign Name</th>
<th style="min-width: 150px">Date</th>
<th style="min-width: 100px">Agent</th>
<th style="min-width: 130px">Name</th>
<th style="min-width: 150px">Email</th>
<th style="min-width: 100px">Phone</th>
<th style="min-width: 100px">Number 1</th>
<th style="min-width: 100px">Number 2</th>
<th style="min-width: 120px">Lead Type</th>
<th style="min-width: 120px">Hot Link</th>
<th style="min-width: 120px">Status</th>
<th style="min-width: 140px">Sub Status</th>
<th style="min-width: 140px">Category</th>
<th style="min-width: 140px">Channel</th>
<th style="min-width: 140px">Emirate</th>
<th style="min-width: 140px">Source</th>
<th style="min-width: 140px">Location</th>
<th style="min-width: 140px">Sub Location</th>
<th style="min-width: 120px">Potential</th>
<th class="text-right" style="min-width: 60px">Action</th>
</tr>
<tr class="filter-row-bg text-light">
<td>
<input type="text" name="filter_reference_id">
</td>
<td>
<select name="filter_campaign">
<option value="">-- Select --</option>
@foreach ($campaigns as $campaign)
<option value="{{ $campaign->id }}">{{ $campaign->name }}</option>
@endforeach
</select>
</td>
<td>
<input type="input" placeholder="YY-MM-DD" autocomplete="off" id="date_range">
<input type="hidden" name="start_date">
<input type="hidden" name="end_date">
</td>
<td>
<select name="filter_agent">
<option value="">-- Select --</option>
@forelse ($agents as $agent)
<option value="{{ $agent->id }}">{{ $agent->name }}</option>
@empty
@endforelse
</select>
</td>
<td>
<input type="text" name="filter_name">
</td>
<td>
<input type="email" name="filter_email">
</td>
<td>
<input type="text" name="filter_phone">
</td>
<td>
<input type="text" name="filter_number1">
</td>
<td>
<input type="text" name="filter_number2">
</td>
<td>
<select name="filter_lead_type">
<option value="">-- Select --</option>
@forelse ($leadTypes as $leadType)
<option value="{{ $leadType->id }}">{{ $leadType->name }}</option>
@empty
@endforelse
</select>
</td>
<td>
<select name="filter_hot_link">
<option value="">-- Select --</option>
@forelse (HOT_LINK as $key=>$value)
<option value="{{ $key }}">{{ $value }}</option>
@empty
@endforelse
</select>
</td>
<td>
<select name="filter_status" onchange="filterSubStatus(this.value)">
<option value="">-- Select --</option>
@forelse ($statuses as $status)
<option value="{{ $status->id }}">{{ $status->name }}</option>
@empty
@endforelse
</select>
</td>
<td>
<select name="filter_sub_status">
<option value="">-- Select --</option>
</select>
</td>
<td>
<select name="filter_category">
<option value="">-- Select --</option>
@forelse ($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@empty
@endforelse
</select>
</td>
<td>
<select name="filter_channel">
<option value="">-- Select --</option>
@forelse ($channels as $channel)
<option value="{{ $channel->id }}">{{ $channel->name }}</option>
@empty
@endforelse
</select>
</td>
<td>
<select name="filter_emirate">
<option value="">-- Select --</option>
@forelse ($emirates as $emirate)
<option value="{{ $emirate->id }}">{{ $emirate->name }}</option>
@empty
@endforelse
</select>
</td>
<td>
<select name="filter_source">
<option value="">-- Select --</option>
@forelse ($sources as $source)
<option value="{{ $source->id }}">{{ $source->name }}</option>
@empty
@endforelse
</select>
</td>
<td>
<select name="filter_location" onchange="filterSubLocation(this.value)">
<option value="">-- Select --</option>
@forelse ($locations as $location)
<option value="{{ $location->id }}">{{ $location->name }}</option>
@empty
@endforelse
</select>
</td>
<td>
<select name="filter_sub_location">
<option value="">-- Select --</option>
</select>
</td>
<td>
<select name="filter_potential">
<option value="">-- Select --</option>
@foreach (POTENTIAL as $key=>$value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</td>
<td></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@include('backend.modal.calling-modal')
@endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/js/intlTelInput.min.js"></script>
<script>
var calling_id = $('input[name="calling_id"]').val();
table = $('#fresh-datatables').DataTable({
processing: true,
serverSide: true,
order: [], //Initial no order
bInfo: true, //TO show the total number of data
bFilter: false, //For datatable default search box show/hide
responsive: false,
ordering: false,
lengthMenu: [
[5, 10, 15, 25, 50, 100, 1000, 10000, -1],
[5, 10, 15, 25, 50, 100, 1000, 10000, "All"]
],
pageLength: 10, //number of data show per page
ajax: {
url: "{{ route(routeName().'.fresh-lead.agent.get-data') }}",
type: "POST",
dataType: "JSON",
data: function(d) {
d._token = _token;
d.reference = $('input[name="filter_reference_id"]').val();
d.campaign = $('select[name="filter_campaign"]').val();
d.start_date = $('input[name="start_date"]').val();
d.end_date = $('input[name="end_date"]').val();
d.agent = $('select[name="filter_agent"]').val();
d.name = $('input[name="filter_name"]').val();
d.email = $('input[name="filter_email"]').val();
d.phone = $('input[name="filter_phone"]').val();
d.number1 = $('input[name="filter_number1"]').val();
d.number2 = $('input[name="filter_number2"]').val();
d.lead_type = $('select[name="filter_lead_type"]').val();
d.hot_link = $('select[name="filter_hot_link"]').val();
d.status = $('select[name="filter_status"]').val();
d.sub_status = $('select[name="filter_sub_status"]').val();
d.category = $('select[name="filter_category"]').val();
d.channel = $('select[name="filter_channel"]').val();
d.emirate = $('select[name="filter_emirate"]').val();
d.source = $('select[name="filter_source"]').val();
d.location = $('select[name="filter_location"]').val();
d.sub_location = $('select[name="filter_sub_location"]').val();
d.potential = $('select[name="filter_potential"]').val();
},
},
columns: [
{data: 'reference_id'},
{data: 'campaign_name'},
{data: 'enquiry_date'},
{data: 'agent'},
{data: 'name'},
{data: 'email'},
{data: 'phone'},
{data: 'number_1'},
{data: 'number_2'},
{data: 'lead_type'},
{data: 'hot_link'},
{data: 'status'},
{data: 'sub_status'},
{data: 'category'},
{data: 'channel'},
{data: 'emirate'},
{data: 'source'},
{data: 'location'},
{data: 'sub_location'},
{data: 'potential'},
{data: 'action', orderable: false, searchable: false},
],
language: {
processing: '<img src="{{ asset("uploads/images/table-loading.svg") }}">',
emptyTable: '<strong class="text-danger">No Data Found</strong>',
infoEmpty: '',
zeroRecords: '<strong class="text-danger">No Data Found</strong>',
oPaginate: {
sPrevious: "Previous", // This is the link to the previous page
sNext: "Next", // This is the link to the next page
},
lengthMenu: "_MENU_"
}
});
$(document).on('click', 'button.comment-submit', function(){
var comment = $('textarea[name="comment"]').val();
var calling_id = $('input[name="calling_id"]').val();
if (comment != '') {
$.ajax({
url: '{{ route(routeName().".comments.store") }}',
type: 'POST',
data:{_token:_token,calling_id:calling_id,comment:comment},
dataType: 'JSON',
success: function(response){
if (response.status == 'success') {
$('textarea[name="comment"]').val('');
leadComment();
}else{
flashMessage(response.status,response.message);
}
},
error: function(error){
console.log(error);
}
});
}else{
flashMessage('error','Comment field is required.');
}
});
$(document).on('keyup keypress', 'textarea[name="comment"]', function(){
leadComment();
});
function leadComment(){
$.ajax({
url: '{{ route(routeName().".comments.get") }}',
type: 'POST',
data:{_token:_token,calling_id:calling_id},
dataType: 'JSON',
success: function(response){
$('.v-scroll').html('');
if (response) {
$('.v-scroll').html(response);
}else{
}
},
error: function(error){
console.log(error);
}
});
}
leadComment();
$(document).on('keyup keypress', '.filter-row-bg td input', function(){
table.ajax.reload();
});
$(document).on('change', '.filter-row-bg td select', function(){
table.ajax.reload();
});
// deletable btn
$(document).on('click', 'button.confirm-deletable-action', function(){
// modal data
let data_id = $('#deletable-modal input.datatable').val();
const url = "{{ route(routeName().'.fresh-lead.destroy') }}";
deletable_action(data_id,url); // define function
});
@permission('app.fresh-lead.bulk-operation')
// user bulk operation
$(document).on('click', 'button.bulk-deletable-action', function(){
var data_id = $('#deletable-modal input.datatable').val();
var operation_type = $('#deletable-modal .modal-body input.operation-type').val();
const url = "{{ route(routeName().'.fresh-lead.bulk-operation') }}";
var assign_user = $('#deletable-modal .modal-body input.manager-select').val();
bulk_deletable_action(data_id,operation_type,assign_user,url);
});
@endpermission
// operation assign manager
$(document).on('change','select[name="operation"]', function(){
let selected_value = $(this).val();
if (selected_value == 'assign') {
$('.manager-list').removeClass('d-none');
}else{
$('.manager-list').addClass('d-none');
}
});
// datepicker
$('input#date_range').daterangepicker({
opens: 'right',
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
},
ranges: {
'Today' : [moment(), moment()],
'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month' : [moment().startOf('month'), moment().endOf('month')],
'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
}
}, function(start, end, label) {
$('input[name="start_date"]').val(start.format('YYYY-MM-DD'));
$('input[name="end_date"]').val(end.format('YYYY-MM-DD'));
});
$('input#date_range').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
table.ajax.reload();
});
$('input#date_range').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
$('input[name="start_date"]').val('');
$('input[name="end_date"]').val('');
table.ajax.reload();
});
// sub status get
function select_status(status){
$.ajax({
type: "POST",
url: "{{ route(routeName().'.callings.status.get-data') }}",
data: {_token:_token,status:status},
dataType: "JSON",
success: function (response) {
$('select[name="sub_status"]').html('');
if (response) {
$('select[name="sub_status"]').html(response);
}
}
});
}
// filter sub status get
function filterSubStatus(status){
$.ajax({
type: "POST",
url: "{{ route(routeName().'.callings.status.get-data') }}",
data: {_token:_token,status:status},
dataType: "JSON",
success: function (response) {
$('select[name="filter_sub_status"]').html('');
if (response) {
$('select[name="filter_sub_status"]').html(response);
}
}
});
}
@isset($edit)
// sub status selected
function statusSelected(){
$.ajax({
url: "{{ route(routeName().'.fresh-lead.sub-status.selected') }}",
type: "POST",
data: {_token:_token,data_id:{{ $edit->id }},status_id:{{ $edit->status_id }}},
dataType: "JSON",
success: function (response) {
if (response) {
$('select[name="sub_status"]').html(response);
}
}
});
}
statusSelected();
// sub location selected
function subLocationSelected(){
$.ajax({
url: "{{ route(routeName().'.fresh-lead.sub-location.selected') }}",
type: "POST",
data: {_token:_token,data_id:{{ $edit->id }},location_id:{{ $edit->location_id }}},
dataType: "JSON",
success: function (response) {
if (response) {
$('select[name="sub_location"]').html(response);
}
}
});
}
subLocationSelected();
@endisset
// sub location get
function subLocation(location_id){
$.ajax({
type: "POST",
url: "{{ route(routeName().'.locations.sub-location.get') }}",
data: {_token:_token,location:location_id},
dataType: "JSON",
success: function (response) {
$('select[name="sub_location"]').html('');
if (response) {
$('select[name="sub_location"]').html(response);
}
}
});
}
// filter sub location get
function filterSubLocation(location_id){
$.ajax({
type: "POST",
url: "{{ route(routeName().'.locations.sub-location.get') }}",
data: {_token:_token,location:location_id},
dataType: "JSON",
success: function (response) {
$('select[name="filter_sub_location"]').html('');
if (response) {
$('select[name="filter_sub_location"]').html(response);
}
}
});
}
var phone_number = document.querySelector("#phone_number");
window.intlTelInput(phone_number,({
separateDialCode: true
}));
$('.iti__flag-container').click(function() {
var pCountryCode = $(this).children('.iti__selected-flag').attr('title');
var pCountryCode = pCountryCode.replace(/[^0-9]/g,'')
var pCountryName = $(this).children('.iti__selected-flag').attr('aria-activedescendant');
var pCountryArray = pCountryName.split('-');
$('input#phone_country_code').val("");
$('input#phone_dialing').val('');
$('#phone_number').val('')
$('input#phone_number').val($('#phone_number').val());
$('input#phone_dialing').val(pCountryCode);
$('input#phone_country_code').val(pCountryArray[2]);
});
$('input#phone_dialing').val('1');
$(document).on('keyup keypress', 'input#phone_number', function(){
let code = $('input#phone_dialing').val();
let phone = $(this).val();
$('input#phone').val('+'+code+phone);
});
// number1
var number1 = document.querySelector("#number1");
window.intlTelInput(number1,({
separateDialCode: true
}));
$('.iti__flag-container').click(function() {
var n1CountryCode = $(this).children('.iti__selected-flag').attr('title');
var n1CountryCode = n1CountryCode.replace(/[^0-9]/g,'')
var n1CountryName = $(this).children('.iti__selected-flag').attr('aria-activedescendant');
var n1CountryArray = n1CountryName.split('-');
$('input#number1_country_code').val("");
$('input#number1_dialing').val('');
$('#number1').val('')
$('input#number1').val($('#number1').val());
$('input#number1_dialing').val(n1CountryCode);
$('input#number1_country_code').val(n1CountryArray[2]);
});
$('input#number1_dialing').val('1');
$(document).on('keyup keypress', 'input#number1', function(){
let number1_code = $('input#number1_dialing').val();
let number1 = $(this).val();
$('input[name="number1"]').val('+'+number1_code+number1);
});
// number2
var number2 = document.querySelector("#number2");
window.intlTelInput(number2,({
separateDialCode: true
}));
$('.iti__flag-container').click(function() {
var n2CountryCode = $(this).children('.iti__selected-flag').attr('title');
var n2CountryCode = n2CountryCode.replace(/[^0-9]/g,'')
var n2CountryName = $(this).children('.iti__selected-flag').attr('aria-activedescendant');
var n2CountryArray = n2CountryName.split('-');
$('input#number2_country_code').val("");
$('input#number2_dialing').val('');
$('input#number2').val('')
$('input#number2').val($('input#number2').val());
$('input#number2_dialing').val(n2CountryCode);
$('input#number2_country_code').val(n2CountryArray[2]);
});
$('input#number2_dialing').val('1');
$(document).on('keyup keypress', 'input#number2', function(){
let number2_code = $('input#number2_dialing').val();
let number2 = $(this).val();
$('input[name="number2"]').val('+'+number2_code+number2);
});
</script>
@endpush
Zerion Mini Shell 1.0