@extends('layouts.app')
@section('title', 'Product Deliverables')
@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>Product Deliverable Name</th>
                                <th>Description</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($getProductDeliverablesList as $k=>$list)
                                <tr>
                                    <td>{{++$k}}</td>
                                    <td>{{ $list->deliverable_name}}</td>
                                    <td>{{ $list->description}}</td>
                                    <td><span class="edit_user ml-2" onclick="editProductDeliverable({{ $list->id }})"><img class="menuicon" src="{{asset("app-assets/assets/images/edit.svg")}}">&nbsp;</span></td>
                                </tr>
                            @endforeach
                        </tbody>
                        </table>
                    
                </div>
            </div>
        </div>
    </div>

    <!-- The product deliverable add modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form method="post" name="productDeliverableForm" id="productDeliverableForm" role="form" enctype="multipart/form-data">
                    @csrf
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title">Add Product Deliverable</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <label for="name-input" class="col-form-label">Product Deliverable Name<span class="text-danger"> * <span></label>
                                <input id="deliverable_name" name="deliverable_name" class="form-control" autocomplete="off" placeholder="Enter Product Deliverable Name" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ()0-9&/#_.]*$">
                            </div>
                        </div>
                        <div class="row mt-1">	
                            <div class="col-lg-12">
                                <label for="name-input" class="col-form-label">Description<span class="text-danger"> * <span></label>
                                <textarea name="description" id="description" required class="form-control"></textarea>
                            </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="productDeliverablStore();">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- edit product deliverable modal -->
    <div class="modal fade" id="productDeliverableEdit" style="display:none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="border-radius: 1.9rem;">
                <form method="post" name="productDeliverableUpdateForm" id="productDeliverableUpdateForm" enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <input type="hidden" name="productdeliverableid" id="productdeliverableid">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Product Deliverable</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <label for="name-input" class="col-form-label">Product Deliverable Name<span class="text-danger"> * <span></label>
                                <input id="ed_deliverable_name" name="deliverable_name" class="form-control" autocomplete="off" placeholder="Enter Product Deliverable Name" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ()0-9&/#_.]*$">
                            </div>
                        </div>
                        <div class="row mt-1">	
                            <div class="col-lg-12">
                                <label for="name-input" class="col-form-label">Description<span class="text-danger"> * <span></label>
                                <textarea name="description" id="ed_description" required class="form-control"></textarea>
                            </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="productdeliverableUpdate()">Update</button>
                    </div>
                </form>
            </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=  'tab16';
		$(".odtabs").not("#tab16").addClass('btn-outline-secondary');
		$("#tab16").addClass('btn-secondary');

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

        var table = $('#datatable').DataTable( {
            responsive: true,
            dom: 'l<"toolbar">Bfrtip',
            buttons: [
					'excel'
				],
        initComplete: function(){
            $("div.toolbar").html('<button  id="addProductDeliverable" type="button" class=" ml-2 btn btn-primary" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Product Deliverables</button><br />');
		}
        });
    });

function productDeliverablStore(){
	if ($("#productDeliverableForm").parsley()) {
        if ($("#productDeliverableForm").parsley().validate()) {
            event.preventDefault();
            var formData = new FormData($("#productDeliverableForm")[0]);
            if ($(productDeliverableForm).parsley().isValid()) {
                $.ajax({	
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ url('/product_deliverables/add') }}",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        new PNotify({
                            title: 'Success',
                            text:  response.msg,
                            type: 'success'
                        });
                        localStorage.setItem('lastTab', "#users");
                        setTimeout(function(){  location.reload(); }, 1000);
                    },
                    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 editProductDeliverable(productdeliverableid) {
    var url = '/product_deliverables/edit/'+productdeliverableid;
    $.ajax({
        url:url,
        dataType:"json",
        success:function(data) {
		    $('#productDeliverableEdit').modal('show');
			$("#productdeliverableid").val(data.result.id);
            $("#ed_deliverable_name").val(data.result.deliverable_name);
			$("#ed_description").val(data.result.description);
        }
    });
    return false;
}

function productdeliverableUpdate(){
	var id = $('#productdeliverableid').val();
	var url = '{{ route("product_deliverables_update", ":id") }}';
	url = url.replace(':id', id);
    if ($("#productDeliverableUpdateForm").parsley()) {
		if ($("#productDeliverableUpdateForm").parsley().validate()) {
			event.preventDefault();
            var formData = new FormData($("#productDeliverableUpdateForm")[0]);
			if ($("#productDeliverableUpdateForm").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'
                        });
                    },
				});
			}
		}
	}
}
</script>
@endsection