@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">Destination</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>
								@php
					                $perPage = $transactions->perPage(); 
					                $currentPage = $transactions->currentPage();
					                $counter = ($currentPage - 1) * $perPage + 1;
					            @endphp

								@foreach ($transactions as $transaction)
								<tr>
									<th scope="row">{{ $counter++ }}</th>
									<td>{{ $transaction->date }}</td>
									<td>{{ $transaction->vehicle->vehicle_number }} <br><small style="color: #e79eb6;">Driver: {{ $transaction->driver->name }}</small></td>
									<td>{{ $transaction->transporter->name }}</td>
									<td class="font-weight-bold">
										{{ $transaction->fromDestination->name }} <i class="lni lni-arrows-horizontal m-2"></i> {{ $transaction->toDestination->name }}
									</td>
									<td>{{ $transaction->tp_number }}</td>
									<td>{{ $transaction->net_amount }}</td>
									<td>
										@if($transaction->billed)
									        <span class="badge badge-success">Billed</span>
									    @else
									        <span class="badge badge-danger">Unbilled</span>
									    @endif
									</td>
									<td>
										<div class="btn-group m-1" role="group" aria-label="Basic example">
											<button type="button" class="btn btn-primary btn-sm view-details" data-toggle="modal" data-target="#viewExpiryModal" data-vehicle="{{ json_encode($transaction->only(['quantity','rate', 'amount', 'cash_advance', 'hsd_advance', 'shortage_amount', 'remarks', 'discount', 'net_amount'])) }}"><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>
								@endforeach								
							</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 select2-sm">
                            <label for="transporter">Transporter</label>
	                        <select class="single-select" id="transporter" required></select>
	                        <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 select2-sm">
                    	<div class="col-md-4 mb-3">
                            <label for="vehicle_number">Vehicle Number</label>
                            <select class="single-select" id="vehicle_number" required></select>
                            <div class="invalid-feedback">Please provide the vehicle number.</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" 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" required>
                            <div class="invalid-feedback">Please provide the amount.</div>
                        </div>
                    </div>

                    <!-- Diesel Advance and Shortage Amount -->
                    <div class="form-row justify-content-between">
                        <div class="col-md-4 mb-3 select2-sm">
                            <label for="driver">Driver Name</label>
                            <select class="single-select" id="driver" required></select>
                            <div class="invalid-feedback">Please provide the driver name.</div>
                        </div>
                        <div class="col-md-2 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-2 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="text" class="form-control form-control-sm" id="shortageAmount" required>
                            <div class="invalid-feedback">Please provide the shortage 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-2 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 class="col-md-3 mb-3">
                            <label for="netPayment">Net Payment</label>
                            <input type="text" 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>

<!-- View Transaction Entry Modal -->
<div class="modal fade" id="viewTransactionModal" tabindex="-1" role="dialog" aria-labelledby="viewTransactionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="viewTransactionTitleModalLabel">Transaction Details</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body bg-light">
            	<div id="loader" style="justify-content: center; align-items: center; display: none; flex-direction: column;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <div style="margin-top: 12px; margin-left:12px">Loading...</div> <!-- Loading text -->
                </div>
                <ul class="list-group list-group-flush" style="display: none;">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Quantity:</b> <span class="badge badge-primary" id="modalQuantity"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Rate:</b> <span class="badge badge-primary" id="modalRate"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Ammount:</b> <span class="badge badge-primary" id="modalAmount"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Cash Advance:</b> <span class="badge badge-primary" id="modalCashAdvance"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>HSD Advance:</b> <span class="badge badge-primary" id="modalHsdAdvance"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Shortage Amount:</b> <span class="badge badge-primary" id="modalShortageAmount"></span>
                    </li>
                    <!-- <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Remarks:</b> <span class="badge badge-primary" id="modalRemarks"></span>
                    </li> -->
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <b>Discount:</b> <span class="badge badge-primary" id="modalDiscount"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
	                    <textarea class="form-control form-control-sm" id="modalRemarks" disabled></textarea>
	                </li>
                </ul>
            </div>
            <div class="modal-footer bg-white text-dark justify-content-between">
            	<b>Net Amount:</b> <span class="badge badge-primary" id="modalNetAmount"></span>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->
@endsection

@push('scripts')
<script>
	$(document).ready(function() {
		// Get Transporter
		var searchTransporterUrl = "{{ route('vehicle.search_transporters') }}";
	    // Initialize Select2 elements
	    $('#transporter').select2({
        theme: 'bootstrap4',
		    width: '100%', // Ensure the width is set correctly
		    placeholder: "Select a transporter",
        allowClear: Boolean($(this).data('allow-clear')),
	        ajax: {
	            url: searchTransporterUrl, // API endpoint for searching destinations
	            dataType: 'json',
	            delay: 250,
	            data: function (params) {
                    return {
                        q: params.term // Search term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.map(item => ({
                            id: item.id, 
                            text: item.name
                        }))
                    };
                },
	            cache: true
	        }
	    });

	    // Get Vehicle Number
		var searchVehicleUrl = "{{ route('vehicle.search_vehicle') }}"; // Correct the route if necessary

		// Initialize Select2 elements for driver
		$('#vehicle_number').select2({
		    theme: 'bootstrap4',
		    width: '100%', // Ensure the width is set correctly
		    placeholder: "Select a vehicle number",
		    allowClear: Boolean($(this).data('allow-clear')),
		    ajax: {
		        url: searchVehicleUrl, // API endpoint for searching drivers
		        dataType: 'json',
		        delay: 250,
		        data: function (params) {
		            return {
		                q: params.term // search term
		            };
		        },
		        processResults: function (data) {
		            return {
		                results: data.map(item => ({
		                    id: item.id, 
		                    text: item.vehicle_number
		                }))
		            };
		        },
		        cache: true
		    }
		});

	    // Get Driver
		var searchDriverUrl = "{{ route('vehicle.search_driver') }}"; // Correct the route if necessary

		// Initialize Select2 elements for driver
		$('#driver').select2({
		    theme: 'bootstrap4',
		    width: '100%', // Ensure the width is set correctly
		    placeholder: "Select a driver name",
		    allowClear: Boolean($(this).data('allow-clear')),
		    ajax: {
		        url: searchDriverUrl, // API endpoint for searching drivers
		        dataType: 'json',
		        delay: 250,
		        data: function (params) {
		            return {
		                q: params.term // search term
		            };
		        },
		        processResults: function (data) {
		            return {
		                results: data.map(item => ({
		                    id: item.id, 
		                    text: item.name
		                }))
		            };
		        },
		        cache: true
		    }
		});


		// Destination 
		var searchDestinationUrl = "{{ route('vehicle.search_destinations') }}";
	    // Initialize Select2 elements
	    $('#transportFrom, #transportTo').select2({
        theme: 'bootstrap4',
        theme: 'bootstrap4',
		    width: '100%', // Ensure the width is set correctly
		    placeholder: "Select a location",
        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
	    $('#transactionEntryModal form').on('submit', function(e) {
	        e.preventDefault();
	        var saveTransactionUrl = "{{ route('vehicle.transaction_entry') }}"; // Adjust the route as necessary
	        // Manually collect each form value
	        var formData = {
	            date: $('#date').val(),
	            transporter_id: $('#transporter').val(),
	            tp_number: $('#tpNumber').val(),
	            transport_from: $('#transportFrom').val(),
	            transport_to: $('#transportTo').val(),
	            vehicle_number: $('#vehicle_number').val(),
	            quantity: $('#quantity').val(),
	            rate: $('#rate').val(),
	            amount: $('#amount').val(),
	            driver: $('#driver').val(),
	            cash_advance: $('#cash_advance').val(),
	            hsd: $('#hsd').val(),
	            shortage_amount: $('#shortageAmount').val(),
	            remarks: $('#remarks').val(),
	            discount: $('#discount').val(),
	            net_payment: $('#netPayment').val(),
	            _token: "{{ csrf_token() }}" // Include CSRF token
	        };
	        
	        // AJAX call
	        $.ajax({
	            url: saveTransactionUrl,
	            type: 'POST',
	            data: formData,
	            success: function(response){
	                console.log(response); // Log the response to the console
	                $('#transactionEntryModal').modal('hide'); // Close the modal
	                // Reset the form after successful submission
	                // $('#addVehicleModal form')[0].reset();

	                // Notification for success
	                Lobibox.notify('success', {
	                    pauseDelayOnHover: true,
	                    continueDelayOnInactiveTab: false,
	                    position: 'top right',
	                    icon: 'bx bx-check-circle',
	                    msg: 'Transaction added successfully!'
	                });
	            },
	            error: function(error){
	                console.error(error); // Log the error to the console
	                Lobibox.notify('error', {
	                    pauseDelayOnHover: true,
	                    continueDelayOnInactiveTab: false,
	                    position: 'top right',
	                    icon: 'bx bx-x-circle',
	                    msg: 'Error: Unable to save vehicle details'
	                });
	            }
	        });
	    });
	});

</script>

<!-- View Transaction Entry Modal -->
<script>
$(document).ready(function() {
    $('.view-details').on('click', function() {
        var vehicle = $(this).data('vehicle');
        // Show the loader and the "Loading..." text
        $('#viewTransactionModal #loader').css('display', 'flex');
        $('#viewTransactionModal .list-group').hide();

        // Simulate a delay if fetching data asynchronously
        setTimeout(function() {
            // Assuming data fetching and processing happens here
            $('#modalQuantity').text(vehicle.quantity);
            $('#modalRate').text(vehicle.rate);
            $('#modalAmount').text(vehicle.amount);
            $('#modalCashAdvance').text(vehicle.cash_advance);
            $('#modalHsdAdvance').text(vehicle.hsd_advance);
            $('#modalShortageAmount').text(vehicle.shortage_amount);
            $('#modalRemarks').text(vehicle.remarks);
            $('#modalDiscount').text(vehicle.discount);
            $('#modalNetAmount').text(vehicle.net_amount);

            // Hide the loader and the "Loading..." text, then show the loaded data
            $('#viewTransactionModal #loader').hide();
            $('#viewTransactionModal .list-group').css('display', 'block');

        }, 1000); // delay of 1000 milliseconds for demonstration

        $('#viewTransactionModal').modal('show');
    });
});
</script>
@endpush