<style>
/* * {
    margin: 0;
    padding: 0
}

html {
    height: 100%
}

#grad1 {
    background-color: : #9C27B0;
    background-image: linear-gradient(120deg, #FF4081, #81D4FA)
} 
*/
#msform {
    text-align: center;
    position: relative;
    margin-top: 20px
}

#msform fieldset .form-card {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding: 20px 40px 30px 40px;
    box-sizing: border-box;
    width: 94%;
    margin: 0 3% 20px 3%;
    position: relative
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}

#msform fieldset:not(:first-of-type) {
    display: none
}

#msform fieldset .form-card {
    text-align: left;
    color: #9E9E9E
}

/* #msform input, */
#msform textarea {
    padding: 0px 8px 4px 8px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 16px;
    letter-spacing: 1px
}

#msform input:focus,
#msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none;
    font-weight: bold;
    border-bottom: 2px solid skyblue;
    outline-width: 0
}

#msform .action-button {
    width: 100px;
    background: skyblue;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px
}

#msform .action-button:hover,
#msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue
}

#msform .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #616161
}

select.list-dt {
    border: none;
    outline: 0;
    border-bottom: 1px solid #ccc;
    padding: 2px 5px 3px 5px;
    margin: 2px
}

select.list-dt:focus {
    border-bottom: 2px solid skyblue
}

.card {
    z-index: 0;
    border: none;
    border-radius: 0.5rem;
    position: relative
}

.fs-title {
    font-size: 25px;
    color: #2C3E50;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey
}

#progressbar .active {
    color: #000000
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    width: 20%;
    float: left;
    position: relative
}

#progressbar #profile:before {
    font-family: FontAwesome;
    content: "\f007"
}

#progressbar #personal:before {
    font-family: FontAwesome;
    content: "\f007"
}

#progressbar #payment:before {
    font-family: FontAwesome;
    content: "\f09d"
}

#progressbar #confirm:before {
    font-family: FontAwesome;
    content: "\f00c"
}

#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 18px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: skyblue
}

.radio-group {
    position: relative;
    margin-bottom: 25px
}

.radio {
    display: inline-block;
    width: 204;
    height: 104;
    border-radius: 0;
    background: lightblue;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    cursor: pointer;
    margin: 8px 2px
}

.radio:hover {
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3)
}

.radio.selected {
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1)
}

.fit-image {
    width: 100%;
    object-fit: cover
}
</style>
<div class="col-12">
    <h4>Download Utility</h4>
    <ul>
        <li>
            <a href="utility/JSON_preperation_FormA(version1.01).xlsm" target="_blank" >E-Invoice JSON Preparation - Format A [For B2B, SEZ, Exports and Deemed Exports of e-Invoice details in one sheet] </a>
            <br/><br/>
        </li>
        <li>
            <a href="utility/JSON_preperation_FormB(version1.01).xlsm" target="_blank" >E-Invoice JSON Preparation - Format B [For B2B, SEZ, Exports and Deemed Exports of e-invoice details in two sheets] </a>
            <br/><br/>
        </li>
        <li>
            <a href="utility/JSON_preperation_FormC(version1.01).xlsm" target="_blank" >E-Invoice JSON Preparation - Format C [For B2B, SEZ, Exports , Deemed Exports alongwith Payment and Reference details of e-invoice in multiple sheets] </a>
            <br/><br/>
        </li>
        <li>
            <a href="utility/JSON_preperation_FormD(version1.01).xlsm" target="_blank" >E-Invoice JSON Preparation - Format D [For B2B, SEZ, Exports , Deemed Exports alongwith Payment and Reference details of e-invoice in one sheet] </a>
            <br/><br/>
        </li>
    </ul>
</div>

<div class="col-12">
    <form id="msform" name="msform" enctype="multipart/form-data" class="form-horizontal" method="post"
        action="javascript:;">
        <ul id="progressbar" class="text-center">
            <li class="active" id="profile"><strong>Profile</strong></li>
            <li id="personal"><strong>Document Details</strong></li>
            <li id="payment"><strong>Product Details</strong></li>
            <li id="payment"><strong>Tax Details</strong></li>
            <li id="confirm"><strong>Download Json</strong></li>
        </ul>
        <fieldset>
            <input type="button" name="next" class="next action-button float-right" value="Next Step" />
            <div class="form-card row">
                <div class="col-12">
                    <h2 class="fs-title float-left">Profile Information</h2>
                </div>

                <div class="col-6">
                    <div class="form-group row">
                        <label for="sel_gstin" class="col-4 label ">Seller GSTIN *</label>
                        <input type="text" class="col-8 form-control float-right" style="text-transform:uppercase"
                            id="sel_gstin" name="sel_gstin" placeholder="Seller GSTIN" minlength="15" maxlength="15" />
                    </div>
                    <div class="form-group row">
                        <label for="sel_LegalName" class="col-4 label ">Legal Name *</label>
                        <input type="text" class="col-8 form-control float-right" id="sel_LegalName"
                            name="sel_LegalName" placeholder="Legal Name" />
                    </div>
                    <div class="form-group row">
                        <label for="sel_gstin" class="col-4 label ">Trade Name</label>
                        <input type="text" class="col-8 form-control float-right" id="sel_TradeName"
                            name="sel_TradeName" placeholder="Trade Name" />
                    </div>
                    <div class="form-group row">
                        <label for="sel_pan" class="col-4 label ">Pan</label>
                        <input type="text" class="col-8 form-control float-right" id="sel_pan" name="sel_pan"
                            placeholder="Seller Pan" />
                    </div>
                    <br /><br />

                </div>
                <div class="col-6 float-right">
                    <div class="form-group row">
                        <label for="sel_gstin" class="col-4 label ">Seller Address 1 *</label>
                        <input type="text" class="col-8 form-control float-right" id="sel_Addr1" name="sel_Addr1"
                            placeholder="Seller Address Line 1" />
                    </div>
                    <div class="form-group row">
                        <label for="sel_gstin" class="col-4 label ">Seller Address 2</label>
                        <input type="text" class="col-8 form-control float-right" id="sel_Addr2" name="sel_Addr2"
                            placeholder="Seller Address Line 2" />
                    </div>
                    <div class="form-group row">
                        <label for="sel_gstin" class="col-4 label ">Seller Location *</label>
                        <input type="text" class="col-8 form-control float-right" id="sel_loc" name="sel_loc"
                            placeholder="Seller Location" />
                    </div>
                    <div class="form-group row">
                        <label for="sel_state" class="col-4 label ">State *</label>
                        <select id="sel_state" class="col-8 form-control" name="sel_state">
                        </select>
                    </div>
                    <div class="form-group row">
                        <label for="sel_pin" class="col-4 label ">Pin Code *</label>
                        <input type="text" class="col-8 form-control float-right" id="sel_pin" name="sel_pin"
                            placeholder="Pin Code" />
                    </div>
                    <div class="form-group row">
                        <label for="sel_phone" class="col-4 label ">Phone Number </label>
                        <input type="text" class="col-8 form-control float-right" id="sel_mobile" name="sel_mobile"
                            placeholder="Seller Phone Number" />
                    </div>
                    <div class="form-group row">
                        <label for="sel_email" class="col-4 label ">Email id</label>
                        <input type="text" class="col-8 form-control float-right" id="sel_email" name="sel_email"
                            placeholder="Seller Email Address " />
                    </div>
                </div>
                <div class="col-12">
                    <span>Notes * <span><br />
                            <p>
                                1. Please Fill All <i>Mandatory</i> Fields.
                            </p>
                </div>
            </div> <input type="button" name="next" class="next action-button" value="Next Step" />
        </fieldset>
        <fieldset>
            <input type="button" name="previous" class="previous action-button-previous float-left" value="Previous" />
            <input type="button" name="next" class="next action-button float-right" value="Next Step" />
            <div class="form-card row">
                <h2 class="fs-title col-12">Document Details</h2>
                <div class="col-6">
                    <div class="form-group row">
                        <label for="doc_type" class="col-4 label">Supply Type Code</label>
                        <select id="doc_type" class="col-8 form-control" name="doc_type">
                            <option value=""></option>
                            <option value="B2B">B2B</option>
                            <option value="SEZWP">SEZWP</option>
                            <option value="SEZWOP">SEZWOP</option>
                            <option value="EXPWP">EXPWP</option>
                            <option value="EXPWOP">EXPWOP</option>
                            <option value="DEXP">DEXP</option>
                        </select>
                    </div>
                    <div class="form-group row">
                        <label for="doc_igstIntra" class="col-4 label ">IGST On Intra</label>
                        <select id="doc_igstIntra" class="col-8 form-control" name="doc_igstIntra">
                            <option value=""></option>
                            <option value="Y">Yes</option>
                            <option value="N">No</option>
                        </select>
                    </div>
                    <div class="form-group row">
                        <label for="doc_igstIntra" class="col-4 label ">Document Type *</label>
                        <select id="doc_igstIntra" class="col-8 form-control" name="doc_igstIntra">
                            <option value=""></option>
                            <option value="INV">Tax Invoice</option>
                            <option value="CRN">Credit Note</option>
                            <option value="DBN">Debit Note</option>
                        </select>
                    </div>
                    <div class="form-group row">
                        <label for="doc_no" class="col-4 label ">Document Number *</label>
                        <input type="text" class="col-8 form-control float-right" id="doc_no" name="doc_no"
                            placeholder="Document Number" />
                    </div>
                    <div class="form-group row">
                        <label for="doc_date" class="col-4 label ">Document Date *<br />(DD/MM/YYYY)</label>
                        <input type="date" class="col-8 form-control date float-right" id="doc_date" name="doc_date"
                            placeholder="Document Number" />
                    </div>
                    <div class="form-group row">
                        <label for="buy_gstin" class="col-4 label ">Buyer GSTIN *<br><small>('URP'- If No
                                GSTIN)</small></label>
                        <input type="text" class="col-8 form-control float-right" style="text-transform:uppercase"
                            id="buy_gstin" name="buy_gstin" placeholder="Buyer GSTIN" minlength="15" maxlength="15" />
                    </div>
                    <div class="form-group row">
                        <label for="buy_LegalName" class="col-4 label ">Legal Name *</label>
                        <input type="text" class="col-8 form-control float-right" id="buy_LegalName"
                            name="buy_LegalName" placeholder="Legal Name" />
                    </div>
                    <div class="form-group row">
                        <label for="buy_TradeName" class="col-4 label ">Trade Name</label>
                        <input type="text" class="col-8 form-control float-right" id="buy_TradeName"
                            name="buy_TradeName" placeholder="Trade Name" />
                    </div>
                </div>
                <div class="col-6 float-right">

                    <div class="form-group row">
                        <label for="sel_state" class="col-4 label ">Buyer POS *</label>
                        <select id="buy_pos" class="col-8 form-control" name="buy_pos">
                        </select>
                    </div>
                    <div class="form-group row">
                        <label for="buy_Addr1" class="col-4 label ">Buyer Address 1 *</label>
                        <input type="text" class="col-8 form-control float-right" id="buy_Addr1" name="buy_Addr1"
                            placeholder="Buyer Address Line 1" />
                    </div>
                    <div class="form-group row">
                        <label for="buy_Addr2" class="col-4 label ">Buyer Address 2</label>
                        <input type="text" class="col-8 form-control float-right" id="buy_Addr2" name="buy_Addr2"
                            placeholder="Buyer Address Line 2" />
                    </div>
                    <div class="form-group row">
                        <label for="buy_loc" class="col-4 label ">Buyer Location *</label>
                        <input type="text" class="col-8 form-control float-right" id="buy_loc" name="buy_loc"
                            placeholder="Buyer Location" />
                    </div>
                    <div class="form-group row">
                        <label for="buy_pin" class="col-4 label ">Buyer Pin Code</label>
                        <input type="text" class="col-8 form-control float-right" id="buy_pin" name="buy_pin"
                            placeholder="Buyer pin code" />
                    </div>
                    <div class="form-group row">
                        <label for="buy_state" class="col-4 label ">Buyer State *</label>
                        <select id="buy_state" class="col-8 form-control" name="buy_state">
                        </select>
                    </div>
                    <div class="form-group row">
                        <label for="buy_email" class="col-4 label ">Buyer Phone Number</label>
                        <input type="text" class="col-8 form-control float-right" id="buy_phone" name="buy_phone"
                            placeholder="Buyer Email id" />
                    </div>
                    <div class="form-group row">
                        <label for="buy_email" class="col-4 label ">Buyer Email id</label>
                        <input type="text" class="col-8 form-control float-right" id="buy_email" name="buy_email"
                            placeholder="Buyer Email id" />
                    </div>
                </div>
                <div class="col-12">
                    <span>Notes * <span><br />
                            <p>
                                1. Please Fill All <i>Mandatory</i> Fields.<br />
                                2. Document Number should not start with 0,/ and -. If so, then request is
                                rejected.<br />
                                3. In Case of transaction of direct export, recipiant GSTIN has to be URP and State Code
                                has to be 96(Ohter countries) and PIN code Should be 999999.

                            </p>
                </div>
            </div>
            <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
            <input type="button" name="next" class="next action-button" value="Next Step" />
        </fieldset>
        <fieldset>
            <input type="button" name="previous" class="previous action-button-previous float-left" value="Previous" />
            <input type="button" name="next" class="next action-button float-right" value="Next Step" />
            <div class="form-card row">
                <h2 class="fs-title col-12">Product/Service Details</h2>
                <div class="col-6 ">
                    <div class="form-group row">
                        <label for="prdut_slno" class="col-4 label">Sl.No</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_slno" name="prdut_slno"
                            placeholder="Serial No" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_desc" class="col-4 label">Product Description</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_desc" name="prdut_desc"
                            placeholder="Product Description" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_isSer" class="col-4 label">is Service</label>

                    </div>
                    <div class="form-group row">
                        <label for="prdut_hsn" class="col-4 label">HSN Code</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_hsn" name="prdut_hsn"
                            placeholder="HSN Code" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_qty" class="col-4 label">Quantity</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_qty" name="prdut_qty"
                            placeholder="Quantity" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_unit" class="col-4 label">Unit</label>

                    </div>
                    <div class="form-group row">
                        <label for="prdut_unitPrice" class="col-4 label">Unit Price</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_unitPrice"
                            name="prdut_unitPrice" placeholder="Unit Price" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_grossAmount" class="col-4 label">Gross Amount</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_grossAmount"
                            name="prdut_grossAmount" placeholder="Gross Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_discount" class="col-4 label">Discount</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_discount"
                            name="prdut_discount" placeholder="Discount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_preTaxVal" class="col-4 label">Pre Tax Value</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_preTaxVal"
                            name="prdut_preTaxVal" placeholder="Tax Per Value" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_taxVal" class="col-4 label">Taxable Value</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_taxVal" name="prdut_taxVal"
                            placeholder="Taxable Value" />
                    </div>
                </div>
                <div class="col-6 float-right">
                    <div class="form-group row">
                        <label for="prdut_gstRate" class="col-4 label">GST Rate (%) *</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_gstRate"
                            name="prdut_gstRate" placeholder="GST Rate" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_sgstAmt" class="col-4 label">SGST Amount *</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_sgstAmt"
                            name="prdut_sgstAmt" placeholder="SGST Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_cgstAmt" class="col-4 label">CGST Amount *</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_cgstAmt"
                            name="prdut_cgstAmt" placeholder="CGST Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_igstAmt" class="col-4 label">IGST Amount *</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_igstAmt"
                            name="prdut_igstAmt" placeholder="IGST Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_cessRate" class="col-4 label">Cess Rate</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_cessRate"
                            name="prdut_cessRate" placeholder="Cess Rate" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_cessAmtAdval" class="col-4 label">Cess Amount Adval</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_cessAmtAdval"
                            name="prdut_cessAmtAdval" placeholder="Cess Amount Adval" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_cessNonAdvalAmt" class="col-4 label">Cess Non Adval Amount</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_cessNonAdvalAmt"
                            name="prdut_cessNonAdvalAmt" placeholder="Cess Non Adval Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_stateCessRate" class="col-4 label">State Cess Rate (%)</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_stateCessRate"
                            name="prdut_stateCessRate" placeholder="State Cess Rate" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_stateCessAmtAdval" class="col-4 label">State Cess Adval Amount (Rs)</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_stateCessAmtAdval"
                            name="prdut_stateCessAmtAdval" placeholder="State Cess Adval Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_stateCessNonAdvalAmt" class="col-4 label">State Cess Non Adval Amount
                            (Rs)</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_stateCessNonAdvalAmt"
                            name="prdut_stateCessNonAdvalAmt" placeholder="State Cess Non Adval Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_othCharges" class="col-4 label">Other Charges</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_othCharges"
                            name="prdut_othCharges" placeholder="Other Charges" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_itemTot" class="col-4 label">Item Total</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_itemTot"
                            name="prdut_itemTot" placeholder="Item Total" />
                    </div>
                </div>
            </div> <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
            <input type="button" name="next" class="next action-button" value="Next Step" />
        </fieldset>
        <fieldset>
            <input type="button" name="previous" class="previous action-button-previous float-left" value="Previous" />
            <input type="button" name="Validate" class="btn btn-warning" value="Validate" />
            <input type="Submit" class="btn btn-primary float-right" disabled value="Prepare JSON File" />
            <div class="form-card row">
                <div class="col-6">
                    <div class="form-group row">
                        <label for="prdut_totTaxVal" class="col-4 label">Total Taxable Value</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_totTaxVal"
                            name="prdut_totTaxVal" placeholder="Toatal Taxable Value" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_totSgstAmt" class="col-4 label">SGST Amount</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_totSgstAmt"
                            name="prdut_totSgstAmt" placeholder="SGST Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_totCgstAmt" class="col-4 label">CGST Amount</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_totCgstAmt"
                            name="prdut_totCgstAmt" placeholder="CGST Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_totIgstAmt" class="col-4 label">IGST Amount</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_totIgstAmt"
                            name="prdut_totIgstAmt" placeholder="IGST Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_totCesstAmt" class="col-4 label">Cess Amount</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_totCesstAmt"
                            name="prdut_totCesstAmt" placeholder="Cess Amount" />
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group row">
                        <label for="prdut_totStateCesstAmt" class="col-4 label">State Cess Amount</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_totStateCesstAmt"
                            name="prdut_totStateCesstAmt" placeholder="State Cess Amount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_totDiscount" class="col-4 label">Discount</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_totDiscount"
                            name="prdut_totDiscount" placeholder="Discount" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_totOthCharges" class="col-4 label">Other Charges</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_totOthCharges"
                            name="prdut_totOthCharges" placeholder="Other Charges" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_totRoundOff" class="col-4 label">Round off</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_totRoundOff"
                            name="prdut_totRoundOff" placeholder="Round off" />
                    </div>
                    <div class="form-group row">
                        <label for="prdut_TotInvVal" class="col-4 label">Total Invoice Value</label>
                        <input type="text" class="col-8 form-control float-right" id="prdut_TotInvVal"
                            name="prdut_TotInvVal" placeholder="Total Invoice Value" />
                    </div>
                    <div class="form-group row"></div>
                </div>
            </div>
            <input type="button" name="previous" class="previous action-button-previous float-left" value="Previous" />
            <input type="button" name="Validate" class="btn btn-warning" value="Validate" />
            <input type="Submit" class="btn btn-primary float-right" disabled value="Prepare JSON File" />
        </fieldset>
    </form>
</div>
<script type="text/javascript" src="scripts/savestorage.js"> </script>
<script type="text/javascript" src="scripts/savestorage.min.js"></script>
<script>
$(document).ready(function() {

    $.ajaxSetup({
        cache: false
    });

    $.getJSON("pages/rane/state_master.json").then(
        function success(data) {
            console.log(data);
            var htm = '';
            $.each(data.StateMaster, function(i, v) {
                htm += "<option value='" + v.State_Code + "' >" + v.State_Name + "</option>";
            });
            $('#sel_state').html(htm);
            $('#buy_state').html(htm);
            $('#buy_pos').html(htm);
        },
        function error(jqxhr, textStatus, errorThrown) {
            console.log(textStatus, errorThrown) // log `$.ajax` errors
        }
    );
    var current_fs, next_fs, previous_fs; //fieldsets
    var opacity;

    $(".next").click(function() {

        current_fs = $(this).parent();
        next_fs = $(this).parent().next();

        //Add Class Active
        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

        //show the next fieldset
        next_fs.show();
        //hide the current fieldset with style
        current_fs.animate({
            opacity: 0
        }, {
            step: function(now) {
                // for making fielset appear animation
                opacity = 1 - now;

                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                next_fs.css({
                    'opacity': opacity
                });
            },
            duration: 600
        });
    });

    $(".previous").click(function() {

        current_fs = $(this).parent();
        previous_fs = $(this).parent().prev();

        //Remove class active
        $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

        //show the previous fieldset
        previous_fs.show();

        //hide the current fieldset with style
        current_fs.animate({
            opacity: 0
        }, {
            step: function(now) {
                // for making fielset appear animation
                opacity = 1 - now;

                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                previous_fs.css({
                    'opacity': opacity
                });
            },
            duration: 600
        });
    });

    $('.radio-group .radio').click(function() {
        $(this).parent().find('.radio').removeClass('selected');
        $(this).addClass('selected');
    });

    $(".submit").click(function() {
        return false;
    });

    $("#sel_gstin").focusout(function() {
        var gstin = $(this).val();
        if (gstin.length == 15) {
            var res = gstin.substring(2, 12);
            $(this).val(gstin.toUpperCase());

            $.getJSON("pages/rane/ref.json")
                .then(function success(data) {
                        $.each(data.Sheet1, function(i, v) {

                            if (v.GSTIN == gstin.toUpperCase()) {
                                $('#sel_LegalName').val(v.Tradename);
                                $('#sel_TradeName').val(v.Tradename);
                                $('#sel_pan').val(res.toUpperCase());
                                // $('#sel_state  option[text="'+v.State+'"]').attr('selected','selected');
                                $('#sel_state option').filter(function() {
                                    return $(this).html().toUpperCase() == v.State;
                                }).attr('selected', 'selected');

                                console.log(v.State);
                                console.log(v.Tradename);
                                console.log(v.GSTIN);
                            }
                        })
                        // if(data.sheet1.GSTIN.search(gstin) !== 1){

                        // }
                    },
                    function error(jqxhr, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown) // log `$.ajax` errors
                    });
        }
    });

    $("#buy_gstin").focusout(function() {
        var gstin = $(this).val();
        if (gstin.length == 15) {
            var res = gstin.substring(2, 12);
            $(this).val(gstin.toUpperCase());

            $.getJSON("pages/rane/ref.json")
                .then(function success(data) {
                        $.each(data.Sheet1, function(i, v) {
                            if (v.GSTIN == gstin.toUpperCase()) {
                                $('#buy_LegalName').val(v.Tradename);
                                $('#buy_TradeName').val(v.Tradename);
                                // $('#sel_pan').val(res.toUpperCase());
                                // $('#sel_state  option[text="'+v.State+'"]').attr('selected','selected');
                                $('#buy_state option').filter(function() {
                                    return $(this).html().toUpperCase() == v.State;
                                }).attr('selected', 'selected');
                            }
                        });
                    },
                    function error(jqxhr, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown) // log `$.ajax` errors
                    }
                );
        }
    });

    $('#msform').saveStorage();

    $('input[name="Validate"]').click(function() {
        // swal('Please Fill all Mandatory Fields... ');
        // console.log("validation Clicked");

        // $.ajax({
        //     url: 'pages/rane/down_prep.php',
        //     method: 'GET',
        //     xhrFields: {
        //         responseType: 'blob'
        //     },
        //     success: function(data) {
        //         const url = window.URL.createObjectURL(data);
        //         const a = document.createElement('a');
        //         a.style.display = 'none';
        //         a.href = url;
        //         document.body.appendChild(a);
        //         a.click();
        //         window.URL.revokeObjectURL(url);
        //     }
        // });

        var name = $('#buy_gstin').val();
        fetch('pages/rane/down_prep.php')
            .then(resp => resp.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                // the filename you want
                a.download = name+' .json';
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                swal('your file has downloaded!'); // or you know, something with better UX...
            })
            .catch(() => alert('oh no!'));
        // $.fileDownload('pages/rane/down_prep.php')
        //     .done(function() {
        //         alert('File download a success!');
        //     })
        //     .fail(function() {
        //         alert('File download failed!');
        //     });
    });
});
</script>