<div class="content">
    <div class="row">
        <div class="col-12">
            <form id="tmpl_Form" name="tmpl_Form" enctype="multipart/form-data" class="form-horizontal" method="post"
                action="javascript:;">

                <div class="col-12 text-center">
                    <h3>New Template Form</h3>
                </div>
                <div class="col-12 form-group row">
                    <label for="name" class="col-4">Select Template Type<br/>
                    <span></span>
                    </label>
                    <!-- <input type="checkbox" id="inv_type" data-toggle="toggle"  data-on="Yes" data-off="No" checked
                        data-onstyle="success" data-offstyle="primary"> -->
                    <input type="radio" name="inv_type" data-taggle="toggle" value="yes" text="yes" checked/><span>Export Template   &emsp; </span>
                    <input type="radio" name="inv_type" data-taggle="toggle" value="no"  text="no" /><span>Import Template     &emsp;</span>
                </div>
                <div class="col-6 float-left">
                    <div class="form-group row">
                        <label for="name" class="col-6">Template Name</label>
                        <div class="col-6"><input type="text" name="name" id="name" class="form-control"
                                placeholder="Enter Name of Template"></input> <br />
                            <span class="tempateError"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="C_name" class="col-6">Company Name</label>
                        <div class="col-6"><input type="text" name="C_name" id="C_name" class="form-control"
                                placeholder="Enter Name of Company"></input> </div>
                    </div>
                    <div class="form-group row">
                        <label for="C_Addr1" class="col-6">Address 1</label>
                        <div class="col-6"><input type="text" name="C_Addr1" id="C_Addr1" class="form-control"
                                placeholder="Enter Address Line 1"></input> </div>
                    </div>
                    <div class="form-group row">
                        <label for="C_Addr2" class="col-6">Address 2</label>
                        <div class="col-6"><input type="text" name="C_Addr2" id="C_Addr2" class="form-control"
                                placeholder="Enter Address Line 2"></input> </div>
                    </div>
                    <div class="form-group row">
                        <label for="C_Addr3" class="col-6">Address 3</label>
                        <div class="col-6"><input type="text" name="C_Addr3" id="C_Addr3" class="form-control"
                                placeholder="Enter Address Line 3"></input> </div>
                    </div>
                    <div class="form-group row">
                        <label for="C_Addr4" class="col-6">Address 4</label>
                        <div class="col-6"><input type="text" name="C_Addr4" id="C_Addr4" class="form-control"
                                placeholder="Enter Address Line 4"></input> </div>
                    </div>
                </div>
                <div class="col-6 float-right">
                    <div class="form-group row">
                        <label for="C_gstin" class="col-6">GSTIN</label>
                        <div class="col-6"><input type="text" name="C_gstin" id="C_gstin" class="form-control"
                                placeholder="Enter GSTIN"></input> </div>
                    </div>
                    <div class="form-group row">
                        <label for="C_pan" class="col-6">PAN</label>
                        <div class="col-6"><input type="text" name="C_pan" id="C_pan" class="form-control"
                                placeholder="Enter PAN"></input> </div>
                    </div>
                    <div class="form-group row">
                        <label for="C_footer" class="col-6">Footer Address</label>
                        <div class="col-6">
                            <textarea class="form-control" id="C_footer" name="C_footer"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="C_term" class="col-6">Terms & Condition</label>
                        <div class="col-6">
                            <textarea class="form-control" id="C_term" name="C_term"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="C_extra" class="col-6 ">Payment Details</label>
                        <div class="col-6">
                            <textarea class="form-control" id="C_extra" name="C_extra"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-12 form-group row Export_service " >
                    <label for="C_Addr3" class="col-3">Import Export Code</label>
                    <div class="col-9"><input type="text" name="ImpExpCode" id="ImpExpCode" class="form-control"
                            placeholder="ex:- 0700000208"></input> </div>
                </div>
                <div class="col-12 form-group row Export_service ">
                    <label for="C_Addr4" class="col-3">Contract/Purchase Order No.and Date</label>
                    <div class="col-9"><input type="text" name="ord_desc" id="ord_desc" class="form-control"
                            placeholder="ex:- Agreement Date 14-Nov-2019"></input> </div>
                </div>
                <div class="col-12 form-group row Export_service " >
                    <label for="C_Addr3" class="col-3">Top Description 1</label>
                    <div class="col-9"><input type="text" name="top_desc1" id="top_desc1" class="form-control"
                            placeholder="ex:- Satellite  Stations Others :Tata Communications Ltd"></input> </div>
                </div>
                <div class="col-12 form-group row Export_service ">
                    <label for="C_Addr4" class="col-3">Top Description 2</label>
                    <div class="col-9"><input type="text" name="top_desc2" id="top_desc2" class="form-control"
                            placeholder="ex:- SUPPLY MEANT FOR EXPORT UNDER LETTER OF UNDERTAKING ARN AD290320003722L dated 10/03/2020"></input> </div>
                </div>
                

                <div class="col-12 form-group row">
                    <label class="col-6 text-right">Company Logo</label>
                    <input type="file" name="logoFile" id="logoFile" class="col-6 float-right"></input>
                </div>
                <div class="col-12 text-center">
                    <input type="submit" class="btn btn-primary col-3 form-control float-left" value="submit"></input>
                    <input type="Cancel" class="btn btn-warning col-2 form-control float-right" value="cancel"></input>
                </div>
            </form>
        </div>

    </div>
</div>
<script type="text/javascript" src="scripts/savestorage.js"> </script>
<script type="text/javascript" src="scripts/savestorage.min.js"></script>
<script>
$('#tmpl_Form').saveStorage();
console.log('tested');
</script>

<script type="text/javascript" src="pages/template/template.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"
    integrity="sha512-UdIMMlVx0HEynClOIFSyOrPggomfhBKJE28LKl8yR3ghkgugPnG6iLfRfHwushZl1MOPSY6TsuBDGPK2X4zYKg=="
    crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script>
$(() => {
    $('input[name="inv_type"]').on('change', function(e) {
        if ($(this).prop("checked") == true && $(this).val() == "yes") {
            console.log("Checkbox is checked.");
            $('.Export_service').show();
        } else if ($(this).prop("checked") == false) {
            console.log("Checkbox is unchecked.");
            $('.Export_service').hide();
        }
        else{
            $('.Export_service').hide();
        }
    });

})
</script>