|
Server : Apache/2.4.41 (Ubuntu) System : Linux vmi1525618.contaboserver.net 5.4.0-105-generic #119-Ubuntu SMP Mon Mar 7 18:49:24 UTC 2022 x86_64 User : www-data ( 33) PHP Version : 8.2.12 Disable Function : NONE Directory : /var/www/leadai/webmaster.leadai.co.in/resources/views/settings/ |
Upload File : |
@extends('layout')
@section('content')
<!-- begin::main content -->
<style>
/* Sidebar */
.settings-sidebar {
height: 100vh;
height: 720px;
width: 22%;
background-color: white; /* Sidebar background color */
overflow-y: auto;
padding:0px 0px;
border-radius:10px;
top:80px;
}
.settings-sidebar::-webkit-scrollbar {
width: 5px; /* Width of the scrollbar */
}
.settings-sidebar::-webkit-scrollbar-track {
background: white; /* Color of the scrollbar track */
}
.settings-sidebar::-webkit-scrollbar-thumb {
background: #6491F6; /* Color of the scrollbar thumb */
border-radius: 5px; /* Radius of the scrollbar thumb */
}
.settings-sidebar::-webkit-scrollbar-thumb:hover {
background: #555; /* Color of the scrollbar thumb on hover */
}
.settings-sidebar ul li {
width: 100%;
padding: 16px 16px;
font-size:14px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.settings-sidebar ul li:hover{
background: #ccc;
transition: background-color 0.3s ease;
}
.settings-sidebar button:hover {
background-color: #e9ecef; /* Sidebar button hover background color */
}
/* Content */
.content {
width:78%; /* Adjust according to the width of the sidebar */
padding:0px 20px;
}
.section {
width:100%;
height: auto;
padding:20px 0px;
border-radius:10px;
margin-bottom:30px;
}
.tab-active{
background:#3F5AE1 ;
color:white !important;
/* display:none !important; */
}
.input-upload{
position:absolute;
top:0;
left:0;
width:140px;
height:40px;
z-index:50;
opacity:0
}
.input-upload-btn{
position:absolute;
top:0;
left:0;
width:140px;
height:40px;
}
.content input, .content select{
height:40px;
}
</style>
<main class="main-content" >
<div class="page-header">
<h3>{{__('message.settings')}}</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{ __('message.dashboard') }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ __('message.settings') }}</li>
</ol>
</nav>
</div>
<x-flashMessage />
<div class="container " style="position:relative;width:100%;">
<div class="d-flex " style="position:relative;width:100%;">
<!-- Sidebar -->
<div class="settings-sidebar shadow-sm sticky-top">
<div class="main-settings-sidebar ">
<ul class='tabs' id="settings-tabs">
<a href="#brand"><li class="tab-active d-flex justify-content-between">Brand <i class="fa fa-angle-right "></i></li></a>
<a href="#profile-settings"><li class="d-flex justify-content-between">Profile<i class="fa fa-angle-right "></i></li></a>
<a href="#notification-settings"><li class="d-flex justify-content-between">Notification Settings<i class="fa fa-angle-right "></i></li></a>
<a href="#system-settings"><li class="d-flex justify-content-between">System Settings<i class="fa fa-angle-right "></i></li></a>
<a href="#cookie-settings"><li class="d-flex justify-content-between">Cookie Settings<i class="fa fa-angle-right "></i></li></a>
<a href="#storage-settings"><li class="d-flex justify-content-between">Storage Settings<i class="fa fa-angle-right "></i></li></a>
<a href="#seo-settings"><li class="d-flex justify-content-between">SEO Settings<i class="fa fa-angle-right "></i></li></a>
<a href="#email-settings"><li class="d-flex justify-content-between">Email Settings<i class="fa fa-angle-right "></i></li></a>
<a href="#email-notification-settings"><li class="d-flex justify-content-between">Email Notification Settings<i class="fa fa-angle-right "></i></li></a>
<a href="#recaptcha-settings"><li class="d-flex justify-content-between">ReCaptcha Settings<i class="fa fa-angle-right "></i></li></a>
<a href="#bank-transfer"><li class="d-flex justify-content-between">Bank Transfer<i class="fa fa-angle-right "></i></li></a>
<a href="#ease-buzz"><li class="d-flex justify-content-between">EaseBuzz<i class="fa fa-angle-right "></i></li></a>
</ul>
</div>
<!-- Add more buttons as needed -->
</div>
<!-- Content -->
<div class="content">
<div class="section shadow-sm bg-white " id="brand">
<form action="{{asset('brand-settings')}}" method="post" enctype="multipart/form-data">
@csrf
<div class="px-4" style="border-left:2px solid green;">
<h3>Brand Settings</h3>
</div>
<hr>
<div class="row px-3 py-3">
<div class="col-md-4 px-3 logo-dark">
<div class="shadow-sm rounded" >
<div class="py-3">
<div class="px-3" style="border-left:2px solid green;">
<h5>Logo Dark</h5>
</div>
</div>
<hr class="p-0 m-0">
<div class="">
<div class="d-flex justify-content-center py-3">
<img src="{{asset('public/logo.png')}}" width="150" height="40" class="dark-logo-img">
</div>
<div class="d-flex justify-content-center pb-3">
<div class="py-3" style="position:relative">
<input type="file" accept="image/*" class="input-upload" name="dark_logo_img" id="dark-logo">
<button class="btn btn-primary" class="input-upload-btn" type="button" ><i class="fa fa-upload"></i>  Choose File Here</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 px-3 logo-light">
<div class="shadow-sm rounded" >
<div class="py-3">
<div class="px-3" style="border-left:2px solid green;">
<h5>Logo Light</h5>
</div>
</div>
<hr class="p-0 m-0">
<div class="">
<div class="d-flex justify-content-center py-3">
<img src="{{asset('public/logo.png')}}" width="150" height="40" class="light-logo-img">
</div>
<div class="d-flex justify-content-center pb-3">
<div class="py-3" style="position:relative">
<input type="file" accept="image/*" class="input-upload" name="light_logo_img" id="light-logo">
<button class="btn btn-primary" class="input-upload-btn" type="button" ><i class="fa fa-upload"></i>  Choose File Here</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 px-3 logo-dark">
<div class="shadow-sm rounded" >
<div class="py-3">
<div class="px-3" style="border-left:2px solid green;">
<h5>Favicon</h5>
</div>
</div>
<hr class="p-0 m-0">
<div class="">
<div class="d-flex justify-content-center py-3">
<img src="{{asset('public/favicon.png')}}" width="40" height="40" class="favicon-img">
</div>
<div class="d-flex justify-content-center pb-3">
<div class="py-3" style="position:relative">
<input type="file" accept="image/*" class="input-upload" name="fevicon_img" id="favicon">
<button class="btn btn-primary" class="input-upload-btn" type="button" ><i class="fa fa-upload"></i>  Choose File Here</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row px-3 py-3">
<div class="col-md-6 px-3">
<div class="form-group">
<label>Title Text</label>
<input type="text" name="title_text" class="form-control" value="{{$brand->title_text ? $brand->title_text : ''}}">
</div>
</div>
<div class="col-md-6 px-3">
<div class="form-group">
<label>Footer Text</label>
<input type="text" name="footer_text" class="form-control" value="{{$brand->footer_text ? $brand->footer_text : ''}}">
</div>
</div>
</div>
<div class="row px-5 py-3">
<div class="col-12"><h3>Theme Customizer</h3></div>
<div class="col-md-4 px-3">
<div class="">
<h5><i class="fa fa-credit-card"></i>  Primary Color Setting</h5>
<hr>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#0CAF60;" color="0CAF60"></span>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#75C251;" color="75C251"></span>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#584ED2;" color="584ED2"></span>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#145388;" color="145388"></span>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#B9406B;" color="B9406B"></span>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#008ECC;" color="008ECC"></span>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#922C88;" color="922C88"></span>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#C0A145;" color="C0A145"></span>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#48494B;" color="48494B"></span>
<span class="btn btn-lg mb-1 color-btn" type="button" style="background:#0C7785;" color="0C7785"></span>
<input type="color" name="primary_color" class="color-box">
</div>
</div>
<div class="col-md-4 px-3">
<div class="">
<h5><i class="fa fa-th-list"></i>  Sidebar Setting</h5>
<hr>
<div class="d-flex justify-content-center">
<label class="switch">
<input type="checkbox" name="sidebar_layout" {{$brand->sidebar_layout == 'on' ? 'checked' : ''}}
class="custom-control-input status-change sidebar-layout" id="">
<span class="slider round"></span>
</label>
<p class="pl-2">Transparent Layout</p>
</div>
</div>
</div>
<div class="col-md-4 px-3">
<div class="">
<h5><i class="fa fa-sun-o"></i>  Layout Setting</h5>
<hr>
<div class="d-flex justify-content-center">
<label class="switch">
<input type="checkbox" name="theme_mode" {{$brand->theme_mode == 'on' ? 'checked' : ''}}
class="custom-control-input status-change theme-mode" id="">
<span class="slider round"></span>
</label>
<p class="pl-2">Dark Layout</p>
</div>
</div>
</div>
<div class="col-12 py-3 d-flex justify-content-end">
<button class="btn btn-primary">Save Changes</button>
</div>
</div>
</form>
</div>
<div class="section shadow-sm bg-white" id="profile-settings">
<div class="px-4" style="border-left:2px solid green;">
<h3>Profile Settings</h3>
</div>
<hr>
<div class="row px-5 py-3">
<div class="col-md-12 px-3">
<h6 class="card-title">Edit Profile</h6>
<form action="{{ asset('edit-profile/') }}" enctype="multipart/form-data" method="post">
@csrf
<div class="form-group">
<label for="name">Name</label>
<input type="hidden" value="{{$user->id}}" name="admin_id">
<input type="text" class="form-control" name="name"
value="{{$user->name}}" id="name"
placeholder="User Name">
@if ($errors->has('name'))
<div class="error">
{{ $errors->first('name') }}
</div>
@endif
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name="email"
value="{{$user->email}}" id="email"
placeholder="Enter Email Name">
@if ($errors->has('email'))
<div class="error">
{{ $errors->first('email') }}
</div>
@endif
</div>
<div class="form-group">
<label for="mobile">Mobile</label>
<input type="number" class="form-control" name="mobile"
value="{{$user->mobile}}" id="mobile"
placeholder="Enter Phone">
@if ($errors->has('mobile'))
<div class="error">
{{ $errors->first('mobile') }}
</div>
@endif
</div>
<div class="form-group">
<label for="image">Profile image</label>
<input type="file" class="form-control" name="image" id="image">
@if ($errors->has('image'))
<div class="error">
{{ $errors->first('image') }}
</div>
@endif
</div>
<div class="form-group">
<img src="{{ !empty($user->profile_pics) ? $user->profile_pics : '' }}"
alt="profile" style="width:100px;" class="border" >
</div>
<div class="float-right">
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
<div class="row px-5 py-3">
<div class="col-md-12 px-3">
<h6 class="card-title">Change Password</h6>
<form action="{{ asset('change-password/') }}" method="post">
@csrf
<input type="hidden" value="{{$user->id}}" name="admin_id">
<div class="form-group">
<label for="new_password">New Password</label>
<input type="password" class="form-control" name="new_password" value=""
id="new_password" placeholder="New password">
@if ($errors->has('new_password'))
<div class="error">
{{ $errors->first('new_password') }}
</div>
@endif
</div>
<div class="form-group">
<label for="confirm_password">Confirm Password</label>
<input type="password" class="form-control" name="confirm_password" value=""
id="confirm_password" placeholder="Retype password">
@if ($errors->has('confirm_password'))
<div class="error">
{{ $errors->first('confirm_password') }}
</div>
@endif
</div>
<div class="float-right">
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
<div class="section shadow-sm bg-white" id="notification-settings">
<form action="{{asset('notification-settings')}}" method="post" enctype="multipart/form-data">
@csrf
<div class="px-4" style="border-left:2px solid green;">
<h3>Notification Settings</h3>
</div>
<hr>
<div class="row px-5 py-3">
<div class="col-md-12 px-3">
<div class="form-group">
<label>Secret Key</label>
<input type="text" name="secret_key" value="{{$notification->secret_key ? $notification->secret_key : '' }}" class="form-control">
</div>
</div>
<div class="col-md-12 px-3">
<div class="form-group">
<label>Secret Id</label>
<input type="text" name="secret_id" value="{{$notification->secret_id ? $notification->secret_id : ''}}" class="form-control">
</div>
</div>
<div class="col-md-12 px-3">
<div class="form-group">
<label>Provider Name</label>
<input type="text" name="provider_name" value="{{$notification->provider_name ? $notification->provider_name : ''}}" class="form-control">
</div>
</div>
<div class="col-md-12 ">
<div class="form-group d-flex justify-content-end">
<button class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
</form>
</div>
<div class="section shadow-sm bg-white" id="system-settings">
<form action="{{asset('system-settings')}}" method="post" enctype="multipart/form-data">
@csrf
<div class="px-4" style="border-left:2px solid green;">
<h3>System Settings</h3>
</div>
<hr>
<div class="row px-5 py-3">
<div class="col-md-4 px-3">
<div class="form-group">
<label>Decimal Format</label>
<select class="form-control">
<option value="1">1.0</option>
<option value="2">1.00</option>
<option value="3">1.000</option>
<option value="4">1.0000</option>
<option value="5">1.00000</option>
<option value="6">1.000000</option>
</select>
</div>
</div>
<div class="col-md-4 px-3">
<div class="form-group">
<label>Default Currency</label>
<select class="form-control">
<option value="$">Dollar</option>
<option value="rs">Rupee</option>
</select>
</div>
</div>
<div class="col-md-4 px-3">
<div class="form-group">
<label>Default Timezone</label>
<select class="form-control">
<option value="$">Dollar</option>
<option value="rs">Rupee</option>
</select>
</div>
</div>
</div>
<div class="row px-5 py-3">
<div class="col-md-4 px-3">
<div class="form-group px-2">
<label>Currency Symbol Position</label>
<div class="d-flex justify-content-between">
<label><input type="radio" name="currency_position" class=""> <strong>Pre</strong></label>
<label><input type="radio" name="currency_position" class=""><strong> Post</strong></label>
</div>
</div>
</div>
<div class="col-md-4 px-3">
<div class="form-group">
<label>Date Format</label>
<select class="form-control">
<option value="$">DD/MM/YYYY</option>
<option value="rs">MM/DD/YYYY</option>
<option value="rs">YYYY/MM/DD</option>
</select>
</div>
</div>
<div class="col-md-4 px-3">
<div class="form-group">
<label>Time Format</label>
<select class="form-control">
<option value="$">10:30 PM</option>
<option value="rs">22:30</option>
</select>
</div>
</div>
<div class="col-12 py-3 d-flex justify-content-end">
<button class="btn btn-primary">Save Changes</button>
</div>
</div>
</form>
</div>
<div class="section" id="cookie-settings">
<form action="{{asset('cookie-settings')}}" method="post" enctype="multipart/form-data">
@csrf
<div class="px-4" style="border-left:2px solid green;">
<h3>Cookie Settings</h3>
</div>
<hr>
</form>
</div>
<div class="section" id="storage-settings">
<form action="{{asset('storage-settings')}}" method="post" enctype="multipart/form-data">
@csrf
<div class="px-4" style="border-left:2px solid green;">
<h3>Storage Settings</h3>
</div>
<hr>
</form>
</div>
<div class="section" id="seo-settings">
<h3>SEO Settings</h3>
<p>This is the SEO Settings.</p>
</div>
<div class="section" id="email-settings">
<h3>Email Settings</h3>
<p>This is the email Email Settings.</p>
</div>
<div class="section" id="email-notification-settings">
<h3>Email notification settings</h3>
<p>This is the email section.</p>
</div>
<div class="section" id="recaptcha-settings">
<h3>Recaptcha Settings</h3>
<p>This is the recaptcha settings section.</p>
</div>
<div class="section" id="bank-transfer">
<h3>Bank Transfer</h3>
<p>This is the Bank Transfer</p>
</div>
<div class="section" id="ease-buzz">
<h3>Ease Buzz</h3>
<p>This is the ease buzz.</p>
</div>
<!-- Add more content sections as needed -->
</div>
</div>
</div>
</main>
<!-- end::main content -->
@endsection
@push('footer-script')
<script>
// Highlight the active tab on scroll
$(window).on('load',function(){
$(".settings-sidebar").addClass("animate__animated animate__fadeIn slow");
});
$(window).scroll(function() {
highlightTab();
});
function highlightTab() {
var scrollPosition = $(window).scrollTop();
var sections = $('.section');
//console.log(scrollPosition);
sections.each(function(){
var top = $(this).offset().top;
var bottom = top + $(this).outerHeight();
if (scrollPosition+150 >= top && scrollPosition < bottom) {
var sectionId = $(this).attr('id');
$('#settings-tabs a li').removeClass('tab-active');
$('#settings-tabs a[href="#' + sectionId + '"] li').addClass('tab-active');
}
});
}
// Highlight the active tab on page load
highlightTab();
$(document).ready(function() {
// Smooth scrolling for sidebar links
$('.settings-sidebar a').on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 600, function(){
window.location.hash = hash;
});
}
});
//brand settings code
$(".color-btn").click(function(){
var color = $(this).attr("color");
var bg = "#"+color;
$(".color-box").val(bg);
$('button, .tab-active').css('background-color',bg);
});
$(".color-box").on("change",function(){
var color = $(this).val();
var bg = color;
$('button, .tab-active').css('background-color',bg);
});
$(".sidebar-layout[type='checkbox']").on("change",function(){
if($(this).is(':checked'))
{
$(".sidebar-layout").val("on");
$(".side-menu").addClass("shadow-lg");
}
else
{
$(".sidebar-layout").val("off");
$(".side-menu").removeClass("shadow-lg");
}
});
$(".theme-mode[type='checkbox']").on("change",function(){
if($(this).is(':checked'))
{
$(".theme-mode").val("on");
$("body").addClass("dark-theme");
$("div, nav").addClass("dark-theme");
$("h1,h2,h3,h5,h6,p,span,li,a,i, li a").addClass("dark-text-color");
}
else
{
$(".theme-mode").val("off");
$("body").removeClass("dark-theme");
$("div,nav").removeClass("dark-theme");
$("h1,h2,h3,h5,h6,p,span,li,a,i, li a").removeClass("dark-text-color");
}
});
});
//after clicking color code
let tabs = document.querySelectorAll('.tabs > a li')
tabs.forEach((item,index)=>{
item.addEventListener('click',()=>{
item.classList.remove('tab-active')
tabs.forEach((content)=>{
content.classList.remove('tab-active')
})
tabs[index].classList.add('tab-active')
})
})
//dark log code
$("#dark-logo").on("change",function(){
var file = this.files[0];
var blobURL = URL.createObjectURL(file);
console.log(blobURL);
$(".dark-logo-img").attr("src",blobURL);
});
//light log code
$("#light-logo").on("change",function(){
var file = this.files[0];
var blobURL = URL.createObjectURL(file);
console.log(blobURL);
$(".light-logo-img").attr("src",blobURL);
});
//light log code
$("#favicon").on("change",function(){
var file = this.files[0];
var blobURL = URL.createObjectURL(file);
console.log(blobURL);
$(".favicon-img").attr("src",blobURL);
});
</script>
@endpush