|
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/leadai.co.in/resources/views/contacts/ |
Upload File : |
@extends('layout')
@section('content')
<!-- begin::main content -->
<style>
/* Styles for tabs */
.tab {
display: inline-block;
padding: 12px 26px;
cursor: pointer;
background-color: #E6EAED;
margin-right: -4px; /* Remove spacing between tabs */
}
/* Style for highlighted tab */
.tab.active {
background-color: white;
}
/* Content area style */
.tab-content {
padding: 20px;
border-radius: 0 0 5px 5px;
display: none; /* Hide all content areas by default */
}
/* Show active content area */
.tab-content.active {
display: block;
}
.form-group {
margin-bottom: 1rem;
margin-bottom: 30px !important;
}
.form-group input, .form-group select{
height:42px;
padding-top:10px 25px !important;
}
.form-group label, .tab{
font-size:13px !important;
}
.company-save-btn{
position:fixed;
bottom:0;left:250px;
background-color:white;
border-top:1px solid #ccc;
}
@media only screen and (max-width: 768px) {
.company-save-btn{
position:fixed;
bottom:0;left:0px;
background-color:white;
border-top:1px solid #ccc;
}
}
</style>
<main class="main-content">
<div class="container">
<!-- begin::page header -->
<div class="page-header border-0">
<h3> {{__('message.teams')}} {{__('message.view')}}</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{__('message.dashboard')}}</a></li>
<li class="breadcrumb-item" aria-current="page"><a href="{{ asset('users') }}">{{__('message.users')}}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{__('message.add')}}</li>
</ol>
</nav>
</div>
<!-- end::page header -->
<div class="row">
<div class="col-md-12">
<x-flashMessage />
<div class="card">
<div class="card-body py-0">
<form action="{{ asset('add-users') }}" method="post">
<div class="row">
<div class="col-md-6 py-3 pt-5">
@csrf
<div class="form-group d-flex justify-content-between align-items-center ">
<label for="name" class="col-md-4"> {{__('message.name')}}</label>
<div class="col-md-8 px-0">
<input type="text" class="form-control" name="name" id="name" value="{{$users->name}}" readonly>
@if ($errors->has('name'))
<div class="error">
{{ $errors->first('name') }}
</div>
@endif
</div>
</div>
<div class="form-group d-flex justify-content-between align-items-center">
<label for="email" class="col-md-4">{{__('message.email')}} </label>
<div class="col-md-8 px-0">
<input type="email" class="form-control" name="email" value="{{$users->email}}" readonly>
@if ($errors->has('email'))
<div class="error">
{{ $errors->first('email') }}
</div>
@endif
</div>
</div>
<div class="form-group d-flex justify-content-between align-items-center">
<label for="phone" class="col-md-4">{{__('message.phone')}} </label>
<div class="col-md-8 px-0">
<input type="number" class="form-control " name="mobile" id="mobile" value="{{$users->mobile}}" readonly>
@if ($errors->has('mobile'))
<div class="error">
{{ $errors->first('mobile') }}
</div>
@endif
</div>
</div>
<div class="form-group d-flex justify-content-between align-items-center">
<label for="designation" class="col-md-4">{{__('message.designation')}}</label>
<div class="col-md-8 px-0">
<input type="text" class="form-control" name="designation" id="designation" value="{{$users->designation}}" readonly>
@if ($errors->has('designation'))
<div class="error">
{{ $errors->first('designation') }}
</div>
@endif
</div>
</div>
<div class="form-group d-flex justify-content-between align-items-center">
<label for="department" class="col-md-4">{{__('message.department')}}</label>
<div class="col-md-8 px-0">
<input type="text" class="form-control" name="department" id="department" value="{{$users->department}}" readonly>
@if ($errors->has('department'))
<div class="error">
{{ $errors->first('department') }}
</div>
@endif
</div>
</div>
</div>
<div class="col-md-6 border-left px-0">
<!-- Tabs -->
<div id="tabs" class="border-bottom">
<div class="tab active" onclick="openTab('tab1')">
<strong> {{__('message.address')}}</strong>
</div>
</div>
<!-- Tab content -->
<div class="tab-content active" id="tab1">
<div class="form-group d-flex justify-content-between align-items-center">
<label for="location_address" class="col-md-4"> {{__('message.address')}}</label>
<div class="col-md-8 px-0">
<input class="form-control" name="address" id="address" value="{{$users->address}}" readonly>
@if ($errors->has('location_address'))
<div class="error">
{{ $errors->first('location_address') }}
</div>
@endif
</div>
</div>
<div class="form-group d-flex">
<label for="location_city" class="col-md-4">{{__('message.city')}}</label>
<div class="col-md-8 px-0">
<div class="d-flex flex-column p-0" style="position:relative;">
<input type="search" readonly class="form-control text-capitalize location_city" name="city" id="location_city" placeholder="Select City" value="{{$users->city}}" >
<div class="main-add-city-box bg-white border mb-2 d-none" style="width:100%;position:absolute;top:40px;z-index:50">
<div class="add-search-city-box d-none mb-2 px-2 pt-2"></div>
<div class="location_city_search_box d-none px-2 "></div>
</div>
</div>
@if ($errors->has('city'))
<div class="error">
{{ $errors->first('city') }}
</div>
@endif
</div>
</div>
<div class="form-group d-flex justify-content-between align-items-center">
<label for="location_country" class="col-md-4">{{__('message.country')}}</label>
<div class="col-md-8 px-0">
<select disabled class="form-control " name="country" id="location_country">
<option selected disabled>--Select--</option>
@foreach($country as $cnt)
<option value="{{$cnt->id}}" {{$users->country == $cnt->id ? 'selected' : ''}}>{{$cnt->name}}</option>
@endforeach
</select>
@if ($errors->has('country'))
<div class="error">
{{ $errors->first('country') }}
</div>
@endif
</div>
</div>
<div class="form-group d-flex justify-content-between align-items-center">
<label for="location_state" class="col-md-4">{{__('message.state')}}</label>
<div class="col-md-8 px-0">
<select class="form-control " disabled name="state" id="location_state">
<option>{{$users->state_name ? $users->state_name->state_name : ''}}</option>
</select>
@if ($errors->has('state'))
<div class="error">
{{ $errors->first('state') }}
</div>
@endif
</div>
</div>
<div class="form-group d-flex justify-content-between align-items-center">
<label for="pincode" class="col-md-4">{{__('message.pincode')}}</label>
<div class="col-md-8 px-0">
<input type="text" class="form-control" name="pincode" id="pincode" readonly value="{{$users->pincode}}" >
@if ($errors->has('pincode'))
<div class="error">
{{ $errors->first('pincode') }}
</div>
@endif
</div>
</div>
</div>
</div>
</div>
<div class="py-5" style="z-index:50;position:absolute" >
<div class="py-3 px-5 w-100 company-save-btn " >
<button type="submit" class="btn btn-success-lux"><i class="fa fa-check"></i>  {{__('message.save')}}</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- end::main content -->
@endsection
@push('footer-script')
<!-- begin::select2 -->
<link rel="stylesheet" href="{{ asset('public/admin/vendors/select2/css/select2.min.css') }}" type="text/css">
<script src="{{ asset('public/admin/vendors/select2/js/select2.min.js') }}"></script>
<!-- end::select2 -->
<script>
$(document).ready(function() {
$('#js-example-basic-roles').select2({});
});
$("#billing_country").on("change",function(){
var company_id = $(this).val();
stateFetch(company_id,"billing_state");
});
$("#location_country").on("change",function(){
var company_id = $(this).val();
stateFetch(company_id,"location_state");
});
function stateFetch(company_id,appendState)
{
$.ajax({
type: "post",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
"id": company_id
},
url: "{{asset('fetch-state')}}",
dataType: "html",
success: function(result)
{
$("#"+appendState).html("");
var allData = JSON.parse(result);
if(allData.message=="success")
{
var data = allData.data;
var i;
var dOption = "<option selected disabled>--Select--</option>";
$("#"+appendState).append(dOption);
for(i=0;i<data.length;i++)
{
var option = `<option value="${data[i].id}">
${data[i].state_name}
</option>
`;
$("#"+appendState).append(option);
}
}
else
{
console.log("failed");
}
},
error:function(xhr,error,status)
{
console.log(JSON.parse(xhr.responseText));
}
});
}
//location city code
$("#location_city").on("click",function(){
//var search = $(this).val();
$(".location_city_search_box").html("");
$(".main-add-city-box").removeClass("d-none");
$(".add-search-city-box").removeClass("d-none");
var typed_city = `
<input disabled type="search" class='form-control border search-city-val'
style='list-style:none;cursor:pointer'>`;
$(".add-search-city-box").html(typed_city);
$(".search-city-val").on('input',function(){
$(".location_city_search_box").removeClass("d-none");
var search = $(this).val();
$.ajax({
type: "post",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
"search": search
},
url: "{{asset('search-city')}}",
dataType: "html",
success: function(result)
{
$(".location_city_search_box").html("");
var allData = JSON.parse(result);
if(allData.message=="success")
{
//$(".location_city_search_box").removeClass('d-none');
var data = allData.data;
console.log(data);
var i;
var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
Add  "${search}"...</li>`;
$(".location_city_search_box").append(new_li);
for(i=0;i<data.length;i++)
{
var li = `<li class='text-capitalize rounded city_name_li bg-dark text-white p-2 mb-2' city='${data[i].city_name}' style='list-style:none;cursor:pointer'>
${data[i].city_name}</li>`;
$(".location_city_search_box").append(li);
}
$(".city_name_li").click(function(){
var city = $(this).attr('city');
console.log(city);
$("#location_city").val(city);
$(".location_city_search_box").addClass('d-none');
$(".main-add-city-box").addClass("d-none");
$(".add-search-city-box").addClass("d-none");
});
}
else
{
console.log("failed");
var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
Add  "${search}"...</li>`;
$(".location_city_search_box").append(new_li);
}
$(".new_city_add_btn").click(function(){
var city = $(this).attr('addcity');
var loc_city = $("#location_city").val(city);
// alert(loc_city);
//var city_name = $("#b_city_name").val();
addCity(city,"main-add-city-box","location_city");
});
},
error:function(xhr,error,status)
{
console.log(JSON.parse(xhr.responseText));
var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
Add  "${search}"...</li>`;
$(".location_city_search_box").append(new_li);
}
});
});
});
//city code
$("#billing_city").on("click",function(){
//var search = $(this).val();
$(".billing_city_search_box").html("");
$(".billing-main-add-city-box").removeClass("d-none");
$(".billing-add-search-city-box").removeClass("d-none");
var typed_city = `
<input disabled type="search" class='form-control border search-city-val'
style='list-style:none;cursor:pointer'>`;
$(".billing-add-search-city-box").html(typed_city);
$(".search-city-val").on('input',function(){
$(".billing_city_search_box").removeClass("d-none");
var search = $(this).val();
$.ajax({
type: "post",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
"search": search
},
url: "{{asset('search-city')}}",
dataType: "html",
success: function(result)
{
$(".billing_city_search_box").html("");
var allData = JSON.parse(result);
if(allData.message=="success")
{
//$(".location_city_search_box").removeClass('d-none');
var data = allData.data;
console.log(data);
var i;
var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
Add  "${search}"...</li>`;
$(".billing_city_search_box").append(new_li);
for(i=0;i<data.length;i++)
{
var li = `<li class='text-capitalize rounded city_name_li bg-dark text-white p-2 mb-2' city='${data[i].city_name}' style='list-style:none;cursor:pointer'>
${data[i].city_name}</li>`;
$(".billing_city_search_box").append(li);
}
$(".city_name_li").click(function(){
var city = $(this).attr('city');
console.log(city);
$("#billing_city").val(city);
$(".billing_city_search_box").addClass('d-none');
$(".billing-main-add-city-box").addClass("d-none");
$(".billing-add-search-city-box").addClass("d-none");
});
}
else
{
console.log("failed");
var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
Add  "${search}"...</li>`;
$(".billing_city_search_box").append(new_li);
}
$(".new_city_add_btn").click(function(){
var city = $(this).attr('addcity');
var loc_city = $("#billing_city").val(city);
// alert(loc_city);
//var city_name = $("#b_city_name").val();
addCity(city,"billing-main-add-city-box","billing_city");
});
},
error:function(xhr,error,status)
{
console.log(JSON.parse(xhr.responseText));
var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
Add  "${search}"...</li>`;
$(".location_city_search_box").append(new_li);
}
});
});
});
$(".location-add-city-btn").click(function(){
if($(".location-add-city-box").hasClass("d-none"))
{
$(".location-add-city-box").removeClass("d-none");
$(".location-add-city-box").removeClass("animate__animated animate__fadeOut");
$(".location-add-city-box").addClass("animate__animated animate__bounceInRight");
$(".location-add-city-box i").removeClass("fa-plus");
$(".location-add-city-box i").addClass("fa-minus");
}
else
{
$(".location-add-city-box").removeClass("animate__animated animate__bounceInRight")
$(".location-add-city-box").addClass("animate__animated animate__fadeOut");
$(".location-add-city-box").addClass("d-none");
$(".location-add-city-box i").removeClass("fa-minus");
$(".location-add-city-box i").addClass("fa-plus");
}
});
$(".l-city-form-btn").click(function(){
var city_name = $("#l_city_name").val();
addCity(city_name,"location-add-city-box","location_city");
});
function addCity(city_name,cityformBox,city_input)
{
$.ajax({
type: "post",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
"city_name": city_name
},
url: "{{asset('add-city')}}",
dataType: "html",
success: function(result)
{
console.log(result);
var allData = JSON.parse(result);
if(allData.message=="success")
{
$("."+cityformBox).addClass("d-none");
$("."+city_input).val(allData.data);
}
else
{
//console.log("failed");
}
},
error:function(xhr,error,status)
{
console.log(JSON.parse(xhr.responseText));
}
});
}
function openTab(tabId) {
// Get all tabs and hide them
var tabs = document.querySelectorAll('.tab-content');
tabs.forEach(function(tab) {
tab.classList.remove('active');
});
// Remove active class from all tabs
var tabButtons = document.querySelectorAll('.tab');
tabButtons.forEach(function(button) {
button.classList.remove('active');
});
// Show the clicked tab and add active class
document.getElementById(tabId).classList.add('active');
document.querySelector('[onclick="openTab(\'' + tabId + '\')"]').classList.add('active');
}
$(".billing-btn-toggle").click(function(){
if($(".billing-address-main").hasClass('d-none'))
{
$(".billing-address-main").removeClass("d-none");
}
else
{
$(".billing-address-main").addClass("d-none");
}
});
</script>
@endpush