@extends('layouts.app')
@section('title', 'Tat')
@section('content')
<div class="container-fluid mt-1">
@include('settings.common_tabs')
	<div class="col-lg-12">
		<div class="card ">
			<div class="card-body">
					<div class="p-0">
						<table id="datatable" class="table table-bordered mb-0" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
							<thead>
								<tr>
									<th>Sl No</th>
									<th>Customer Name</th>
									<th>Product Name</th>
									<th>Tat</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
								@foreach($getTatListDetails as $k=>$get_tat_list)
								<tr>
									<td> {{++$k}}</td>
									<td> {{$get_tat_list->customer_name}}</td>
									<td> {{$get_tat_list->product_name}}</td>
									<td> {{$get_tat_list->tat}}</td>
									<td><span  class="edit_user ml-2" onclick="editTat({{ $get_tat_list->id }})"><img class="menuicon" src="{{asset("app-assets/assets/images/edit.svg")}}">&nbsp;</span></td>
									
								</tr>
								@endforeach
							</tbody>
						</table>
					</div>
			</div>
		</div>
	</div>
    <!-- Add tat model -->
	<div class="modal fade" id="tataddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Add Tat</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form method="post" id="tatfrm" name="tatfrm"  data-parsley-validate data-parsley-trigger="keyup">
					@csrf
					<div class="modal-body">
						
						<div class="row">
							<div class="col-lg-4">
								<label for="company_select" class="col-form-label"> Customer <span class="text-danger"> * </span></label>
								<select required class="form-control" name="customer_id" id="customer_id">
									<option value="">Select Customer</option>
									@forelse($getCustomers as $customer_list)
									<option value="{{$customer_list->id}}"> {{$customer_list->customer_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
                            <div class="col-lg-4">
								<label for="company_select" class="col-form-label"> Product <span class="text-danger"> * </span></label>
								<select required class="form-control" name="product_name_id" id="product_name_id">
									<option value="">Select Product</option>
									@forelse($getProducts as $product_list)
									<option value="{{$product_list->id}}"> {{$product_list->product_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
                            <div class="col-lg-4">
                                    <label for="name-input" class="col-form-label">Tat<span class="text-danger"> * <span></label>
                                    <input id="tat" type="number" name="tat" class="form-control" autocomplete="off" placeholder="Enter tat Value" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="numeric|[0-9]">
							        <!-- <input type="text" id="tat" name="tat" placeholder="0" min="Enter tat Value" max="20000" step="100" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-type="digits" /> -->
								</div>
						</div>
						
					</div>
					<div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="tatStore();">Submit</button>
                </div>
				</form>
			</div>
		</div>
	</div>

    <!-- edit tat modal -->

    <div class="modal fade" id="tatEdit" style="display:none;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="border-radius: 1.9rem;">
                <form method="post" name="tatUpdateForm" id="tatUpdateForm" onsubmit="return tatUpdate()" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <input type="hidden" name="tatid" id="tatid">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Tat</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                <div class="row">
							<div class="col-lg-4">
								<label for="company_select" class="col-form-label"> Customer <span class="text-danger"> * </span></label>
								<select required class="form-control" name="customer_id" id="ed_customer_id">
									<option value="">Select Customer</option>
									@forelse($getCustomers as $customer_list)
									<option value="{{$customer_list->id}}"> {{$customer_list->customer_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
                            <div class="col-lg-4">
								<label for="company_select" class="col-form-label"> Product <span class="text-danger"> * </span></label>
								<select required class="form-control" name="product_name_id" id="ed_product_name_id">
									<option value="">Select Product</option>
									@forelse($getProducts as $product_list)
									<option value="{{$product_list->id}}"> {{$product_list->product_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
                            <div class="col-lg-4">
                                    <label for="name-input" class="col-form-label">Tat<span class="text-danger"> * <span></label>
                                    <input id="ed_tat" name="tat" class="form-control" autocomplete="off" placeholder="Enter tat Value" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="numeric|[0-9]">
							</div>
						</div>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="tatUpdate()">Update</button>
                </div>
                </form>
                </div>
            </div>
            </div>
</div>
</div>
<script type="text/javascript">
$(function () 
 {
        @if(Session::has('success'))
        new PNotify({
        title: 'Success',
        delay: 500,
        text:  "{{Session::get('success')}}",
        type: 'success'
        });
                
        @endif
        @if ($errors->any())
        var err = "";
        @foreach ($errors->all() as $error)
        
            new PNotify({
            title: 'Error',
            text: "{{$error}}",
            delay: 800,
            type: 'error'
            });
            @endforeach
        @endif
});

$(document).ready(function() 
{
    var $tabid=  'tab14';
    $(".odtabs").not("#tab14").addClass('btn-outline-secondary');
    $("#tab14").addClass('btn-secondary');

	$('.modal').on('hidden.bs.modal', function() {
		$(this).find('form')[0].reset();
		$(this).find('form').parsley().reset();
	});

	window.ParsleyValidator
			.addValidator('fileextension', function (value, requirement) {
			var tagslistarr = requirement.split(',');
            var fileExtension = value.split('.').pop();
            var arr=[];
            $.each(tagslistarr,function(i,val){
            arr.push(val);
            });
            if(jQuery.inArray(fileExtension, arr)!='-1') {
              return true;
            } else {
              return false;
            }
        }, 32)
        .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');
		$("form").parsley();
        var table = $('#datatable').DataTable( {
        responsive: true,
        dom: 'l<"toolbar">Bfrtip',
		buttons: [
					'excel'
				],
        initComplete: function(){
        $("div.toolbar").html('<button   type="button" class=" ml-2 btn btn-primary" data-toggle="modal" data-target="#tataddModal"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Tat</button><br />');
    }
    });
});


function getTats() {
    window.location.href = "/tatlist";
}

function tatStore() {
	if ($("#tatfrm").parsley()) {
        if ($("#tatfrm").parsley().validate()) {
            event.preventDefault();
            var formData = new FormData($("#tatfrm")[0]);
            if ($(tatfrm).parsley().isValid()) {
				$.ajax({	
					type: "POST",
					cache:false,
					async: false,
					url: "{{ url('/tatInsert') }}",
					data: formData,
					processData: false,
					contentType: false,
					success: function(response) {
						new PNotify({
								title: 'Success',
								text:  response.msg,
								type: 'success'
							});
						setTimeout(function(){  location.reload(); }, 800);
					},
					error:function(response) {
						var err = "";
						$.each(response.responseJSON.errors,function(field_name,error){
							err = err +'<br>' + error;
						});
						new PNotify({
							title: 'Error',
							text:err,
							type: 'error',
							delay: 2000
						});
					}
				});
			}
		}
	}
}

function editTat(tatid) {
    var url = '/tat/edit/'+tatid;
    $.ajax({
        url:url,
        dataType:"json",
        success:function(data) {
		    $('#tatEdit').modal('show');
            $("input[id='tatid']").val(data.result.id);
            $("#ed_customer_id").val(data.result.customer_id);
            $("#ed_product_name_id").val(data.result.product_name_id);
			$("#ed_tat").val(data.result.tat);
        }
    });
    return false;
}

function tatUpdate(){
	var id = $('#tatid').val();
	var url = '{{ route("tat_update", ":id") }}';
	url = url.replace(':id', id);
    if ($("#tatUpdateForm").parsley()) {
		if ($("#tatUpdateForm").parsley().validate()) {
			event.preventDefault();
            var formData = new FormData($("#tatUpdateForm")[0]);
			if ($("#tatUpdateForm").parsley().isValid()) {
				$.ajax({
					type: "POST",
					cache:false,
					async: false,
					url: url,
					data: formData,
					processData: false,
					contentType: false,
					success: function(response) {
						new PNotify({
								title: 'Success',
								text:  response.msg,
								type: 'success'
							});
						setTimeout(function(){  location.reload(); }, 800);
					},
					error:function(response) {
						var err = "";
						$.each(response.responseJSON.errors,function(field_name,error){
							err = err +'<br>' + error;
						});
						new PNotify({
							title: 'Error',
							text:err,
							type: 'error',
							delay: 2000
						});
					}
				});
			}
		}
	}
}

</script>
@endsection