@extends("layouts.master")
@section("content")
<style>
  .min-with-150{
    min-width: 150px !important;
  }
</style>
<style>

	/* .container {
		width: 70%;
		min-width: 50%;
		margin: auto;
		display: flex;
		flex-direction: column;
	} */

	/* .kanban-heading {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-family: sans-serif;
	} */

	/* .kanban-board {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-family: sans-serif;
	} */

	.kanban-heading-text {
		font-size: 1.8rem;
		background-color: tomato;
		padding: 0.8rem 1.7rem;
		border-radius: 0.5rem;
		margin: 1rem;
	}

	.kanban-block,
	.create-new-task-block {
		padding: 10px;
		/* width: 30.5%; */
		min-width: 300px;
		min-height: 4.5px;
		border: 2px solid rgb(73, 132, 167);
		border-radius: 5px;
		margin-top: 30px;
		max-height: 65vh;
		margin-bottom: 05px;
	}

	#Qualification {
		background-color: #F45720;
	}

	#Proposal {
		background-color: #F47929;
		/* display: none; */
	}

	#Evaluation {
		background-color: #F48B29;
		/* display: none; */
	}

	#Negotiation {
		background-color: #EEAD24;
		/* display: none; */
	}

	#close_lost {
		background-color: #EEE124;
		/* display: none; */
	}

	#close_won {
		background-color: #5EE523;
		/* display: none; */
	}

	.task {
		background-color: white;
		margin: 0.2rem 0rem 0.3rem 0rem;
		border: 0.1rem solid black;
		border-radius: 0.2rem;
		/* padding: 0.5rem 0.2rem 0.5rem 2rem; */
		padding: 0.5rem 0.2rem 0.5rem 0.5rem;
	}

	#task-button {
		margin: 0.2rem 0rem 0.1rem 0rem;
		background-color: white;
		border-radius: 0.2rem;
		width: 100%;
		border: 0.25rem solid black;
		padding: 0.5rem 2.7rem;
		border-radius: 0.3rem;
		font-size: 1rem;
	}

	/*.create-new-task-block {
		display: none;*/
		/* display: flex; */
		/*background: #ffaf00;
		width: 64.4%;
		flex-direction: column;
	}*/

	/* .form-row {
		display: flex;
		flex-direction: row;
		margin: 0.2rem;
	} */

	.form-row-label {
		width: 15%;
		padding: 0.2rem;
		padding-right: 0.5rem;
		border: 0.1rem solid black;
		border-right: 0;
		border-radius: 0.2rem 0rem 0rem 0.2rem;
	}

	.form-row-input {
		border: 0.1rem solid black;
		border-radius: 0rem 0.2rem 0.2rem 0rem;
		width: 85%;
	}

	textarea {
		resize: none;
	}

	/* .form-row-buttons {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0.2rem;
	} */

	/* #edit-button,
	#save-button,
	#cancel-button {
		margin: 0.2rem 0rem 0.1rem 0rem;
		background-color: white;
		border-radius: 0.2rem;
		width: 49.2%;
		border: 0.25rem solid black;
		padding: 0.5rem 2.7rem;
		border-radius: 0.3rem;
		font-size: 1rem;
	} */

	#edit-button {
		display: none;
	}

</style>
<style>
	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	  /* display: none; */
	}
	
	/* Track */
	::-webkit-scrollbar-track {
	  background: #f1f1f1; 
	  /* display: none; */
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #888; 
	  /* display: none; */
	}
	
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #555; 
	  /* display: none; */
	}

	/* Hide scrollbar for Chrome, Safari and Opera */
	.kanban-parent::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	.kanban-parent {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}

	.flex-container {
		display: flex;
		flex-wrap: nowrap;
		overflow-x:scroll !important; 
	}
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      {{-- <div class="container-fluid"> --}}
        <div class="row mb-2">
			<div class="col-sm-6">
				<h4>{{__("application.opportunities")}}</h4>
			</div>
			<div class="col-sm-6">
				<ol class="breadcrumb float-sm-right">
					<li class="breadcrumb-item"><a href="{{route('home')}}">{{__("application.Dashboard")}}</a></li>
					<li class="breadcrumb-item">{{__("application.crm")}}</li>
					<li class="breadcrumb-item active">{{__("application.opportunities")}}</li>
				</ol>
			</div>
        </div>
      {{-- </div> --}}
      <!-- /.container-fluid -->
    </section>
    <!-- Main content -->
    <section class="content">
		<div class="row">
			<div class="col-12">
				<div class="card" style="height: 100%;">
					<div class="card-header">
						<div class="pull-left" style="float: left;">
							@if(permission_check(387,3))
								<a class="btn btn-sm btn-success" href="{{ route('opportunities.create') }}">{{__("application.Create New")}}</a>
								<a class="btn btn-sm btn-default" href="{{ route('opportunities.create_new_for_exsting_customer') }}">{{__("application.create_new_for_exsting_customer")}}</a>
							@endif
						</div>
						<div class="pull-right" style="float: right;">
							<a class="btn btn-sm btn-default" href="{{ route('opportunities.index') }}" title = "view as list"><i class="fas fa-list-ul"></i></a>
							<a class="btn btn-sm btn-default" href="{{ route('opportunities.kanban_view') }}" title="view as kanban"><i class="fab fa-windows"></i></a>
						</div>
					</div>
					<!-- /.card-header -->
					<div class="card-body kanban-board">
						<div class="row flex-container">
							@foreach ($data as $key=>$value)
								@foreach ( $value as $key_name=>$piples )
								@if($key_name!="color" && $key_name != "total_expected_revenue")
								<div style="margin-left: 10px;">
									<div class="kanban-block" data-stage_id = "{{ $key }}" style="max-height: 70vh;background-color: {{ $value['color'] }}" ondrop="drop(event)" ondragover="allowDrop(event)" total_expected="{{ !empty($value['total_expected_revenue'])?$value['total_expected_revenue']:"0" }}" id="{{ preg_replace("/[^a-zA-Z0-9]+/", "",$key_name) }}">
										<strong style="margin-bottom:50px;">{{ $key_name }} [ $<span class="total_expected">{{ number_format($value['total_expected_revenue'],2) }}</span> ]</strong>
										<div style="overflow-y: scroll;max-height: 80%;" class="kanban-parent">
											@foreach ($piples as $piple)
											@if(!empty($piple->id))
											<div class="task" id="task-{{ $piple->id }}" data_expected = "{{ $piple->expected_revenue }}" data_id = "{{ $piple->id }}" data_parent_name = "{{ preg_replace("/[^a-zA-Z0-9]+/", "",$key_name) }}" draggable="true" ondragstart="drag(event)" style="text-align: left !important;">
												<span class="text-left">
													{{ $piple->name }}<br>
													<ul style="font-size: 80%;padding-left:16px;">
														<li>{{ __("application.Customer") }} : {{ $piple->customer_name }}</li>
														<li>{{ __("application.expected") }} : ${{ number_format($piple->expected_revenue,2) }}</li>
													</ul>
												</span>
											</div>
											@endif
											@endforeach
										</div>
									</div>
								</div>
								@endif
								@endforeach
							@endforeach
						</div>
					</div>
					<!-- /.card-body -->
				</div>
				<!-- /.card -->
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->
	</section>
	<br><br>
    <!-- /.content -->
</div>
  <!-- /.content-wrapper -->
@endsection
@section('js')
<script>
	
	function drag(ev) {
		ev.dataTransfer.setData("text", ev.target.id);
		ev.dataTransfer.setData("data_id", ev.target.getAttribute("data_id"));
		ev.dataTransfer.setData("old_stage", $(ev.target).closest("div.kanban-block"));
		ev.dataTransfer.setData("data_parent_name", ev.target.getAttribute("data_parent_name"));
	}

	function allowDrop(ev) {
		ev.preventDefault();
		// console.log(2);
	}

	function drop(ev) {
		ev.preventDefault();
		// console.log(3);
		var data = ev.dataTransfer.getData("text");
		// ev.currentTarget.appendChild(document.getElementById(data));
		$(ev.currentTarget).closest("div.kanban-block").find(".kanban-parent").append(document.getElementById(data));
		let stage_id = $(ev.currentTarget).closest("div.kanban-block").attr("data-stage_id");
		let piple_id = ev.dataTransfer.getData("data_id");

		let route = "{{ route('opportunities.update_stage') }}";
		$(".main-spinner").show();
		$.ajax({
			type: "POST",
			url: route,
			async: false,
			data: {
				'_token':"{{ csrf_token() }}",
				piple_id:piple_id,
				stage_id:stage_id
			},
			dataType: "JSON",
			success: function (data) {
				//New
				let new_target = $(ev.currentTarget).closest("div.kanban-block").attr("id");
				

				let new_otal = 0;
				$("#"+new_target).find(".task").each(function(index,value){
					new_otal += Number($(this).attr("data_expected"));
					$(this).attr("data_parent_name",new_target);
				});
				$("#"+new_target).attr("total_expected",new_otal);
				$("#"+new_target).find("span.total_expected").text(new_otal.toFixed(2))

				//Old target

				let old_target = ev.dataTransfer.getData("data_parent_name");

				let total = 0;
				$("#"+old_target).find(".task").each(function(index,value){
					total += Number($(this).attr("data_expected"));
				});
				$("#"+old_target).attr("total_expected",total);
				$("#"+old_target).find("span.total_expected").text(total.toFixed(2));

				
				
				console.log(total);

				toastr.success(data.message);
			},
			complete:function(){
				$(".main-spinner").hide();
			}
		});
	}

	/*function createTask(){
		var x = document.getElementById("Proposal");
		var y = document.getElementById("close_won");
		var z = document.getElementById("create-new-task-block");
		if (x.style.display === "none") {
			x.style.display = "block";
			y.style.display = "block";
			z.style.display = "none";
		} else {
			x.style.display = "none";
			y.style.display = "none";
			z.style.display = "flex";
		}
	}*/

	/*function saveTask(){
		// var saveButton = document.getElementById("save-button");
		// var editButton = document.getElementById("edit-button");
		// if (saveButton.style.display === "none") {
		//     saveButton.style.display = "block";
		//     editButton.style.display = "none";
		// } else{
		//     saveButton.style.display = "none";
		//     editButton.style.display = "block";
		// }

		var Qualification = document.getElementById("Qualification");
		var taskName = document.getElementById("task-name").value;
		Qualification.innerHTML += `
		<div class="task" id="${taskName.toLowerCase().split(" ").join("")}" draggable="true" ondragstart="drag(event)">
			<span>${taskName}</span>
		</div>
		`
	}*/

	/*function editTask(){
		var saveButton = document.getElementById("save-button");
		var editButton = document.getElementById("edit-button");
		if (saveButton.style.display === "none") {
			saveButton.style.display = "block";
			editButton.style.display = "none";
		} else{
			saveButton.style.display = "none";
			editButton.style.display = "block";
		}
	}*/
</script>
@endsection