@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('bootstrap-select/css/bootstrap-select.min.css') }}
{{ HTML::style('WebPro/plugins/dropzone/dropzone.css') }}
{{ HTML::style('croppie/css/croppie.min.css') }}
{{ HTML::style('Intl-Tel-Input/17.0.3/css/intlTelInput.min.css') }}
{{ HTML::style('Intl-Tel-Input/17.0.3/css/intlTelInput.min.css') }}
{{ HTML::style('Perfect-Scrollbar/css/perfect-scrollbar.css') }}

<style type="text/css">
	.mdAvatar .modal-dialog .modal-content .modal-header,
	.color-head-modal .modal-dialog .modal-content .modal-header {
		background-color: #363B3F;
	}
	#modal {
		z-index:100;
		background: white;
		text-align: center;
	}
	.intl-tel-input {
		height: 34px !important;
		width: 100%;
	}
	.intl-tel-input.allow-dropdown input, .intl-tel-input.allow-dropdown input[type="text"], .intl-tel-input.allow-dropdown input[type="tel"] {
		padding-right: 6px !important;
		padding-left: 52px !important;
		margin-left: 0;
	}
	.nav-tabs > li > a:hover {
		color: #505458;
	}
	.nav-tabs > li > a:hover > .fa {
		color: #505458;
	}
	a {
		text-decoration: none;
		color: #424a4d;
	}
	a:hover{
		text-decoration: none;
		color: #424a4d;
	}
	.control-label{
		text-align: right;
	}
	.padding-left {
		padding-left: 0px;
	}
	.padding-rigth {
		padding-right: 0px;
	}
	.footer{
		text-align: center;
		margin-top: 25px; 	
	}
	.footer a{
		width: 85%;
	}
	.fa-facebook-square{
		color: #1a5b8e;
		font-size: 20px;
	} 
	.fa-linkedin-square{
		color: #1876c2;
		font-size: 20px;
	}
 	.fa-instagram{
		color: #ffffff;
	}
	.fa-twitter-square{
		color: #1ab2e8;
		font-size: 20px;
	}
 	.fa-pinterest-square{
		color: #cb2027;
		font-size: 20px;
	}
	.instagram {
		display: inline-block;
		width: 20px;
		height: 20px;
		text-align: center;
		border-radius: 5px;
		color: #fff;
		font-size: 16px;
		line-height: 20px;
		background: #d6249f;
		background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
		box-shadow: 0px 1px 5px rgba(0,0,0,.25);
	}
	.icono-historia.fa-user{
		font-size: 60px;
	}
	.icono-historia.fa-shopping-cart{
		font-size: 55px;
	}
	.informacion-compra{
		padding: 5px;
		border: 1px solid #56be22;
		margin-bottom: 15px;
		border-radius: 10px;
	}
	.monto {
		font-size: 18px
	}
	.total{
		font-size: 25px;
		color: #56be22;
	}
	.tab-content, #actividades{
		min-height: 600px;
	}
	.tab-content{
		padding: 5px
	}
	.align-middle {
		display: inline-block;
		vertical-align: middle;
		float: none;
	}
	.timeline{
		background-color: #f3f3f3;
	}
	.timeline-item.alt  .panel-body{
		text-align:right;
	}
	.opacidad.activa{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.timeline .timeline-icon.green {
		background: none repeat scroll 0 0 #56be22;
	}
	.timeline .timeline-icon.blue {
		background: none repeat scroll 0 0 #00a0ef;
	}
	.timeline .timeline-icon.sky-blue {
		background: none repeat scroll 0 0 #67D4FE;
	}
	.timeline .timeline-icon.yellow {
		background: none repeat scroll 0 0 #f7cf53;
	}
	.timeline .timeline-icon.blue-s {
		background: none repeat scroll 0 0 #39b3d7;
	}
	.timeline-desk .panel {
		margin: 15px !important;
	}
	.isloading-overlay > .isloading-wrapper {
		display: inline-block;
		position: relative !important;
		height: auto !important;
		top: 45% !important;
	}
	/*.act.active .tab-content  .isloading-overlay {
		display: none !important;
	}*/
	.isloading-overlay {
		left: 0px !important;	
	}
	.tab-content .tab-pane {
		padding: 5px;
	}
	#actividades {
		padding: 7px;
	}
	#historias {
		padding: 30px;
	}
	.historias-compras .isloading-overlay{
		position: inherit;
	}
	.footer > div {
		padding: 0px;
	}
	.table {
		table-layout:fixed;
		width:100%;
	}
	.btn {
		white-space: normal;
	}
	.padding-left h3{
		font-size: 1.4vw;
	}
	.padding-right h3{
		font-size: 1.4vw;
	}
	.table>thead>tr>th, .table>tbody>tr>td {
		font-size: 0.7vw;
	}
	.table>tbody>tr>td {
		font-size: 0.7vw;
	}
	@media only screen and (min-width: 770px) and (max-width: 1050px ){
		.avatar{
			height: unset !important;
			width: 100% !important;
		}
		.monto {
			font-size: 15px;
		}
		.total {
			font-size: 15px;
		}
		.table>thead>tr>th, .table>tbody>tr>td {
			font-size: 0.7vw;
			padding: 8px 0px;
		}
		.table>tbody>tr>td {
			font-size: 0.7vw;
			padding: 8px 0px;
		}
		.padding-left h3{
			font-size: 3vh;
		}
		.padding-right h3{
			font-size: 3vh;
		}
		.user-profile-sidebar .control-label + div, .user-profile-sidebar .control-label{
			font-size: 12px;
		}
		.contenedor-icono {
			font-size: 11px;
		}
		.timeline p{
			font-size: 12px !important;
		}
		.timeline .panel-body{
			font-size: 12px !important;
		}
		.footer .btn{
			font-size: 10px !important;
		}
	}
	.timeline li {
		list-style:none
	}
	.Asignar .modal-dialog .modal-content .modal-header {
		background-color: #363B3F;
	}
	.Asignar .modal-dialog .modal-content .modal-header .bootstrap-dialog-close-button{
		display: block !important;
	}
	.bootstrap-select .btn {
		white-space: nowrap;
	}
	.bootstrap-select .status{
		padding-left: 10px;
	}
	.tab-content {
		margin-bottom: 15px;
	}
	.informacion-compra {
		border: 1px solid #56be22;
	}
	.informacion-compra.pendiente {
		border: 1px solid #ffd12c;
	}
	.informacion-compra.cotizado {
		border: 1px solid #88d2f5;
	}
	.informacion-compra.rechazado {
		border: 1px solid #e49191;
	}
	.timeline-item:not(.alt) .timeline-desk {
		height: 70%;
	}
</style>
@stop


@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2> <i class="fa fa-users"></i> Gestión de prospectos </h2>
	</div><!--/col-md-12--> 
</div><!--/row-->

<div class="row col-iguales">
	<div class="col-md-4 column">
		<div class="block-web alto">
			<div class="user-profile-sidebar">
				<div class="row">
					<div class="form-group col-md-12 col-md-12">
						<div class="col-md-5 text-center">
							@if($ClienteCRM->avatar != '' && $ClienteCRM->avatar != null)
								<a href="{{ URL::route('SysWebGClientesClientesEditar', array($ClienteCRM->id)) }}?image=true" class="lNP"><img alt="Avatar" class="avatar" src="{{ $ClienteCRM->avatar }}" style="height: 140px; width: 150px; object-fit: contain;" id=""></a>
							@else
								<a href="{{ URL::route('SysWebGClientesClientesEditar', array($ClienteCRM->id)) }}?image=true" class="lNP"><img alt="Avatar" class="avatar" src="{{ asset('SysWeb/SumeClientes/Perfil.png') }}" style="height: 140px; width: 150px; object-fit: contain;" id=""></a>
							@endif
						</div>
						<div class="col-md-7">
							<div class="user-identity">
								<h4><strong> {{ $ClienteCRM->nombre_del_contacto }} </strong></h4>
								<p><i class="fa fa-building"></i> {{ $ClienteCRM->nombre_del_cliente_o_empresa }}</p>
							</div>
						</div>
						<div class="col-md-12">
							<div class="col-md-6 padding-left">