@extends('layout.master')
@section('title', 'Vehicle Maintenance | 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">Maintenance</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">Maintenance Report</li>
						</ol>
					</nav>
				</div>
				<div class="ml-auto">
					<button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#maintenanceModal"><i class='bx bx-plus mr-1'></i>Create Report</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">Vehicle Maintenance</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">Vehicle Number</th>
									<th scope="col">Weekly Expenses</th>
									<th scope="col">Monthly Expenses</th>
									<th scope="col">Yearly Expenses</th>
									<th scope="col">Action</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>OD02A06182</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>
										<div class="btn-group m-1" role="group" aria-label="Basic example">
											<a href="{{route('vehicle.maintenance_report')}}" class="btn btn-info btn-sm"><i class="bx bx-notepad"></i>Transaction Reports
											</a>
											<button type="button" class="btn btn-danger btn-sm"><i class="bx bx-trash"></i>
											</button>
										</div>
									</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>OD02A06183</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>
										<div class="btn-group m-1" role="group" aria-label="Basic example">
											<button type="button" class="btn btn-info btn-sm"><i class="bx bx-notepad"></i>Transaction Reports
											</button>
											<button type="button" class="btn btn-danger btn-sm"><i class="bx bx-trash"></i>
											</button>
										</div>
									</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>OD02A06184</td>
									<td>100</td>
									<td>100</td>
									<td>100</td>
									<td>
										<div class="btn-group m-1" role="group" aria-label="Basic example">
											<button type="button" class="btn btn-info btn-sm"><i class="bx bx-notepad"></i>Transaction Reports
											</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>

<!-- Add Maintenance Modal -->
<div class="modal fade" id="maintenanceModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Vehicle Maintenance</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="needs-validation" method="post" action="#" novalidate>
                <div class="modal-body">
                    <div class="form-row">
                        <div class="col-md-4 mb-3">
                            <label for="enterDate">Date</label>
                            <input type="date" class="form-control form-control-sm" id="enterDate" required>
                            <div class="invalid-feedback">Please enter the date.</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="enterVehicleNumber">Enter Vehicle Number</label>
                            <input type="text" class="form-control form-control-sm" id="enterVehicleNumber" required>
                            <div class="invalid-feedback">Please enter a vehicle number.</div>
                        </div>
                        <div class="col-md-4 mb-3 d-flex align-items-end">
                            <button type="button" class="btn btn-success btn-sm" id="addItem">Add Item</button>
                            &nbsp;&nbsp;-Or-&nbsp;&nbsp;
                            <button type="button" class="btn btn-warning btn-sm" id="addService">Add Service</button>
                        </div>
                    </div>
                    <hr>
                    <div id="itemContainer"></div>
                    <div id="serviceContainer"></div>
                    
                    <div id="totalsDisplay" class="form-row mt-4">
                        <div class="col-md-3 mb-3"><strong>Total Item Amount:</strong> <span id="totalItemAmount">0</span></div>
                        <div class="col-md-3 mb-3"><strong>Total Service Amount:</strong> <span id="totalServiceAmount">0</span></div>
                        <div class="col-md-3 mb-3"><strong>Net Amount:</strong> <span id="netAmountDisplay">0</span></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">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Modal -->
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var itemTotal = 0;
    var serviceTotal = 0;

    // Add Item
    $('#addItem').click(function() {
        var newItemRow = `
            <div class="form-row item-row">
                <div class="col-md-4 mb-3">
                    <select class="custom-select custom-select-sm">
                        <option selected disabled value="">Select Product</option>
                        <option value="product1">Product 1</option>
                        <option value="product2">Product 2</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <select class="custom-select custom-select-sm">
                        <option selected disabled value="">Select Brand</option>
                        <option value="brand1">Brand 1</option>
                        <option value="brand2">Brand 2</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <select class="custom-select custom-select-sm">
                        <option selected disabled value="">Select Model</option>
                        <option value="model1">Model 1</option>
                        <option value="model2">Model 2</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <input type="number" class="form-control form-control-sm item-price-input" placeholder="Price" required>
                </div>
                <div class="col-md-2 mb-3">
                    <button type="button" class="btn btn-danger btn-sm removeItem">Remove</button>
                </div>
            </div>`;
        $('#itemContainer').append(newItemRow);
    });

    // Add Service
    $('#addService').click(function() {
        var newServiceRow = `
            <div class="form-row service-row">
                <div class="col-md-4 mb-3">
                    <input type="text" class="form-control form-control-sm" placeholder="Service Name" required>
                </div>
                <div class="col-md-4 mb-3">
                    <input type="text" class="form-control form-control-sm" placeholder="Remarks" required>
                </div>
                <div class="col-md-2 mb-3">
                    <input type="number" class="form-control form-control-sm service-price-input" placeholder="Price" required>
                </div>
                <div class="col-md-2 mb-3">
                    <button type="button" class="btn btn-danger btn-sm removeService">Remove</button>
                </div>
            </div>`;
        $('#serviceContainer').append(newServiceRow);
    });

    // Remove Item
    $(document).on('click', '.removeItem', function() {
        var priceValue = $(this).closest('.item-row').find('.item-price-input').val();
        itemTotal -= parseFloat(priceValue || 0);
        updateTotals();
        $(this).closest('.item-row').remove();
    });

    // Remove Service
    $(document).on('click', '.removeService', function() {
        var priceValue = $(this).closest('.service-row').find('.service-price-input').val();
        serviceTotal -= parseFloat(priceValue || 0);
        updateTotals();
        $(this).closest('.service-row').remove();
    });

    // Update totals when item price changes
    $(document).on('change', '.item-price-input', function() {
        var total = 0;
        $('.item-price-input').each(function() {
            total += parseFloat($(this).val() || 0);
        });
        itemTotal = total;
        updateTotals();
    });

    // Update totals when service price changes
    $(document).on('change', '.service-price-input', function() {
        var total = 0;
        $('.service-price-input').each(function() {
            total += parseFloat($(this).val() || 0);
        });
        serviceTotal = total;
        updateTotals();
    });

    // Function to update displayed totals
    function updateTotals() {
        $('#totalItemAmount').text(itemTotal.toFixed(2));
        $('#totalServiceAmount').text(serviceTotal.toFixed(2));
        var netAmount = itemTotal + serviceTotal;
        $('#netAmountDisplay').text(netAmount.toFixed(2));
    }
});
</script>

@endpush