<!DOCTYPE html>
<html lang="en">
  
<head>
  <title><%= lang_data.City %></title>
    <%- include('./partials/meta'); -%>
  </head>
  <body>
    <%- include('./partials/header_sidebar'); -%> 

        <div class="page-body">
          <div class="container-fluid">
            <div class="page-title">
              <div class="row">
                <div class="col-sm-6">
                  <h3><%= lang_data.City %></h3>
                </div>
                <div class="col-sm-6">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/index"><i data-feather="home"></i></a></li>
                    <li class="breadcrumb-item"><a href="/settings/city"><%= lang_data.List_Of_City %></a></li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
          <!-- Container-fluid starts-->
          <div class="container-fluid">
            <div class="row">
             
              <!-- Scroll - vertical dynamic Starts-->
              <div class="col-sm-12">
                <div class="card">
                  <div class="card-header pb-0 d-flex justify-content-between">
                    <h4><%= lang_data.List_Of_City %></h4>
                    <button class="btn btn-primary" type="button" data-bs-toggle="modal" id="add_city_modal" data-bs-target="#city_toggle"><%= lang_data.Add_New_City %></button>
                  </div>
                  <div class="card-body">
                    <div class="table-responsive theme-scrollbar">
                      <table class="display" id="basic-12" aria-label="table">
                        <thead>
                          <tr>
                            <th id="abc" class="d-none"></th>
                            <th id="abc"><%= lang_data.State_Name %></th>
                            <th id="abc"><%= lang_data.City_Name %></th>
                            <th id="abc"><%= lang_data.Action %></th>
                          </tr>
                        </thead>
                        <tbody>
                          <% city_data.forEach((data) => { %>

                            <tr>
                              <td class="d-none"></td>
                              <td><%= data.state_name %></td>
                              <td><%= data.city_name %></td>
                              <td> 
                                <ul class="action"> 
                                  <li class="edit"> <a data-bs-toggle="modal" data-bs-target="#edit_city_toggle" id="edit_city_modal" data-id="<%= data.id %>" data-state="<%= data.state_id %>" data-countries="<%= data.countries_id %>" data-city="<%= data.city_name %>"><i class="icon-pencil-alt"></i></a></li>
                                  <li class="delete"><a href="/settings/city/delete/<%= data.id %>"><i class="icon-trash"></i></a></li>
                                </ul>
                              </td>
                            </tr>
                          
                          <% }) %>
                        </tbody>
                        <tfoot>
                          <tr>
                            <th id="abc" class="d-none"></th>
                            <th id="abc"><%= lang_data.State_Name %></th>
                            <th id="abc"><%= lang_data.City_Name %></th>
                            <th id="abc"><%= lang_data.Action %></th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Scroll - vertical dynamic Ends-->
            </div>
          </div>
          <!-- Container-fluid Ends-->
        </div>


        <!-- add city modal-->
        
        <div class="modal fade" id="city_toggle" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title"><%= lang_data.Add_New_City %></h5>
                  <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="/settings/city" method="post">
                  <div class="modal-body">
                    <div class="row g-3">
                      
                      <div class="col-12">
                        <div class="col-form-label"><%= lang_data.Country_Name %></div>
                          <select class="js-example-basic-single" name="countries_id" id="countries_id" required>
                              <option value selected disabled>Select Country</option>
                              <% countries_data.forEach((data) => { %>
                              <option value="<%= data.id %>"><%= data.countries_name %></option>
                              <% }) %>
                          </select>
                      </div>

                      <div class="col-12">
                        <div class="col-form-label"><%= lang_data.State_Name %></div>
                          <select class="js-example-basic-single" name="state_id" id="state_id" required>
                              <option value selected disabled>Select State</option>
                              <!-- ajax -->
                          </select>
                      </div>
                      
                      <div class="col-12">
                        <label class="form-label"><%= lang_data.City_Name %></label>
                        <input class="form-control" type="text" name="city_name" placeholder="Enter City Name">
                      </div>
                      
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-bs-dismiss="modal"><%= lang_data.Close %></button>
                    <button class="btn btn-primary" type="submit"><%= lang_data.Save %> Save</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
  
          <!-- edit city modal-->
  
          <div class="modal fade" id="edit_city_toggle" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title"><%= lang_data.Edit_City %></h5>
                  <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="city_id" method="post">
                  <div class="modal-body">
                    <div class="row g-3">
                      
                      <div class="col-12">
                        <div class="col-form-label"><%= lang_data.Country_Name %></div>
                          <select class="js-example-basic-single city_countryname" name="countries_id" required>
                              <option value selected disabled>Select Country</option>
                              <% countries_data.forEach((data) => { %>
                              <option value="<%= data.id %>"><%= data.countries_name %></option>
                              <% }) %>
                          </select>
                      </div>
                      
                      <div class="col-12">
                        <div class="col-form-label"><%= lang_data.State_Name %></div>
                          <select class="js-example-basic-single city_statename" name="state_id" required>
                              <option value selected disabled>Select State</option>
                              <!-- ajax -->
                          </select>
                      </div>

                      <div class="col-12">
                        <label class="form-label"><%= lang_data.City_Name %></label>
                        <input class="form-control" type="text" name="city_name" id="city_name" placeholder="Enter City Name">
                      </div>
    
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-bs-dismiss="modal"><%= lang_data.Close %></button>
                    <button class="btn btn-primary" type="submit"><%= lang_data.Save_changes %></button>
                  </div>
                </form>
              </div>
            </div>
          </div>

        
        <%- include('./partials/footer'); -%>
        
    <%- include('./partials/script'); -%>

  </body>

</html>