@extends('layouts.AdminLayout')

@section('content')

<style>

td.dt-nowrap { white-space: nowrap }

@media screen and (min-width: 1024px){





}

</style>

<div class="content-wrapper">

<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-2">Payment Report &nbsp;&nbsp;<span class="btn btn-primary exportdata" style="color:whitelcursor:pointer">Export To Excel</span></h4>
			
		<div class="card">
			<div style="padding:20px">	

            <div class="row py-2">
			<h5 class="fw-bold py-3 mb-1" style="text-align:center;">As on Date : {{date('d/m/Y')}}</h4>
            <form method="get" id="chatexport" action="{{ url('/ernetdash/billdeskpaymentexport') }}">	
			@csrf
			<input type="hidden" name="search_text" class="search_text" >

			<div class="row px-10 my-2">
					<div class="col-md-3" id="tday2">							
					<label style="font-family:Times New Roman;color:black" >Transaction Date From<br></label>
						
							<input type="text"  max="2025-12-08" data-date-format="yyyy-mm-dd"  placeholder="dd-mm-yyyy" data-date-viewmode="years" class="form-control from datepicker" name="dd1" id="start_date" autocomplete="off">
						
					</div>
					
					<div
					 class="col-md-3" id="tday2">
					   <label  style="font-family:Times New Roman;color:black" >Transaction Date To<br></label>
					
						<input type="text" max="2025-12-08"  data-date-format="yyyy-mm-dd" placeholder="dd-mm-yyyy" data-date-viewmode="years" class="form-control to datepicker" name="dd2" id="end_date" autocomplete="off">
					
					</div>

					<div class="col-md-3" id="tday2">							
					<label style="font-family:Times New Roman;color:black" >Payment Service <br></label>
						
							<select class="form-control" name="trns_type" id="trns_type">
								<option value="">Select</option>
                                <option value="domainRegister">Domain Registration Fee</option>
								<option value="nameServerUpdate">Ernet Name Server Fee	</option>
								<option value="domainRenewal">Domain Renewal Fee</option>
								<option value="domainRegisterWithNameServer">Domain and DNS Fee</option>
								<option value="userNameServerUpdate">Name Server Update Fee</option>
								<option value="ewaas">WaaS Service</option>
								<option value="elmaas">L-MaaS Service</option>

							</select>
						
					</div>

					


					<div class="col-md-3" id="tday2">							
					<label  style="font-family:Times New Roman;color:black" >Domain<br></label>
                    
						<input type="text"  class="form-control domain" name="domain" id="domain" >
									
					</div>

				
					
		
				</div>


                <div class="row mt-3">

                <div class="col-md-3" id="tday2">							
					<label  style="font-family:Times New Roman;color:black" >Period (In Years)<br></label>
                    									
						<select class="form-control period" name="period" id="period">
						<option value="">Select Year</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
					  </select>

					</div>

                    <div class="col-md-3" id="tday2">							
					<label  style="font-family:Times New Roman;color:black" >State<br></label>
					  <select class="form-control" name="state" id="state">
						<option value="">Select State</option>
						@foreach($states as $state)
                        <option value="{{$state->description}}">{{$state->description}}</option>
						@endforeach
					  </select>
					</div>

                    <div class="col-md-3" id="tday2">							
					<label  style="font-family:Times New Roman;color:black" >PGI Ref. No.<br></label>
                    
						<input type="text"  class="form-control" name="trans_id" id="trans_id" >
									
					</div>

                    <div class="col-md-3" id="tday2">							
					<label  style="font-family:Times New Roman;color:black" >User Id/Order Id<br></label>
                    
						<input type="text"  class="form-control" name="order_id" id="order_id" >
									
					</div>

					<div class="col-md-3" id="tday2">							
					<label style="font-family:Times New Roman;color:black" >Domain Status <br></label>
						
							<select class="form-control" name="status" id="status">
								<option value="">Select</option>
                                <option value="1">Incomplete Application</option>
								<option value="2">Active</option>
							</select>
						
					</div>

					<div class="col-md-3" style="margin-top:25px;">	
						 <button type="button" class="btn btn-md btn-primary search ">Search</button>
						 <a href="{{url('ernetdash/reports/billdeskpayment')}}" style="color:#fff"><button type="button" class="btn btn-info btn-md search">Reset</button></a>
						 </div>

						 
					<div class="col-md-6" style="margin-top:25px;float:right">	
						 <b style="float:right"><span>Total Amount: <span id="totalAmountValue">0.00</span></span></b>
					</div>


                </div>
				</div>
	     </div>
		 </div>
       <div class="card my-2">
			<div style="padding:20px">	
					<div class="table-responsive text-nowrap mt-4">
						
						<table class=" table table-striped table-bordered dataTable no-footer" id="dataTable" width="100%" cellspacing="0">
						<thead class="table-secondary">
								<tr>
                                <th>S.No.</th>
								<th>PGI Ref. No.</th>
								<th>User ID /Order ID</th>
								<th>Status</th>
								<th>Domain Name </th>
								<th>Period</th>
                                <th>ORG</th>
                                <th>Address</th>
                                <th>State Name</th>
                                <th>GST No.</th>
                                <th>Net Amount</th>
								<th>Date of Txn</th>
								<th>Receipt No.</th>
                                <th>Invoice</th>
								</tr>
							</thead>
						   
							<tbody>
								
							</tbody>
						</table>
					</div>

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

@endsection
@section("js")

<link href="{{ asset('vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

<script>
    $(function() {
      $(".datepicker").datepicker({
		 dateFormat: 'dd-mm-yy',
		 constrainInput: false,
		 changeYear:true,
		 changeMonth:true,
		 yearRange:'1980:+0',
		 maxDate:0
	 });
    });
  </script>

	<script type="text/javascript">
		
		$(document).ready(function() {
			var table = $('#dataTable').DataTable({
				processing: true,
				serverSide: true,
				"ajax": {
                    "url": "{{url('ernetdash/billdeskpaymentajax')}}",
                    "type": "GET",
                    "datatype": "json",
					"data": function(d){
						d.from = $('#start_date').val();
						d.to = $('#end_date').val();
						d.domain = $('.domain').val();
						d.period = $('.period').val();
						d.trns_type = $('#trns_type').val();
                        d.state = $('#state').val();
                        d.trans_id = $('#trans_id').val();	
                        d.order_id = $('#order_id').val();	
						d.status = $('#status').val();	
					}
                },
				columns: [
					{ data: 'id', orderable: false}, 
					{ data: 'trans', orderable: false},
					{ data: 'ref', orderable: false},
					{ data: 'status', orderable: false},
					{ data: 'domain', orderable: false},
					{ data: 'period', orderable: false},
                    { data: 'org', orderable: false},
                    { data: 'add', orderable: false},
                    { data: 'state', orderable: false},
                    { data: 'gst_no', orderable: false},
                    { data: 'amount', orderable: false},
					{ data: 'created_at', orderable: false},
					{ data: 'recp', orderable: false},
                    { data: 'inv', orderable: false},
				],
				"language": {
                 "emptyTable": "No Data Available"
                },
                "searching": false
			});
			var from = $('#start_date').val();
			var to = $('#end_date').val();
			var domain = $('.domain').val();
			var period = $('.period').val();
			var trns_type = $('#trns_type').val();
			var domain_type = $('#domain_type').val();

            var trans_id = $('#trans_id').val();	
            var order_id = $('#order_id').val();	
			
			$.ajax({
				url: "{{ url('ernetdash/billdeskgettotalamount') }}",
				type: "GET",
				dataType: "json",
				data:{
					'from':from,'to':to,'domain':domain,'period':period,'trns_type':trns_type,'domain_type':domain_type,
				},
				success: function(response) {
					var totalAmount = response.totalamount;
					$('#totalAmountValue').text(totalAmount.toFixed(2));
				},
				error: function() {
					$('#totalAmountValue').text('0.00');
				}
			});
			$('body').on('click', '.search', function() {
			
				var from = $('#start_date').val();
			var to = $('#end_date').val();
			var domain = $('.domain').val();
			var period = $('.period').val();
			var trns_type = $('#trns_type').val();
			var domain_type = $('#domain_type').val();
            var state = $('#state').val();

            var trans_id = $('#trans_id').val();	
            var order_id = $('#order_id').val();
			
			$.ajax({
						url: "{{ url('ernetdash/billdeskgettotalamount') }}",
						type: "GET",
						dataType: "json",
						data: {
							
							'from':from,'to':to,'domain':domain,'period':period,'trns_type':trns_type,'domain_type':domain_type,
                            'state':state ,'trans_id':trans_id,'order_id':order_id										

						},
						success: function(response) {
							var totalAmount = response.totalamount;
							$('#totalAmountValue').text(totalAmount.toFixed(2));
						}
					});
					table.ajax.reload();

				// if (from !== '' && to !== '' && from > to) {
				// 	alert("From Date cannot be greater than To Date");
				// 	return false;
				// } else {
				
				// }
});

			$('.dataTables_filter input').keyup(function() {
			$('.search_text').val($(this).val());
		    });
		




			$('body').on('click', '.exportdata', function() {
				$('#chatexport').submit();
			});
			
		});
	</script>

@endsection