%%[begin:timer]%%
<div class="container-fluid">
    <form action="%%[base_url]%%/timer.php" name="clock" method="GET" class="needs-validation" novalidate>
        <div class="row">
            <!-- Notes Section -->
            <div class="col-md-6">
                <div class="form-group mb-3">
                    <label class="form-label">Summary (public)</label>
                    %%[summary,input_textarea,rows=1,cols=30]%%
                </div>
                <div class="form-group mb-3">
                    <label class="form-label">Notes (private)</label>
                    %%[notes,input_textarea,rows=10,cols=30]%%
                </div>
                <div class="mb-3">
                    <a href="javascript:toggleBox('demodiv',1);" class="btn btn-link p-0">
                        <i class="fas fa-highlighter me-1"></i>Text Highlighting
                    </a>
                    %%[textFormat]%%
                </div>
            </div>

            <!-- Timer Section -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group mb-3">
                            <label class="form-label">Start Time</label>
                            %%[start,input_text]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Current Time</label>
                            %%[current,input_text]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Minutes Elapsed</label>
                            %%[elapsed_mins,input_text]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Type of Activity</label>
                            %%[category,category]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Case</label>
                            <div>%%[number]%%</div>
                            %%[new_case_menu]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Funding Source</label>
                            %%[funding,funding]%%
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-4">
            %%[act_time,input_hidden]%%
            %%[elapsed_secs,input_hidden]%%
            %%[action,input_hidden]%%
            <button type="submit" name="end" class="btn btn-primary me-2" accesskey="s">
                <i class="fas fa-stop-circle me-1"></i>End
            </button>
            <button type="submit" name="pause" class="btn btn-secondary" accesskey="p">
                <i class="fas fa-pause-circle me-1"></i>Pause
            </button>
        </div>
    </form>
</div>

<script>
// Timer functionality
let timerID = null;
let timerRunning = false;

function round_extra(number, X) {
    X = (!X ? 2 : X);
    return Math.round(number*Math.pow(10,X))/Math.pow(10,X);
}

function stopclock() {
    if(timerRunning) {
        clearTimeout(timerID);
    }
    timerRunning = false;
}

function startclock() {
    stopclock();
    showtime();
}

function showtime() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    let timeValue = ((hours > 12) ? hours - 12 : hours).toString();
    const elapsedValue = document.clock.elapsed_secs.value++;
    
    timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
    timeValue += (hours >= 12) ? " PM" : " AM";
    
    document.clock.current.value = timeValue;
    document.clock.elapsed_mins.value = Math.round(elapsedValue/60);
    
    timerID = setTimeout(showtime, 1000);
    timerRunning = true;
}

function currenttime() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    let timeValue = ((hours > 12) ? hours - 12 : hours).toString();
    
    timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
    timeValue += (hours >= 12) ? " PM" : " AM";
    
    return timeValue;
}

// Initialize
document.clock.summary.focus();
startclock();
document.clock.start.value = currenttime();
</script>

%%[textFormat.js,javascript]%%
%%[setFunding.js,javascript]%%
%%[end:timer]%%

%%[begin:timer-pause]%%
<div class="container-fluid">
    <form action="%%[base_url]%%/timer.php" name="clock" method="GET" class="needs-validation" novalidate>
        <div class="row">
            <!-- Notes Section -->
            <div class="col-md-6">
                <div class="form-group mb-3">
                    <label class="form-label">Summary (public)</label>
                    %%[summary,input_textarea,rows=1,cols=30]%%
                </div>
                <div class="form-group mb-3">
                    <label class="form-label">Notes (private)</label>
                    %%[notes,input_textarea,rows=10,cols=30]%%
                </div>
                <div class="mb-3">
                    <a href="javascript:toggleBox('demodiv',1);" class="btn btn-link p-0">
                        <i class="fas fa-highlighter me-1"></i>Text Highlighting
                    </a>
                    %%[textFormat]%%
                </div>
            </div>

            <!-- Timer Section -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group mb-3">
                            <label class="form-label">Start Time</label>
                            %%[start,input_text]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Current Time</label>
                            %%[current,input_text]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Minutes Elapsed</label>
                            %%[elapsed_mins,input_text]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Type of Activity</label>
                            %%[category,category]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Case</label>
                            <div>%%[number]%%</div>
                            %%[new_case_menu]%%
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Funding Source</label>
                            %%[funding,funding]%%
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-4">
            %%[act_time,input_hidden]%%
            %%[elapsed_secs,input_hidden]%%
            %%[action,input_hidden]%%
            <button type="submit" name="end" class="btn btn-primary me-2" accesskey="s">
                <i class="fas fa-stop-circle me-1"></i>End
            </button>
            <button type="submit" name="unpause" class="btn btn-success" accesskey="r">
                <i class="fas fa-play-circle me-1"></i>Resume
            </button>
        </div>
    </form>
</div>

<script>
document.clock.summary.focus();
</script>

%%[textFormat.js,javascript]%%
%%[setFunding.js,javascript]%%
%%[end:timer-pause]%%

%%[begin:timer-close]%%
<!DOCTYPE html>
<html>
<head>
    <title>Timer Closed</title>
</head>
<body onload="self.close();">
</body>
</html>
%%[end:timer-close]%%