Viewing file:  index.blade.php (34.22 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.customer')
@section('title', trans('customer.settings'))
@section('extra-css')
<style>
/* Professional Settings Page Styling */
.settings-page-container {
background: #f8f9fa;
}
/* Enhanced Tab Navigation */
.custom-ul-section {
background: #fff;
padding: 8px !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.custom-ul-section .nav-item {
margin: 0 4px;
}
.custom-ul-section .nav-link {
border-radius: 6px;
padding: 10px 16px;
font-weight: 500;
color: #495057;
transition: all 0.3s ease;
border: 1px solid transparent;
display: flex;
align-items: center;
white-space: nowrap;
}
.custom-ul-section .nav-link:hover {
background: #f8f9fa;
color: #007bff;
transform: translateY(-1px);
}
.custom-ul-section .nav-link.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
border-color: transparent;
}
.custom-ul-section .nav-link i {
font-size: 16px;
margin-right: 6px;
}
/* Enhanced Card Styling */
.settings-page-container .card {
border: none;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
margin-bottom: 24px;
overflow: hidden;
}
.settings-page-container .card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
padding: 20px 24px;
}
.settings-page-container .card-header h2 {
margin: 0;
font-size: 24px;
font-weight: 600;
}
.settings-page-container .card-header h2 a {
color: #fff;
text-decoration: none;
}
/* Section Cards within Tabs */
.tab-content .card {
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.tab-content .card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.tab-content .card-header.bg-light {
background: linear-gradient(to right, #f8f9fa, #e9ecef) !important;
border-bottom: 2px solid #667eea;
}
.tab-content .card-header h5 {
color: #2d3748;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
}
.tab-content .card-header h5 i {
color: #667eea;
margin-right: 10px;
font-size: 20px;
}
/* Enhanced Form Elements */
.tab-content .form-group label {
font-weight: 500;
color: #2d3748;
margin-bottom: 8px;
font-size: 14px;
}
.tab-content .form-control {
border: 1px solid #cbd5e0;
border-radius: 6px;
padding: 10px 14px;
transition: all 0.3s ease;
font-size: 14px;
}
.tab-content .form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Enhanced Buttons */
.tab-content .btn-primary {
border-radius: 6px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.tab-content .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.tab-content .btn-sm {
padding: 6px 16px;
font-size: 13px;
}
/* Tab Content Styling */
.tab-content {
padding: 24px;
background: #fff;
border-radius: 0 0 12px 12px;
}
.tab-pane {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Card Body Padding */
.tab-content .card-body {
padding: 24px;
}
/* Responsive Improvements */
@media (max-width: 768px) {
.custom-ul-section {
flex-direction: column;
width: 100%;
}
.custom-ul-section .nav-item {
width: 100%;
margin: 4px 0;
}
.custom-ul-section .nav-link {
width: 100%;
justify-content: center;
}
}
</style>
@endsection
@section('content')
<section class="content-header">
</section>
<!-- Main content -->
<section class="content settings-page-container">
<div class="row">
<div class="col-12 mx-auto col-sm-10">
<!-- Custom Tabs -->
<div class="card">
<input type="hidden" value="{{request()->get('type')}}" id="url-type">
<div class="card-header d-flex p-0">
<h2 class="card-title p-3"><a href="{{route('customer.settings.index')}}">{{trans('customer.settings')}}</a></h2>
<ul class="nav nav-pills ml-auto p-2 custom-ul-section">
<!-- Account Settings -->
<li class="nav-item">
<a class="nav-link active" href="#account_settings_tab" data-toggle="tab">
<i class="fas fa-user-circle mr-1"></i> {{trans('Account')}}
</a>
</li>
<!-- Security -->
<li class="nav-item">
<a class="nav-link" href="#security_tab" data-toggle="tab">
<i class="fas fa-lock mr-1"></i> {{trans('Security')}}
</a>
</li>
<!-- Communication Settings -->
<li class="nav-item">
<a class="nav-link" href="#communication_tab" data-toggle="tab">
<i class="fas fa-envelope mr-1"></i> {{trans('Communication')}}
</a>
</li>
<!-- Integration Settings -->
<li class="nav-item">
<a class="nav-link" href="#integration_tab" data-toggle="tab">
<i class="fas fa-plug mr-1"></i> {{trans('Integration')}}
</a>
</li>
<!-- Reseller Settings (conditional) -->
@if((auth('customer')->user()->type =='reseller' || auth('customer')->user()->type =='master_reseller') && Module::has('PaymentGateway') && Module::find('PaymentGateway')->isEnabled())
<li class="nav-item">
<a class="nav-link" href="#reseller_settings_tab" data-toggle="tab" id="payment_gateway_nav">
<i class="fas fa-credit-card mr-1"></i> {{trans('Reseller')}}
</a>
</li>
@endif
</ul>
</div><!-- /.card-header -->
<div class="card-body">
<div class="tab-content">
<!-- ========================================
TAB 1: ACCOUNT SETTINGS
======================================== -->
<div class="tab-pane active" id="account_settings_tab">
<form method="post" role="form" id="profile_form"
action="{{route('customer.settings.profile_update')}}" enctype="multipart/form-data">
@csrf
@include('customer.settings.profile_form')
<div class="text-right mt-3">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save mr-1"></i> {{trans('customer.submit')}}
</button>
</div>
</form>
</div>
<!-- ========================================
TAB 2: SECURITY
======================================== -->
<div class="tab-pane" id="security_tab">
<!-- Password Change -->
<div class="card mb-4">
<div class="card-header bg-light">
<h5><i class="fas fa-key"></i> {{trans('customer.password')}}</h5>
</div>
<div class="card-body">
<form method="post" role="form" id="password_form"
action="{{route('customer.settings.password_update')}}">
@csrf
@include('customer.settings.password_form')
<div class="text-right mt-3">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save mr-1"></i> {{trans('customer.submit')}}
</button>
</div>
</form>
</div>
</div>
@if(auth('customer')->user()->otp_status=='active')
<!-- OTP Settings -->
<div class="card mb-4">
<div class="card-header bg-light">
<h5><i class="fas fa-mobile-alt"></i> {{trans('OTP Settings')}}</h5>
</div>
<div class="card-body">
<form method="post" role="form" action="{{route('customer.opt.settings')}}">
@csrf
<div class="row pb-3">
<div class="col-md-12 text-right mb-3">
<button class="btn btn-primary btn-sm" type="button" id="checkOtpSend">
<i class="fas fa-vial mr-1"></i> {{trans('Test')}}
</button>
</div>
<div class="form-group col-md-6">
<label for="">From Type</label>
<select name="from_type" class="form-control" id="otpFromType">
<option {{isset($otp_setting->from_type) && $otp_setting->from_type=='number'?'selected':''}} value="number">{{trans('Number')}}</option>
<option {{isset($otp_setting->from_type) && $otp_setting->from_type=='sender_id'?'selected':''}} value="sender_id">{{trans('Sender-ID')}}</option>
</select>
</div>
@php $fromNumbers = auth('customer')->user()->numbers()->where('expire_date','>', now())->get() @endphp
<div class="form-group col-md-6 number_section otp_section" style="display: {{isset($otp_setting->from_type) && $otp_setting->from_type=='number'?'block':'block'}}">
<label for="">From Number</label>
<select name="phone_number" class="form-control" id="">
@foreach($fromNumbers as $key=>$number)
<option value="{{$number->number_id}}" {{isset($otp_setting->phone_number) && $otp_setting->phone_number==$number->number_id?'selected':''}}>{{$number->number}}</option>
@endforeach
</select>
</div>
@php $senderIds = auth('customer')->user()->sender_ids()->where('expire_date','>', now())->where('is_paid', 'yes')->get() @endphp
<div class="form-group col-md-6 sender_id_section otp_section" style="display:{{isset($otp_setting->from_type) && $otp_setting->from_type=='sender_id'?'block':'none'}}">
<label for="">Sender-ID</label>
<select name="sender_id" class="form-control" id="">
@foreach($senderIds as $key=>$sender_id)
<option {{isset($otp_setting->sender_id) && $otp_setting->sender_id==$sender_id->id?'selected':''}} value="{{$sender_id->id}}">{{$sender_id->sender_id}}</option>
@endforeach
</select>
</div>
<div class="col-md-12 mt-2">
<label for="">{{trans('Status')}}</label>
<select name="status" class="form-control" id="">
<option {{isset($otp_setting->status) && $otp_setting->status=='inactive'?'selected':''}} value="inactive">{{trans('Inactive')}}</option>
<option {{isset($otp_setting->status) && $otp_setting->status=='active'?'selected':''}} value="active">{{trans('Active')}}</option>
</select>
</div>
</div>
<div class="text-right mt-3">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save mr-1"></i> {{trans('customer.submit')}}
</button>
</div>
</form>
</div>
</div>
@endif
</div>
<!-- ========================================
TAB 3: COMMUNICATION SETTINGS
======================================== -->
<div class="tab-pane" id="communication_tab">
@if(auth('customer')->user()->type =='reseller' || auth('customer')->user()->type =='master_reseller')
<!-- SMTP Settings -->
<div class="card mb-4">
<div class="card-header bg-light">
<h5><i class="fas fa-server"></i> {{trans('SMTP')}}</h5>
</div>
<div class="card-body">
<form method="post" role="form" action="{{route('customer.smtp.settings')}}">
@csrf
@include('customer.settings.smtp_form')
<div class="text-right mt-3">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save mr-1"></i> {{trans('customer.submit')}}
</button>
</div>
</form>
</div>
</div>
<!-- Email Templates -->
<div class="card mb-4">
<div class="card-header bg-light">
<h5><i class="fas fa-envelope-open-text"></i> {{trans('Email Template')}}</h5>
</div>
<div class="card-body">
@include('customer.settings.email_template')
</div>
</div>
@endif
<!-- Inbound Settings -->
<div class="card mb-4">
<div class="card-header bg-light">
<h5><i class="fas fa-sms"></i> {{trans('Inbound Setting')}}</h5>
</div>
<div class="card-body">
<form action="{{route('customer.inbound.settings')}}" method="POST">
@csrf
<div class="form-group">
<label for="">{{trans('Sender Type')}}</label>
<select name="sender_type" class="form-control selectSender">
<option value="number">{{trans('Number')}}</option>
<option value="sender_id">{{trans('SenderID')}}</option>
</select>
</div>
<div class="form-group inbound_section section_number">
<label for="">{{trans('Form Numbers')}}</label>
<select name="number" class="form-control select3">
@foreach($numbers as $number)
<option {{isset($sender_setting->number) && $sender_setting->number==$number?'selected':''}} value="{{$number->id}}">{{$number->number}}</option>
@endforeach
</select>
</div>
<div class="form-group inbound_section section_sender_id" style="display: none">
<label for="">{{trans('Form Numbers')}}</label>
<select name="sender_id" class="form-control select3">
@foreach($sender_ids as $senderid)
<option {{isset($sender_setting->sender_id) && $sender_setting->sender_id==$senderid->id?'selected':''}} value="{{$senderid->id}}">{{$senderid->sender_id}}</option>
@endforeach
</select>
</div>
<div class="text-right mt-3">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save mr-1"></i> Submit
</button>
</div>
</form>
</div>
</div>
</div>
<!-- ========================================
TAB 4: INTEGRATION SETTINGS
======================================== -->
<div class="tab-pane" id="integration_tab">
@include('customer.settings.notification_form')
</div>
<!-- ========================================
TAB 5: RESELLER SETTINGS (Conditional)
======================================== -->
@if((auth('customer')->user()->type =='reseller' || auth('customer')->user()->type =='master_reseller') && Module::has('PaymentGateway') && Module::find('PaymentGateway')->isEnabled())
<div class="tab-pane" id="reseller_settings_tab">
@if(isset($gateways->value) && json_decode($gateways->value))
<form method="post" role="form" id="resellerGatewaysForm"
action="{{route('paymentgateway::reseller.payment.settings.store')}}"
enctype="multipart/form-data">
@csrf
@include('paymentgateway::settings.reseller_payment_gateway')
<div class="text-right mt-3">
<button id="resellerGatewaysBtn" type="button" class="btn btn-primary">
<i class="fas fa-save mr-1"></i> @lang('admin.form.button.submit')
</button>
</div>
</form>
@else
<div class="alert alert-info">
<i class="fas fa-info-circle mr-2"></i>
{{trans('customer.empty_payment_gateway')}}
</div>
@endif
</div>
@endif
</div>
<!-- /.tab-content -->
</div><!-- /.card-body -->
</div>
<!-- ./card -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="sendOtpModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">OTP Testing</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="form-group">
<label for="">{{trans('To Number')}}</label>
<input type="text" class="form-control" name="to_number" placeholder="Enter Number With Country Code">
</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 send_otp_request">Send</button>
</div>
</div>
</div>
</div>
@endsection
@section('extra-scripts')
<script src="{{asset('plugins/jquery-validation/jquery.validate.min.js')}}"></script>
<script src="{{asset('plugins/bs-custom-file-input/bs-custom-file-input.js')}}"></script>
<script !src="">
"use strict";
let $validate;
$validate = $('#profile_form').validate({
rules: {
email: {
required: true,
email: true,
},
first_name: {
required: true
},
last_name: {
required: true
},
},
messages: {
email: {
required: "Please enter a email address",
email: "Please enter a vaild email address"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
first_name: {required: "Please provide first name"},
last_name: {required: "Please provide last name"}
},
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');
}
});
$('#notification_switch').on('change',function(e){
const isChecked=$(this).is(':checked');
$.ajax({
method:'post',
url:'{{route('customer.settings.notification_update')}}',
data:{_token:'{{csrf_token()}}',isChecked},
success:function(res){
notify('success',res.message);
}
})
});
$(document).ready(function () {
bsCustomFileInput.init();
});
$('#templateForm').validate({
rules: {
title: {
required: true,
},
body: {
required: true
},
status: {
required: true
},
},
messages: {
title: {
required: "Please enter template title",
},
body: {
required: "Please enter template body",
},
status: {required: "Please select template status"},
},
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');
}
});
$('.add_tool').on('click', function (e) {
var curPos =
document.getElementById("template_body").selectionStart;
let x = $("#template_body").val();
let text_to_insert = $(this).attr('data-name');
$("#template_body").val(
x.slice(0, curPos) + text_to_insert + x.slice(curPos));
});
$(document).on('keyup or click', '#template_body', function (e){
const character = $(this).val().length;
var messageValue = $(this).val();
var div = parseInt(parseInt(messageValue.length - 1) / 160) + 1;
if (div <= 1) {
$("#count").text("Characters left: " + (160 - messageValue.length));
} else $("#count").text("Characters left: " + (160 * div - messageValue.length) + "/" + div);
});
$('#webhookSubmit').on('click',function(e){
const type = $('#webhook_type').val();
const url = $('#webhook_url').val();
$.ajax({
method:'post',
url:'{{route('customer.settings.webhook_update')}}',
data:{_token:'{{csrf_token()}}',type:type, url:url},
success:function(res){
notify('success',res.message);
}
})
})
$('#dataPostIngSubmit').on('click',function(e){
const type = $('#data_posting_type').val();
const url = $('#data_posting_url').val();
$.ajax({
method:'post',
url:'{{route('customer.settings.data_posting')}}',
data:{_token:'{{csrf_token()}}',type:type, url:url},
success:function(res){
notify('success',res.message);
}
})
})
@if(Module::has('PaymentGateway'))
$('#resellerGatewaysBtn').on('click', function (e) {
e.preventDefault();
const form = $('#resellerGatewaysForm');
const formData=form.serialize();
const url=form.attr('action');
$.ajax({
method: 'post',
url: url,
data: formData,
success: function (res) {
if (res.status == 'success') {
notify('success', res.message);
}
}
})
});
@endif
$(document).on('click', '#editDomain', function(e){
$('#editDomainModal').modal('show');
})
$(document).on('change', '#otpFromType', function(e){
const type=$(this).val();
$('.otp_section').hide();
$('.'+type+'_section').show();
})
let rnd = (Math.random() + 1).toString(36).substring(7);
console.log('lol='+ rnd)
@if(isset($authorizationToken->access_token))
$('.send_otp_request').on('click',function(e){
const to = $('input[name=to_number]').val();
$('.send_otp_request').attr('disabled', 'disabled')
$.ajax({
method:'GET',
url:'{{route('otp.message')}}',
data:{
number:to,
api_key:'{{$authorizationToken->access_token}}',
code:rnd
},
success:function(res){
notify('success', res.message);
$('.send_otp_request').removeAttr('disabled')
$('#sendOtpModal').modal('hide');
$('input[name=to_number]').val('')
}
})
});
@endif
$('#checkOtpSend').on('click',function(e){
$('#sendOtpModal').modal('show');
});
$(document).on('click', '.confirmEdit', function(e){
$('#editDomain').addClass('d-none');
$('#saveDomain').removeClass('d-none');
$('input[name=domain_name]').removeAttr('readonly');
$('#editDomainModal').modal('hide');
});
$('#saveDomain').on('click',function(e){
const domain_name= $('input[name=domain_name]').val();
$.ajax({
method:'post',
url:'{{route('customer.domain.store')}}',
data:{_token:'{{csrf_token()}}',domain:domain_name},
success:function(res){
if(res.status=='success') {
notify('success', res.message);
}else{
$('.error_ip').html(res.message);
notify('danger',res.message);
}
}
})
})
</script>
<script>
$(document).on('change', '.selectSender', function(e){
const type=$(this).val();
$('.inbound_section').hide();
$('.section_'+type).show();
});
$('.select3').select2({
multiple:false
});
</script>
@endsection
|