@extends('layouts.backend.app')
@section('content')

<div class="main-content shop">
         <div class="page-content">
            <div class="container-fluid">
               <div class="page-title-box">
                  <div class="row align-items-center">
                     <div class="col-md-8">
                        <h6 class="page-title">Sales</h6>
                        <ol class="breadcrumb m-0">
                           <li class="breadcrumb-item"><a href="#">Home </a></li>
                           <li class="breadcrumb-item active" aria-current="page">Sales</li>
                        </ol>
                     </div>
                     <div class="col-md-4">
                        <div class="btn-container float-right">
                           <button class=" btn btn-primary border-radius-5 add_sales" ><span class="pe-2"><i class="bi bi-plus"></i></span> Add
                              New</button>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- Add Mobile row  -->
               <!-- end row -->
               <!-- Mobile visible table  -->
               <!-- End row  -->
            </div>
            <div class="row">
               <div class="col-md-12">
                  <div class="col-md-12 mobile-table-column mbp">
                     <div class="card">
                        <div class="card-body">
                           <table id="dataList" class="display" style="width:100%;">
                              <thead>
                                 <tr>
                                    <th width="5%">S.no</th>
                                    <th width="10%">Sales Name</th>
                                    <th width="10%">Email Id</th>
                                    <th width="10%">Mobile Number</th>
                                    <th width="10%">Action</th>
                                 </tr>
                              </thead>
                              <tbody>
                            
                                   
                              </tbody>
                           </table>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>


         <!-- Modal -->
   <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h1 class="modal-title fs-5" id="exampleModalLabel"><span class="modaltitle">Add</span> Sales</h1>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
               <div class="row product-row stock-add">
                  <div class="col-md-12">
                     <div class="card shadow-none">
                        <div class="card-body p-0">
                           <form id="sales_submit">
                            @csrf
                              <div class="row">
                                   <div class="mb-3">
                                       <label for="inputText3" class="col-sm-6 col-form-label">Sales Name</label>
                                       <div class="col-sm-12">
                                          <input type="text" class="form-control input" name="name" id="name" >
                                          <span class="text-danger name"></span>
                                       </div>
                                    </div>

                                 <div class="col-md-12">
                                    <div class="mb-3">
                                       <label for="inputText3" class="col-sm-6 col-form-label">Email ID</label>
                                       <div class="col-sm-12">
                                          <input type="text" name="email" class="form-control input" id="email">
                                          <span class="text-danger email"></span>
                                       </div>
                                    </div>
                                    <input type="hidden" name="type" id="type">
                                    <input type="hidden" name="edit_id" id="edit_id">
                                    <div class="mb-3">
                                       <label for="inputText3" class="col-sm-6 col-form-label">Mobile Number</label>
                                       <div class="col-sm-12">
                                          <input type="text" class="form-control input" name="mobile_number" id="mobile_number" onkeypress="return isNumber(event)">
                                          <span class="text-danger mobile_number"></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="mb-0">
                                    <label for="inputText3" class="col-sm-6 col-form-label "></label>
                                    <div class="col-sm-6">
                                       <button type="submit" class="btn btn-primary me-3">Submit</button>
                                    </div>
                                 </div>

                              </div>
                              <div class="col-md-12">
                                 <div class="btn-container d-flex justify-content-center">
                                 </div>
                              </div>
                           </form>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                  </div> -->
         </div>
      </div>
   </div>
   <!--Add form ends-->
   <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-body">
               <div class="row">
                  <div class="col-12">
                     <div class="">
                        <div class="">
                           <form  class="mt-3">
                         
                              <div class="row">
                                 <div class="col-md-6">
                                    <div class="mb-3">
                                       <label for="exampleFormControlInput1" class="form-label">Mobile
                                          Name</label>
                                       <input type="text" id="" class="form-control" id="exampleFormControlInput1"
                                          placeholder="">
                                    </div>
                                 </div>

                                 <div class="col-md-6">
                                    <div class="mb-3">
                                       <label for="exampleFormControlInput1" class="form-label">Modal
                                          Name</label>
                                       <input type="text" class="form-control" id="exampleFormControlInput1"
                                          placeholder="">
                                    </div>
                                 </div>
                                 <div class="col-md-6">
                                    <div class="mb-3">
                                       <label for="exampleFormControlInput1" class="form-label">Logo</label>
                                       <input type="file" class="form-control" id="exampleFormControlInput1"
                                          placeholder=>
                                    </div>
                                 </div>
                                 <div>
                                    <button type="button" class="btn btn-primary add-btn">
                                      Submit 
                                    </button>
                                    <button type="button" class="btn btn-secondary"
                                       data-bs-dismiss="modal">Cancel</button>
                                 </div>
                              </div>
                           </form>
                        </div>
                     </div>
                  </div>
                  <!-- end col -->
               </div>
            </div>
         </div>
      </div>
   </div>


    <!-- Delete Modal HTML -->
<div id="deleteModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Delete Record</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to delete these Records?</p>
				<p class="text-warning"><small>This action cannot be undone.</small></p>
			</div>
			<input type="hidden" id="delete_id">
			<div class="modal-footer">
				<input type="button" class="btn btn-default closebtn" data-dismiss="modal" value="Cancel">
				<input type="button" class="btn btn-danger" onclick="deleterecord()" value="Delete">
			</div>
		</div>
	</div>
</div>
@endsection


@section('scripts')

<script>

$(document).ready(function() {
	
	var pathn = $('meta[name="base_url"]').attr("content")+'/sales-data';
	var reporttables =  $('#dataList').DataTable({
		"order": [[ 0, "desc" ]],
        "serverSide": true,
		"stateSave": true,
        'processing': true,
		"pageLength": 20,
		"lengthMenu": [
            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420, 450, 475, 500],
            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420, 450, 475, 500]
        ],
        oLanguage: {sProcessing: '<div class="lds-css"><div style="width:100%;height:100%" class="lds-eclipse"><div></div><p>Please wait while we are processing your request.</p></div></div>' },
		"ajax": {
			'type': 'GET',
			'url': pathn,
			"data": function(d){
               d.pagenme = '{{ basename(url()->current()) }}',
			   d.lot_no = $("#lot_no").val(),
			   d.no_pro = $("#no_pro").val(),
			   d.sup_name = $("#sup_name").val(),
			   d.pay_status = $("#pay_status").val()
			}
		},
		searching: false,
		"iDisplayLength": 20,
		"columnDefs": [
		{
			"targets": 0,
			className: "text-center",
			"render": function ( data, type, row, meta ) {
				return row.index;
			}
		},
		{
			"targets": 1,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.name;
			}
		},
		{
			"targets": 2,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.email;
			}
		},
		{
			"targets": 3,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.mobile_number;
			}
		},
       
		{
			"targets": 4,
			orderable: true,
			className: "text-center",
			"render": function ( data, type, row, meta ) {

				var tbl = '';
				tbl +='<div class="action bank d-flex justify-content-start">';

					// tbl +='<a href="'+row.viewurl+'" class="edit text-info btn btn-sm btn-info text-white">';
					// 	tbl +='<i class="fas fa-eye"></i>';
					// tbl +='</a>';

					tbl +='<a class="edit mx-2 text-info btn btn-sm btn-success text-white sales_edit" data-id='+row.id+'>';
						tbl +='<i class="fas fa-edit"></i>';
					tbl +='</a>';

					tbl +='<a href="#deleteModal" data-toggle="modal" data-id="'+row.id+'" class="edit text-info btn btn-sm  btn-danger text-white me-2 removrd">';
						tbl +='<i class="fas fa-trash"></i>';
					tbl +='</a>';

				tbl +='</div>';
				return tbl;
			}
		}
	  ]
	});
});

$(document).on('click', '.searchdata', function(){
	$('#dataList').DataTable().ajax.reload();
});

$(document).on('click', '.reset_searchdata', function(){
    $('#memberdata').trigger("reset");
    $('#lot_no').val('');
    $('#no_pro').val('');
    $('#sup_name').val('');
    $('#pay_status').val('');
    $('#dataList').DataTable().ajax.reload();
	 $('.fltr-btn').trigger('click');
});

</script>

<script type="text/javascript">

	//Remove Record
$(document).on("click", ".removrd", function () {
var rid = $(this).data("id");
$('#delete_id').val(rid);
});

	//Remove Record
function deleterecord() {
	var rid = $('#delete_id').val();
	var pathn = $('meta[name="base_url"]').attr("content")+'/sales-remove';
	var token = $('meta[name="csrf-token"]').attr("content");
	$.ajax({
		url: pathn,
		type: "POST",
		data: {
			_token: token,user_id: rid
		}, success: function (data) {

			if(data.status == true) {
				custom_noty("success", data.msg);
				$(".closebtn").click();
				$('#dataList').DataTable().ajax.reload();
			} else {
				custom_noty("error", data.msg);
			}
		}
	});
}

</script>


<script type="text/javascript">

$(".fltrbtn").click(function(){

	if($('.fltr-main').is(':visible')){
		$(".fltr-main").hide(1000);
	} else {
		$(".fltr-main").show(1000);
	}
});


	//Add 
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}


$(document).on("submit","#sales_submit",function(e){
    
    e.preventDefault();

	$('.remove_err').html("");
	var url=$('#url').val();
	var form = $('#sales_submit')[0];
	var formData = new FormData(form);
	
	var redirect=$('#redirect').val();
	$('.btn-primary').attr('disabled',true);
	$.ajax({
		url: "{{route('sales-submit')}}",
		type:'POST',
		processData: false,
		contentType: false,
		data: formData,
		success: function(data) {
		if(data.success==true){
		    $('.btn-primary').attr('disabled',false);
			window.location.reload();;
		}
		},error: function (xhr) {
			$('.btn-primary').attr('disabled',false);
			$('.user_err').html('');
			var i=0;

			$.each(xhr.responseJSON.errors, function(key,value) {

			replaced_key = key.replace(".", "_");
			//console.log(value[0]);
			// console.log(typeof value);
			value = value[0].replace(key,replaced_key);
			//console.log(replaced_key);
			$('.'+replaced_key).append('<div class="text-danger user_err">'+value+'</div');
			i++;
		  }); 
		 },
    });
});


//vendor add
$(document).on("click",".add_sales",function(e){
    $('.user_err').html('');
    $('.modaltitle').html("Add");
    $('.input').val("");
    $('#type').val("add");
    $('#exampleModal').modal('show');

});

//vendor edit
$(document).on("click",".sales_edit",function(){
    
    var id=$(this).data('id');
    $('.user_err').html('');
    $('.modaltitle').html("Edit");

    $.ajax({
		url: "{{route('sales-edit','')}}/"+id,
		type:'GET',
		success: function(data) {
    		if(data.success==true){
    		  $('#exampleModal').modal('show');
              $('#type').val("edit");
              $('#edit_id').val(data.sales.id);
              $('#name').val(data.sales.name);
              $('#email').val(data.sales.email);
              $('#mobile_number').val(data.sales.mobile_number);
    		}
		}
    });
});

function vldfn(){
	$('#dataList').DataTable().ajax.reload();
}

</script>

@endsection