<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Trip report card - LAP</title>
        <link rel="icon" type="image/png" sizes="32x32" href="images/lap_green.png">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta property="og:type" content="website">
        <meta property="og:title" content="Trip report card - LAP">
        <meta name="twitter:card" content="summary">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap">
        <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
        <script src="modules/html2canvas.js"></script>
        <link rel="stylesheet" href="css/index.css">
        <script src="js/main.js" defer></script>
    </head>

    <body>
        <!-- <button type="button" id="importButton">Import</button>

        <div class="modal-overlay hidden" id="modalOverlay"></div>
        <div class="modal hidden" id="importModal">
            <button class="close-button" id="modalCloseButton">&times;</button>
            <h3>Import trip report card</h3>
            <input type="text" id="importData">
            <button id="modalImportButton">Import</button>
        </div> -->

        <div id="card">
            <div class="header">
                <img class="logo" src="images/hd/lap_green.png">
                <div class="note">
                    <h3>LUGANES AUTOBUSU PARKS</h3>
                    <p>Dates and times should be in the EE(S)T timezone.</p>
                </div>
            </div>

            <hr>
    
            <h1 class="title center">TRIP REPORT CARD</h1>
    
            <form id="cardForm">
                <table class="no-border">
                    <tbody>
                        <tr>
                            <td>Issued on</td>
                            <td><input id="date" type="date"></td>
                        </tr>
                        <tr>
                            <td>Vehicle fleet number</td>
                            <td><input id="vehicle" type="text" autocomplete="off" maxlength="3"></td>
                        </tr>
                        <tr>
                            <td>Timetable</td>
                            <!-- <td><input id="timetable" type="text" maxlength="5"></td> -->
                            <td>
                                <select id="timetable">
                                    <option value=""></option>
                                    <option value="02-01">02-01</option>
                                    <option value="02-02">02-02</option>
                                    <option value="02-03">02-03</option>
                                    <option value="04-01">04-01</option>
                                    <option value="04-02">04-02</option>
                                    <option value="04-03/1">04-03/1</option>
                                    <option value="04-03/2">04-03/2</option>
                                    <option value="04-03">04-03</option>
                                    <option value="09-01">09-01</option>
                                    <option value="09-02">09-02</option>
                                    <option value="09-R1">09-R1</option>
                                    <option value="09-R2">09-R2</option>
                                    <option value="09-R1-R2">09-R1 & R2</option>
                                    <option value="11-01">11-01</option>
                                    <option value="11-02">11-02</option>
                                    <option value="14-01">14-01</option>
                                    <option value="14-02">14-02</option>
                                    <option value="14-R1">14-R1</option>
                                    <option value="14-R2">14-R2</option>
                                    <option value="14-R1-R2">14-R1 & R2</option>
                                    <option value="reserve">Reserve</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <br>

                <table>
                    <thead>
                        <tr>
                            <th>Driver I</th>
                            <th>Driver II</th>
                            <th>Driver III</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="driver1" class="driver-column">
                                <table class="no-border">
                                    <tr>
                                        <td>Name</td>
                                        <td><input id="name" type="text" autocomplete="off" maxlength="20"></td>
                                    </tr>
                                    <tr>
                                        <td>ID</td>
                                        <td><input id="id" type="number" autocomplete="off" min="1"></td>
                                    </tr>
                                    <tr>
                                        <td>Shift start</td>
                                        <td><input id="shiftStart" type="time"></td>
                                    </tr>
                                    <tr>
                                        <td>Shift end</td>
                                        <td><input id="shiftEnd" type="time"></td>
                                    </tr>
                                    <tr>
                                        <td>Trips<br><span class="field-note">Total/Cancelled</span></td>
                                        <td><input id="totalTrips" type="number" autocomplete="off" min="0" max="15"><input id="cancelledTrips" type="number" autocomplete="off" min="0" max="15"></td>
                                    </tr>
                                </table>
                            </td>

                            <td id="driver2" class="driver-column">
                                <table class="no-border">
                                    <tr>
                                        <td>Name</td>
                                        <td><input id="name" type="text" autocomplete="off" maxlength="20"></td>
                                    </tr>
                                    <tr>
                                        <td>ID</td>
                                        <td><input id="id" type="number" autocomplete="off" min="1"></td>
                                    </tr>
                                    <tr>
                                        <td>Shift start</td>
                                        <td><input id="shiftStart" type="time"></td>
                                    </tr>
                                    <tr>
                                        <td>Shift end</td>
                                        <td><input id="shiftEnd" type="time"></td>
                                    </tr>
                                    <tr>
                                        <td>Trips<br><span class="field-note">Total/Cancelled</span></td>
                                        <td><input id="totalTrips" type="number" autocomplete="off" min="0" max="15"><input id="cancelledTrips" type="number" autocomplete="off" min="0" max="15"></td>
                                    </tr>
                                </table>
                            </td>

                            <td id="driver3" class="driver-column">
                                <table class="no-border">
                                    <tr>
                                        <td>Name</td>
                                        <td><input id="name" type="text" autocomplete="off" maxlength="20"></td>
                                    </tr>
                                    <tr>
                                        <td>ID</td>
                                        <td><input id="id" type="number" autocomplete="off" min="1"></td>
                                    </tr>
                                    <tr>
                                        <td>Shift start</td>
                                        <td><input id="shiftStart" type="time"></td>
                                    </tr>
                                    <tr>
                                        <td>Shift end</td>
                                        <td><input id="shiftEnd" type="time"></td>
                                    </tr>
                                    <tr>
                                        <td>Trips<br><span class="field-note">Total/Cancelled</span></td>
                                        <td><input id="totalTrips" type="number" autocomplete="off" min="0" max="15"><input id="cancelledTrips" type="number" autocomplete="off" min="0" max="15"></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <br>

                <table>
                    <thead>
                        <tr>
                            <th>Fuel readings</th>
                            <th>Technical condition</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                        <tr>
                            <td id="fuelReadings">
                                <table class="no-border">
                                    <tr>
                                        <td>Departing</td>
                                        <td><input id="depFuel" type="number" autocomplete="off" min="0" max="750">L</td>
                                    </tr>
                                    <tr>
                                        <td>Exchanging</td>
                                        <td><input id="exchFuel" type="number" autocomplete="off" min="0" max="750">L</td>
                                    </tr>
                                    <tr>
                                        <td>Arriving</td>
                                        <td><input id="arrFuel" type="number" autocomplete="off" min="0" max="750">L</td>
                                    </tr>
                                </table>
                            </td>

                            <td>
                                <table class="no-border">
                                    <tr>
                                        <td>Returned in good technical shape</td>
                                        <td><input id="techShape" type="checkbox"></td>
                                    </tr>
                                    <tr>
                                        <td>Mechanic</td>
                                        <td><input id="mechanic" type="text" autocomplete="off" maxlength="20"></td>
                                    </tr>
                                    <tr>
                                        <td>Driver</td>
                                        <td><input id="driver" type="text" autocomplete="off" maxlength="20"></td>
                                    </tr>
                                    <tr>
                                        <td>Dispatcher</td>
                                        <td><input id="dsp" type="text" autocomplete="off" maxlength="20"></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <h3>Incidents and accidents</h3>
                <!-- <textarea id="incidents" rows="5" maxlength="500"></textarea> -->
                <div id="incidents" class="textarea" contenteditable maxlength="320"></div>

                <table class="no-border">
                    <tr>
                        <td>Driver<input id="accDriver" type="text" autocomplete="off" maxlength="20"></td>
                        <td>Responsible mechanic<input id="accMechanic" type="text" autocomplete="off" maxlength="20"></td>
                    </tr>
                </table>
    
                <p class="footer">AFTER FILLING OUT, PRESS "GENERATE" AND SEND THE IMAGE<br>IN #TRIP-REPORT-CARDS WITHIN 30 MINUTES OF SHIFT END.</p>
            </form>
        </div>

        <p class="center" id="errorLabel"></p>

        <div class="buttons center">
            <button type="button" id="generateButton">Generate</button>
            <button type="button" id="shareButton">Get link</button>
        </div>
    </body>
</html>