@extends('layouts.app')
@section('title', 'Agency Template Update')

@section('content')
<div class="container-fluid mt-1">
    <x-setting_tabs/>
    <div class="row">
        <div class="col-lg-12 text-center">
            <span><button type="button" class="btn btn-primary" onclick="showagencytemplatemodal();">Add Agency Template</button></span>
        </div>
        <div class="col-lg-12 mt-0">
            <table id="datatable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>State</th>
                        <th>Agency</th>
                        <th>Type</th>
                        <th>Edit</th>
                    </tr>
                </thead>
                <tbody>
                                    </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="collectornewmodal" tabindex="-1" aria-labelledby="collectornewmodal">
        <div class="modal-dialog" style="max-width: 2300px !important;margin:1rem">
            <div class="modal-content" style="width:100%">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="width:100%">
                    <form method="POST" name="addcollectorFrm" id="addcollectorFrm" role="form" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
                    @csrf
                    <div class="card shadow-sm mt-2">
                        <div class="card-body">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-lg-2">
                                        <label for="name-input" class="col-form-label pt-0">Select State <span style="color:red">*</span></label><br>
                                        <select name="stateid" id="stateid" class="form-control" onchange="getstateagency(this.value);" required>
                                            <option value="">Select State</option>
                                                                                    </select>
                                    </div>
                                    <div class="col-lg-2">
                                        <label for="name-input" class="col-form-label pt-0">Select Agency <span style="color:red">*</span></label><br>
                                        <select name="agencyid" id="agencyid" class="form-control" required>

                                        </select>
                                    </div>
                                    <div class="col-lg-2">
                                        <label for="name-input" class="col-form-label pt-0">Select Template Type <span style="color:red">*</span></label><br>
                                        <select name="collectortype" id="collectortype" class="form-control" onclick="showcollectortypeinfo(this.value);" required>
                                            <option value="">Select Type</option>
                                            <option value="1">Excel</option>
                                            <option value="2">Text</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-2">
                                        <label for="name-input" class="col-form-label pt-0">Select Parcel Format <span style="color:red">*</span></label><br>
                                        <select name="parcel_format" id="parcel_format" class="form-control" required>
                                            <option value="">Select Parcel Format</option>
                                                                                     </select>
                                    </div>
                                    <div class="col-lg-2">
                                        <label for="name-input" class="col-form-label pt-0">Select Amount Format <span style="color:red">*</span></label><br>
                                        <select name="amount_format" id="amount_format" class="form-control" required>
                                            <option value="">Select Amount Format</option>
                                                                                        </select>
                                    </div>
                                    <div class="col-lg-2">
                                        <label for="name-input" class="col-form-label pt-0">Select Installment Format <span style="color:red">*</span></label><br>
                                        <select name="installment_format" id="installment_format" class="form-control" required>
                                            <option value="">Select Installment Format</option>
                                            <option value="1">Numeric</option>
                                            <option value="2">Alphabet</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card shadow-sm mt-2">
                        <div class="card-body">
                            <div class="container-fluid d-none mt-2" id="exceldiv">
                                <div class="row">
                                    <div class="col-3 text-center"><b>Agency Field</b></div>
                                    <div class="col-3 text-center"><b>Ztax Field</b></div>
                                    <div class="col-3 text-center"><b>Column</b></div>
                                </div>
                                <div class="row excelfieldsclass" id="excelfieldsdiv_1">
                                    <div class="col-3 text-center"><input type="text" name="excelfields[]" class="form-control excelfieldentries"></div>
                                    <div class="col-3 text-center">
                                        <select name="excelztaxfields[]" class="form-control excelfieldentries">
                                            <option value="100">No Mapping Available</option>
                                                                                    </select>
                                    </div>
                                    <div class="col-3 text-center"><input type="text" name="excelcolumns[]" class="form-control excelfieldentries"></div>
                                    <div class="col-2 text-center"> <button class="btn btn-primary" type="button" onclick="addnewexcelfield(1);"> Add</button></div>
                                </div>
                                <div id="additionalexceldiv">
                                </div>
                            </div>
                            <div class="container-fluid d-none mt-2" id="textdiv">
                                <div class="row">
                                    <div class="col-2 text-center"><b>Agency Field</b></div>
                                    <div class="col-2 text-center"><b>Ztax Field</b></div>
                                    <div class="col-2 text-center"><b>Position</b></div>
                                    <div class="col-2 text-center"><b>Length</b></div>
                                    <div class="col-2 text-center"><b>Content Type</b></div>
                                </div>
                                <div class="row textfieldsclass" id="textfieldsdiv_1">
                                    <div class="col-2 text-center"><input type="text" name="textfields[]" class="form-control textfieldentries"></div>
                                    <div class="col-2 text-center"> <select name="textztaxfields[]" class="form-control textfieldentries">
                                        <option value="100">No Mapping Available</option>
                                                                            </select></div>
                                    <div class="col-2 text-center"><input type="text" name="textpositions[]" class="form-control textfieldentries"></div>
                                    <div class="col-2 text-center"><input type="text" name="textlength[]" class="form-control textfieldentries"></div>
                                    <div class="col-2 text-center"><input type="text" name="textcontenttype[]" class="form-control textfieldentries"></div>
                                    <div class="col-2 text-center"><button class="btn btn-primary" type="button" onclick="addnewtextfield(1);"> Add</button></div>
                                </div>
                                <div id="additionaltextdiv">
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success ml-2" onclick="templatesubmit();">Submit</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="collectoreditmodal" tabindex="-1" aria-labelledby="collectoreditmodal">
        <div class="modal-dialog" style="max-width: 2300px !important;margin:1rem">
            <div class="modal-content" style="width:100%">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="width:100%" id="editcollectortempdiv">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success ml-2" onclick="templateupdate();">Update</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </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');
    });
    function showagencytemplatemodal()
    {
        $("#exceldiv").addClass('d-none');
        $("#textdiv").addClass('d-none');
        $("#additionalexceldiv").html("");
        $("#additionaltextdiv").html("");
        $("#collectornewmodal").modal('show');
    }
    function getstateagency(stateid)
    {
        $.ajax({
                    type: "POST",
                    url: "{{route('getcollectorstateagency')}}",
                    data: { "_token": "{{ csrf_token() }}",
                            "stateid":stateid
                        },
                    success: function(html)
                    {
                        $("#agencyid").html("");
                        $("#agencyid").html(html);
                    }
                });
    }
    function showcollectortypeinfo(type)
    {
        if(type == 1)
        {
            $("#exceldiv").removeClass('d-none');
            $("#textdiv").addClass('d-none');
            $('.textfieldentries').val("");
        }
        else if(type== 2)
        {
            $("#textdiv").removeClass('d-none');
            $("#exceldiv").addClass('d-none');
            $('.excelfieldentries').val("");
        }
    }
    function addnewexcelfield(id)
    {
        var excelfieldsclassid = $(".excelfieldsclass:last").attr("id");
		var excelfieldsclass_id = excelfieldsclassid.split("_");
		var excelfieldsclassindex = Number(excelfieldsclass_id[1]) + 1;
		var max=500;
		$("#additionalexceldiv").append('<div class="row excelfieldsclass mt-1" id="excelfieldsdiv_'+excelfieldsclassindex+'">\
                                    <div class="col-3 text-center"><input type="text" name="excelfields[]" class="form-control"></div>\
                                    <div class="col-3 text-center">\
                                        <select name="excelztaxfields[]" class="form-control excelfieldentries">\
                                            <option value="100">No Mapping Available</option>\
                                                                                    \'</select></div>\
                                    <div class="col-3 text-center"><input type="text" name="excelcolumns[]" class="form-control"></div>\
                                    <div class="col-2 text-center"> <button class="btn btn-primary" type="button" onclick="addnewexcelfield('+excelfieldsclassindex+');"> Add</button><button class="btn btn-danger ml-2" type="button" onclick="removenewexcel('+excelfieldsclassindex+');">Remove</button></div>\
                                </div>');
    }
    function removenewexcel(excelfieldsclassindex)
    {
        $("#excelfieldsdiv_"+excelfieldsclassindex).remove();
    }
    function addnewtextfield(id)
    {
        var textfieldsclassid = $(".textfieldsclass:last").attr("id");
		var textfieldsclass_id = textfieldsclassid.split("_");
		var textfieldsclassindex = Number(textfieldsclass_id[1]) + 1;
		var max=500;
		$("#additionaltextdiv").append('<div class="row textfieldsclass mt-1" id="textfieldsdiv_'+textfieldsclassindex+'">\
                                    <div class="col-2 text-center"><input type="text" name="textfields[]" class="form-control"></div>\
                                    <div class="col-2 text-center">\
                                        <select name="textztaxfields[]" class="form-control textfieldentries">\
                                        <option value="100">No Mapping Available</option>\
                                                                            \'</select></div>\
                                    <div class="col-2 text-center"><input type="text" name="textpositions[]" class="form-control"></div>\
                                    <div class="col-2 text-center"><input type="text" name="textlength[]" class="form-control"></div>\
                                    <div class="col-2 text-center"><input type="text" name="textcontenttype[]" class="form-control"></div>\
                                    <div class="col-2 text-center"><button class="btn btn-primary" type="button" onclick="addnewtextfield('+textfieldsclassindex+');"> Add</button><button class="btn btn-danger ml-2" type="button" onclick="removenewtext('+textfieldsclassindex+');">Remove</button></div>\
                                </div>');
    }
    function removenewtext(textfieldsclassindex)
    {
        $("#textfieldsdiv_"+textfieldsclassindex).remove();
    }
    function templatesubmit()
    {
        if ($("#addcollectorFrm").parsley())
        {
            if ($("#addcollectorFrm").parsley().validate())
            {
                event.preventDefault();
                if ($("#addcollectorFrm").parsley().isValid())
                {
                    $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ route('collectortemplatesubmit') }}",
                        data: new FormData($("#addcollectorFrm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response)
                        {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 800);
                        },
                        error:function(err)
                        {

                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 2000
                            });
                        }
                    });
                }
            }
        }
    }
    function editcollectortemplate(collectortempid)
    {
        $.ajax({
                    type: "POST",
                    url: "{{route('editcollectortemp')}}",
                    data: { "_token": "{{ csrf_token() }}",
                            "collectortempid":collectortempid
                        },
                    success: function(html)
                    {
                        $("#editcollectortempdiv").html("");
                        $("#editcollectortempdiv").html(html);
                        $("#collectoreditmodal").modal('show');
                    }
                });
    }
    function templateupdate()
    {
        if ($("#editcollectorFrm").parsley())
        {
            if ($("#editcollectorFrm").parsley().validate())
            {
                event.preventDefault();
                if ($("#editcollectorFrm").parsley().isValid())
                {
                    $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ route('collectortemplateupdate') }}",
                        data: new FormData($("#editcollectorFrm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response)
                        {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 800);
                        },
                        error:function(err)
                        {

                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 2000
                            });
                        }
                    });
                }
            }
        }
    }
</script>
@endsection