<?php
	session_start();
	include '../../connection.php';
 ?>
 <div class="card">
 	<div class="card-header">
 		<button class="btn btn-primary btn-d" data-toggle="modal" data-target="#add-transaction">Add Record</button>
 	</div>
 	<div class="card-body">
 		<div id="transactions"></div>
 	</div>
 </div>



 <div class="modal fade" id="add-transaction" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create Transaction <i class="fa fa-book"></i></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       	<div class="mb-3">
       		<label for="resident_id">Find Resident</label><span class="text-danger">*</span>
       		<br>
       		<option value="">--select--</option>
       		<select class="js-example-basic-single " style="width: 100%;" id="resident_id">
	
					<?php
					$query = "select * from tbl_resident";
					$query_result =$conn->query($query);

					foreach ($query_result as $key => $row) {
						echo 
						'
						<option value="'.$row['resident_id'].'">'.$row['last_name'].', '.$row['first_name'].' '.$row['middle_name'].'</option>
						';
					}
					 ?>
			</select>
       	</div>

       	<div class="mb-3">
       		<label for="incident_address">Incident Address</label>
       		<textarea class="form-control" id="incident_address"></textarea>
       	</div>

       	

       			<div class="mb-3">
       		<label for="complaint_type">Complain Type</label><span class="text-danger">*</span>
       		<br>
       		<select class="js-example-basic-single " style="width: 100%;" id="complaint_type">
       			<option value="">--select--</option>
	
					<?php
					$query = "select * from tbl_complaint_types";
					$query_result =$conn->query($query);

					foreach ($query_result as $key => $row) {
						echo 
						'
						<option value="'.$row['complaint_type_id'].'">'.$row['complain_name'].'</option>
						';
					}
					 ?>
			</select>
       	</div>

       	<div class="mb-3">
       		<small>Create a brief description about your complaint</small>
       		<textarea class="form-control" id="description"></textarea>
       	</div>

       	<div class="mb-3">
       		<label>Date of Incident</label>
       		<input type="date" class="form-control" id="date_incident">	
       	</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="add_transaction()">Save <i class="fa fa-save"></i></button>
      </div>
    </div>
  </div>
</div>

 <script>
 	$(document).on('click', '.update-btn', function(e){
 		e.preventDefault();
 		let t_id =  $(this).data('id');
		let u_status =  $(this).data('status');

		$.ajax({
			method: 'post',
			url: 'query/transaction_query.php',
			data:{
				"updating_transaction": 1,
				"t_id": t_id,
				"u_status": u_status
			},
			success: function(res){
				load_transactions();
				swal("Success!", "Status updated successfully!", "success");

			}
		});

 	 	})


 	$(document).on('click', '.delete-btn', function(){
 		let id = $(this).data("id");
 		swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this data file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
  	$.ajax({
 			method: 'post',
 			url: 'query/transaction_query.php',
 			data:{
 				"deleting_transaction": 1,
 				"id": id
 			},
 			success: function(res){
 				load_transactions();
 			}
 		});
    swal("Poof! Your data file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your data file is safe!");
  }
});
 		
 	})
function add_transaction(){
    let resident_id = $('#resident_id').val();
    let incident_address = $('#incident_address').val();
    let complaint_type = $('#complaint_type').val(); // ✅ This gets the selected value
    let description = $('#description').val();
    let date_incident = $('#date_incident').val();

    $.ajax({
        method: 'post',
        url: 'query/transaction_query.php',
        data: {
            "adding_transactions": 1,
            "resident_id": resident_id,
            "incident_address": incident_address,
            "complaint_type": complaint_type,
            "description": description,
            "date_incident": date_incident
        },
      success: function(res){

		    swal("Success!", "You added 1 record!", "success");
		    $('#add-transaction').modal('hide');
		    $('#resident_id').val('').trigger('change');
		    $('#department').val('').trigger('change');
		    $('#complaint_type').val('').trigger('change');
		    $('#description').val('');
		    load_transactions();
		}
    });
}

 $(document).ready(function () {
  $('.js-example-basic-single').select2({
  	theme: 'classic',
    dropdownParent: $('#add-transaction'), // 👈 VERY IMPORTANT
    width: '100%',
    minimumResultsForSearch: 0
  });
});


 	load_transactions();
 	function load_transactions(){
 		$.ajax({
 			method: 'post',
 			url: 'query/transaction_query.php',
 			data:{
 				"loading_transactions": 1
 			},
 			success: function(res){
 				$('#transactions').html(res);
 				$('#mytable').DataTable({
				    columnControl: [{
				        extend: 'order',
				        statusOnly: true
				    }],
				    ordering: {
				        indicators: false
				    }
				});
 			}
 		});
 	}
 </script>