@extends('front.inner-layout.app')
@section('content')

<style>
	.tabs-my-client-list .tab-menu ul li {
	    min-width: 190px;
	    min-height: 41px;
	
	    background-color: #b3b3b3;
	    display: inline-block;
	    text-align: center;
	    border-radius: 10px 10px 0px 0px;
	}
	.tabs-my-client-list .tab-menu ul li.active{
	    background-color: #68afb5;
	}
	.tabs-my-client-list .tab-menu ul li a{
	    font-size: 15px;
	    letter-spacing: 0px;
	    line-height: 44px;
	    color: #ffffff;
	    font-family: "Europa";
	    text-align: center;
	}
	.tabs-my-client-list .tab-menu ul {
	    margin: 0;
	    padding: 0;
	    margin-left: 15px;
	}
	.my-client-list-new-v1 table tr td a:hover{
	    color: green;
	}
	.my-client-list-new-v1 table tr td a{
	    color: #24303f;
	}
	.my-client-list-new-v1 table tr td:first-child {
	    min-width: auto;
	}
	.my-client-list-new-v1 .dr-table .table th a {    color: #24303f;}

	#client-list table tr td a:hover {
		color: green;
	}
	#my-team-tab .myteam p {
	    word-break: inherit;
	}

	ul.search_clients_v1_head_icon {
	   padding: 0;
	   margin: 0;
	}
	.search_clients_v1_head_icon li {
	   display: inline-block;
	   vertical-align: middle;
	   margin-right: 10px;
	}
	.display-inline-block {
	   display: inline-block;
	}
	.search-box-btns {
	   padding-left: 40px;
	}
	.search-box-outer{
	   width: 350px;
	   height: 37px;
	   border-radius: 18px;
	   background-color: #ffffff;
	   border: 0.5px solid #969696;
	   overflow: hidden;
	   margin-right: 15px;
	}
	.search_clients_v1_input {
	   width: 87%;
	   height: 35px;
	   outline: none;
	   border: none;
	   padding-left: 20px;
	   padding-top: 0px;
	}
	button.search_clients_v1_btn {
	   background-color: #68afb5;
	   border: none;
	   outline: none;
	   height: 37px;
	   width: 11.8%;
	}
	.search-box-btns {
	    display: flex;
	    flex-wrap: wrap;
	}
	.tab-box .tab-menu {
	    max-width: 998px;
	    width: 100%;
	}
	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a.setting-btn {
		padding: 4px 45px 4px 17px !important;
    	max-width: 170px;
	}
	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a.setting-btn:hover svg path {
		fill:#ffffff;
	}
	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
		display: flex;
    	align-items: center;
		justify-content: center;
		box-shadow: inset 0px 0px 2px rgb(104 175 181);
	}
	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a svg {
	    margin-right: 15px;
	}
	.search-box-outer form {margin-top: -2px;}
	button.search_clients_v1_btn svg {
	    padding-top: 2px;
	}
	/* .search_clients_v1_head_icon li img {
	    max-width: 20px;
	    width: 20px;
	} */
	@media (max-width:767px) {
	   .search_clients_v1_head_icon li {
			margin-right: 15px;
	      min-width: 30px;
	      min-height: 30px;
	      padding-top: 2px;
	   }
	   a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
	    margin-left: 5px !important;
	    padding: 3px 8px !important;
		margin-right: 4px !important;
		margin-right: 15px !important;
		min-width: inherit;
	   }
	   .notes-menu {
		padding: 0;
	   }
	   .search-box-outer {margin-bottom: 10px;}
	   .tabs-my-client-list .tab-menu ul li {
	    min-width: 120px;
	   }

	   .tab-teaser.tabs-my-client-list [class*=col-] {
		padding: 0;
	   }
	   .tabs-my-client-list .tab-menu ul li {
		order:1;
	   }
	   .tabs-my-client-list .tab-menu ul {
	    margin-left: 0px;
		display: flex;
    	flex-wrap: wrap;
		margin: 0 -12px;
	   }
	   .search-box-btns {
	    padding-left: 0px;
	   }
	   a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a.setting-btn {
		padding: 4px 20px 4px 15px !important;
		max-width: 140px;
		margin: 0 !important;
	}

	@media (max-width:400px) {
		.search_clients_v1_head_icon li {
    		margin-right: 1px;
		}
		a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
			margin-right: 4px !important;
		}
	}
	.settlements-link {
		order: 0;
		max-width: 100%;
		flex: 0 0 100%;
		margin-bottom: 10px;
	}

	}

	.my-client-list-new-v1 .dr-table .table-responsive {
	    border-radius: 5px;
	    overflow-y: hidden;
	}
	.my-client-list-new-v1 .table tbody+tbody {
	    border-top: none;
	}
	.client_access_file_toggle_permission_access_some_calendars {
		top: -50px !important;
	    right: 0 !important;

		top: 20px !important;
	    right: 40px !important;
	    z-index: 9;
	}
	.client_access_file_toggle_permission_access_some_calendars.active {
		display: block !important;
	}
	.communication-table .count_tr .d-inline {
	    position: relative;
	}

	.popover-body h5 {
	    font-size: 13px;
	    line-height: 17px;
	    font-weight: 500;
	}
	.popover {
	    font-size: 14px !important;
	    border: 1px solid #ccc !important;
	    background: #fff !important;
	    padding: 10px !important;
	    border-radius: 5px !important;
	    width: 300px !important;
		max-width: 300px;
	}

	.popover .media {
	    padding: 0;
	}

	.popover-body .media img {
	    width: 18px;
	}

	.settlements-link {
		color: #68afb5;
		font-weight: bold;
		margin-left: 10px;
	}
	.settlements-link:hover {
		color: #68afb5;
		font-weight: bold;
	}

	.show-time-duration {
		margin-left: 20px;	
	}
</style>

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper my-income-main">
    <div class="row align-items-center">
		<input type="hidden" name="filter_name" class="filter_name" />
		<input type="hidden" name="filter_age_from" class="filter_age_from" />
		<input type="hidden" name="filter_age_to" class="filter_age_to" />
		<input type="hidden" name="filter_gender" class="filter_gender" />
		<input type="hidden" name="filter_balance" class="filter_balance" />
		{{-- <input type="hidden" name="is_team_member" class="is_team_member" value="{{$is_member}}" /> --}}
		<input type="hidden" name="scroll_value"  value="1"/>
		<input type="hidden" name="sortflag" id="sortflag" value="0">
		<input type="hidden" name="order_by_name" id="order_by_name">
		<input type="hidden" name="short_by_name" id="short_by_name">
        <nav class="navbar w-100">
            <nav class="navbar navbar-light invoice-page-menu notes-menu w-100 my-income-menu">
                <a href="{{ url()->previous() }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
				<a class="navbar-brand p-0 " href="{{ URL::previous() }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
				<h1 class="page-title eagle-font font-400 "><span class="arca-font"><strong>My</strong> </span>Income</h1>
				
				<div class="search-box-btns">
				   <a id="filter-btn" data-toggle="modal" style="margin: unset;" class="btn btn-unfill mb-3 mr-3 ml-auto my-auto my-plan-head-a">Filter  </a>
	   
				   <ul class="filtertop-li 20img search_clients_v1_head_icon display-inline-block">
						<li id="takings_download">
							<button class="income-head-btn">
								<img src="{{ asset("assets/images/download-icon-green.svg") }}" alt="" class="img-fluid">
							</button>
						</li>
						<li id="transactions_download" class="d-none">
							<button class="income-head-btn">
								<img src="{{ asset("assets/images/download-icon-green.svg") }}" alt="" class="img-fluid">
							</button>
						</li>
						<li class="">
							<button class="income-head-btn client-print" data-content="print-test-result-tablenewmy">
								<img src="{{ asset("assets/images/print-icon-green.svg") }}" alt="" class="img-fluid">
							</button>
						</li>
				   </ul>
	
				   <a  href="{{route('practitioner.client.index')}}" id="clear_button" class="btn btn-unfill mb-3 ml-auto my-auto my-plan-head-a d-none" >Clear filter</a>
				   <div class="d-flex justify-content-center align-items-center vh-100 show-time-duration">
					   <h5 style="color: black; font-weight:bolder;" id="show_date_ranges" class="d-none"></h5>
				   </div>
			   </div>
			   
			   @if(!isset($practitioner->parent_id))
				   <a id="settings_btn" href="{{route('practitioner.my_deposits')}}" class="btn btn-unfill mb-3 mr-3 ml-auto my-auto my-plan-head-a float-end setting-btn">
				   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 1467 1467" enable-background="new 0 0 1467 1467" xml:space="preserve">
					   <path fill="#45747a" d="M884.695,378.907c-195.905-83.662-422.542,7.354-506.204,203.259s7.354,422.542,203.259,506.204  s422.542-7.354,506.204-203.259c40.166-94.137,41.345-200.414,3.122-295.384C1053.199,494.688,978.902,418.796,884.695,378.907z   M998.812,846.61c-62.504,146.513-231.909,214.636-378.422,152.132S405.754,766.833,468.258,620.32S700.167,405.685,846.68,468.188  c70.343,30.038,125.909,86.715,154.421,157.682C1029.82,696.837,1028.988,776.268,998.812,846.61L998.812,846.61z"/>
					   <path fill="#45747a" d="M1463.393,543.248l-71.383-177.591c-10.059-24.904-38.293-36.975-63.197-26.916l-104.335,41.97  c-35.657-49.878-78.876-93.929-127.991-130.626l44.121-103.502c10.544-24.627-0.833-53.208-25.46-63.752h-0.139L938.943,7.631  c-24.627-10.614-53.139,0.763-63.752,25.39v0.208l-44.259,103.502c-60.492-10.059-122.163-10.753-182.863-1.942L606.1,30.454  c-9.99-24.904-38.294-36.975-63.129-26.985L365.38,74.921c-24.904,9.989-36.975,38.293-26.985,63.197l0,0l41.97,104.335  c-49.878,35.657-93.929,78.875-130.627,127.991l-103.502-44.121c-24.627-10.614-53.139,0.763-63.752,25.39v0.208L7.423,527.917  c-10.544,24.627,0.833,53.208,25.459,63.753h0.139l103.502,44.189c-9.99,60.562-10.545,122.232-1.665,182.933l-104.335,41.9  c-24.904,9.99-36.975,38.294-26.916,63.198l0,0l71.383,177.591c10.059,24.835,38.293,36.905,63.128,26.916l104.335-41.97  c35.657,49.878,78.875,93.929,127.991,130.627l-44.12,103.502c-10.545,24.696,0.901,53.208,25.528,63.753h0.069l176.064,74.99  c24.627,10.614,53.139-0.763,63.753-25.39v-0.208l44.259-103.503c60.492,10.059,122.164,10.753,182.863,1.942l41.971,104.335  c9.989,24.904,38.293,36.906,63.128,26.916l177.591-71.383c24.904-9.99,36.906-38.293,26.916-63.197l0,0l-42.039-104.335  c49.879-35.727,93.93-78.876,130.627-127.991l103.502,44.19c24.558,10.613,53.069-0.694,63.684-25.252l0.139-0.347l75.06-176.064  c10.545-24.627-0.901-53.139-25.528-63.684l0,0l-103.502-44.12c10.059-60.492,10.752-122.163,1.941-182.863l104.335-41.97  c24.835-10.059,36.837-38.362,26.778-63.197L1463.393,543.248z M1259.232,572.939c-21.922,8.811-34.339,32.119-29.414,55.22  c15.678,72.979,14.915,148.524-2.358,221.156c-5.411,22.962,6.521,46.549,28.234,55.775l95.108,40.582l-36.975,86.714  l-95.108-40.513c-21.714-9.365-47.034-1.596-59.799,18.245c-40.443,62.712-94.414,115.573-157.959,154.698  c-20.048,12.418-28.234,37.53-19.424,59.382l38.57,95.941l-87.408,35.102l-38.57-95.94c-7.354-18.384-25.182-30.523-45.022-30.523  c-3.398,0-6.798,0.347-10.128,1.11c-72.979,15.678-148.524,14.914-221.156-2.359c-22.962-5.48-46.549,6.452-55.774,28.165  l-40.583,95.247l-86.714-36.975l40.582-95.108c9.227-21.714,1.526-46.965-18.245-59.799  c-62.712-40.443-115.572-94.415-154.768-157.959c-12.487-20.048-37.53-28.234-59.382-19.424l-95.941,38.57l-35.171-87.408  l95.941-38.57c21.921-8.811,34.27-32.119,29.344-55.22c-15.678-72.979-14.915-148.524,2.358-221.156  c5.411-22.962-6.521-46.549-28.234-55.775l-95.108-40.513l36.975-86.714l95.178,40.513c21.713,9.296,46.965,1.596,59.798-18.245  c40.443-62.712,94.415-115.573,157.959-154.698c20.049-12.487,28.234-37.53,19.424-59.452l-38.57-95.872l87.478-35.171l38.57,95.871  c8.811,21.921,32.119,34.339,55.22,29.414c72.979-15.678,148.524-14.845,221.157,2.29c22.961,5.411,46.548-6.452,55.774-28.165  l40.582-95.178l86.715,36.975l-40.583,95.108c-9.227,21.713-1.525,46.964,18.245,59.798  c62.712,40.443,115.573,94.415,154.698,157.959c12.487,20.048,37.53,28.234,59.451,19.424l96.011-38.501l35.171,87.408  l-95.94,38.501L1259.232,572.939z"/>
					   </svg>
				 Settings</a>
			   @endif
            </nav>
        </nav>
    </div>
    <div class="brdr-bttm"></div>

    <div class="container">
		<div class="row">
			  <div class="col-md-12">
				 <div class="tab-teaser tabs-my-client-list">
					<div class="tab-menu col-md-12">
					   <ul>
						<li class="active" data-rel="takings_tab"><a href="#">Takings</a></li>
						@if(!isset($practitioner->parent_id))
							<li class="" data-rel="transactions_tab"><a href="#" class="">Transaction Fees</a></li>
							{{-- <li class="" data-rel="settlements_tab"> --}}
								<a href="https://myappointments.tawk.help/article/merchant-fees-and-settlements" target="_blank" class="settlements-link">Settlement information</a>
							{{-- </li> --}}
						@endif
					   </ul>
					</div>
				
					<div class="tab-main-box mb-4" id="print-test-result-tablenewmy">
						   <div class="tab-box col-md-12 active" id="takings_tab">
						  <div class="row justify-content-center">
							 <div class="col-md-12 my-client-list-new-v1">
								<div class=" dr-table communication-table">
								   <div class="table-responsive">
									  <table class="table table-striped" id="client-list">
										 <thead class="head-brdr">
											<tr>
												<th class="align-middle white-space-nowrap">Date</th>
												<th class="align-middle white-space-nowrap">Details</th>
												<th class="align-middle white-space-nowrap">Service Provider</th>
												<th class="align-middle white-space-nowrap">Description</th>
												<th class="align-middle white-space-nowrap">Cost</th>
												<th class="align-middle white-space-nowrap">Payment Method</th>
												<th class="align-middle white-space-nowrap">Total Paid</th>
												<th class="align-middle white-space-nowrap">Total GST</th>
											</tr>
										 </thead>
										 <tbody id="takings">
		
									
										 </tbody>
									  </table>
								   </div>
								</div>
							 </div>
						 </div>
						   </div>
					<div class="tab-box col-md-12" id="transactions_tab" style="display: none">
						<div class="row justify-content-center">
							<div class="col-md-12 my-client-list-new-v1">
							   <div class=" dr-table communication-table">
								  <div class="table-responsive">
									 <table class="table table-striped" id="client-list">
										<thead class="head-brdr">
										   <tr>
											<th class="align-middle white-space-nowrap">Date</th>
		
											  <th class="align-middle white-space-nowrap">Client</th>
											  <th class="align-middle white-space-nowrap">Invoice#</th>
											  <th class="align-middle white-space-nowrap">Payment Method</th>
											  {{-- <th class="align-middle white-space-nowrap order_by" data-sort-by="{{$sortOrder}}" data-order-by="next_date"><a href="#">Next appointment</a></th> --}}
											  {{-- <th class="align-middle white-space-nowrap order_by" data-sort-by="{{$sortOrder}}" data-order-by="last_date"><a href="#">Last appointment</a></th> --}}
											  <th class="align-middle white-space-nowrap">Total paid</th>
											  <th class="align-middle white-space-nowrap">Transaction fee</th>
											  <th class="align-middle white-space-nowrap">GST</th>
											  <th class="align-middle white-space-nowrap">Net Amount</th>
										   </tr>
										</thead>
										<tbody id="transactions">
								   
										</tbody>
									 </table>
								  </div>
							   </div>
							</div>
						</div>
						</div>
						<div class="tab-box col-md-12" id="settlements_tab" style="display: none">
							<div class="row justify-content-center">
								<div class="col-md-12 my-client-list-new-v1">
								   <div class=" dr-table communication-table">
									  <div class="table-responsive">
										 <table class="table table-striped" id="client-list">
											<thead class="head-brdr">
											   <tr>
													<th class="align-middle white-space-nowrap">Deposit Date</th>
													  <th class="align-middle white-space-nowrap">Settlement Amount</th>
													  <th class="align-middle white-space-nowrap">Settlement fees</th>
													  <th class="align-middle white-space-nowrap">GST</th>
													  {{-- <th class="align-middle white-space-nowrap order_by" data-sort-by="{{$sortOrder}}" data-order-by="next_date"><a href="#">Next appointment</a></th> --}}
													  {{-- <th class="align-middle white-space-nowrap order_by" data-sort-by="{{$sortOrder}}" data-order-by="last_date"><a href="#">Last appointment</a></th> --}}
											   </tr>
											</thead>
											<tbody id="settlements">
												<td  colspan="5" class="text-center text-danger">No Settlements Found !!!</td>
											</tbody>
										 </table>
									  </div>
								   </div>
								</div>
							</div>
						</div>
					</div>
				 </div>
			  </div>
		   </div>
    </div>
	<!-- Date Service Modal S -->
	<div class="client-follow-popup customscroll waitlist-modal showpop dateserviceModal">
		<div class="modal fade" id="my_income_filter" tabindex="-1" role="dialog" aria-hidden="true">
		   <div class="modal-dialog modal-dialog-centered" role="document">
			  <div class="modal-content">
				<div class="modal-header">
					<button type="button" id="close" class="close" data-dismiss="modal"><img src='{{asset("assets/images/close-img.png")}}' alt=""></button>
				</div>
				 <div class="popup-marg py-2">
					<div class="modal-body p-0">
					   <div class="borderbtttm">
							 <div class="cdropdown-menu">
								<div class="">
								   <label class="ml-0">Date</label>
								   <ul class="date-textli">
									  <li>From</li>
									  <li>
										 <div class="form-group" id="open_from_date">
											<input type="text" class="form-control text-gray" id="start_date" name="start_date" placeholder="DD-MM-YYYY" value="" autocomplete="off" required="" />
										 </div>
									  </li>
									  <li>To</li>
									  <li>
										 <div class="form-group">
											<input type="text" name="end_date" id="end_date" class="form-control" placeholder="DD-MM-YYYY" autocomplete="off" required="" value="">
										 </div>
									  </li>
								   </ul>
								</div>
							 </div>
					   </div>
					   <div class="borderbtttm takings_filter">
						   <label class="ml-0">Service Provider</label>
						   <div class="form-group">
							  <select class="form-control" id="serviceProvider" name="practitioner_id">
								 <option value="">Select</option>
								 							  </select>
						   </div>
						</div>
	   
						<div class="borderbtttm takings_filter">
						   <label class="ml-0">Location</label>
						   <div class="form-group">
							  <select class="form-control select-location" id="locations" name="location" >
								 <option value="">Select</option>
								 							  </select>
						   </div>
						</div>
						<div class="borderbtttm takings_filter">
						   <label class="ml-0">Payment Method</label>
						   <div class="customdroppdown gray-brdr line-dropdown">
							  <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
								 <select class="form-control" name="paytype" id="payment_type">
									<option value="">Select</option>
																	 </select>
							  </div>
						   </div>
						</div>
						<div class="borderbtttm takings_filter">
						   <label class="ml-0">Item</label>
						   <div class="customdroppdown gray-brdr line-dropdown">
							  <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
								 <select class="form-control" name="item_type" id="item_type">
									<option value="all">All</option>
									<option value="products">Products</option>
									<option value="services">Services</option>
	   
								 </select>
							  </div>
						   </div>
						</div>
					</div>
					<div class="modal-footer mb-0">
					   <button type="submit" id="apply-filters" class="yellow-btn mt-3 save-btn save-btn-bg w-100 font-15">Apply</button>
					</div>
				 </div>
			  </div>
		   </div>
		</div>
	</div>
	<!-- Date Service Modal E -->
</div>

@endsection

@section('js')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js" integrity="sha512-eviLb3jW7+OaVLz5N3B5F0hpluwkLb8wTXHOTy0CyNaZM5IlShxX1nEbODak/C0k9UdsrWjqIBKOFY0ELCCArw==" crossorigin="anonymous"></script>
	<script src='{{ asset("assets/js/jquery.min.js")}}'></script>
	<script src="{{ asset('assets/js/menu_set_state_docter.js')}}"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<script src='{{ asset("assets/js/popper.min.js")}}'></script>
	<script src='{{ asset("assets/js/bootstrap.min.js")}}'></script>
	<script src='{{ asset("assets/js/bootstrap4-toggle.min.js")}}'></script>
	<script src='{{ asset("assets/js/mdtimepicker.js")}}'></script>
	<script src='{{ asset("assets/js/jquery.mCustomScrollbar.concat.min.js")}}'></script>
	<script src='{{ asset("assets/js/jquery.session.js")}}'></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
	<link href="https://raw.githubusercontent.com/running-coder/jquery-typeahead/master/dist/jquery.typeahead.min.css" />
	<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
	<script  src='https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
	<script src='{{ asset("assets/js/bootstrap-tagsinput.min.js")}}'></script>
	<script src="{{ asset('admin_assets/js/parsley.min.js') }}"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js'></script>
	<script src='{{ asset("assets/js/bootstrap-datepicker.js")}}'></script>
	<script src='{{ asset("assets/js/jquery.redirect.js")}}'></script>
	<script src='{{ asset("assets/js/core/main.js")}}'></script>
	<script src='{{ asset("assets/js/interaction/main.js")}}'></script>
	<script src='{{ asset("assets/js/daygrid/main.js")}}'></script>
	<script src='{{ asset("assets/js/timegrid/main.js")}}'></script>
	<script src='{{ asset("assets/js/list/main.js")}}'></script>
	<script src='{{ asset("assets/js/moment.min.js")}}'></script>
	<script src='{{ asset("assets/js/moment/main.min.js")}}'></script>
	<script src='{{ asset("assets/js/toastr.min.js")}}'></script>
	<script src='{{ asset("assets/js/developer.js")}}'></script>
	<script src='{{ asset("assets/js/custom.js")}}'></script>
	<script src='https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js'></script>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.15.1/dist/sweetalert2.all.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
	<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
	<script src='{{ asset("assets/js/content-printer.js")}}'></script>
	<script src='{{ asset("assets/patient/js/common.js")}}'></script>
	<script src="{{ asset('js/lang.js') }}"></script>

	<script>
		$(document).ready(function(e) {
			$(".access-some-calendar-info-icon").hover(function(e) {
				$(this).parent().find(".access-some-calendar-info-box").toggleClass('active');
			});

			$("[data-toggle=popover]").popover({
	        	html : true,
				enable:true,
	        	content: function() {
	        	    var content = $(this).attr("data-popover-content");
	        	    return $(content).children(".popover-body").html();
	        	},
	    	});
		});
	</script>

	<script>
		var transactions_tab_scroll = 1;
		var transactions_tab_more = 0;
		var takings_tab_scroll = 1;
		var takings_tab_more = 0;
		var activeTab = 'takings_tab';
		var baseUrl = "{{route('home')}}";

	   		$('.tab-menu li').on('click', function(){
			$('#serviceProvider').val('');
			$('#locations').val('');
			$('#payment_type').val('');
			$('#item_type').val('all');
			$('#start_date').val('');
			$('#end_date').val('');
			$('#show_date_ranges').addClass('d-none');

			$('input[name="scroll_value"]').val(1);

			var target = $(this).attr('data-rel');
			activeTab = target;
			if(target === "takings_tab") {
				takings_tab_scroll = 1;
				takings_tab_more = 0;
				let data = getFilterDetails();
				loadTakings(takings_tab_more, data.service_provider, data.location, data.payment_type, data.item_type, data.start_date, data.end_date);
				$('#transactions_download').addClass('d-none')
				$('#takings_download').removeClass('d-none')
				$('.takings_filter').removeClass('d-none');
			} 

			if(target === "transactions_tab") {
				transactions_tab_scroll = 1;
				transactions_tab_more = 0;
				loadTransactions();
				$('#takings_download').addClass('d-none')
				$('#transactions_download').removeClass('d-none')
				$('.takings_filter').addClass('d-none');
			}

			$('.tab-menu li').removeClass('active');
			$(this).addClass('active');
			$("#"+target).fadeIn('slow').siblings(".tab-box").hide();
				return false;
	   	});
		

	   	$(window).scroll(function() {
	   	   if($(window).scrollTop() + $(window).height() + 90 >= $(document).height()) {
				let data = getFilterDetails();

				if(transactions_tab_scroll === 1 && activeTab === "transactions_tab") {
					loadTransactions(transactions_tab_more, data.start_date, data.end_date); 
				}

				if(takings_tab_scroll === 1 && activeTab === "takings_tab") {
					loadTakings(takings_tab_more, data.service_provider, data.location, data.payment_type, data.item_type, data.start_date, data.end_date);
				}
	   	   }
	   	});

	   	$.ajaxSetup({
	      headers: {
	         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	      }
		});

		$(document).on('click', '#filter-btn', function() {
			$('#my_income_filter').modal('show');
		})

		$(document).on('change', '#serviceProvider', function(event) {
			var practitioner_id = $(this).val();
			$.ajax({
			   type: "POST",
			   url: "{{ route('practitioner.customOnlineAvailability.get_location') }}",
			   data: {
			   practitioner_id:practitioner_id
			   },
			   dataType: "JSON",
			   beforeSend: function(msg) {
			   $(".loading").addClass("d-block");
			   }
			}).done(function (res) {
			   $(".loading").removeClass("d-block");
			   var location = $('#locations');
			   location.empty();
			   location.append($("<option></option>")
			   .attr("value",'')
			   .text('Select'));
			   $.each(res.locations, function(key, value) {
				  location.append($("<option></option>")
				  .attr("value", value.id)
				  .text(value.address));
			   });
			});
		});

		$(document).ready(function(){

			$('#start_date').datepicker({
        	 	format: "dd-mm-yyyy",
        	 	weekStart: 1,
        	 	todayHighlight: true,
        	 	autoclose: true,
        	 	clearBtn: false,
        	 	saveBtn: true,
				dateFormat: 'mm-dd-yyyy',

      		});

      		$('#end_date').datepicker({
        	 	format: "dd-mm-yyyy",
        	 	weekStart: 1,
        	 	todayHighlight: true,
        	 	autoclose: true,
        	 	clearBtn: false,
        	 	startDate: '-',
				dateFormat: 'mm-dd-yyyy',
     		});

			var startDate = new Date('01/01/2012');
      		var FromEndDate = new Date();
      		var ToEndDate = new Date();
      		ToEndDate.setDate(ToEndDate.getDate() + 365);
      		$('#start_date').datepicker({
        	    weekStart: 1,
        	    startDate: '01/01/2012',
        	    endDate: FromEndDate,
        	    autoclose: true
        	})
        	.on('changeDate', function(selected) {
        	    var to_calendar = $(this).parent().parent().next().next().find('input');
        	    startDate = new Date(selected.date.valueOf());
        	    startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        	    to_calendar.datepicker('setStartDate', startDate);
        	    var test =  endAfterStart($("input[name='start_date'").val(),$("input[name='end_date'").val());
        	    if(test) {
        	       to_calendar.datepicker().datepicker("setDate", startDate);
        	    }
        	});
			
        	function endAfterStart(start, end) {
        	    if(start > end) {
        	       return true;
        	    } else {
        	       return false;
        	    }           
        	} 

			$(".loading").addClass("d-block");
			loadTakings();
		})

		$(document).on('click', '#apply-filters', function() {
			$('input[name="scroll_value"]').val(1);
			var { start_date, end_date } = getFilterDetails();
			let data = getFilterDetails();
			
			// Manually parse the date string
			const dateStartParts = start_date.split('-');
			const dayStart = parseInt(dateStartParts[0], 10);
			const monthStart = parseInt(dateStartParts[1], 10);
			const yearStart = parseInt(dateStartParts[2], 10);

			// Create a new Date object with the extracted components
			const originalStartDate = monthStart+'-'+dayStart+'-'+yearStart;

			// Manually parse the date string
			const dateEndParts = end_date.split('-');
			const dayEnd = parseInt(dateEndParts[0], 10);
			const monthEnd = parseInt(dateEndParts[1], 10);
			const yearEnd = parseInt(dateEndParts[2], 10);

			// Create a new Date object with the extracted components
			const originalEndDate = monthEnd+'-'+dayEnd+'-'+yearEnd;

			start_date = new Date(originalStartDate).getTime();	
			end_date = new Date(originalEndDate).getTime();

			var start_date = moment(start_date).format('ddd, Do MMM YYYY');
			var end_date = moment(end_date).format('ddd, Do MMM YYYY');

			var text = `${start_date} - ${end_date}`;

			if(data.start_date && data.end_date) {
				$('#show_date_ranges').removeClass('d-none');
				$('#show_date_ranges').text(text);
			}

			if(activeTab === "takings_tab") { 
				takings_tab_more = 0;
				takings_tab_scroll = 1;
				$("#takings").empty();
				loadTakings(takings_tab_more, data.service_provider, data.location, data.payment_type, data.item_type, data.start_date, data.end_date, 'modal')
			}

			if(activeTab === "transactions_tab") {
				transactions_tab_more = 0;
				transactions_tab_scroll = 1;
				$("#transactions").empty();
				loadTransactions(transactions_tab_more, data.start_date, data.end_date, 'modal');
			}
		})

		$(document).on('click', '#takings_download', function() {
      		if ($('.takings_td').length === 0) {
      		   Swal.fire({
      		      icon: 'error',
      		      title: 'No data found.',
      		      showClass: {
      		         popup: 'animate__animated animate__fadeInDown'
      		      },
      		      hideClass: {
      		         popup: 'animate__animated animate__fadeOutUp'
      		      }
      		   });
      		   return false;
      		} else {
				let data = getFilterDetails()
	
				$.redirect(baseUrl + '/practitioner/download/takings', {
				   'start_date': data.start_date,
				   'end_date': data.end_date,
				  'service_provider': data.service_provider, 
				  'location': data.location, 
				  'payment_type': data.payment_type, 
				  'item_type': data.item_type,
				  'loadMore': takings_tab_more,
				}, "GET");
			}
   		});

		$(document).on('click', '#transactions_download', function() {
		
      		if ($('.takings_td').length === 0) {
      		   Swal.fire({
      		      icon: 'error',
      		      title: 'No data found.',
      		      showClass: {
      		         popup: 'animate__animated animate__fadeInDown'
      		      },
      		      hideClass: {
      		         popup: 'animate__animated animate__fadeOutUp'
      		      }
      		   });
      		   return false;
      		} else {
				  $.redirect(baseUrl + '/practitioner/download/transactions', {
					 'loadMore': transactions_tab_more,
				  }, "GET");
			}
   		});

		function loadTakings(loadMore, service_provider, location, payment_type, item_type, start_date, end_date, flag) {
			var scroll_value = $('input[name="scroll_value"]').val();
			if(scroll_value == 1) {
				$.ajax({
		    		url: "{{route('practitioner.takings')}}",
		    		type: 'POST',
					data: { loadMore, service_provider, location, payment_type, item_type, start_date, end_date },
					beforeSend: function(msg) {
						$(".loading").addClass("d-block");
						$('input[name="scroll_value"]').val(0);	
					},
					success: function(response) {
						$(".loading").removeClass("d-block");

						if(flag === "modal") {
							document.getElementById('close').click();
						}

						if( response.data.length === 0 ) {
							$("#takings").empty();
							var html = '<td colspan="8" class="text-center text-danger">No Takings Found</td>';
							$("#takings").html(html);
						} else {
							$("#takings").empty();
							$('input[name="scroll_value"]').val(1);

							response.data.forEach(element => {
								var show = showData(element, element.appointments, element.product_items);
								$('#takings').append(show);
							});

							if(takings_tab_more === response.more && flag !== "modal") {
								takings_tab_scroll = 0;
							}
							takings_tab_more = response.more;
						}
					}
		    	}).fail(function(error) {
						$(".loading").removeClass("d-block");
				});
			}
		} 	

		function loadTransactions(loadMore, start_date, end_date, flag) {
			var scroll_value = $('input[name="scroll_value"]').val();
			if(scroll_value == 1) {
				$.ajax({
		    	    url: "{{route('practitioner.transactions.list')}}",
		    	    type: 'GET',
					data: { loadMore, start_date, end_date },
					beforeSend: function(msg) {
						$(".loading").addClass("d-block");
						$('input[name="scroll_value"]').val(0);
					},
					success: function(response) {
						$(".loading").removeClass("d-block");

						if(flag === "modal") {
							document.getElementById('close').click();
						}

						if( response.data.length === 0 ) {
							var html = '<td  colspan="8" class="text-center text-danger">No Transactions Found </td>';
							// $("#appendClientList").append(html);
							$("#transactions").empty();
							$("#transactions").html(html);
						} else {
							$("#transactions").empty();
							$('input[name="scroll_value"]').val(1);
							var html = '';
							let transactions_fees = 0;
							let gst = 0;
							let netAmount = 0;
							
							response.data.forEach(element => {
								html = '<tr>';
								html += '<td class="transactions_td">'+ moment(element.created_at).format('DD/MM/YYYY hh:mm a') +'</td>';
								if(!element.first_name && !element.last_name) {
									html += '<td>'+ "" +'</td>';
								} else {
									html += '<td>'+ element.first_name +' '+ element.last_name +'</td>';
								}
								transactions_fees = parseFloat(element.transaction_charge) + 0.25;
								gst = transactions_fees / 11;
								netAmount = element.paid_amount - transactions_fees;
		
								html += '<td> #'+ element.invoice_number +'</td>';
								if(element.payment_name === 'Online payment') {
									html += '<td>'+ element.payment_name +'</td>';
								} else {
									html += '<td> Tap </td>';
								}
								html += '<td> $'+ element.paid_amount +'</td>';
								html += '<td> $'+ parseFloat(transactions_fees).toFixed(2) +'</td>';
								html += '<td> $'+ parseFloat(gst).toFixed(2) +'</td>';
								html += '<td> $'+ parseFloat(netAmount).toFixed(2) +'</td>';
								html += '</tr>';
								$('#transactions').append(html)
							});

							if(transactions_tab_more === response.more && flag !== "modal") {
								transactions_tab_scroll = 0;
							}
							transactions_tab_more = response.more;
						}
					}
		    	}).fail(function(error) {
					$(".loading").removeClass("d-block");
				});
			}
		}

		function calculateGST(total_cost, total_paid, cost, gst_amount) {
			let total_gst = 0;
			let gst = 0;

			if(total_cost === total_paid) {
				gst = parseFloat(cost) / 11;
				total_gst += gst;
			}
		
			if(total_paid < total_cost) {
				if(gst_amount == 0) {
					gst = parseFloat(total_paid) / 11;
					total_gst += gst;
				}
			}

			if(total_paid > total_cost) {
				gst = (parseFloat(total_paid) - cost) / 11;
				total_gst += gst;
			}
			return total_gst;
		}

		function getFilterDetails() {
			var service_provider = $('#serviceProvider').val();
			var location = $('#locations').val();
			var payment_type = $('#payment_type').val();
			var item_type = $('#item_type').val();
			var start_date = $('#start_date').val();
			var end_date = $('#end_date').val();

			return data = {
				service_provider,
				location,
				payment_type,
				item_type,
				start_date,
				end_date
			}
		}

		function showData(element, appointments, products) {
			var html = '';
			let total_paid = 0;
			let total_gst = 0;
			let total_cost = 0;

			// console.log('element', element);
			element.payment_history.forEach(payment => {
				total_paid = parseFloat(total_paid) + parseFloat(payment.paid_amount);
			})

			if(appointments?.length > 0 || products?.length > 0) {
				html = '<tr>';
				html += '<td class="takings_td">'
				html += moment(element.created_at).format('DD/MM/YYYY');
				// if(element?.payment_history?.length > 0) {
				// 	element.payment_history.forEach(payment => {
				// 	 	if(moment(payment.created_at).format('DD/MM/YYYY') !== moment(element.created_at).format('DD/MM/YYYY')) {
				// 			html += moment(payment.created_at).format('DD/MM/YYYY');
				// 		}
				// 		html += '</br>';
				// 	})
				// }
				// html += '</td>';
				html += '<td>'+ element.client_name +'</br> #' + element.invoice_number +'</td>';
				html += '<td>'+ element.service_provider +'</td>';
			}

			if(appointments?.length === 0 && products?.length === 0) {
				html = '<tr>';
				html += '<td class="takings_td">'
				html += moment(element.created_at).format('DD/MM/YYYY');
				// if(element?.payment_history?.length > 0) {
				// 	element.payment_history.forEach(payment => {
				// 	 	if(moment(payment.created_at).format('DD/MM/YYYY') !== moment(element.created_at).format('DD/MM/YYYY')) {
				// 			html += moment(payment.created_at).format('DD/MM/YYYY');
				// 		}
				// 		html += '</br>';
				// 	})
				// }
				// html += '</td>';
				html += '<td>'+ element.client_name +'</br> #' + element.invoice_number +'</td>';
				html += '<td>'+ element.service_provider +'</td>';
			}


			// For Description ----- START -----
			if(appointments?.length > 0 && products?.length > 0) {
				html += '<td>';
				appointments.forEach(app => {
					total_cost += parseFloat(app.appointment_cost) * app.appointment_qty;
					if(app.appointment_id) {
						if(app.is_gst == "on") {
							html += '*' + app.appointment_type + ' x ' + app.appointment_qty;
						} else {
							html += app.appointment_type + ' x ' + app.appointment_qty;
						}
					} else {
						html += ""
					}
					html += '</br>';
				})

				products.forEach(product => {
					total_cost += parseFloat(product.product_cost) * product.product_qty;
					if(product.is_gst == "on") {
						html += '*' + product.product_name + ' x ' + product.product_qty;
					} else {
						html += product.product_name + ' x ' + product.product_qty;;
					}
					html += '</br>';
				})
				if(parseFloat(element.discount) > 0) {
					html += 'Discount';

				}
				html += '</td>';
			}

			if(appointments?.length > 0 && products?.length === 0) {
				html += '<td>';
				appointments.forEach(app => {
					total_cost += parseFloat(app.appointment_cost) * app.appointment_qty;
					if(app.appointment_id) {
						if(app.is_gst == "on") {
							html += '*' + app.appointment_type + ' x ' + app.appointment_qty;
						} else {
							html += app.appointment_type + ' x ' + app.appointment_qty;
						}
					} else {
						html += "";
					}
					html += '</br>';
				})
				if(parseFloat(element.discount) > 0) {
					html += 'Discount';
				}
				html += '</td>';
			}

			if(products?.length > 0 && appointments?.length === 0) {
				html += '<td>';
				products.forEach(product => {
					total_cost += parseFloat(product.product_cost) * product.product_qty;
					if(product.is_gst == "on") {
						html += '*' + product.product_name + ' x ' + product.product_qty;
					} else {
						html += product.product_name + ' x ' + product.product_qty;;
					}
					html += '</br>';
				})
				if(parseFloat(element.discount) > 0) {
					html += 'Discount';
				}
				html += '</td>';
			}

			
			if(products?.length === 0 && appointments?.length === 0) {

				if(element.gift_voucher_id != 0)
				{
					html += '<td>';
					html += "Gift voucher purchased";
					html += '</br>';	
					html += '</td>';
					if(element.is_new_takings_gst ==1)
					{
						total_gst = parseFloat(element.total / 11);
					}
				}else{
					html += '<td>';
					html += "";
					html += '</br>';	
					html += '</td>';
				}

				
			}
			// For Description ----- END -----

			// For Cost ----- START -----
			if(appointments?.length > 0 && products?.length > 0 ) {
				total_paid = 0;
			 	total_gst = 0;
			 	total_cost = 0;
				html += '<td>';
				appointments.forEach(app => {
					if(app.is_gst == "on") {
						total_gst += calculateGST(total_cost, total_paid, (app.appointment_cost * app.appointment_qty), total_gst);
					}
					if(app.appointment_id) {
						if(app.appointment_cost) {
							html += '$' + parseFloat(app.appointment_cost).toFixed(2);
						} else {
							html += '$' + parseFloat(0).toFixed(2);
						}
					}
					html += '</br>';
				})

				products.forEach(product => {
					if(product.is_gst == "on") {
						total_gst += calculateGST(total_cost, total_paid, (product.product_cost * product.product_qty), total_gst);
					} 
					html += '$' + parseFloat(product.product_cost).toFixed(2);
					html += '</br>';
				})
				if(parseFloat(element.discount) > 0) {
					html += '-$' + parseFloat(element.discount).toFixed(2);
				}
				html += '</td>';0
			}

			if(appointments?.length > 0 && products?.length === 0) {
				total_paid = 0;
			 	total_gst = 0;
			 	total_cost = 0;
				html += '<td>';
				appointments.forEach(app => {
					if(app.is_gst == "on") {
						total_gst += calculateGST(total_cost, total_paid, (app.appointment_cost * app.appointment_qty), total_gst);
					}
					if(app.appointment_id) {
						if(app.appointment_cost) {
							html += '$' + parseFloat(app.appointment_cost).toFixed(2);
						} else {
							html += '$' + parseFloat(0).toFixed(2);
						}
					}
					html += '</br>';
				})
				if(parseFloat(element.discount) > 0) {
					html += '-$' + parseFloat(element.discount).toFixed(2);
				}
				html += '</td>';
			} 

			if(products?.length > 0 && appointments?.length === 0) {
				total_paid = 0;
			 	total_gst = 0;
			 	total_cost = 0;
				html += '<td>';
				products.forEach(product => {
					if(product.is_gst == "on") {
						total_gst += calculateGST(total_cost, total_paid, (product.product_cost * product.product_qty), total_gst);
					} 
					html += '$' + parseFloat(product.product_cost).toFixed(2);
					html += '</br>';
				})
				if(parseFloat(element.discount) > 0) {
					html += '-$' + parseFloat(element.discount).toFixed(2);
				}
				html += '</td>';
			}

			if(products?.length === 0 && appointments?.length === 0) {
				html += '<td>';
				let cost = 0;
				if(element?.payment_history?.length > 0) {
					element.payment_history.forEach(payment => {
						cost += parseFloat(payment.paid_amount).toFixed(2);
					})
				}
				html += '$' + parseFloat(cost).toFixed(2);
				html += '</br>';
				html += '</td>';
			}
			// For Cost ----- END -----

			if(appointments?.length > 0 || products?.length > 0) {
				// For Payment Method
				html += '<td>';
				if(element?.payment_history?.length > 0) {
					element.payment_history.forEach(payment => {
						if(payment.payment_name) {
							html += payment.payment_name;
						} else {
							html += "-";
						}
						html += '</br>';
					})
				}
				html += '</td>';

				// For Total Paid
				html += '<td>';
				if(element?.payment_history?.length > 0) {
					element.payment_history.forEach(payment => {
						html += '$' + payment.paid_amount;
						html += '</br>';
					})
				} 
				html += '</td>';

				// For Total GST
				html += '<td>';
				html += '$' + parseFloat(total_gst).toFixed(2);
				html += '</td>';
				
				html += '</tr>';
			}

			if(appointments?.length === 0 && products?.length === 0) {
				// For Payment Method
				html += '<td>';
				if(element?.payment_history?.length > 0) {
					element.payment_history.forEach(payment => {
						if(payment.payment_name) {
							html += payment.payment_name;
						} else {
							html += "-";
						}
						html += '</br>';
					})
				}
				html += '</td>';

				// For Total Paid
				html += '<td>';
				if(element?.payment_history?.length > 0) {
					element.payment_history.forEach(payment => {
						html += '$' + payment.paid_amount;
						html += '</br>';
					})
				} 
				html += '</td>';

				// For Total GST
				html += '<td>';
				html += '$' + parseFloat(total_gst).toFixed(2);
				html += '</td>';
				
				html += '</tr>';
			}

			return html;
		}

		$(document).on('click', '.client-print', function(event) {
			event.preventDefault();
			// $("#print-test-result-table").css('display','block');
			$("#printinvoicecontent").css('display', 'block');

			var conent = $(this).data('content');
			var header = $(this).data('header');

			console.log(baseUrl);
			printJS({
			   printable: conent,
			   type: 'html',
			   //css: baseUrl + '/assets/css/default.css',
			   // css: baseUrl + '/assets/css/bootstrap.min.css',
			   css: baseUrl + '../assets/css/pdf-print.css',
			   //css: baseUrl + '/assets/css/pdf-print.css',
			
			   header: header
			});
			// $("#print-test-result-table").css('display','none');
			$("#printinvoicecontent").css('display', 'none');
		});

		$('#sort-area').click(function () {
        	if ($(window).width() >= 992) {
        	  $('.sidebar-menu-blue').toggleClass('sidebarcollapse');
        	  $('.dash-space').toggleClass('dashspace-area');
        	}
        	$.ajax({
        	    url: "{{route('store.sidebar.open&close.status')}}",
        	    type: 'GET',
        	}).done(function(response) {});
    	});
	</script>

@endsection