@extends('layouts.app')
@php
	Fun::lang();
@endphp
@section('style')
	<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>
@endsection
@section('main')
    <!-- Content Wrapper. Contains page 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;">
							<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>
						</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>
    <!-- /.content-wrapper -->
	
@endsection
@section('script')
	<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