<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/images/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
    <link rel="manifest" href="/images/favicon/site.webmanifest">
    <link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/images/favicon/favicon.ico">
    <meta name="apple-mobile-web-app-title" content="Pax S90">
    <meta name="application-name" content="Pax S90">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="msapplication-TileImage" content="/images/favicon/mstile-144x144.png">
    <meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <title>Datex Pay - Diagnostic System and Service Desk</title>

    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/notification.css">
    <link rel="stylesheet" href="/css/navbar.css">
    <link rel="stylesheet" href="/css/options.css">

    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/jquery.maphilight.min.js"></script>
    <script src="js/axios.min.js"></script>

    <script src="js/e8e55b4ad4.js" crossorigin="anonymous"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="js/navbar.js"></script>
    <script src="js/citydetails.js"></script>
    <script src="js/id-coords.js"></script>
    <script src="js/maketable.js"></script>

    <link rel="stylesheet" href="/css/jquery-ui.min.css">
     <!-- jquery UI -->
    <script src="js/jquery-ui.min.js"></script> 
</head>

<body>

    <div id="toast" class="toast">

        <div class="toast-content">
            <div id="toastIcon" class="check">

            </div>

            <div class="message">
                <span class="text text-1">Success</span>
                <span class="text text-2">Your changes has been saved</span>
            </div>
        </div>
        <i class="fa-solid fa-xmark close"></i>

        <div class="progress"></div>
    </div>

    <!-- <button class="buttonTest">Show Toast</button> -->


    <nav class="navbar">
        <div class="navbar-brand" href="/" onclick="window.location.href='/';">
            <img src="/images/sv-org-logo.png" alt="Site Logo">
            <span>Datex Pay - Diagnostic System and Service Desk</span> <!-- Title as a span for styling -->
        </div>

        <div class="select-city">
            <select name="banks" id="banksList" class="bank-list" placeholder="Banks" onchange="getCityDetails()">
                <option value="Сбербанк" selected="selected">Сбербанк</option>
                <option value="Алфабанк">Открытие</option>
                <option value="Алфабанк">Альфа-Банк</option>
                <option value="Стандарт">Национальный-стандарт</option>
            </select>
            <div class="city-selection">
                <div id="autocompleteText" class="auto-complete-text"></div>
                <input type="text" id="cityInput" placeholder="Type a city..." onkeyup="filterCities()""   autocomplete="off">
                <div id="cityList"></div>
            </div>
            <input type="text" id="datepicker" autocomplete="off" onchange="getCityDetails()">

            <button id="downloadButton" class="download-button"><i class="fa-solid fa-download"></i></button>
        </div>

        <div class="dropdown">
            <img  src="<%= avatar %>" alt="User Photo" class="user-photo" onclick="toggleDropdown(event)">
            <div class="dropdown-menu" id="dropdownMenu">
                <div class="user-details">
                    <img src="<%= avatar %>" alt="User Photo" class="user-photo"
                        style="width: 60px; height: 60px;"> <!-- Larger photo in dropdown -->
                    <div id="userName" class="user-name" ><%= username %></div> <!-- Username -->
                </div>
                <a class="dropdown-item" href="#"><i class="fa-solid fa-user"></i>&nbsp Profile</a>
                <a class="dropdown-item" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"></i>&nbsp
                    Settings</a>
                <a class="dropdown-item" href="check-serials.html"><i class="fa-solid fa-list-check"></i>&nbsp Check
                    Serials</a>
                <a class="dropdown-item" href="http://192.168.1.6:2150/"><i class="fa-solid fa-upload"></i>&nbsp Upload
                    xlsx</a>
                <a id="showStorage" class="dropdown-item">
                    <div id="history-lable"><i class="fa-solid fa-floppy-disk"></i>&nbsp Show History</div>
                </a>

                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/logout"><i class="fa-solid fa-right-from-bracket"></i>&nbsp Logout</a>
            </div>
        </div>
    </nav>

    <div class="display-info">
        <!-- <textarea id="titleInput" class="inputHolder" placeholder="" rows="" cols="" name="" form=""> </textarea> -->
        <div id="excelTableContainer">
            <table id="excelTable" border="1">
                <tr >
                    <td>Модель
                    </td>
                    <td>Сер.номер
                    </td>
                    <td>Заявленная неисправность
                    </td>
                    <td>Произведенная работа
                    </td>
                </tr>
            </table>
        </div>
    

        <button id="removeFixes" class="btn-remove"> <i class="fa-solid fa-delete-left"></i> </button>
    </div>

    
    <div id="lastThree" class="last-records">
    </div>
    <div id="history"></div>


    <div class="buttons">

        <select name="model" id="selectmodel" class="serialform modelselect" placeholder="Model">
            <option class="pax" value="S90">S90</option>
            <option class="pax" value="D230">D230</option>

            <option class="Alited" value="SP580">Alited SP580</option>
            <option class="Alited" value="ES600">Alited ES600</option>

            <option class="pax" value="S80">S80</option>
            <option class="pax" value="SP30">SP30</option>
            <option class="pax" value="S200">S200</option>
            <option class="pax" value="S300">S300</option>
            <option class="pax" value="S920">S920</option>
            <option class="pax" value="S900">S900</option>
            <option class="pax" value="A920">A920</option>
            <option class="pax" value="A930">A930</option>
            <option class="pax" value="D200">D200</option>
            <option class="pax" value="IM20">IM20</option>

            <option class="verifone" value="VX820">VX820</option>
            <option class="verifone" value="V240m">V240m</option>
            <option class="verifone" value="V200t">V200t</option>
            <option class="verifone" value="V205c">V205c</option>
            <option class="verifone" value="V520">V520</option>
            <option class="verifone" value="VX675">VX675</option>
            <option class="verifone" value="VX680">VX680</option>
            <option class="verifone" value="VX805">VX805</option>
            <option class="verifone" value="VX820">VX820</option>
            <option class="verifone" value="VX840">VX840</option>
 
            <option class="verifone" value="P400">P400</option>
            <option class="verifone" value="PP1000se">PP1000se</option>

        </select>
        <div>
            <form action="" id="SerialNumber" class="serialform">
                <!-- <span>SerialNumber: </span> -->
                <input type="text" id="serial" class="form-control" placeholder="serial number">
                <button class="form-btn" type="submit"> <i class="fa-brands fa-searchengin"></i> <span
                        id="searchText">Search</span> </button>
            </form>
        </div>
        <div>
            <button id="copyText" class="btn copying"><i class="fa-solid fa-copy"></i> Copy & Upload</button>
            <!-- <button id="uploadText" class="btn copying"><i class="fa-solid fa-upload"></i> UP</button> -->
            <button id="reset" class="btn clean"> <i class="fa-solid fa-delete-left"></i> Clean</button>
        </div>
    </div>

    <div id="tablePlace" class="repeated"> </div>

    <div id="tablePlace2" class="repeatedx">

    </div>

    <div class="additionalButtonsContainer">
        <div id="top2ButtonsContainer"></div>
        <div id="topButtonsContainer"></div>
    </div>

    <div>
        <img class="bg-tarakan" src="./images/dance.gif">
    </div>

    <img src="./images/scan-pos.png" usemap="#image-map" class="maparea">

    <map name="image-map" id="map">
        <!-- ImageReady Slices (PAX-S90-ready-image-ready.psd) -->
        <map name="PAX_S90_ready_image_ready_Map">
            <area shape="poly" gid="usb" id="usb"
                coords="30,406, 31,430, 33,431, 32,463"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">

            <area shape="poly" gid="backcase" id="backcase"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="rect" gid="keyboard" id="keyboard" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">

            <area shape="poly" gid="printerroller" id="printerroller"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="printerchange" id="printerchange"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="printerclean" id="printerclean" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="printercoverused" id="printercoverused"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="printercovernew" id="printercovernew"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"00ff00","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="Clear"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="Cancle"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n0"
                coords=" 7"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="Enter"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n9"
                coords="208,539, 214,543, 215,547, 214,553, 209,557, 200,559, 188,558, 186,557, 180,554, 177,548, 178,540, 182,539, 196,538"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n8"
                coords="160,539, 163,543, 162,550, 156,556, 143,558, 133,557, 131,556, 124,551, 123,545, 124,541, 127,539, 131,538"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n7"
                coords="107,540, 108,543, 109,543, 108,551, 102,557, 92,560, 78,559, 72,554, 71,552, 72,542, 78,539"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n4"
                coords="108,512, 109,516, 108,522, 102,528, 92,531, 79,530, 77,529, 72,525, 71,521, 72,514, 74,512, 76,511"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n5"
                coords="160,510, 163,516, 162,522, 158,526, 150,529, 146,530, 134,529, 132,528, 125,524, 123,517, 124,512, 128,509"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n6"
                coords="210,510, 211,512, 214,513, 215,519, 214,524, 210,528, 197,530, 188,529, 186,528, 181,525, 177,520, 178,512, 183,510"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n3"
                coords="211,482, 214,486, 215,492, 208,499, 200,500, 188,499, 181,494, 178,490, 179,483, 181,482, 189,481"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n2"
                coords="157,481, 160,481, 161,483, 163,484, 162,493, 156,498, 149,500, 145,501, 134,500, 132,499, 127,496, 123,491, 124,483, 127,481"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="key" id="n1"
                coords="107,482, 106,483, 108,485, 109,487, 108,492, 101,499, 92,501, 86,502, 84,501, 77,500, 71,495, 72,484, 75,482, 79,481"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="keyC" id="alpha"
                coords="104,447, 108,450, 108,455, 105,460, 101,463, 91,466, 79,465, 72,460, 71,454, 73,449, 78,447, 86,446"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="keyC" id="down"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="keyC" id="menu"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="keyC" id="func"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="keyC" id="up"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="keyC" id="power"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="rect" gid="keyC" id="f4" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="rect" gid="keyC" id="f3" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="rect" gid="keyC" id="f2" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area shape="rect" gid="keyC" id="f1" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">
            <area gid="plonka" id="plonka" href="#" coords=" " shape="rect"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'>
            <area gid="touch" id="touch" href="#" coords=" " shape="rect"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'>
            <area gid="screen" id="screen" href="#" coords=" " shape="rect"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'>
            <area shape="poly" gid="newdc" id="newdc"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"00ff00","fillOpacity":0.6}'
                href="#">

            <area shape="poly" gid="Tarakan" id="Tarakan"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="circle" gid="water" id="water" coords="395,563,43"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">

            <area gid="changesimreader" id="changesimreader" target="" alt="right" title="right"
                coords=" " shape="poly"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area gid="cleansimreader" id="cleansimreader" target="" alt="left" title="left"
                coords=" " shape="poly"
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"0000ff","fillOpacity":0.6}'
                href="#">


            <area shape="poly" gid="cpu" id="cpu"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="protection" id="protection"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="protection" id="protection"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="dcjack" id="dcjack"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="batteries" id="batteries"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="batteries2" id="batteries2" coords=" " data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="batteries1630" id="batteries1630" coords=" " data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="buzzer" id="buzzer"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="rect" gid="ctls" id="ctls" href="#" coords=" "
                data-maphilight='{"strokeColor":"ee0000","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.4}'
                href="#">
            <area shape="poly" gid="boardio" id="boardio" href="#"
                coords=" "
                data-maphilight='{"strokeColor":"ee0000","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.4}'>

            <area shape="poly" gid="lens" id="lens"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="accumnew" id="accumnew"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="gprs" id="gprs"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="chip" id="chip"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="rect" gid="off" id="off" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="charging" id="charging"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="bunker" id="bunker" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">

            <area shape="poly" gid="mag_change" id="mag_change"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="mag_clean" id="mag_clean"
                coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="rect" gid="frontcase_clean" id="frontcase_clean" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="frontcasechange" id="frontcasechange" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">

            <area shape="poly" gid="powersupply" id="powersupply" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="miscroSD" id="miscroSD" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="sim" id="sim" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">
            <area shape="poly" gid="speaker" id="speaker" coords=" "
                data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ff0000","fillOpacity":0.6}'
                href="#">

        </map>



        <!-- OPTION TAG -->
        <div id="options-box" class="options-box">
            <!-- <span class="close-btn">&times;</span> -->
            <div class="close-btn" onclick="closeOptionsBox()">✖</div>
            <h2 class="option-title">Options</h2>

            <div class="form-group">
                <label for="background-color">Background Color:</label>
                <input type="color" id="background-color" onchange="changeBackgroundColor()">
            </div>

            <hr>

            <div class="form-group">
                <p class="group-options-title">Таилица последних записей</p>
            </div>
            <div class="form-group">
                <label for="toggleCheckbox" class="switch has-label">
                    <input type="checkbox" name="toggleCheckbox" id="toggleCheckbox"
                        onchange="toggleTableVisibility()" />
                    <span class="track"><span class="thumb"></span></span>
                    <span class="off">Скрыть Последние записи?</span>
                </label>
            </div>
            <div class="form-group">
                <label for="font-size">Максимальное количество последних записей :</label>
                <input type="number" id="last-record-setting" min="1" max="9" placeholder="2"
                    onchange="changeLastRecords()">
            </div>

            <hr>

            <div class="form-group">
                <p class="group-options-title">option в ожидание</p>
            </div>
            <div class="form-group">
                <label for="toggleWaitingCheckbox" class="switch has-label">
                    <input type="checkbox" name="toggleWaitingCheckbox" id="toggleWaitingCheckbox"
                        onchange="toggleWaitingVisibility()" />
                    <span class="track"><span class="thumb"></span></span>
                    <span class="off">Скрыть кнопки (в ожидание запасных частей) ?</span>
                </label>
            </div>
            <div class="form-group">
                <label for="newButtonInput">Текст В ожидание :</label>
                <input type="text" id="newButtonInput" placeholder="В ожидании крышки принтера">
            </div>
            <div class="form-group">
                <button onclick="addButton()" class=" options-button">Добавить новую кнопку</button>

            </div>
            <div class="addedButtonsContainer" id="settingButtonsContainer"> </div>

            <hr>

            <div class="form-group">
                <p class="group-options-title">option неисправность</p>
            </div>
            <div class="form-group">
                <label for="toggleFixesCheckbox" class="switch has-label">
                    <input type="checkbox" name="toggleFixesCheckbox" id="toggleFixesCheckbox"
                        onchange="toggleFixesVisibility()" />
                    <span class="track"><span class="thumb"></span></span>
                    <span class="off">Скрыть кнопки (доб. неисправность) ?</span>
                </label>
            </div>
            <div class="form-group">
                <label for="new2ButtonInput">Заявленная неисправность :</label>

                <input type="text" id="new2ButtonInput" placeholder="Произведенная работа">
            </div>
            <div class="form-group">
                <label for="new2ButtonNote">Произведенная работа :</label>
                <input type="text" id="new2ButtonNote" placeholder="Произведенная работа">
            </div>
            <div class="form-group">
                <button onclick="add2Button()" class="options-button">Добавить новую кнопку</button>
            </div>
            <div class="addedButtonsContainer" id="setting2ButtonsContainer"> </div>

            <hr>

            <div class="form-group">
                <p class="group-options-title">Notifications</p>
            </div>
            <div class="form-group">
                <label for="toggleNotificationCheckbox" class="switch has-label">
                    <input type="checkbox" name="toggleNotificationCheckbox" id="toggleNotificationCheckbox"
                        onchange="toggleNotificationUP()" />
                    <span class="track"><span class="thumb"></span></span>
                    <span class="off">Уведомлени вверх ?</span>
                </label>
            </div>
            <div class="form-group">
                <label for="togglePoliteCheckbox" class="switch has-label">
                    <input type="checkbox" name="togglePoliteCheckbox" id="togglePoliteCheckbox"
                        onchange="toggleNotificationPolite()" />
                    <span class="track"><span class="thumb"></span></span>
                    <span class="off">Polite notification ?</span>
                    <!-- <span class="on">ON</span> -->
                </label>
            </div>

            <hr>
            <div class="form-group">
                <p class="group-options-title">Warning</p>
            </div>
            <div class="form-group">
                <label for="enableBlinkingCheckbox" class="switch has-label">
                    <input type="checkbox" name="enableBlinkingCheckbox" id="enableBlinkingCheckbox"
                        onchange="toggleBlinking()" />
                    <span class="track"><span class="thumb"></span></span>
                    <span class="off">Blink selected problem?</span>
                    <!-- <span class="on">ON</span> -->
                </label>
            </div>


            <button class="options-button" onclick="clearSettings()">Clear Settings</button>

            <button class="options-button" onclick="saveSettings()">Save Options</button>
        </div>


        <footer>

            <a> Diagnostic System and Service Desk <span id="version"></span> © 2024 Ал Омаири Ахмед </a>
            <a href="https://github.com/Ahmedhkad/Terminal-Diagnostic-Helper" style="padding-left: 5px;"> <i
                    class="fa-brands fa-github"> </i> </a>
        </footer>
</body>
<script src="js/auth.js"></script>
<script src="js/options.js"></script>
<script src="js/russiankeys.js"></script>
<script src="js/diag.js"></script>

</html>