<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" href="/main/diary/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/main/diary/favicon.css" />
    <title>Diary Management
    </title>
    <script type="text/javascript" src="/main/diary/diary.js">
    </script>
</head>

<body>
    <div class="container mx-auto" style="width: 80%; margin-left: ($spacer * .25) !important">
        <header _id="header">
        </header>
        <!-- Add new entry -->
        <div id="new" _id="new" style="border-width: .2rem; border: solid #f7f7f9; padding: 1.5rem; background-color: #e0eefa;">
            <form method="post" action="#" _id="edit">
                <h3>New diary record:
                </h3>
                <div class="form-row">
                    <input type="hidden" name="do" value="diary" />
                    <input type="hidden" name="diary:edit:id" _id="id" />
                    <input type="hidden" _id="hiddens" />

                    <div class="form-group col-xs-3">
                        <label for="date">When</label>
                        <span class="arrow_prev" onclick="change_date('diary:edit:ddate', -1)">
                        </span>
                        <span class="form-inline" _id="date">
                        </span>
                        <span class="arrow_next" onclick="change_date('diary:edit:ddate', 1)">
                        </span>
                    </div>
                    <div class="from-group col-xs-2">
                        <label for="person">Engineer</label>
                        <select name="diary:edit:who" class="custom-select">
                            <option _id="person">Engineer
                            </option>
                        </select>
                    </div>
                    <div class="from-group col-xs-3">
                        <label for="hours">Hours</label>
                        <input _id="hours" autocomplete="off" type="text" size="2" name="diary:edit:hours" class="form-control" />
                    </div>
                    <div class="form-group col-xs-3">
                        <label for="project">Project</label>
                        <select name="diary:edit:prj_id" class="custom-select">
                            <option class="btn btn-primary" _id="project">Project
                            </option>
                        </select>
                    </div>
                </div>
                <div style="width: 800px; overflow: auto; ">
                    <textarea name="diary:edit:descr" cols="70" rows="10" class="form-control"></textarea>
                </div>
                <div>
                    <button type="submit" value="Submit" class="btn btn-primary btn-sm">Submit / Ctrl+Enter</button>
                </div>
            </form>
        </div>

        <hr>

        <div>
            <form method="post" action="#">
                <div id="massapproval" _id="massapproval">
                    <button type="submit" name="diary:action:verb" value="ApproveAll" class="btn btn-primary btn-sm" _id="edit">Approve All
                    </button>
                    <button type="submit" name="diary:action:verb" value="DenyAll" class="btn btn-warning btn-sm" _id="edit">Deny All
                    </button>
                    <button type="submit" name="diary:action:verb" value="RejectAll" class="btn btn-danger btn-sm" _id="edit">Reject All
                    </button>
                </div>
            </form>
        </div>

        <!-- Entries to be approved -->
        <div id="approvals" _id="approvals">
            <h3 class="display-4">Records for approval
            </h3>
            <hr class="my-4">
            <div _id="entries">
                <div class="input-group mb-3">
                    <form method="post" _id="view" action="#">

                        <input type="hidden" name="do" value="diary" />
                        <input type="hidden" name="diary:action:id" _id="edit_id" />
                        <input type="hidden" _id="hiddens" />
                        <div class="alert alert-info">
                            <span _id="date">01 Jan 1970
                            </span>
                            <span _id="person">Engineer name
                            </span>
                            <strong><span _id="hours">100
                                </span></strong> hour(s);
                            Project
                            <span _id="project_name">Project name
                            </span>
                            <span class="badge badge-primary badge-pill" _id="project">customer/tag
                            </span>
                        </div>

                        <div style="width: 800px; overflow: auto; margin-left: 10px;">
                            <pre _id="descr">Work description</pre>
                        </div>
                        <div class="timestamp badge">Status:
                            <span class="badge badge-warning badge-pill" _id="state">valid
                            </span> created
                            <span _id="created">2006-10-23 10:20:00
                            </span>, modified
                            <span _id="modified">2006-10-24 15:17:00
                            </span>
                        </div>
                        <div _id="appnote" class="form-control">
                            <span _id="created">01 10 1970
                            </span>
                            <span _id="author">Author
                            </span>:
                            <span _id="note">Approval note
                            </span>
                        </div>
                        <p>
                            <textarea name="diary:edit:approval" cols="70" rows="5" class="form-control"></textarea>
                        </p>
                        <p>
                            <button type="submit" name="diary:action:verb" value="Approve" class="btn btn-success btn-sm" _id="edit">Approve
                            </button>
                            <button type="submit" name="diary:action:verb" value="Deny" class="btn btn-warning btn-sm" _id="edit">Deny
                            </button>
                            <button type="submit" name="diary:action:verb" value="Reject" class="btn btn-danger btn-sm" _id="edit">Reject
                            </button>
                        </p>
                    </form>
                </div>
            </div>
        </div>

        <!-- Selection menu -->
        <div id="menu" _id="menu" style="border-width: .2rem; border: solid #f7f7f9; padding: 1.5rem; background-color: #e0eefa;">
            <form method="get" action="#">
                <h3>Select diary records to list:
                </h3>
                <input type="hidden" name="do" value="diary">
                <div class="form-row">
                    <div class="form-group col-xs-3">
                        <label for="start_date">From</label>
                        <span class="form-inline" _id="start_date">
                        </span>
                        <small class="form-text text-muted"># - current day or year</small>
                    </div>
                    <div class="form-group col-xs-3">
                        <label for="end_date">To</label>
                        <span class="form-inline" _id="end_date">
                        </span>
                        <small class="form-text text-muted">$ - end of month</small>
                    </div>
                    <div class="form-group col-xs-3">
                        <label for="project">Project</label>
                        <select name="diary:list:prj_id" class="custom-select">
                            <option class="btn btn-primary" _id="project">Project
                            </option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-xs-3">
                        <select name="diary:list:customer" class="custom-select">
                            <option _id="customer">Customer
                            </option>
                        </select>
                    </div>
                    <div class="form-group col-xs-3">
                        <select name="diary:list:who" class="custom-select">
                            <option _id="who">Engineer
                            </option>
                        </select>
                    </div>
                </div>
                <div class="form-check form-group">
                    <span _id="newest_first"></span>
                    <label class=" form-check-label" for="newest_first">Newest first</label>
                </div>
                <div class="form-check form-group">
                    <span _id="just_stats"></span>
                    <label class="form-check-label" for="just_stats">Just stats</label>
                </div>

                <button type="submit" class="btn btn-primary btn-sm">Search
                </button>

            </form>
        </div>

        <div _id="nodata" id="nodata">
            No entries
        </div>

        <hr>

        <!-- Summary -->
        <div _id="detailed_totals" id="detailed_totals">
            <h3>Summary
            </h3>
            <p>Total hours:
                <span _id="hours">100
                </span>
            </p>
            <h4>By projects:
            </h4>
            <ul>
                <li _id="customer">
                    <span _id="name">Name
                    </span>,
                    <span _id="hours">1000
                    </span> hour(s)
                    <ul>
                        <li _id="project">
                            <span _id="name">Name</span> (<span _id="customer">customer</span>/<span _id="tag">tag</span>),
                            <span _id="hours">100</span> hour(s)
                        </li>
                    </ul>
                </li>
            </ul>
            <h4>By engineers:
            </h4>
            <table class="table table-striped table-hover table-sm">
                <caption>Lag: days it took to submit the records, Mon,Tue etc. : average number of hours per day in the selected period (vacations are not handled)</caption>
                <thead>
                    <tr>
                        <th scope="col">Engineer</th>
                        <th scope="col">Hours</th>
                        <th scope="col">Lag</th>
                        <th scope="col">Mon</th>
                        <th scope="col">Tue</th>
                        <th scope="col">Wed</th>
                        <th scope="col">Thu</th>
                        <th scope="col">Fri</th>
                        <th scope="col">Sat</th>
                        <th scope="col">Sun</th>
                    </tr>
                </thead>
                <tbody>
                    <tr _id="person">
                        <th scope="row" _id="name"> </th>
                        <td _id="hours"> </td>
                        <td _id="delay"> </td>
                        <td _id="mon_stat"> </td>
                        <td _id="tue_stat"> </td>
                        <td _id="wed_stat"> </td>
                        <td _id="thu_stat"> </td>
                        <td _id="fri_stat"> </td>
                        <td _id="sat_stat"> </td>
                        <td _id="sun_stat"> </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div _id="totals" id="totals">
            <h3>Summary
            </h3>
            <p>Total hours:
                <span _id="hours">100
                </span>
            </p>
            <h4>By projects:
            </h4>
            <ul>
                <li _id="customer">
                    <span _id="name">Name
                    </span>,
                    <span _id="hours">1000
                    </span> hour(s)
                    <ul>
                        <li _id="project">
                            <span _id="name">Name</span> (<span _id="customer">customer</span>/<span _id="tag">tag</span>),
                            <span _id="hours">100</span> hour(s)
                        </li>
                    </ul>
                </li>
            </ul>
            <h4>By engineers:
            </h4>
            <ul>
                <li _id="person">
                    <span _id="name">Person
                    </span>,
                    <span _id="hours">100
                    </span> hour(s)
                </li>
            </ul>
        </div>

        <hr>

        <!-- Details -->
        <div _id="details" id="details">
            <h3>Details
            </h3>
            <div _id="entries">
                <form _id="view_only" style="margin-top: 3px;" class="card">
                    <div class="card-body">
                        <div class="card-title">
                            <span _id="date">01 Jan 1970
                            </span>:
                            <span _id="person">Engineer name
                            </span>
                            <span _id="hours">100 hour(s)
                            </span>;
                            Project
                            <span _id="project_name">Project name
                            </span>
                            <span class="badge badge-success badge-pill" _id="project">customer/tag
                            </span>
                        </div>
                        <div style="width: 900px; overflow: auto;" class="card-body">
                            <pre _id="descr">Work description</pre>
                        </div>
                    </div>
                </form>
                <form method="post" _id="view" style="margin-top: 3px;" class="card">
                    <div class="card-body">
                        <div class="card-title">
                            <input type="hidden" name="do" value="diary" />
                            <input type="hidden" name="diary:list:edit" _id="edit_id" />
                            <input type="hidden" name="diary:action:id" _id="edit_id" />
                            <input type="hidden" _id="hiddens" />
                            <span _id="date">01 Jan 1970
                            </span>
                            <span _id="person">Engineer name
                            </span>
                            <span _id="hours">100 h
                            </span>
                            <span _id="project_name">Project name
                            </span>
                            <span class="badge badge-success badge-pill" _id="project">customer/tag
                            </span>
                            <button type="submit" name="diary:action:verb" value="Edit" class="btn btn-outline-primary btn-sm" _id="edit">Edit
                            </button>
                            <button type="submit" name="diary:action:verb" value="Delete" class="btn btn-outline-secondary btn-sm" _id="edit">Delete
                            </button>
                        </div>
                        <div class="card-body" style="width: 900px; overflow: auto;">
                            <pre _id="descr">Work description</pre>
                        </div>
                        <div _id="appnote" class="appnote">
                            <p>
                                <span _id="created">01 10 1970
                                </span>
                                <span _id="author">Author
                                </span>:
                                <span _id="note">Approval note
                                </span>
                            </p>
                        </div>
                        <div class="timestamp card-subtitle"><small>Status:
                                <span _id="state">valid
                                </span>; created
                                <span _id="created">2006-10-23 10:20:00
                                </span>, modified
                                <span _id="modified">2006-10-24 15:17:00
                                </span>
                            </small>
                        </div>
                    </div>
                </form>
                <form method="post" _id="edit" style="margin-top: 3px;" class="card">
                    <div class="edit">
                        <h5>Edit diary record:
                        </h5>
                        <div class="form-row">
                            <input type="hidden" name="do" value="diary" />
                            <input type="hidden" name="diary:edit:id" _id="id" />
                            <input type="hidden" _id="hiddens" />

                            <div class="form-group col-xs-3">
                                <span class="form-inline" _id="date">
                                </span>
                            </div>
                            <div class="form-group col-xs-2">
                                <select name="diary:edit:who" class="custom-select">
                                    <option _id="person">
                                    </option>
                                </select>
                            </div>
                            <div class="form-group col-xs-3">
                                <input _id="hours" type="text" size="2" name="diary:edit:hours" class="form-control" />
                            </div>
                            <div class="form-group col-xs-3">
                                <select name="diary:edit:prj_id" class="custom-select">
                                    <option _id="project">Project 1
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div style="width: 800px; overflow: auto; ">
                            <textarea name="diary:edit:descr" cols="70" rows="10" _id="descr" class="form-control">Work description</textarea>
                        </div>
                        <div _id="approval">
                            <div _id="appnote" class="form-control form-inline">
                                <span _id="created">01 10 1970
                                </span>
                                <span _id="author">Author
                                </span>:
                                <span _id="note">Approval note
                                </span>
                            </div>
                            <p>
                                <textarea name="diary:edit:approval" cols="70" rows="10">Approval note</textarea>
                            </p>
                        </div>
                        <p>
                            <button type="submit" value="Submit" class="btn btn-primary btn-sm">Submit / Ctrl+Enter</button>
                        </p>
                    </div>
                </form>
            </div>
        </div>
        <span _id="footer">
        </span>
    </div>
</body>

</html>