{% extends "_base.html" %}
{% block head %}
{% endblock head %}
{% block body %}
{% block content %}
<header>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">Other</h1>
            <p class="lead">Other actions.</p>
        </div>
    </div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<hr class="my-4">
<div class="container">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    Backup&nbsp;&nbsp;<i class="fa fa-download"></i>
                </div>
                <div class="card-body">
                    Download a backup of the REDCap project metadata, item, fields, and records.
                    <br>
                    <a href="{{ url_for('download_backup') }}">
                        <button name="backupButton" class="btn btn-secondary"><i
                                class="fa fa-download"></i>&nbsp;&nbsp;Download
                            backup</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-header">
                    Help&nbsp;&nbsp;<i class="fa fa-question"></i>
                </div>
                <div class="card-body">
                    If you have run into an error, need help, or want to provide feed-back, please open a GitHub issue
                    following the link below:
                    <br>
                    <a href="https://github.com/NeuroDevComp/babylab-redcap/issues/new/choose" target="_blank">
                        <button name="Issue" class="btn btn-secondary"><i
                                class="fa-brands fa-github"></i>&nbsp;&nbsp;Report
                            an
                            issue</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-header">
                    REDCap&nbsp;&nbsp;<i class="fa fa-database"></i>
                </div>
                <div class="card-body">
                    Link to REDCap database
                    <br>
                    <a href="https://apps.sjdhospitalbarcelona.org/redcap/" target="_blank">
                        <button name="Issue" class="btn btn-secondary"><i class="fa fa-database"></i>&nbsp;&nbsp;Go to
                            the
                            database</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col">
            <div class="card text-center">
                <div class="card-header">
                    Age calculator&nbsp;&nbsp;<i class="fa fa-calculator"></i>
                </div>
                <div class="card-body">
                    <div class="input-group date">
                        <span class="input-group-text" id="date1-label">Date 1</span>
                        <input type="datetime-local" id="date1" name="date1" />
                    </div>
                    <br>
                    <div class="input-group date">
                        <span class="input-group-text" id="date2-label">Date 2</span>
                        <input type="datetime-local" id="date2" name="date2" />
                    </div>
                    <br>
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="units-addon">Units</span>
                        <select id="units1" class="form-select" aria-describedby="units-addon"
                            aria-label="Select units">
                            <option value="md" selected>Months and days</option>
                            <option value="hm">Hours and minutes</option>
                        </select>
                        <br>
                    </div>
                    <button type="button" class="btn btn-dark" onclick="calculate1()">Calculate</button>
                </div>
                <div class="card-footer" id="result1-footer">
                    <span id="result1"></span>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card text-center">
                <div class="card-header">
                    Age calculator&nbsp;&nbsp;<i class="fa fa-calculator"></i>
                </div>
                <div class="card-body">
                    <div class="input-group date">
                        <span class="input-group-text" id="date1-label">Timestamp</span>
                        <input type="datetime-local" id="timestamp" name="timestamp" />
                    </div>
                    <br>
                    <div class="row">
                        <div class="col">
                            <label id="months-label">Months</label>
                            <input class="form-control" type="number" id="months" name="months" value="0" />
                        </div>
                        <div class="col">
                            <label id="days-label">Days</label>
                            <input class="form-control" type="number" id="days" name="days" value="0" />
                        </div>
                    </div>
                    <br>
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="units-addon">Units</span>
                        <select id="units2" class="form-select" aria-describedby="units-addon"
                            aria-label="Select units">
                            <option value="md" selected>Months and days</option>
                            <option value="hm">Hours and minutes</option>
                        </select>
                        <br>
                    </div>
                    <button type="button" class="btn btn-dark" onclick="calculate2()">Calculate</button>
                </div>
                <div class="card-footer" id="result2-footer">
                    <span id="result2"></span>
                </div>
            </div>
        </div>
        <div class="col">
        </div>
    </div>
    <script src="static/js/age_calculator.js"></script>
    <script type="text/javascript">
        let today = new Date()
        today.setSeconds(0, 0);

        document.getElementById("date1").valueAsDate = today;
        document.getElementById("date2").valueAsDate = today;
        document.getElementById("result1-footer").style.display = "none"
        document.getElementById("timestamp").valueAsDate = today;
        document.getElementById("months").value = 0;
        document.getElementById("days").value = 0;
        document.getElementById("result2-footer").style.display = "none"

        function calculate1() {
            result = get_age(
                document.getElementById("date1").value,
                document.getElementById("date2").value,
                units = document.getElementById("units1").value,
            )
            document.getElementById("result1-footer").style.display = "block"
            document.getElementById("result1").textContent = result
        }

        function calculate2() {
            result = get_current_age(
                document.getElementById("timestamp").value,
                document.getElementById("months").value,
                document.getElementById("days").value,
                units = document.getElementById("units2").value,
            )
            document.getElementById("result2-footer").style.display = "block"
            document.getElementById("result2").textContent = result
        }
    </script>
</div>
{% endblock content %}
{% endblock body %}