@extends('layouts.portal.app')
	@section('content')
		<script type="text/javascript" src="{{ url('custom/js/jquery-3.3.1.js') }}"></script>
		<link rel="stylesheet" type="text/css" href="{{ url('custom/smart-search/jquery-ui.min.css') }}">

		<div class="content-wrapper">
			<div class="container-xxl flex-grow-1 container-p-y">
				<div class="card">
					<h4 class="breadcrumb ml-3"> <span class="text-muted fw-light breadcrumb-link"> Home /</span> Invoices - {{ number_format($companyCustomerInvoices->total()) }} records fetched </h4>

					<div class="d-flex flex-wrap justify-content-center align-items-center mx-3 my-3 gap-2">
					    <a href="javascript:;" class="btn btn-outline-primary d-flex justify-content-between align-items-center flex-grow-1 mx-2 px-4 text-center"> <span> <svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-coin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1" /><path d="M12 7v10" /></svg> Expected </span> Tsh {{ number_format($companyCustomerInvoiceAmount) }} </a>

					    <a href="javascript:;" class="btn btn-outline-success d-flex justify-content-between align-items-center flex-grow-1 mx-2 px-4 text-center"> <span> <svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-coin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1" /><path d="M12 7v10" /></svg> Paid </span>  Tsh {{ number_format($companyCustomerInvoicePaid) }}  </a>

					    <a href="{{ url('status-company-customers/0') }}" class="btn btn-outline-warning d-flex justify-content-between align-items-center flex-grow-1 mx-2 px-4 text-center"> <span> <svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-coin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1" /><path d="M12 7v10" /></svg> Balance </span> Tsh {{ number_format($totalRemaining) }} </a>
					</div>

					@if(Session::has('errorResponse')) 
						<h6 class="row"> 
							<div class="col-md-12 temporary-alert">
								<div class="alert alert-danger alert-dismissible" role="alert"> <i class="fa fa-info-circle"></i> {!! Session::has('errorResponse') ? Session::get("errorResponse") : '' !!} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button> </div>
							</div>
						</h6>
					@endif
				</div>

				<div class="pt-3">
					<div class="card">
						<div class="card-datatable table-responsive text-nowrap">
							<table class="table">
								<thead class="border-top">
									<tr>
										<th> # </th>
										<th> Customer </th>
										<th> Period </th>
										<th> Amount </th>
										@hasrole('Administrator')
											<th> Date Created </th>
										@endhasrole
										@if($status == 0)
											<th> Actions </th>
										@endif
									</tr>
								</thead>

								<tbody>
									@foreach($companyCustomerInvoices as $companyCustomerInvoice)
										<tr>
											<td> 
												<a href="javascript:;" class="text-success company-customer-invoice-summary{{ $companyCustomerInvoice->id }}"> #{{ $companyCustomerInvoice->ref_no }} </a> 

												<span class="ms-2"> <a href="{{ url('downlaod-company-customer-invoice/'.$companyCustomerInvoice->id) }}" class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Download Invoice"> <svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-download"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 11l5 5l5 -5" /><path d="M12 4l0 12" /></svg> </a> </span>

												@if($companyCustomerInvoice->RemainingAmount > 0)
													<span class="ms-2"> <a href="{{ url('renew-company-customer-subscription/'.$companyCustomerInvoice->id) }}" class="copy-link" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Copy Payment Link"> <i class="fa fa-link text-primary"></i> </a> </span>
												@endif
											</td>

											<td> 
												{{ $companyCustomerInvoice->companyCustomer? $companyCustomerInvoice->companyCustomer->names: '' }} 

												@if($companyCustomerInvoice->companyCustomer && $companyCustomerInvoice->companyCustomer->phone != "") <br>
													<small> <a href="tel:{{ $companyCustomerInvoice->companyCustomer? $companyCustomerInvoice->companyCustomer->phone: '' }}"> <i class="fa fa-phone"></i> {{ $companyCustomerInvoice->companyCustomer? $companyCustomerInvoice->companyCustomer->phone: '' }} </a> </small>
												@endif
											</td>

											<td> {{ \Carbon\Carbon::parse($companyCustomerInvoice->from_date)->format('d M Y') }} <span class="text-success"> To </span> {{ \Carbon\Carbon::parse($companyCustomerInvoice->to_date)->format('d M Y') }} </td>

											<td> 
												Expected: Tsh {{ number_format($companyCustomerInvoice->amount) }} <br>

												<small class="text-warning"> Bal: Tsh {{ number_format($companyCustomerInvoice->RemainingAmount, 2) }} </small>
											</td>

											@hasrole('Administrator')
												<td> {{ \Carbon\Carbon::parse($companyCustomerInvoice->created_at)->format('d M Y') }} </td>
											@endhasrole

											@if($status == 0)
												<td> 
													@if($companyCustomerInvoice->RemainingAmount > 0 && (Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Invoices.record_payments')))	
														<a href="{{ $companyCustomerInvoice->id }}" amount="{{ number_format($companyCustomerInvoice->RemainingAmount) }}" class="create-company-customer-invoice-payment text-primary disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Record Payment"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-cash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2" /></svg> </a>
													@endif

													@if($companyCustomerInvoice->RemainingAmount > 0 && \Carbon\Carbon::parse($companyCustomerInvoice->created_at)->isCurrentMonth() && (Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Invoices.edit')))
														<a href="{{ $companyCustomerInvoice->id }}" monthYear="{{ $companyCustomerInvoice->month_year }}" amount="{{ number_format($companyCustomerInvoice->amount) }}" class="edit-company-customer-invoice text-success disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Invoice"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-edit"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg> </a>
													@endif

													@if(count($companyCustomerInvoice->companyCustomerInvoicePayments) == 0 && (Auth::user()->hasRole('Administrator') || Auth::user()->can('Administer Company') || Auth::user()->can('Invoices.delete')))
														<a href="{{ $companyCustomerInvoice->id }}" class="delete-company-customer-invoice text-danger disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Delete Invoice"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg> </a>
													@endif 
												</td>
											@endif
										</tr>

										@include('portal.companies.invoices.summary')
										<script type="text/javascript">
											document.addEventListener('DOMContentLoaded', function()
											{
												$('.company-customer-invoice-summary{{ $companyCustomerInvoice->id }}').click(function(e)
												{
													e.preventDefault();

													$('#company-customer-invoice-summary{{ $companyCustomerInvoice->id }}').offcanvas("toggle");
												});
											});	
										</script>
									@endforeach
								</tbody>
							</table>

							{{ $companyCustomerInvoices->render() }}
						</div>
					</div>
				</div>
			</div>

			@include('portal.companies.invoices.edit')
			<script type="text/javascript" src="{{ url('custom/companies/invoices/edit.js') }}"></script>

			@include('portal.companies.invoices.delete')
			<script type="text/javascript" src="{{ url('custom/companies/invoices/delete.js') }}"></script>

			@include('portal.companies.invoices.payments.create')
			<script type="text/javascript" src="{{ url('custom/companies/invoices/payments/create.js') }}"></script>
		</div>

		<script src="{{ url('custom/smart-search/jquery-ui.min.js') }}" type="text/javascript"></script>

		<script type="text/javascript">
			document.addEventListener('DOMContentLoaded', function () 
			{
				// Initialize all tooltips on the page
			    const tooltipTriggerList = document.querySelectorAll('.copy-link');
			    const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));

			    // jQuery click handler for all elements with class 'copy-link'
			    $('.copy-link').on('click', function (e) {
			        e.preventDefault();

			        const link = $(this).attr('href');
			        const trigger = this;
			        const tooltip = bootstrap.Tooltip.getInstance(trigger); // get the tooltip instance

			        navigator.clipboard.writeText(link).then(function () {
			            trigger.setAttribute('data-bs-original-title', 'Copied!');
			            tooltip.show();

			            setTimeout(() => {
			                trigger.setAttribute('data-bs-original-title', 'Copy Payment Link');
			            }, 1500);
			        });
			    });
			});

			(function($) 
		    {
		        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		        
		        $( ".keyword" ).autocomplete({
		            source: function(request, response) 
		            {
		                $.ajax({
		                    url:"{{ url('smartly-search-customer-invoices') }}",
		                    type: 'post',
		                    dataType: "json",
		                    data: {
		                       _token: CSRF_TOKEN,
		                       keyword: request.term
		                    },

		                    success: function(data) 
		                    {
		                        response(data);
		                    }
		                });
		            },

		            select: function (event, ui) 
		            {
		                var app_url = $('#app_url').val();

		                window.location.href = ""+app_url+"found-customer-invoices/"+ui.item.company_customer_id+"";
		            }
		        });
		    })(jQuery);
		</script>
	@endsection