@extends('layouts.app')
@section('title', 'ADDS Import Templates Fields')
@section('content')
<div class="container-fluid mt-1">
	<x-setting_tabs/>
	<div class="col-lg-12">
        <div class="p-0">
            <div class="row">
                <div class="col-lg-3">
                    <label for="name-input" class="col-form-label">Choose Lender</label>
                    <select required class="form-control" name="lenderid" id="lenderid" onchange="get_lendertemplate(this.value);">
                        <option value="">Select Lender</option>
                        @foreach($lenders as $lenderslist)
                            <option value="{{$lenderslist->id}}">{{$lenderslist->lender_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3">
                    <label for="name-input" class="col-form-label">Choose Template</label>
                    <select required class="form-control" name="formatid" id="formatid" onchange="filter_template(this.value);">
                        <option value="">Select Template</option>
                    </select>
                </div>
            </div>
            <table id="datatable" class="table table-bordered mb-0"  >
                <thead>
                    <tr>
                        <th>Sl No</th>
                        <th>Lender</th>
                        <th>Template Name</th>
                        <th>Field</th>
                        <th>Format</th>
                        <th>Size</th>
                        <th>Begin Position</th>
                        <th>End Position</th>
                        <th>Description</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="templatediv">
                                    </tbody>
            </table>
        </div>
        <div id="lenderstemplates">
        </div>
    </div>
    <div class="modal fade" id="addModel">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
    	        <form method="post" name="addimportfieldFrm" id="addimportfieldFrm" role="form" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
    	            @csrf
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add Import Template Fields</h5>
    					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    						<span aria-hidden="true">&times;</span>
    					</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Choose Lender<span class="mandatory"> * <span></label>
                                 <select required class="form-control" name="lender_id" id="lender_id" onchange="get_template(this.value)">
                                    <option value="">Select Lender</option>
                                    @foreach($lenders as $lenderslist)
                                        <option value="{{$lenderslist->id}}">{{$lenderslist->lender_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-4">
                                <label for="name-input" class="col-form-label">Choose Template<span class="mandatory"> * <span></label>
                                 <select required class="form-control" name="format_id" id="format_id">
                                    <option value="">Select Template</option>
                                </select>
                            </div>
                            <div class="col-lg-4 mt-5"><button type="button" class="btn btn-primary float-right" onclick="addnewfield();">+ Add New Field</div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2">
                                <label for="name-input" class="col-form-label">Field<span class="text-danger">*</span></label>
                            </div>
                            <div class="col-lg-2">
                                <label for="name-input" class="col-form-label">Format<span class="text-danger">*</span></label>
                            </div>
                            <div class="col-lg-1">
                                <label for="name-input" class="col-form-label">Size<span class="text-danger">*</span></label>
                            </div>
                            <div class="col-lg-1">
                                <label for="name-input" class="col-form-label">Begin Pos<span class="text-danger">*</span></label>
                            </div>
                            <div class="col-lg-1">
                                <label for="name-input" class="col-form-label">End Pos<span class="text-danger">*</span></label>
                            </div>
                            <div class="col-lg-3">
                                <label for="name-input" class="col-form-label">Description</label>
                            </div>
                        </div>
                        <div class="row importfields" id="importfields_1">
                            <div class="col-lg-2">
                                <input name="field[]" id="field1" type="text" class="form-control" placeholder="Enter Field" required />
                            </div>
                            <div class="col-lg-2">
                                <input name="format[]" id="format1" type="text" class="form-control" placeholder="Enter Format" required />
                            </div>
                            <div class="col-lg-1">
                                <input name="size[]" id="size1" type="text" class="form-control" placeholder="Enter Size" required />
                            </div>
                            <div class="col-lg-1">
                                <input name="beginning_position[]" id="beginning_position1" type="text" class="form-control" placeholder="Enter Beginning" required />
                            </div>
                            <div class="col-lg-1">
                                <input name="end_position[]" id="end_position1" type="text" class="form-control" placeholder="Enter End Position" required />
                            </div>
                            <div class="col-lg-4">
                                <textarea name="description[]" id="description1" rows="1" class="form-control" placeholder="Enter Description"></textarea>
                            </div>
                        </div>
                        <div id="newfields">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" value="Submit" name="submit" id="submit" class="btn btn-primary" onclick="saveTemplateFields();">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
    	        </form>
            </div>
        </div>
    </div>
     <div class="modal fade" id="editModel">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div id="append_data"></div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<x-alert/>
<script type="text/javascript">

	$(document).ready(function() {
		$(".odtabs").not("#tab16").addClass('btn-outline-secondary');
		$("#tab16").addClass('btn-secondary');
	});
    $(document).ready(function()
    {
        window.Parsley.addValidator('uppercase', {
          requirementType: 'number',
          validateString: function(value, requirement) {
            var uppercases = value.match(/[A-Z]/g) || [];
            return uppercases.length >= requirement;
          },
          messages: {
            en: 'Your password must contain at least (%s) uppercase letter.'
          }
        });
        //has lowercase
        window.Parsley.addValidator('lowercase', {
          requirementType: 'number',
          validateString: function(value, requirement) {
            var lowecases = value.match(/[a-z]/g) || [];
            return lowecases.length >= requirement;
          },
          messages: {
            en: 'Your password must contain at least (%s) lowercase letter.'
          }
        });
        //has number
        window.Parsley.addValidator('number', {
          requirementType: 'number',
          validateString: function(value, requirement) {
            var numbers = value.match(/[0-9]/g) || [];
            return numbers.length >= requirement;
          },
          messages: {
            en: 'Your password must contain at least (%s) number.'
          }
        });
        //has special char
        window.Parsley.addValidator('special', {
          requirementType: 'number',
          validateString: function(value, requirement) {
            var specials = value.match(/[^a-zA-Z0-9]/g) || [];
            return specials.length >= requirement;
          },
          messages: {
            en: 'Your password must contain at least (%s) special characters.'
          }
        });

    });
	 var table = $('#datatable').DataTable({
		responsive: true,
		dom: 'l<"toolbar">Bfrtip',
        buttons: [
            'excel'
        ],
		initComplete: function(){
		    $("div.toolbar").html('<button id="addTemplate" type="button" class="ml-2 tble_btn btn btn-primary" data-toggle="modal" data-target="#addModel"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Import Fields</button><br />');
		},
    });
    function addnewfield()
    {
        var newfieldid = $(".importfields:last").attr("id");
        var newfieldsplit_id = newfieldid.split("_");
        var newfieldindex = Number(newfieldsplit_id[1]) + 1;
        var max = 500;
        $("#newfields").append('<div class="row importfields mt-2" id="importfields_'+newfieldindex+'">\
                                    <div class="col-lg-2">\
                                        <input name="field[]" id="field'+newfieldindex+'" type="text" class="form-control" placeholder="Enter Field" required />\
                                    </div>\
                                    <div class="col-lg-2">\
                                        <input name="format[]" id="format'+newfieldindex+'" type="text" class="form-control" placeholder="Enter Format" required />\
                                    </div>\
                                    <div class="col-lg-1">\
                                        <input name="size[]" id="size'+newfieldindex+'" type="text" class="form-control" placeholder="Enter Size" required />\
                                    </div>\
                                    <div class="col-lg-1">\
                                        <input name="beginning_position[]" id="beginning_position'+newfieldindex+'" type="text" class="form-control" placeholder="Enter Beginning" required />\
                                    </div>\
                                    <div class="col-lg-1">\
                                        <input name="end_position[]" id="end_position'+newfieldindex+'" type="text" class="form-control" placeholder="Enter End Position" required />\
                                    </div>\
                                    <div class="col-lg-4">\
                                        <textarea name="description[]" id="description'+newfieldindex+'" rows="1" class="form-control" placeholder="Enter Description"></textarea>\
                                    </div>\
                                    <div class="col-lg-1">\
                                        <button type="button" class="btn btn-danger" onclick="removefield('+newfieldindex+')">x</button>\
                                    </div>\
                                </div>');
    }
    function removefield(newfieldindex)
    {
        $('#importfields_'+newfieldindex+'').remove();
    }
    function get_template(lenderid)
    {
        $.ajax({
                type: "POST",
                url: "{{ route('getlendertemplate') }}",
                data: {
                    "_token": "{{ csrf_token() }}",
                     lenderid:lenderid
                },
                success: function(html)
                {
                    $("#format_id").html(html);
                }
            });
    }
    function saveTemplateFields()
    {
        if ($("#addimportfieldFrm").parsley())
        {
            if ($("#addimportfieldFrm").parsley().validate())
            {
                event.preventDefault();
                if ($("#addimportfieldFrm").parsley().isValid())
                {
                    $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ route('addtemplatefields') }}",
                        data: new FormData($("#addimportfieldFrm")[0]),
                        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 get_lendertemplate(lenderid)
    {
        $.ajax({
                type: "POST",
                url: "{{ route('getlendertemplate') }}",
                data: {
                    "_token": "{{ csrf_token() }}",
                     lenderid:lenderid
                },
                success: function(html)
                {
                    $("#formatid").html(html);
                }
            });
    }
    function filter_template(templateid)
    {
        $.ajax({
                type: "POST",
                url: "{{ route('filtertemplatefields') }}",
                data: {
                    "_token": "{{ csrf_token() }}",
                    templateid:templateid
                },
                success: function(html)
                {
                    $("#templatediv").html(html);
                }
            });
    }
</script>
@endsection