@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') }}">

		<!-- Flatpickr JS -->
		<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

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

					<div class="d-flex flex-wrap justify-content-center align-items-center mx-3 my-3 gap-2">
						<a href="{{ url('transaction-type-grouped-transactions/1') }}" 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-moneybag"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9.5 3h5a1.5 1.5 0 0 1 1.5 1.5a3.5 3.5 0 0 1 -3.5 3.5h-1a3.5 3.5 0 0 1 -3.5 -3.5a1.5 1.5 0 0 1 1.5 -1.5" /><path d="M4 17v-1a8 8 0 1 1 16 0v1a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4" /></svg> Router Income </span> Ksh {{ number_format($routerSubscriptions, 2) }} </a>

						<a href="{{ url('transaction-type-grouped-transactions/2') }}" 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-moneybag"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9.5 3h5a1.5 1.5 0 0 1 1.5 1.5a3.5 3.5 0 0 1 -3.5 3.5h-1a3.5 3.5 0 0 1 -3.5 -3.5a1.5 1.5 0 0 1 1.5 -1.5" /><path d="M4 17v-1a8 8 0 1 1 16 0v1a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4" /></svg> SMS Income </span> Ksh {{ number_format($smsIncome, 2) }} </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 class="card-header d-flex border-top rounded-0 flex-wrap py-2">
						<div class="d-flex gap-2 align-items-center">
							<input type="text" class="form-control keyword" placeholder="Search Payment">
							<input type="hidden" name="grouped_transaction_id" class="grouped-transaction-id">
						</div>

						<div class="ms-auto d-flex justify-content-start justify-content-md-end align-items-baseline pull-right">
							<a href="javascript:;" class="btn btn-outline-primary d-inline-flex align-items-center search-transactions-by-date disabled-btn"> <i class="ti ti-search me-2"></i> Search By Date </a>
						</div>

						<div class="ms-auto d-flex justify-content-start justify-content-md-end align-items-baseline pull-right">
							<a href="{{ url('downlaod-grouped-transactions/'.$fromDate.'/'.$toDate) }}" class="btn btn-sm btn-outline-primary mt-2 mt-md-0 text-decoration-none d-flex align-items-center"> <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-download me-1"> <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> PDF </a> 
						</div>

						<div class="ms-auto d-flex justify-content-start justify-content-md-end align-items-baseline pull-right">
							<a href="{{ url('downlaod-excel-grouped-transactions/'.$fromDate.'/'.$toDate) }}" class="btn btn-sm btn-outline-primary mt-2 mt-md-0 text-decoration-none d-flex align-items-center"> <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-download me-1"> <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> Excel </a> 
						</div>
					</div>
				</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> Company </th>
										<th> Payment Mode <br> Transaction Code </th>
										<th> Amount <br> Payment Date </th>
										@if(Auth::user()->hasRole('Administrator'))
										<th> Action </th>
										@endif
									</tr>
								</thead>

								<tbody>
									@foreach($groupedTransactions as $groupedTransaction)
									<tr>
										<td> <a href="javascript:;" class="text-success"> #{{ $groupedTransaction->ref_no }} </a> </td>

										<td> 
											<a href="{{ url('company-profile/'.$groupedTransaction->company_id) }}"  class="text-dark"> <i class="ti ti-building-bank"> </i> {{ $groupedTransaction->company? $groupedTransaction->company->name: '' }} </a>

											@if($groupedTransaction->companyRouter && $groupedTransaction->companyRouter->id != "") <br>
												<a href="{{ url('found-company-routers/'.$groupedTransaction->company_router_id) }}"> <small class="text-success"> <i class="menu-icon tf-icons ti ti-layout-kanban"></i><i> {{ $groupedTransaction->companyRouter? $groupedTransaction->companyRouter->name: '' }} </i></small> </a>
											@elseif($groupedTransaction->transaction_type == 2)
												<br> <small class="text-warning"> <i class="menu-icon tf-icons ti ti-layout-kanban"></i><i> SMS Units </i></small>
											@endif
										</td>

										<td>
											<i class="ti ti-credit-card text-primary"></i>
											{{ $groupedTransaction->paymentMode ? $groupedTransaction->paymentMode->name : '' }}<br>
											<small class="text-success"><i class="ti ti-receipt"></i><i>{{ $groupedTransaction->transaction_code }}</i></small>
										</td>

										<td> 
											@php
											    $totalAmount = 0;
											    $fromTotal = "";

											    if($groupedTransaction->transaction_type == 1) 
											    {
											        $totalAmount = $groupedTransaction->amount;
											    }else 
											    {
											        $totalAmount = $groupedTransaction->amount - (($groupedTransaction->provider_sms_price * $groupedTransaction->amount) / $groupedTransaction->unit_sms_price);

											        $fromTotal = "from Ksh ".number_format($groupedTransaction->amount, 2)." ";
											    }
											@endphp
												
											Ksh. {{ number_format($totalAmount, 2) }} {{ $fromTotal }} <br>
											<small class="text-success"><i class="ti ti-clock-hour-7"></i><i> {{ \Carbon\Carbon::parse($groupedTransaction->created_at)->format('d M Y') }} at {{ \Carbon\Carbon::parse($groupedTransaction->created_at)->format('h:i A') }} </i></small>
										</td>

										@if(Auth::user()->hasRole('Administrator'))
											<td> 
												@if($groupedTransaction->payment_mode_id != 1)
													<a href="{{ $groupedTransaction->id }}" amount="{{ $groupedTransaction->amount }}" paymentModeId="{{ $groupedTransaction->payment_mode_id }}" transactionCode="{{ $groupedTransaction->transaction_code }}" class="edit-grouped-transaction text-success disabled-btn"> <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>

													<a href="{{ $groupedTransaction->ref_no }}" class="delete-grouped-transaction disabled-btn text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Delete Record"> <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>
									@endforeach
								</tbody>
							</table>

							{{ $groupedTransactions->render() }}

						</div>
					</div>
				</div>
			</div>
		</div>

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

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

		@include('portal.transactions.income.search')
		<script type="text/javascript" src="{{ url('custom/transactions/income/search.js') }}"></script>

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

		<script type="text/javascript">
			(function($) 
			{
				const setupDatepickers = () => {
					const pastDateFrom = document.querySelector(".date-from");
					const pastDateTo = document.querySelector(".date-to");

					if (!pastDateFrom || !pastDateTo) return;

					const toPicker = flatpickr(pastDateTo, {
						monthSelectorType: "static",
						maxDate: "today"
					});

					flatpickr(pastDateFrom, {
						monthSelectorType: "static",
						maxDate: "today",
						onChange: function (selectedDates) {
							if (selectedDates.length > 0) {
								const selectedDate = selectedDates[0];
								toPicker.clear();
								toPicker.set("minDate", selectedDate);
							}
						}
					});
				};

				// Run this when offcanvas is shown
				document.getElementById('search-transactions-by-date').addEventListener('shown.bs.offcanvas', setupDatepickers);

				var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

				$( ".keyword" ).autocomplete({
					source: function(request, response) 
					{
						$.ajax({
							url:"{{ url('smartly-search-grouped-transactions') }}",
							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-grouped-transactions/"+ui.item.grouped_transaction_id+"";
					}
				});

				$( ".router-keyword" ).autocomplete({
					source: function(request, response) 
					{
						$.ajax({
							url:"{{ url('smartly-search-company-routers') }}",
							type: 'post',
							dataType: "json",
							data: {
								_token: CSRF_TOKEN,
								keyword: request.term
							},

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

					select: function (event, ui) 
					{
						$('.company-router-id').val(ui.item.company_router_id);
					}
				});
			})(jQuery);
		</script>
	@endsection