@extends('layout.master')
@section('title', 'Transpoting | Transporters Managment System')
@section('content')
<div class="page-wrapper">
	<!--page-content-wrapper-->
	<div class="page-content-wrapper">
		<div class="page-content">
			<!--breadcrumb-->
			<div class="page-breadcrumb d-none d-md-flex align-items-center mb-3">
				<div class="breadcrumb-title pr-3">Transaction</div>
				<div class="pl-3">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb mb-0 p-0">
							<li class="breadcrumb-item"><a href="javascript:;"><i class='bx bx-home-alt'></i></a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">Transaction Entry</li>
						</ol>
					</nav>
				</div>
				<div class="ml-auto">
					<button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#transactionEntryModal"><i class='bx bx-plus mr-1'></i>New Entry</button>
				</div>
			</div>
			<!--end breadcrumb-->
	
			<div class="card radius-15">
				<div class="card-body">
					<div class="card-title">
						<div class="row">
							<div class="col-6">
								<h4 class="mt-2">Transaction Details</h4>
							</div>

							<div class="col-6">
								<form class="form-inline nav-search float-right">
									<div class="input-group nav-width">
										<input type="text" class="form-control" placeholder="Search Owner name | Vehicle Number" aria-label="Recipient's username">
										<div class="input-group-append border-left-0 ml-0">
											<button class="btn border-left-0" type="submit"><i class='bx bx-search'></i>
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
						
					</div>
					<hr/>
					<div class="table-responsive">
						<table class="table table-sm">
							<thead>
								<tr>
									<th scope="col">#</th>
									<th scope="col">Date</th>
									<th scope="col">Vehicle No.</th>
									<th scope="col">Transporter</th>
									<th scope="col">Desctination</th>
									<th scope="col">TP Number</th>
									<th scope="col">Net Amount</th>
									<th scope="col">Bill Status</th>
									<th scope="col">Action</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>12-04-2021</td>
									<td>OD0987R</td>
									<td>Om Transporter</td>
									<td>Joda-Barbil</td>
									<td>TP455</td>
									<td>5</td>
									<td>
										<span class="badge badge-success">Billed</span>
									</td>
									<td>
										<div class="btn-group m-1" role="group" aria-label="Basic example">
											<button type="button" class="btn btn-primary btn-sm"><i class="lni lni-eye"></i>
											</button>
											<button type="button" class="btn btn-info btn-sm"><i class="bx bx-edit"></i>
											</button>
											<button type="button" class="btn btn-danger btn-sm"><i class="bx bx-trash"></i>
											</button>
										</div>
									</td>
								</tr>

								<tr>
									<th scope="row">1</th>
									<td>12-04-2021</td>
									<td>OD0987R</td>
									<td>Om Transporter</td>
									<td>Joda-Barbil</td>
									<td>TP4878</td>
									<td>5</td>
									<td>
										<span class="badge badge-danger">Unbilled</span>
									</td>
									<td>
										<div class="btn-group m-1" role="group" aria-label="Basic example">
											<button type="button" class="btn btn-primary btn-sm"><i class="lni lni-eye"></i>
											</button>
											<button type="button" class="btn btn-info btn-sm"><i class="bx bx-edit"></i>
											</button>
											<button type="button" class="btn btn-danger btn-sm"><i class="bx bx-trash"></i>
											</button>
										</div>
									</td>
								</tr>
								
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--end page-content-wrapper-->
</div>

<!-- Transaction Entry Modal -->
<div class="modal fade" id="transactionEntryModal" tabindex="-1" role="dialog" aria-labelledby="transportDetailsLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="transportDetailsLabel">Transaction Entry</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="needs-validation" novalidate>
                <div class="modal-body">
                    <!-- Transport From and To -->
                    <div class="form-row">
                        <div class="col-md-3 mb-3">
                            <label for="date">Date</label>
	                        <input type="date" class="form-control form-control-sm" id="date" required>
	                        <div class="invalid-feedback">Please select a valid date.</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="transporter">Transporter</label>
	                        <input type="text" class="form-control form-control-sm" id="transporter" required>
	                        <div class="invalid-feedback">Please select a valid transporter.</div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="tpNumber">TP No.</label>
                            <input type="text" class="form-control form-control-sm" id="tpNumber" required>
                            <div class="invalid-feedback">Please provide a valid TP number.</div>
                        </div>
                    </div>
                    <hr>
                    <!-- TP Number and Tone -->
                    <div class="form-row justify-content-between select2-sm">
                        <div class="col-md-4 mb-3">
                            <label for="transportFrom">Source: <small class="text-warning">(From)</small></label>
                                <select class="single-select" id="transportFrom" required></select>
                                <div class="invalid-feedback">Please enter the origin location.</div>
                        </div>

                        	<i class="lni lni-travel mt-4" style="font-size:40px"></i>
                      
                        <div class="col-md-4 mb-3">
                            <label for="transportTo">Destination: <small class="text-warning">(To)</small></label>
                                <select class="single-select" id="transportTo" required></select>
                                <div class="invalid-feedback">Please enter the destination location.</div>
                        </div>
                    </div>
                    <hr>
                    <div class="form-row justify-content-between">
                        <div class="col-md-4 mb-3">
                            <label for="driver">Driver</label>
                            <input type="text" class="form-control form-control-sm" id="driver" required>
                            <div class="invalid-feedback">Please provide the driver name.</div>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="quantity">Quantity <small class="text-warning">(MT)</small></label>
                            <input type="text" class="form-control form-control-sm" id="quantity" required>
                            <div class="invalid-feedback">Please provide the tonnage.</div>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="rate">Rate</label>
                            <input type="text" class="form-control form-control-sm" id="rate" step="0.01" placeholder="Nije nebo" required>
                            <div class="invalid-feedback">Please provide a valid rate.</div>
                        </div>
                        <div class="col-md-3 mb-3 mb-3">
                            <label for="amount">Amount</label>
                            <input type="text" class="form-control form-control-sm" id="amount" step="0.01" placeholder="Tone*Rate" required>
                            <div class="invalid-feedback">Please provide the amount.</div>
                        </div>
                    </div>

                    <!-- Diesel Advance and Shortage Amount -->
                    <div class="form-row">
                        <div class="col-md-3 mb-3">
                            <label for="cash_advance">Cash Advance</label>
                            <input type="text" class="form-control form-control-sm" id="cash_advance" required>
                            <div class="invalid-feedback">Please provide the cash advance amount.</div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="hsd">HSD</label>
                            <input type="text" class="form-control form-control-sm" id="hsd" required>
                            <div class="invalid-feedback">Please provide the HSD advance amount.</div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="shortageAmount">Shortage Amount</label>
                            <input type="number" class="form-control form-control-sm" id="shortageAmount" required>
                            <div class="invalid-feedback">Please provide the shortage amount.</div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="discount">Discount</label>
                            <input type="text" class="form-control form-control-sm" id="discount" required>
                            <div class="invalid-feedback">Please provide the discount advance amount.</div>
                        </div>
                    </div>

                    <!-- Net Payment and Payment Date -->
                    <div class="form-row justify-content-between">
                        <div class="col-md-6 mb-3">
                            <textarea rows="3" class="form-control form-control-sm" id="remarks" placeholder="Remarks..." required></textarea>
                            <div class="invalid-feedback">Please provide the remarks.</div>
                        </div>
                        <div class="col-md-3 mb-3 ml-5">
                            <label for="netPayment">Net Payment</label>
                            <input type="number" class="form-control form-control-sm" id="netPayment" required>
                            <div class="invalid-feedback">Please provide the net payment amount.</div>
                        </div>
                        
                    </div>
                </div>
                <div class="modal-footer justify-content-between d-flex">
                <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
                <button type="submit" id="save_changes" class="btn btn-primary btn-sm">Save changes</button>
            </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
	$(document).ready(function() {
		var searchDestinationUrl = "{{ route('vehicle.search_destinations') }}";
	    // Initialize Select2 elements
	    $('.single-select').select2({
        theme: 'bootstrap4',
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
        allowClear: Boolean($(this).data('allow-clear')),
	        ajax: {
	            url: searchDestinationUrl, // API endpoint for searching destinations
	            dataType: 'json',
	            delay: 250,
	            data: function (params) {
                    return {
                        searchTerm: params.term // Search term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.map(item => ({
                            id: item.id, 
                            text: item.name
                        }))
                    };
                },
	            cache: true
	        }
	    });

	    // When destination selections change, fetch the price
	    var getDestinationPriceUrl = "{{ route('vehicle.get_destination_price') }}";
	    $('#transportFrom, #transportTo').on('change', function() {
	        var fromId = $('#transportFrom').val();
	        var toId = $('#transportTo').val();
	        
	        if (fromId && toId) {
	            $.ajax({
	                url: getDestinationPriceUrl,
	                type: 'GET',
	                data: { from: fromId, to: toId },
	                success: function(data) {
	                    $('#rate').val(data.price);
	                    updateAmount();
	                }
	            });
	        }
	    });

	    // Function to update the total amount
        function updateAmount() {
            var quantity = parseFloat($('#quantity').val());
            var rate = parseFloat($('#rate').val());
            if (!isNaN(quantity) && !isNaN(rate)) {
                var amount = quantity * rate;
                $('#amount').val(amount.toFixed(2));
                updateNetPayment();
            }
        }

	    // Event listeners for inputs that affect the final amount
	    // $('#quantity, #rate, #cash_advance, #hsd, #shortageAmount, #discount').on('input', function() {
	    //     updateAmount();
	    // });

	    // Function to update net payment
        function updateNetPayment() {
            var amount = parseFloat($('#amount').val());
            var cashAdvance = parseFloat($('#cash_advance').val()) || 0;
            var hsd = parseFloat($('#hsd').val()) || 0;
            var shortageAmount = parseFloat($('#shortageAmount').val()) || 0;
            var discount = parseDiscount($('#discount').val());

            var deductions = cashAdvance + hsd + shortageAmount + discount;
            
            if (!isNaN(amount)) {
                var netPayment = amount - deductions;
                $('#netPayment').val(netPayment.toFixed(2));
            }
        }

        // Helper function to parse discount which could be flat or percentage
            function parseDiscount(discountValue) {
                if (discountValue.includes('%')) {
                    var percentage = parseFloat(discountValue);
                    var amount = parseFloat($('#amount').val());
                    if (!isNaN(percentage) && !isNaN(amount)) {
                        return amount * (percentage / 100);
                    }
                } else {
                    return parseFloat(discountValue) || 0;
                }
            }

        // Event listeners for inputs that affect the final amount
           $('#quantity, #rate, #cash_advance, #hsd, #shortageAmount, #discount').on('input', function() {
               updateAmount();
           });

	    // Handle form submission with AJAX
	    $('form.needs-validation').on('submit', function(e) {
	        e.preventDefault();
	        var formData = $(this).serialize();
	        
	        $.ajax({
	            url: '/api/transactions/save',
	            type: 'POST',
	            data: formData,
	            success: function(response) {
	                // Handle response, perhaps clear the form or give a success message
	                console.log('Transaction saved successfully!');
	            },
	            error: function() {
	                console.log('Error saving transaction.');
	            }
	        });
	    });
	});

</script>
@endpush