@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">Vehicle</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">Transporting List</li>
						</ol>
					</nav>
				</div>
				<div class="ml-auto">
					<button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#addBillingModal"><i class='bx bx-plus mr-1'></i>Generate Bills</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">Bill 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">Bill No.</th>
									<th scope="col">Transporter Name</th>
									<th scope="col">Trip's</th>
									<th scope="col">Net Amount</th>
									<th scope="col">Payment Status</th>
									<th scope="col">Action</th>
								</tr>
							</thead>
							<tbody>
                                @php
                                    $perPage = $billings->perPage(); 
                                    $currentPage = $billings->currentPage();
                                    $counter = ($currentPage - 1) * $perPage + 1;
                                @endphp
                                @foreach ($billings as $billing)
								<tr>
									<th scope="row">{{ $counter++ }}</th>
									<td>{{ date('d-m-Y', strtotime($billing->date))}}</td>
									<td>{{ $billing->bill_number}}</td>
									<td>{{ $billing->transporter->name}}</td>
                                    <td>
                                        {{$billing->totalTrip}}
                                    </td>
									<td>{{ number_format($billing->totalNetAmount, 2) }}</td>

            <!-- <ul>
                @foreach ($billing->transactions as $transaction)
                <li>
                    TP Number: {{ $transaction->tp_number }}<br>
                    Source: {{ optional($transaction->fromDestination)->name ?? 'N/A' }}<br>
                    Destination: {{ optional($transaction->toDestination)->name ?? 'N/A' }}<br>
                    Vehicle: {{ optional($transaction->vehicle)->vehicle_number ?? 'N/A' }}<br>
                    Driver: {{ optional($transaction->driver)->name ?? 'N/A' }}<br>
                    Quantity: {{ $transaction->quantity }}<br>
                    Rate: {{ $transaction->rate }}<br>
                    Amount: {{ $transaction->amount }}<br>
                    Cash Advance: {{ $transaction->cash_advance }}<br>
                    HSD Advance: {{ $transaction->hsd_advance }}<br>
                    Shortage Amount: {{ $transaction->shortage_amount }}<br>
                    Net Amount: {{ $transaction->net_amount }}
                </li>
                @endforeach
            </ul>  -->               
									<td>
										<span class="badge badge-success">Paid</span>
									</td>
									<td>
										<div class="btn-group m-1" role="group" aria-label="Basic example">
											<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#viewBillModal"><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-warning btn-sm"><i class="bx bx-printer"></i>
											<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>

<!-- Add Billing Modal -->
<div class="modal fade" id="addBillingModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Billing 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">
                    <!-- Owner Details -->
                    <div class="form-row">
                        <div class="col-md-2 mb-3">
                            <label for="date">Date</label>
                            <input type="date" class="form-control form-control-sm" id="date" required>
                        </div>
                        <div class="col-md-4 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 select2-sm">
                            <label for="vehicle_owner">Vehicle Owner</label>
                            <select class="single-select" id="vehicle_owner" required></select>
                            <div class="invalid-feedback">Please select a valid transporter.</div>
                        </div>
                        <div class="col-md-3 mb-3 d-flex align-items-end">
                            <button type="button" class="btn btn-success btn-sm" id="add">Show</button>
                        </div>
                    </div>
                    
                    <!-- Dynamic Rows -->
                    <table class="table" id="entryTable"></table>
                    <hr>
                    <!-- Totals Display -->
                    <div id="totals" class="form-row mt-4 justify-content-between" style="color:cyan;">
                        <div class="col-md-2 mb-3"><strong>Total Tonnes:</strong> <span id="totalTonnes">0</span></div>
                        <div class="col-md-2 mb-3"><strong>Total Amount:</strong> <span id="totalAmount">0</span></div>
                        <div class="col-md-2 mb-3"><strong>Total HSD:</strong> <span id="totalHSD">0</span></div>
                        <div class="col-md-2 mb-3"><strong>Total Cash:</strong> <span id="totalCash">0</span></div>
                        <div class="col-md-2 mb-3"><strong>Net Amount:</strong> <span id="netAmount">0</span></div>
                        <div class="col-md-1 mb-3">All <input type="checkbox" id="selectAll"></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" class="btn btn-primary btn-sm" id="save">Generate Bill</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Bill Modal -->
<div class="modal fade" id="viewBillModal" tabindex="-1" role="dialog" aria-labelledby="viewBillModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-body">
                <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>
                <div style="text-align: center; position: relative; border-top: solid 2px #fff;border-left: solid 2px #fff;border-right: solid 1px #fff; padding-top: 20px; padding-bottom: 20px;">
                    <h1 style="margin: 0; font-size: 18px; font-family: 'Georgia', serif;">SAGUN LOGISTIC PVT LTD<span class="float-right pr-3 close text-white" data-dismiss="modal" type="button" aria-label="Close">&times;</span></h1>
                    <hr style="height:1px;background-color:white">

                    <p style="margin: 0; font-size: 14px;">NAME - AJEET KUMAR GUPTA</p>
                    <p style="margin: 0; font-size: 14px; font-weight: bold;">AC NO - 3264846246</p>
                    <p style="margin: 0; font-size: 14px; font-weight: bold;">IFSC CODE - CBIN0284621</p>
                    <p style="margin: 0; font-size: 14px;">CENTRAL BANK OF INDIA (BARBIL)</p>
                    <p style="margin: 0; font-size: 14px; font-weight: bold;">PAN NO - AHCPG6519K</p>
                    <p style="margin: 0; font-size: 14px;">MOB NO - 8249027652, 9937966308</p>
                </div>
                <table style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr>
                            <th style="border: 1px solid #000; padding: 5px; text-align: left; font-size: 12px; background-color: #f2f2f2;" colspan="9"></th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;" colspan="3">
                                DATE: - 21.04.24
                            </th>
                        </tr>
                        <tr>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">SL NO</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">LOAD DATE</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">VEHICLE NO</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">FROM - TO</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">TP NO</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">TONES</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">RATE</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">AMT</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">HSD</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">CASH</th>
                            <th style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color: black;">NET AMT</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="height: 30px;">
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">1</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">18.04.24</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">OD09K3916</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">KAMANDO - CHALIYAMA</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">L00876</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">40.760</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">770</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">31385</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">13000</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">4200</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;">31385</td>
                        </tr>
                        <tr style="height: 30px;">
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;"></td>
                        </tr>
                        <tr style="height: 30px; font-weight: bold;">
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;" colspan="5"></td>
                            <td style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color:black">40.760</td>
                            <td style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color:black"></td>
                            <td style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color:black">31385</td>
                            <td style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color:black">13000</td>
                            <td style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color:black">4200</td>
                            <td style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; color:black">31385</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px;" colspan="8" align="right"></td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px; font-weight: bold;" colspan="2">ADV</td>
                            <td style="border: 1px solid #fff; padding: 5px; text-align: center; font-size: 12px; font-weight: bold;">17200</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2;" colspan="8" align="right"></td>
                            <td style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; font-weight: bold; color:black" colspan="2">TOTAL AMT</td>
                            <td style="border: 1px solid #000; padding: 5px; text-align: center; font-size: 12px; background-color: #f2f2f2; font-weight: bold; color:black">14185</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

@endsection

@push('scripts')

<script>
$(document).ready(function() {
    // Function to handle click event for "Select All" checkbox
    $('#selectAll').on('click', function() {
        $('input[name="selectedEntries[]"]').prop('checked', $(this).prop('checked'));
    });

    // 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 Owner
        var searchVehicleOwnerUrl = "{{ route('vehicle.search_vehicle_owner') }}";
        $('#vehicle_owner').select2({
            theme: 'bootstrap4',
                width: '100%', // Ensure the width is set correctly
                placeholder: "Select a vehicle owner",
            allowClear: Boolean($(this).data('allow-clear')),
            ajax: {
                url: searchVehicleOwnerUrl,
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        term: params.term // search term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            }
        });

    $('#add').on('click', function() {
    // Get selected transporter ID and date
    var selectedDate = $('#date').val();
    var transporterId = $('#transporter').val();
    var vehicleOwnerId = $('#vehicle_owner').val();

    // Reference the button
        var $button = $(this); // add btn target ('#add') name of show btn

    $.ajax({
        url: "{{ route('vehicle.fetch_unbilled') }}",
        type: 'GET',
        dataType: 'json',
        data: {
            selected_date: selectedDate,
            transporter_id: transporterId,
            vehicle_owner_id: vehicleOwnerId
        },
        beforeSend: function() {
            // Add spinner to the button and disable it
            $button.prop('disabled', true);
            $button.html('<span class="spinner-border spinner-border-sm"></span> fetching data...');
        },
        success: function(response) {
            var table = $('#entryTable');
            table.empty(); // Clear existing rows

            // Check if response contains data
            if (response.data && response.data.length > 0) {
                // Add table headers
                var headers = '<tr>';
                headers += '<th>Date</th>';
                headers += '<th>Vehicle number</th>';
                headers += '<th>TP Number</th>';
                headers += '<th>Destination</th>';
                headers += '<th>Quantity</th>';
                headers += '<th>Rate</th>';
                headers += '<th>Amount</th>';
                headers += '<th>Net Amount</th>';
                headers += '<th>Select</th>';
                headers += '<th>View</th>';
                headers += '</tr>';
                table.append(headers);

                // Add table rows
                $.each(response.data, function(index, entry) {
                    var row = '<tr>';
                    row += '<td>' + entry.date + '</td>';
                    row += '<td>' + entry.vehicle_number + '</td>';
                    row += '<td>' + entry.tp_number + '</td>';
                    row += '<td>' + entry.from_destination + ' <i class="lni lni-arrows-horizontal m-2"></i> ' + entry.to_destination + '</td>';
                    row += '<td>' + entry.quantity + '</td>';
                    row += '<td>' + entry.rate + '</td>';
                    row += '<td>' + entry.amount + '</td>';
                    row += '<td>' + entry.net_amount + '</td>';
                    row += '<td><input type="checkbox" name="selectedEntries[]" value="' + entry.id + '"></td>';
                    row += '<td><button type="button" class="btn btn-info btn-sm view-details" data-toggle="modal" data-target="#viewExpiryModal"><i class="lni lni-eye"></i></button></td>';
                    row += '</tr>';
                    table.append(row);
                });

                // Show footer calculation values
                $('#totalTonnes').text(response.total_tonnes);
                $('#totalAmount').text(response.total_amount);
                $('#totalHSD').text(response.total_hsd);
                $('#totalCash').text(response.total_cash);
                $('#netAmount').text(response.total_net_amount);

                table.addClass('table-sm');
            } else {
                    // Display "Data not available" message
                    table.append('<tr><td colspan="10">Ops! Data not available</td></tr>');
                }
            },
            error: function() {
                table.empty(); // Clear the loading spinner
                table.append('<tr><td colspan="10">Error fetching data. Please try again.</td></tr>');
            },
            complete: function() {
                // Restore the button's original state
                $button.prop('disabled', false);
                $button.html('Show'); // Change 'Add' to the original button text
            }
        });
    });

    // Add click event handler for Save button
    $('#save').on('click', function(event) {
    	event.preventDefault();
        var selectedEntries = [];
        $('input[name="selectedEntries[]"]:checked').each(function() {
            selectedEntries.push($(this).val());
        });

        // Get the selected date and transporter ID
        var selectedDate = $('#date').val();
        var transporterId = $('#transporter').val();
        var vehicleOwnerId = $('#vehicle_owner').val();

        $.ajax({
            url: "{{ route('vehicle.transaction_billing') }}",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                date: selectedDate,
                transporter_id: transporterId,
                vehicle_owner_id: vehicleOwnerId,
                selectedEntries: selectedEntries
            },
            success: function(response) {
                $('#addBillingModal').modal('hide');

                // Notification for success
                Lobibox.notify('success', {
                    pauseDelayOnHover: true,
                    continueDelayOnInactiveTab: false,
                    position: 'top right',
                    icon: 'bx bx-check-circle',
                    msg: 'Bill ganerate successfully!'
                });
            },
            error: function(response) {
            	Lobibox.notify('error', {
            	    pauseDelayOnHover: true,
            	    continueDelayOnInactiveTab: false,
            	    position: 'top right',
            	    icon: 'bx bx-x-circle',
            	    msg: 'Error saving billing data. Please try again.'
            	});
            }
        });

    });
});
</script>

@endpush