<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="icon" href="icons/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="theme-color" content="#ffffff"/>
    <meta name="description"
          content="Do you need to validate your customers TIN numbers for compliance? We provide this validator for free! We also provide an API for easy integration!"/>
    <meta name="robots" content="index,follow">
    <meta name="keywords" content="tin,tax id,validation,validator,api,free"/>

    <title>Free online TIN validator and API</title>

    <link rel="apple-touch-icon" href="icons/apple-touch-icon.png"/>
    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
    <link rel="manifest" href="manifest.json"/>
    <link rel="stylesheet" href="css/flag-icons.min.css">
    <link rel="stylesheet" href="css/index.css">

    <script type="text/javascript" src="/htmx.org/1.9.2/dist/htmx.min.js"></script>
    <script type="text/javascript" src="/hyperscript.org/0.9.8/dist/_hyperscript.js"></script>
    <script type="text/javascript" src="/htmx.org/extensions/json-enc.js"></script>

</head>
<body>
    <header>
        <img src="icons/android-chrome-192x192.png" alt="Logo" style="height:40px" />
    </header>
    <div class="container">
        <h1>Tax Identification Validation</h1>

        <h4>
            Tax Identification (TIN) Validation can be used to verify a persons tax id. This validator will perform
            the check for the correct format and validate the check numbers of the provided TIN.
        </h4>

        <form hx-post="validate" hx-ext='json-enc' hx-target="#result" autocomplete="off">
            <p>
                <select required name="country"
                        _='init set value to "{{defaultCountry}}"
                           on change fetch generate as json with
                                method: "POST",
                                headers: {"Content-Type":"application/json"},
                                body: JSON.stringify({
                                    "country":`$event.target.value`,
                                    "dateOfBirth":"1983-06-29",
                                    "gender":"m"
                                })
                                then put it.value into #value @placeholder'>
                    {{#each countries}}
                            <option value="{{@key}}">{{this}}</option>
                    {{/each}}
                </select>
                <input type="text" id="value" name="value" placeholder="{{defaultValue}}" required minlength="3">
            </p>
            <p>
                <button type="submit">Validate</button>
                <div id="result"></div>
            </p>
        </form>

        <h4 style="margin-bottom:0;margin-top:100px">Supported countries:</h4>
        <ul>
            {{#each countries}}
                <li class="fi-{{ lower @key}} flag">{{this}}</li>
            {{/each}}
        </ul>
    </div>

    <aside>
        <div >
            <h1 style="font-size: 2em">💬</h1>
            <h4>Do you need to validate TIN numbers on your own site or in your organization?</h4>
        </div>
        We provide this same validation via a REST API as well!
    </aside>

    <footer style="position: fixed; bottom: 5px; right: 5px;"
            _='init fetch "https://hits.devsoap.com/hit" as json with
                    method: "POST",
                    headers: {"Content-Type":"application/json"},
                    body: JSON.stringify({
                         "host": document.location.host,
                         "ctx": window.location.pathname,
                         "url": window.location.href
                    })'>
        Service provided by <b><a href="https://devsoap.com" target="_blank" rel="noreferrer">devsoap.com</a></b>
    </footer>
</body>
</html>