@extends('layouts.admin')
<link rel="stylesheet" type="text/css" href="/ext/classic/theme-triton/resources/theme-triton-all_1.css" />
<link rel="stylesheet" type="text/css" href="/ext/classic/theme-triton/resources/theme-triton-all_2.css" />
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script type="text/javascript" src="/ext/packages/ux/classic/ux.js"></script>
<link rel="stylesheet" type="text/css" href="/ext/packages/ux/classic/classic/resources/ux-all-debug.css" />


        <style type="text/css">
            .task {
                background-image: url(ext/resources/icons/fam/cog.gif) !important;
            }
            .task-folder {
                background-image: url(ext/resources/icons/fam/folder_go.gif) !important;
            }
        </style>
@section('content')
@if(session()->has('message'))
<div class="alert alert-success">
    {{ session()->get('message') }}
</div>
@endif



<div class="col-12" id="extcontrol" style="height:500px">

 
</div>

<script type = "text/javascript">
         Ext.onReady(function () {
            var childPanel1 = Ext.create('Ext.panel.Panel', {
               title: 'Child Panel 1',
               html: 'A Panel'
            });
            var childPanel2 = Ext.create('Ext.tab.Panel', {
               title: 'Child Panel 2',
               html: 'Another Panel'
            });
            Ext.create('Ext.tab.Panel', {
               renderTo: 'extcontrol',
			  
               items: [{
                  xtype: 'panel',
                  title: 'Users',
                  html: 'The first tab',
                  listeners: {
                     render: function() {
                        Ext.MessageBox.alert('Tab one', 'Tab One was clicked.');
                     }
                  }
               },{
                  // xtype for all Component configurations in a Container
                  title: 'Roles',
                  html: 'The second tab',
                  listeners: {
                     render: function() {
                        Ext.MessageBox.alert('Tab two', 'Tab Two was clicked.');
                     }
                  }
               }
			   ,{
                  // xtype for all Component configurations in a Container
                  title: 'Administrative Units',
                  html: 'The second tab',
                  listeners: {
                     render: function() {
                        Ext.MessageBox.alert('Tab two', 'Tab Two was clicked.');
                     }
                  }
               }]
            });
         });
      </script>

@endsection