<style>
    .modal-dialog {
        max-width: 50% !important;
    }
</style>


<div class="col-md-12 px-2">
    
   <!-- div for the wallet summarary  -->
   
   
   <div class="d-flex py-2 justify-content-between align-item-center">
      
      <h3 class="text-center py-3 m-0">Vehicles Make List</h3>

      <span class="py-3">  
          <button type="button" class="btn btn-primary divbtnadd" style="float:right;" onclick="showhidediv('divform','divdata','divbtngo','divbtnadd'),resetdata();">Add New Vehicle Make</button>
    	  <button type="button" class="btn btn-primary divbtngo"  style="float:right;" onclick="showhidediv('divdata','divform','divbtnadd','divbtngo'),resetdata();">Go to Vehicle Make List</button>
    							
      
   </span>
    </div>

    </div>
    <br>   
      
     <br>
     <?php 
	$success=$this->session->flashdata('success');
	$error=$this->session->flashdata('error');
	
	if(!empty($success)) { ?>

	<div class="alert alert-success">
	<strong>Success!</strong> <?php echo $this->session->flashdata('success'); ?>
	</div>

	<?php } ?>
	<?php if(!empty($error)) { ?>

	<div class="alert alert-danger">
	<strong>Error!</strong> <?php echo $this->session->flashdata('error'); ?>
	</div>

	<?php } ?> 
   <div class="row divform">
		<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
			<div class="card">
				<h5 class="card-header">Add Vehicle Make Form</h5>
				<div class="card-body">
				    <form method="POST" id="VehicleMakeForm" name="VehicleMakeForm"  action="<?php echo base_url()?>vehicle/make_add" accept-charset="UTF-8" class="form-horizontal ng-pristine ng-valid">
                        <input type="hidden" name="formevent" id="formevent" value="submit">
						<input type="hidden" name="id" id="id" value="">
                        <div class="box-body">
                           <div class="form-group row">
                                <label class="col-12 col-sm-3 col-form-label text-sm-right">Name <em class="text-danger">*</em></label>
                                <div class="col-12 col-sm-12 col-lg-4">
                                    <input type="text" required="" placeholder="Enter Name" class="form-control" id="name" name="name">
                                </div>
    							
                           </div>
                         
                           <div class="form-group row">
                                <label class="col-12 col-sm-3 col-form-label text-sm-right ">Status<em class="text-danger">*</em></label>
                                <div class="col-12 col-sm-12 col-lg-4">
                                   <select class="form-control" id="status" name="status">
                                   <option selected="selected" value="">Select</option>
                                   <option value="1">Active</option>
                                   <option value="0">Inactive</option>
                                    </select>
                                </div>
    							
                           </div>
                         
                       </div>
                        <div class="form-group row">
							<div class="col-12 col-sm-12 col-lg-4 offset-3" >
                                <input type="submit" class="btn btn-success form-control-lg" id="btnadd" name="btnadd" value="Submit">
								<input type="reset" class="btn btn-primary" id="btnreset" name="btnreset" value="Reset" onclick="resetdata();">
                            </div>
						</div>
                    </form>
					
				</div>
			</div>
		</div>
     </div>
    <div class="row divdata"> 
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="tab-content" id="pills-tabContent">
         <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
            <caption >
               <div class="row justify-content-end col-12">
                   <div class="col-lg-9 row px-0 py-1">
                      <div class="col-lg-5">
                         <div class="d-flex justify-content-end align-items-center gap-2 ">
                            <i class="fa fa-filter text-primary fw-bolder" aria-hidden="true"></i>
                            <label class="fw-bolder">Filter</label>
                            <input type="text" name="daterange" id="daterange" class="form-control" value="" placeholder="Select Date" autocomplete="off">
                         </div>
                      </div>
                         
                      <div class="d-flex gap-2 col-lg-7"> 
                        <select class="form-control" id="fltstatus" name="fltstatus" onchange="loadData()">
                           <option selected="selected" value="%">All</option>
                           <option value="1">Active</option>
                           <option value="0">Inactive</option>
                            </select>
                         <input type="text" name="search_filter" id="search_filter" class="form-control" value="" placeholder="Search data" autocomplete="off">
                         <button class="btn btn-primary searchBtn">Search</button>
                         <a href="javascript:void(0)" class="btn btn-warning " onclick="resetfilter()">Reset</a>   
                      </div>
                   </div>
              </div>

                
             
            </caption>

            <!-- //////////// -->
         </div>
        
      </div>
    
   
   
       <div class="border rounded-2 p-3 bg-white " id="w-sum">
    
          <!-- ==========tab=========== -->
          <ul class="nav nav-pills mb-3 walletsummary" id="pills-tab" role="tablist">
             <li class="nav-item d-none" role="presentation">
                <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-val="all" data-title-name="all" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">All</button>
             </li>               
          </ul>
       
    
          <!-- ====Admin========== -->
          <div class="tab-content" id="pills-tabContent">
            
                <div class="table-responsive bg-white p-2">
                   <table class="table align-center table-hover " id="add-table" style="width:100% !important">
                   </table>
                </div>
                <!-- //////////// -->
            
          </div>
       </div>
    </div>
   </div>

<?php  include('js.php') ?>
<script>
    function resetdata()
    {
        $("label").remove(".error");
    	$("#VehicleMakeForm").trigger("reset");
    	$('#formevent').val('submit');
    	$('#btnadd').val('Submit');
    	$('#id').val(0);
    
    }
   /*****************start for admin***************/
   $('body').on('click','.walletsummary .nav-link',function(){
       	$('#add-table').DataTable().destroy();
       	loadData();
   });
   
   $('body').on('change','#fltstatus',function(){
       	$('#add-table').DataTable().destroy();
       	loadData();
   });
   
   $('#daterange').daterangepicker({
       locale: {
       format: 'DD/MM/YYYY'
       },
       maxDate: new Date(),
       
   });
   
    $('input[name="daterange"]').val('');
    loadData();
   function loadData()
   {
      var searchvalue = $('#search_filter').val();
      
       var table = 'add-table' ;
        $('#'+table).DataTable({
         "ordering": false,
       'order': [[0, 'desc']], 
       'retrieve': true,
        'processing': true,
        'serverSide': true,
        'searching': false,
        //'serverMethod': 'post',
        'ajax': {
         'url':'<?php echo base_url();?>Vehicle/get_makelist',
          "type": "POST",
          "data": {
       		"daterange": $('#daterange').val(),
       		'searchvalue':searchvalue,
       		'fltstatus':$('#fltstatus').val()
       	}
        },

        'columns': [
         { title:'Sr.No',data: 'i' },
         { title:'Name',data: 'name' },         
         { title:'Status',data: 'status' },
         { title:'Entry',data: 'entry_date' },
         { title:'Action',data: 'action' },        
          
        ]
       });
       
       }
       
       $('body').on('click','.applyBtn',function(){
       $('#add-table').DataTable().destroy();
       loadData();
       });

       $('body').on('click','.searchBtn',function(){
         $('#add-table').DataTable().destroy();
         loadData();
         });

       
       $('body').on('click','.cancelBtn',function(){
            $('#daterange').val('');
            $('#daterange').daterangepicker({
       		locale: {
       			format: 'DD/MM/YYYY'
       		 },
       		 maxDate: new Date(),
            });
           
       
       	$('#add-table').DataTable().destroy();
       	loadData();
       });
   
       function resetfilter()
      {
            $('input[name="daterange"]').val('');
            $('input[name="search_filter"]').val('');
             $('#add-table').DataTable().destroy();
           loadData();
      }
   
    function deletedata(id,name)
	{
		swal({
		  title: "Are you sure?",
		  text: "",
		  icon: "warning",
		  buttons: true,
		  dangerMode: true,
		})
		.then((willDelete) => {
			if(willDelete)
			{
				 window.location.href="<?php echo base_url() ?>Vehicle/delete_make/"+id;
			}
		});
	}
	
	//edit data
	function editdata(id,name,status)
	{
		$('#id').val(id);
        $('#name').val(name);
        $('#status').val(status);
        showhidediv('divform','divdata','divbtngo','divbtnadd');
		$('#formevent').val('update');
		$('#btnadd').val('Update');
	}
	
</script>

