<?php $__env->startSection('content'); ?>

<?php
 $vehicle_type=[];
?>

<!--<style>-->


<!--	.modal.left .modal-dialog,-->
<!--	.modal.right .modal-dialog {-->
<!--		position: fixed;-->
<!--		margin: auto;-->
<!--		width: 320px;-->
<!--		height: 100%;-->
<!--		-webkit-transform: translate3d(0%, 0, 0);-->
<!--		    -ms-transform: translate3d(0%, 0, 0);-->
<!--		     -o-transform: translate3d(0%, 0, 0);-->
<!--		        transform: translate3d(0%, 0, 0);-->
<!--	}-->

<!--	.modal.left .modal-content,-->
<!--	.modal.right .modal-content {-->
<!--		height: 100%;-->
<!--		overflow-y: auto;-->
<!--	}-->
	
<!--	.modal.left .modal-body,-->
<!--	.modal.right .modal-body {-->
<!--		padding: 15px 15px 80px;-->
<!--	}-->


/*Right*/
<!--	.modal.right.fade .modal-dialog {-->
<!--		right: -320px;-->
<!--		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;-->
<!--		   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;-->
<!--		     -o-transition: opacity 0.3s linear, right 0.3s ease-out;-->
<!--		        transition: opacity 0.3s linear, right 0.3s ease-out;-->
<!--	}-->
	
<!--	.modal.right.fade.in .modal-dialog {-->
<!--		right: 0;-->
<!--	}-->

/* ----- MODAL STYLE ----- */
<!--	.modal-content {-->
<!--		border-radius: 0;-->
<!--		border: none;-->
<!--	}-->

<!--	.modal-header {-->
<!--		border-bottom-color: #EEEEEE;-->
<!--		background-color: #FAFAFA;-->
<!--	}-->

/* ----- v CAN BE DELETED v ----- */



<!--</style>-->



<div class="main-mobile-header doc-mobile-header">
      <a id="menuLink" href="#" class="menu-link"><i class="ri-menu-line"></i></a>
    </div>

   

    



     <div class="main main-app p-3 p-lg-4">
     	
        <div class="mb-4">
          <ol class="breadcrumb fs-sm mb-1">
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Add Vehicle</li>
          </ol>
        </div>

      

      <div class="">
        
        <div class="row">

          <div class="col-lg-8">
            <h2 class="main-title">Add Vehicle</h2>
            
          </div>
          <div style="text-align: right;" class="col-lg-4 text-right">
           <!--  <button type="button" class="btn btn-primary">Add Taxmaster</button> -->
            <!-- <a href="/form" class="btn btn-primary">Add Taxmaster</a>
 -->
          </div>

        </div>

        <hr class="main-separator">        
    
            
<div class="card card-shadow-apply">
    <div class="card-body">
        <form action="/vehicle/store" method="POST" enctype="multipart/form-data">
            <?php echo csrf_field(); ?>
            <div class="row">
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Vehicle ID</label>
                        <input type="text" name="vehicle_id" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Vehicle Type</label>
                        <select class="form-select" name="vehicle_type">
                            <option vlaue="">Select</option>
                            <?php $__currentLoopData = $vehicle_type; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                      <option><?php echo e($service); ?></option>
                             <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                        <!--<input type="text" name="vehicle_type" class="form-control" required />-->
                    </div>
                </div>
                
                <!--<div class="col-sm-4">-->
                <!--    <div class="mb-3">-->
                <!--        <label class="form-label">Axle Configuration</label>-->
                <!--        <select class="form-select" name="vehicle_type">-->
                <!--            <option vlaue="">Select</option>-->
                <!--            <option vlaue="Bike">Default</option>-->
                <!--            <option vlaue="Bike">Custom</option>-->
                            
                <!--        </select>-->
                        <!--<input type="text" name="vehicle_type" class="form-control" required />-->
                <!--    </div>-->
                <!--</div>-->
                
    <!-- Rest of your form fields -->

                <!--<div style="display: block; background: snow;" class="axle_configuration" id="axleContainer">-->
                    <!-- Initial trip input fields -->
                <!--    <div class="row multiple_axle">-->
                <!--        <div class="col-sm-4">-->
                <!--            <div class="mb-3">-->
                <!--                <label class="form-label">Axle</label><label style="color: red;">*</label>-->
                <!--                <input name="axle[]" type="text" class="form-control" value="0" readonly />-->
                <!--                <small style="color: red;"></small>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--        <div class="col-sm-4">-->
                <!--            <div class="mb-3">-->
                <!--                <label class="form-label">No of Tyres</label>-->
                <!--                <select name="no_tyre[]" class="form-select">-->
                <!--                    <option>1 Tyre</option>-->
                <!--                    <option>2 Tyre</option>-->
                <!--                    <option>4 Tyre</option>-->
                <!--                </select>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->

                <!--<a href="javascript:void(0);" onclick="addAxle()">Add Axle</a>-->

               <script>
    let axleCount = 0;

    function addAxle() {
        const container = document.getElementById('axleContainer');

        // Create a new row for Axle Configuration
        const newRow = document.createElement('div');
        newRow.className = 'row multiple_axle';

        // Create the Axle input field
        const axleDiv = document.createElement('div');
        axleDiv.className = 'col-sm-4';
        const axleLabel = document.createElement('label');
        axleLabel.className = 'form-label';
        axleLabel.innerText = 'Axle';
        const axleInput = document.createElement('input');
        axleInput.name = 'axle[]';
        axleInput.type = 'text';
        axleInput.className = 'form-control';
        axleInput.value = '0';
        axleInput.readonly = '';
        const axleError = document.createElement('small');
        axleError.style.color = 'red';

        // Create the No of Tyres select field
        const tyresDiv = document.createElement('div');
        tyresDiv.className = 'col-sm-4';
        const tyresLabel = document.createElement('label');
        tyresLabel.className = 'form-label';
        tyresLabel.innerText = 'No of Tyres';
        const tyresSelect = document.createElement('select');
        tyresSelect.name = 'no_tyre[]';
        tyresSelect.className = 'form-select';
        const tyresOptions = ['1 Tyre', '2 Tyre', '4 Tyre'];
        for (const optionText of tyresOptions) {
            const option = document.createElement('option');
            option.value = optionText;
            option.text = optionText;
            tyresSelect.appendChild(option);
        }

        // Create the Remove button
        const removeButtonDiv = document.createElement('div');
        removeButtonDiv.className = 'col-sm-4';
        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.style.marginTop = '1.8rem';
        removeButton.className = 'btn btn-danger';
        removeButton.innerText = 'Remove';
        removeButton.addEventListener('click', function () {
            container.removeChild(newRow); // Remove the entire row
        });

        // Append elements to the new row
        axleDiv.appendChild(axleLabel);
        axleDiv.appendChild(axleInput);
        axleDiv.appendChild(axleError);
        tyresDiv.appendChild(tyresLabel);
        tyresDiv.appendChild(tyresSelect);
        removeButtonDiv.appendChild(removeButton);
        newRow.appendChild(axleDiv);
        newRow.appendChild(tyresDiv);
        newRow.appendChild(removeButtonDiv);

        // Append the new row to the container
        container.appendChild(newRow);

        // Increment the axleCount
        axleCount++;

        // Update the 'for' attribute of the label for accessibility
        axleLabel.htmlFor = 'axle-' + axleCount;
        tyresLabel.htmlFor = 'no_tyre-' + axleCount;
    }
</script>



                
                
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Make</label>
                        <input type="text" name="make" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Model</label>
                        <input type="text" name="model" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Year</label>
                        <input type="number" name="year" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">VIN Number</label>
                        <input type="text" name="vin_number" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Registration Number</label>
                        <input type="text" name="registration_number" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Title Status</label>
                        <input type="text" name="title_status" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Fuel Type</label>
                        <input type="text" name="fuel_type" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Engine Type</label>
                        <input type="text" name="engine_type" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Transmission Type</label>
                        <input type="text" name="transmission_type" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Color</label>
                        <input type="text" name="color" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Mileage</label>
                        <input type="number" name="mileage" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Purchase Date</label>
                        <input type="date" name="purchase_date" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Purchase Price</label>
                        <input type="number" name="purchase_price" class="form-control" step="0.01" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Owner Name</label>
                        <input type="text" name="owner_name" class="form-control" required />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Owner Contact</label>
                        <input type="text" name="owner_contact" class="form-control" required />
                    </div>
                </div>
                
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">GPS Device ID</label>
                        <input type="text" name="gps_device_id" class="form-control" required />
                    </div>
                </div>
               
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label class="form-label">Vehicle Class</label>
                        <input type="text" name="vehicle_class" class="form-control" required />
                    </div>
                </div>
                <!--<div class="col-sm-4">-->
                <!--    <div class="mb-3">-->
                <!--        <label class="form-label">License Renewal Date</label>-->
                <!--        <input type="date" name="license_renewal_date" class="form-control" required />-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="col-sm-4">-->
                <!--    <div class="mb-3">-->
                <!--        <label class="form-label">Emissions Testing Date</label>-->
                <!--        <input type="date" name="emissions_testing_date" class="form-control" required />-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="col-sm-4">-->
                <!--    <div class="mb-3">-->
                <!--        <label class="form-label">Emissions Compliance</label>-->
                <!--        <input type="text" name="emissions_compliance" class="form-control" required />-->
                <!--    </div>-->
                <!--</div>-->
                <div class="col-sm-12">
                    <div class="mb-3">
                        <label class="form-label">Notes/Comments</label>
                        <textarea name="notes_comments" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="buttons-alignment mt-4">
                <div>
                    <button type="submit" class="btn btn-primary submit-button-alignment">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>


	<div class="text-center">
		

		<button type="button" class="btn btn-form" id="myformm">
			Right Sidebar Modal
		</button>
	</div>

<div class="modal" id="myformm">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header" >
        <h4 class="modal-title">Add Vehicle Documents</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" style="margin-top: 1px;"></button>
      </div>
      <!-- Modal body -->
      <div class="modal-body" style="margin-top: -15px;">
        <div class="card-body">
          <form action="/deals/store" method="POST" id="cat" enctype="multipart/form-data">
          <?php echo csrf_field(); ?>
          <br>
          <div class="row">
            <div class="col-sm-6">
                <div class="mb-3">
                    <label class="form-label">ID Number
                <span class="required-field">*</span>
              </label>
                <input type="text" name="id_number" id="id_number" class="form-control" required>
                </div>
            </div>
            
            <div class="col-sm-6">
                <div class="mb-3">
                    <label class="form-label">Issue Date
                <span class="required-field">*</span>
              </label>
                <input type="text" name="issue_date" id="issue_date" class="form-control" required>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="mb-3">
                    <label class="form-label">Expiry Date
                <span class="required-field">*</span>
              </label>
                <input type="text" name="expiry_date" id="expiry_date" class="form-control" required>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="mb-3">
                    <label class="form-label">Renewal Date
                <span class="required-field">*</span>
              </label>
                <input type="text" name="issue_date" id="issue_date" class="form-control" required>
                </div>
            </div>
            
                            
                             <div class="col-sm-6">
                                <div class="mb-3">

                                    <label class="form-label">Attachment File

                                        <small class="optional-color">(optional)</small>
                                    </label>
                                    <input class="form-control" name="attachment" type="file" id="attachment">
                                </div>
                            </div>
                            
                                        <div class="col-sm-6">
                                <div class="mb-3">

                                    <label class="form-label">Remarks
                                        <span class="required-field">*</span>
                                    </label>
                                    <textarea name="remarks" id="remarks" class="form-control"></textarea>
                                </div>
                            </div><!-- Col -->



            
            
              
          </div><!-- Row -->
          <div class="buttons-alignment mt-4 ml-auto">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
                </form>
        </div>
      </div>
    </div>
  </div>
</div>


	
	<!-- Modal -->
	<div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
		<div class="modal-dialog" role="document">
			<div class="modal-content">

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel2">Right Sidebar</h4>
				</div>

				<div class="modal-body">
					<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</p>
				</div>

			</div><!-- modal-content -->
		</div><!-- modal-dialog -->
	</div><!-- modal -->
	






        <br><br><br>

        

      </div><!-- container -->

     
    <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    </style>


<script>
$(document).ready(function() {
   $('#myformm').click(function() {
  
  alert(kk)
      
  });

});

</script>


<script>
    $(document).ready(function() {
        $("#tour_package").validate({
            rules: {
                package_name: {
                    required: true,
                    maxlength: 20,
                },
                destination: {
                    required: true,
                    maxlength: 20,
                },
                days: {
                    required: true,
                    maxlength: 20,
                },
                hotel_type: {
                    required: true,
                    maxlength: 20,
                },
                meal: {
                    required: true,
                    maxlength: 20,
                },
                currency: {
                    required: true,
                    maxlength: 20,
                },
                price_per_person: {
                    required: true,
                    maxlength: 20,
                },
            },
            messages: {
                package_name: {
                    required: "Package Name is required",
                    maxlength: "Package Name cannot be more than 20 characters"
                },

                destination: {
                    required: "Destination  is required",
                    maxlength: "Destination  cannot be more than 20 characters",
                },

                days: {
                    required: "Day is required",
                    maxlength: "Day cannot be more than 20 characters",
                },

                hotel_type: {
                    required: "Hotel is required",
                    maxlength: "Hotel cannot be more than 20 characters",
                },

                meal: {
                    required: "Meal Price is required",
                    maxlength: "Meal Price cannot be more than 20 characters",
                },

                currency: {
                    required: "Currency is required",
                    maxlength: "Currency cannot be more than 20 characters",
                },

                price_per_person: {
                    required: "Price is required",
                    maxlength: "Price cannot be more than 20 characters",
                },

            }
        });
    });

    $('.select2').select2();
</script>



<?php $__env->stopSection(); ?>


<?php echo $__env->make('layout.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/vokks/public_html/tms1/resources/views/vehicle/create.blade.php ENDPATH**/ ?>