@include('admin.include.header')
  <script>   
    function target(page){
      axios.post('http://localhost/ecommerce/admin/delete_page',{'name':page})
          .then((res) => { 
              if (res.data){
                show_Toaster('Page Deleted Successfully','success');
                setTimeout(() => {
                    window.location.href = `${url}/admin/permission`;
                }, 500);
              }
              else {
                show_Toaster('Operation failed','fail');
              }
          });
    }
  </script>
      <!-- Main Content -->
      <div class="main-content">
        <section class="section">
          <div class="section-body">
            <div class="row">
              <div class="col-12 col-md-6 col-lg-6">
                <div class="card">
                  <form id="addpage">
                    @csrf
                    <div class="card-header">
                      <h4>Manage pages</h4>
                    </div>
                    <div class="card-body">
                      <div class="form-group">
                        <label>Pages</label>
                        <input type="text" id="name" name="name" class="form-control" required="">
                      </div>
                    </div>
                    <div class="card-footer text-right">
                      <button type="submit" class="btn btn-primary">Add</button>
                    </div>
                  </form>
                </div>
                
              </div>
              
            </div>
            <div class="row">
                  <div class="col-12 col-md-6 col-lg-6">
                        <div class="card">
                        <div class="card-body">
                            <table class="table">
                            <thead>
                                <tr>
                                <th scope="col">Sr</th>
                                <th scope="col">Page Name</th>
                                <th scope="col">Delete</th>
                                </tr>
                            </thead>
                            
                            <tbody>
                            @foreach($pages as $key=>$page)
                              <tr>
                                <th scope="row">{{$key+1}}</th>
                                <th scope="row">{{$page}}</th>
                                <td><button type="button" name="delete" class="editAdmin" id="target" onclick="target(`{{$page}}`)" value={{$page}}>Delete</button></td>
                              </tr>
                            @endforeach
                            </tbody>
                            </table>
                        </div>
                        </div>
                    </div>              
            </div>
          </div>
        </section>
      </div>
      
    </div>
  </div>

  @include('admin.include.footer')
  <script>
    $(document).ready(function() {
      $('#addpage').on('submit', function(e) {
        e.preventDefault();
        axios.post('http://localhost/ecommerce/admin/create_page', new FormData(this))
          .then((res) => { 
              if (res.data){
                document.getElementById("addpage").reset();
                show_Toaster('Page Created Successfully','success');
                setTimeout(() => {
                    window.location.href = `${url}/admin/permission`;
                }, 500);
              }
              else {
                show_Toaster('Operation failed','fail');
              }
          });
      });
      
    });
  </script>