
<%- include("../partials/headerlinks") %>

<%- include("../partials/header") %>
<%- include("../partials/sidebar") %>
  <div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">VERSION</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="<%= adminbaseurl %>dashboard">Dashboards</a></li>
                                <li class="breadcrumb-item active">VERSION</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>       
            <div class="row">
                <div class="col-lg-12">
                    <div class="card" id="orderList">
                        <div class="card-header  border-0">
                            <div class="d-flex align-items-center">
                                <h5 class="card-title mb-0 flex-grow-1">Version List</h5>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <div>
                                <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                                </ul>

                                <div class="table-responsive table-card mb-1">
                                    <table class="table table-nowrap align-middle" id="orderTable">
                                        <thead class="text-muted table-light">
                                            <tr class="text-uppercase">
                                                <th class="sort" data-sort="id">Sl No</th>
                                                <th class="sort" data-sort="title">Version Name</th>
                                                <th class="sort" data-sort="value">Value</th>
                                                <th class="sort" data-sort="city">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody class="list form-check-all">
                                            <% var i= 1;
                                                versionList.forEach(function(val) { %>	
                                                <tr>
                                                    <td class="id"><a class="fw-medium link-primary "><%= i %></a></td>
                                                    <td class="customer_name"><%= val.title %></td>
                                                    <td class="customer_name"><%= val.value %></td>                                                   
                                                    <td>
                                                        <ul class="list-inline hstack gap-2 mb-0">
                                                            <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" id="<%=val.id%>" data-title="<%= val.title %>" data-isUpdateRequire="<%= val.isUpdateRequire %>" data-value="<%= val.value %>" data-bs-placement="top" data-row="<%= JSON.stringify(val) %>" title="Configure">
                                                                <a href="#showModal" data-bs-toggle="modal" id="edit-btn" class="text-primary d-inline-block edit-item-btn">
                                                                    <i class="ri-settings-5-fill fs-16 edit-icon"></i>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            <% i++; }) %>
                                        </tbody>
                                    </table>
                                    <% if(versionList.length <= 0){%>
                                        <div class="noresult">
                                            <div class="text-center">
                                                <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px"></lord-icon>
                                                <h5 class="mt-2">Sorry! No Result Found</h5>
                                            </div>
                                        </div>
                                    <% } %> 
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--end col-->
            </div>
        </div>
        <!-- container-fluid -->
        <div class="modal fade" id="showModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-light p-3">
                        <h5 class="modal-title" id="exampleModalLabel">Manage Version</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                    </div>
                    <form id="form_rule" class="needs-validation" method="post" enctype="multipart/form-data" action="/version/updateDetails" novalidate>
                        <div class="modal-body">
                            <input type="hidden" id="updateId" name="updateId" />

                            <div class="mb-3">
                                <label for="versionName" class="form-label">Version Name <span class="requiredField">*</span></label>
                                <input type="text" id="versionName" class="form-control" name="versionName" placeholder="Enter version name" readonly required />
                                <div class="invalid-feedback">This field is required!</div>
                            </div>

                            <div class="mb-3">
                                <label for="value" class="form-label">Value</label>
                                <input type="text" placeholder="Enter value" id="value" required name="value" class="form-control" />
                                <!-- <input type="numeric" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+" id="value" class="form-control" name="value" placeholder="Enter value" required /> -->
                            </div>

                            <div class="mb-3">
                                <label for="isUpdateRequire" class="form-label">Mandatory<span></span></label>
                                <select class="form-select mb-3" aria-label="Default select example"
                                    id="isUpdateRequire" name="isUpdateRequire">
                                    <option <% if(versionList.status=='Yes' ){ %>selected="selected"
                                    <% }%> value="Yes">Yes
                                </option>
                                <option <% if(versionList.status=='No' ){ %>selected="selected"
                                    <% }%> value="No">No
                                </option>
                                </select>
                            </div>                           

                            <div class="mb-3">
                                <label for="isCanUse" class="form-label">Is Can Use<span></span></label>
                                <select class="form-select mb-3" aria-label="Default select example"
                                    id="isCanUse" name="isCanUse">
                                    <option <% if(versionList.status=='Yes' ){ %>selected="selected"
                                    <% }%> value="Yes">Yes
                                </option>
                                <option <% if(versionList.status=='No' ){ %>selected="selected"
                                    <% }%> value="No">No
                                </option>
                                </select>
                            </div>   

                            <div class="mb-3">
                                <label for="message" class="form-label">Message</label>
                                <input type="text" id="message" class="form-control" name="message" placeholder="Enter message"  />
                                <div class="invalid-feedback">This field is required!</div>
                            </div>     
                            
                            <div class="mb-3">
                                <label for="versionUrl" class="form-label">Version URL <span class="requiredField">*</span></label>
                                <input type="text" id="versionUrl" class="form-control" name="versionUrl" placeholder="Enter url" required />
                                <div class="invalid-feedback">This field is required!</div>
                            </div>
                            
                            <div class="invalid-feedback">This field is required!</div>
                        </div>   
                        <div class="modal-footer">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-success" id="edit-btn">Submit</button>
                            </div>
                        </div>                    
                    </form>
                </div>
            </div>
        </div>
    </div>
  

<script type="text/javascript">
    $(document).ready(function() {
        $(".edit-icon").click(function (e) {
            e.preventDefault();
            const {id, title, value, isUpdateRequire, isCanUse, message,url} = JSON.parse($(this).closest('li').attr('data-row') || "{}");
            // console.log("$$$$$", title)
            // const id = $(this).closest('li').attr('id');
            // const title = $(this).closest('li').attr('data-title');
            // const value = $(this).closest('li').attr('data-value');
            // const isUpdateRequire = $(this).closest('li').attr('data-isUpdateRequire');
            
            $(".modal #updateId").val(id);
            $(".modal #versionName").val(title);
            $(".modal #value").val(value);
            $(".modal #isUpdateRequire").val(isUpdateRequire);
            $(".modal #isCanUse").val(isCanUse);
            $(".modal #message").val(message);
            $(".modal #versionUrl").val(url);
        });        
    });
</script>
<%- include("../partials/footerlinks") %>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/additional-methods.min.js"></script>

  