<!DOCTYPE html>
<html lang="en">
{% load i18n %}
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Language" content="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"/>
    <meta name="description" content="" content="no">
    <title>Intelligent Time | Dashboard | Firmware Management</title>
    <link rel="shortcut icon" href="/static/cloud/static/images/favicon.ico" sizes="16x16 24x24 32x32 64x64">
    <link href="/static/cloud/static/css/main.min.css" rel="stylesheet">
    <link href="/static/cloud/static/css/custom.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css"
          href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <link href="/static/cloud/static/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>

    <script>
        window.user_is_super_admin = "{{ user.is_super_admin }}";
        window.user_is_superuser_extra = "{{ user.is_superuser_extra }}";
    </script>
</head>
<style type="text/css">
#pageloader
{
  background: rgba( 255, 255, 255, 0.8 );
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#pageloader img
{
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  top: 50%;
}
</style>
<body>
<div id="pageloader">
   <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div>
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
    <div class="app-header header-shadow">
        <div class="app-header__logo">
            <div class="header__pane mr-auto">
                <div>
                    <button type="button" class="hamburger close-sidebar-btn hamburger--elastic" disabled
                            data-class="closed-sidebar">
                     <span class="hamburger-box">
                     <span class="hamburger-inner"></span>
                     </span>
                    </button>
                </div>
            </div>
            <div class="logo-src text-center" style="width: 190px !important; height: 50px !important; cursor:pointer;"
                 id="home-page">
                <img src="/static/cloud/static/images/web_logo.png" alt="" class="img-fluid">
            </div>
        </div>
        <div class="app-header__mobile-menu">
            <div>
                <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
                  <span class="hamburger-box">
                  <span class="hamburger-inner"></span>
                  </span>
                </button>
            </div>
        </div>
        <div class="app-header__menu">
               <span>
               <button type="button"
                       class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
               <span class="btn-icon-wrapper">
               <i class="fa fa-ellipsis-v fa-w-6"></i>
               </span>
               </button>
               </span>
        </div>
        <div class="app-header__content pl-0" style="background: #474b4f;">
            <div class="app-header-left">
                <ul class="header-menu nav navList my-header-menu">
                    <li class="nav-item">
                        <a href="/" class="nav-link custom-nav-link">
{#                          <i class="nav-link-icon fa fa-history"></i>#}
                            {% trans 'vendor_management' %}
                        </a>
                    </li>
                    {% if user.is_vendor_display or user.is_super_admin %}
                    <li class="nav-item">
                        <a href='{% url 'biotime:subscription_configuration' %}' class="nav-link custom-nav-link">
                            {% trans 'subscription_management' %}
                        </a>
                    </li>
                    {% endif %}
                    <li class="nav-item active">
                        <a href='{% url 'biotime:firmware_configuration' %}' class="nav-link custom-nav-link">
                            {% trans 'firmware_management' %}
                        </a>
                    </li>
                </ul>
            </div>
            <div class="app-header-right">
                <div class="header-btn-lg pr-0">
                    <div class="widget-content p-0">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left ml-3 header-user-info">
                                <div class="widget-heading text-white">
                                    {{ email }}
                                </div>
                                <div class="widget-subheading text-white">
                                    <small>Vendor</small>
                                </div>
                            </div>
                            <div class="widget-content-left">
                                <div class="btn-group">
                                    <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                       class="p-0 btn">
                                        <img width="42" class="rounded-circle"
                                             src="/static/cloud/static/images/avatars/admin1.png" alt="">
                                        <i class="fa fa-angle-down ml-2 opacity-8 text-white"></i>
                                    </a>
                                    <div tabindex="-1" role="menu" aria-hidden="true"
                                         class="dropdown-menu dropdown-menu-left"
                                         style="padding: 0px; border-radius: 0; min-width: 8rem;">
                                        <button type="button" tabindex="0" class="dropdown-item"
                                                onclick="location.href='/logout/'">
                                            <i class="fa fa-sign-out"></i> Logout
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="app-main">
        <div class="app-sidebar sidebar-shadow d-none">
            <div class="app-header__logo">
                <div class="logo-src"></div>
                <div class="header__pane ml-auto">
                    <div>
                        <button type="button" class="hamburger close-sidebar-btn hamburger--elastic"
                                data-class="closed-sidebar">
                        <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                        </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="app-header__mobile-menu">
                <div>
                    <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
                     <span class="hamburger-box">
                     <span class="hamburger-inner"></span>
                     </span>
                    </button>
                </div>
            </div>
            <div class="app-header__menu">
                  <span>
                  <button type="button"
                          class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
                  <span class="btn-icon-wrapper">
                  <i class="fa fa-ellipsis-v fa-w-6"></i>
                  </span>
                  </button>
                  </span>
            </div>
            <!-- Top Side Bar -->
            <!-- //End -->
            <div class="scrollbar-sidebar">
                <div class="app-sidebar__inner">
                    <ul class="vertical-nav-menu" id="backend_dashboard_company_menu">
                        <li class="app-sidebar__heading" style="margin-bottom: 2.5em;"></li>
                    </ul>
                </div>
            </div>
            <!-- //End -->
        </div>
        <div class="app-main__outer" style="padding-left:0px;">
            <div class="app-main__inner">
                <nav class="" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="active breadcrumb-item" aria-current="page">Product's</li>
                    </ol>
                </nav>

                <div class="row">
                    <div class="col-md-12">

                        <div class="card it-custom-card">
                            {% if is_zkteco_login == 1 %}
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-12 text-left">
                                            <button type="button" class="btn btn-success" data-toggle="modal"
                                                    data-target="#addFirmware"><i class="fa fa-plus fa-fw"></i>Add
                                            </button>
                                        </div>

                                    </div>
                                </div>
                            {% endif %}
                            <div class="card-body">
                                <div class="table-responsive-sm">
                                    <table class="table table-sm table-bordered table-hover dataTable"
                                           id="attendanceTable">
                                        <thead class="bg-light">
                                        <tr>
                                            <th>SL NO</th>
                                            <th>Device Model</th>
                                            <th>Device Category</th>
                                            <th>Firmware Version</th>
                                            <th>Firmware Release Date</th>
                                            <th>Uploaded File</th>
                                            <th class="text-center" width="100px"></th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        {% for product in products %}
                                            <tr>
                                                <td>{{ forloop.counter }}</td>
                                                <td>{{ product.device_model }}</td>
                                                <td>{{ product.device_category }}</td>
                                                <td>{{ product.firmware_version }}</td>
                                                <td>{{ product.firmware_release_date }}</td>
                                                <td>{{ product.firmware_file }}</td>
                                                {% if is_zkteco_login == 1 %}
                                                    <td class="text-center">
                                                        <a href="javascript:void(0);" style="cursor:pointer;"
                                                           title="Edit"><i
                                                                class="fa fa-edit fa-lg fa-fw text-success"
                                                                onclick="product_edit({{ product.id }})"></i></a>&nbsp;
                                                        <a href="javascript:void(0);" style="cursor:pointer;"
                                                           title="Delete"><i
                                                                class="fa fa-trash fa-lg fa-fw text-danger"
                                                                onclick="product_delete({{ product.id }})"></i></a>
                                                    </td>
                                                {% endif %}
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                            <div class="card-footer text-muted"></div>
                        </div>
                    </div>
                </div>
                <!-- //End -->
            </div>
            <div class="app-wrapper-footer">
                <div class="app-footer">
                    <div class="app-footer__inner">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Popup Starts here -->
    <!-- Add - Modal Popup -->
    <div class="modal fade" id="addFirmware" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" style="box-shadow: none;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="form-horizontal" action="/iclock/firmware_add/" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Device Model<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="text" class="form-control" name="device_model"
                                                                      required="required"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Device Category<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="text" class="form-control"
                                                                      name="device_category" required="required"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Firmware Version<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="text" class="form-control"
                                                                      name="firmware_version" required="required"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Firmware Release Date<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="date" class="form-control"
                                                                      name="firmware_release_date" required="required">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Upload File<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="file" class="" name="firmware_file"
                                                                      required="required">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success"><i class="fa fa-check fa-fw"></i>Confirm</button>
                        <button type="button" class="btn btn-light" data-dismiss="modal"><i class="fa fa-close fa-fw"></i>Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- //End -->
    <!-- Add - Modal Popup -->
    <div class="modal fade" id="editFirmware" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" style="box-shadow: none;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="form-horizontal" action="/iclock/firmware_edit/" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                    <input type="hidden" name="id" id="firmware_edit_id" value="">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Device Model<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="text" class="form-control" name="device_model" id="device_model" value=""
                                                                      required="required"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Device Category<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="text" class="form-control"
                                                                      name="device_category" id="device_category" value="" required="required"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Firmware Version<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="text" class="form-control" id="firmware_version" value=""
                                                                      name="firmware_version" required="required"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Firmware Release Date<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="date" class="form-control" id="firmware_release_date"
                                                                      name="firmware_release_date" required="required">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-row">
                                    <label class="control-label col-sm-4 text-right">Upload File<span
                                            class="text-danger">*</span></label>
                                    <div class="col-sm-8 mb-3"><input type="file" class="" name="firmware_file"  value="" required="required">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success"><i class="fa fa-check fa-fw"></i>Confirm</button>
                        <button type="button" class="btn btn-light" data-dismiss="modal"><i class="fa fa-close fa-fw"></i>Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- //End -->
    <!-- //Modal Popup Ends here -->
</div>
<!-- //End -->
<script src="/static/cloud/static/js/jquery/jquery-3.5.1.min.js"></script>
<script src="/static/cloud/static/js/jquery/bootstrap-4.5.0.min.js"></script>
<script type="text/javascript" src="/static/cloud/static/js/main.min.js"></script>
<script src="/static/cloud/static/js/jquery/jquery.dataTables.min.js"></script>
<script src="/static/cloud/static/js/jquery/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("form").on("submit", function(){
        $("#pageloader").fadeIn();
        });//submit
    })
    $(document).ready(function () {
        $('#attendanceTable').DataTable();

    });
    $('#home-page').click(function () {
        window.location.href = "/";
    });

    function product_delete(id) {
        var data = {'id':id, csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val()};
        console.log(data);
        $.ajax({
            url: "/iclock/firmware_delete/",
            type: "POST",
            data: data,
            dataType: "json",
            success: function (result) {
                var ret = result.code;
                if (ret === 1) {
                    window.location.href = "/iclock/firmware_configuration/";
                } else {
                    alert("Error");
                }
            },
        })
    }

    function product_edit(id) {
        var data = {'id': id};
        $.ajax({
            url: "/iclock/firmware_edit/",
            type: "GET",
            data: data,
            dataType: "json",
            success: function (result) {
                var ret = result.product;
                $('#firmware_edit_id').val(ret[0]['id']);
                $('#device_model').val(ret[0]['device_model']);
                $('#device_category').val(ret[0]['device_category']);
                $('#firmware_version').val(ret[0]['firmware_version']);
                $('#firmware_release_date').val(ret[0]['firmware_release_date']);
                $("#editFirmware").modal({show: true});
            },
        })

    }
</script>
</body>
</html>