$title = 'SubAdmin'
  @include('admin.include.header')

      <!-- 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">
                     <div class="row">
                            <div class="col-12 col-md-6 col-lg-6">
                                <div class="card">
                                <div class="card-header">
                                    <h4>Manage Admin</h4>
                                </div>
                                <div class="card-body">
                                    <table class="table">
                                    <thead>
                                        <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Mobile</th>
                                        <th scope="col">Email</th>
                                        <th scope="col">Edit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($data as $admin)
                                    <tr>
                                        <th scope="row">{{$admin->id}}</th>
                                        <td>{{ $admin->name }}</td>
                                        <td>{{$admin->mobile}}</td>
                                        <td>{{$admin->email}}</td>
                                        <td><button name="edit" class="btn btn-primary editAdmin" value="edit" data-toggle="modal" data-data="{{$admin}}" data-target="#model">Edit</button></td>
                                        
                                    </tr>
                                        
                                    @endforeach
                                    </tbody>
                                    </table>
                                </div>
                                </div>
                            
                            </div>
                        </div>
                </div>
                
              </div>
              
            </div>
          </div>
        </section>
      </div>
     
    </div>
  </div>
  <div class="modal fade" tabindex="-1" role="dialog" id="model">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="manage-admin">
                        @csrf
                        <input type="hidden" id="id" name="id" class="form-control"  required="">
                        <div class="card-body">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" id="name" name="name" class="form-control" required="">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" id="email" name="email"  class="form-control" required="">
                        </div>
                        <div class="form-group">
                            <label>Mobile</label>
                            <input type="text" id="mobile" name="mobile"  class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Permission</label><Br>
                            <label>Write</label><Br>
                            @foreach (json_decode($pages->value)->page as $per)
                            <input type="checkbox" class="write_permission" data-title='{{$per}}'>{{$per}}
                            @endforeach
                            <br>
                            <label>Read</label><Br>
                            @foreach (json_decode($pages->value)->page as $per)
                            <input type="checkbox" class="read_permission" data-title='{{$per}}'>{{$per}}
                            @endforeach
                        </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
            </div>
        </div>
    </div>
  
  @include('admin.include.footer')
  <script>
    $(document).ready(function() {
      $('#manage-admin').on('submit', function(e) {
        e.preventDefault();

        let write = [];
        $('.write_permission').each(function(index, value) {
          if ($(this).prop('checked')==true){ 
            write.push($(value).attr('data-title'));
          }
        });

        let read = [];
        $('.read_permission').each(function(index, value) {
          if ($(this).prop('checked')==true){ 
            read.push($(value).attr('data-title'));
          }
        });

        let data = {
          'id':$('#id').val(),
          'name':$('#name').val(),
          'mobile':$('#mobile').val(),
          'email':$('#email').val(),
          'permission':JSON.stringify({write,read}),
        }
        axios.post('http://localhost/ecommerce/admin/EditAdmin', data)
          .then((res) => {  
            if (res.data){
              show_Toaster('SubAdmin Edited','success');
              setTimeout(() => {
                    window.location.href = `${url}/admin/list-admin`;
                }, 500);
            } 
            else {
                show_Toaster('Operation failed','fail');
            }
          });
      });
    });
  </script>
  <script src="{{ asset('assets/js/page/bootstrap-modal.js')}}"></script>
</body>

</html>