<div class="row">
	<div class="container">

    <h3>مكونات الصفحة</h3>
    <hr/>
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="inputEmail1" class="col-lg-2 control-label">البريد الاكترونى</label>
            <div class="col-lg-4">
              <input type="email" class="form-control" id="inputEmail1" placeholder="البريد الاكترونى">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword1" class="col-lg-2 control-label">كلمة المرور</label>
            <div class="col-lg-4">
              <input type="password" class="form-control" id="inputPassword1" placeholder="كلمة المرور">
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-offset-2 col-lg-4">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> تذكرنى
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-offset-2 col-lg-4">
              <div class="checkbox">
                  <label>
                    <input type="checkbox" value="">
                    اختار
                  </label>
              </div>

                <div class="radio-inline">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    نعم
                  </label>
                </div>
                <div class="radio-inline">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    لا
                  </label>
                </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-2 control-label">محتوى</label>
            <div class="col-lg-4">
             <textarea class="form-control" rows="3"></textarea>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-2 control-label">اختار الافضل</label>
            <div class="col-lg-4">
             <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-2 control-label">اختار اكثر من اختيار</label>
            <div class="col-lg-4">
             <select multiple class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-2 control-label">كلام ثابت</label>
            <div class="col-lg-4">
              <p class="form-control-static">تظهر القيمة الثابت هنا</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-2 control-label">علامة الاغلاق</label>
            <div class="col-lg-4">
              <p class="form-control-static"><button type="button" class="close" aria-hidden="true">&times;</button></p>
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-offset-2 col-lg-4">
              <button type="submit" class="btn btn-primary pull-left">حفظ الامر</button>
            </div>
          </div>
        </form>



        <hr/>
        <h3>الجداول</h3>
        <hr/>
        <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>الاسم</th>
              <th>الايميل</th>
              <th>التاريخ</th>
              <th>الحذف</th>
              <th>التعديل</th>
              <th>الخذف النهائى</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>احمد حمدى</td>
              <td>Table cell</td>
              <td>25-1-2013</td>
              <td><a href="#" type="button" class="btn btn-default btn-lg removeicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg editicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg deleteicon conformdel" data-position="productsettingController.php" data-id="15"></a></td>
            </tr>
            <tr>
              <td>1</td>
              <td>احمد حمدى</td>
              <td>Table cell</td>
              <td>25-1-2013</td>
              <td><a href="#" type="button" class="btn btn-default btn-lg removeicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg editicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg deleteicon conformdel" data-position="productsettingController.php"  data-id="20"></a></td>
            </tr>
          </tbody>
        </table>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close pull-left" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">عنوان الرسالة</h4>
            </div>
            <div class="modal-body">
             اى كلام فى الرسالة مهما كان
            <div class="input-group">
                <input type="text" class="form-control" placeholder="القيمة بال{$currency}">
                <span class="input-group-addon">ج</span>
            </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">اغلاق</button>
              <button type="button" class="btn btn-primary savemodel">حفظ</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


      </div>

      <hr/>
      <h3>جدول بخيارات بحث</h3>
      <hr/>
      <div class="panel panel-default">
          <!-- Default panel contents -->
          <div class="panel-heading">اسم التقرير</div>
          <div class="panel-body">
            <form class="form-inline">
              <div class="form-group">
                <label class="sr-only">اسم المنتج</label>
                <input type="text" class="form-control" placeholder="اسم المنتج">
              </div>
              <div class="form-group">
                <label class="sr-only">اختار الافضل</label>
                 <select class="form-control">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>

              <button type="submit" class="btn btn-primary">بحث</button>
            </form>
          </div>
        <hr/>
        <!-- Table -->
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>الاسم</th>
              <th>الايميل</th>
              <th>التاريخ</th>
              <th>الحذف</th>
              <th>التعديل</th>
              <th>الخذف النهائى</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>احمد حمدى</td>
              <td>Table cell</td>
              <td>25-1-2013</td>
              <td><a href="#" type="button" class="btn btn-default btn-lg removeicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg editicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg deleteicon"></a></td>
            </tr>
            <tr>
              <td>1</td>
              <td>احمد حمدى</td>
              <td>Table cell</td>
              <td>25-1-2013</td>
              <td><a href="#" type="button" class="btn btn-default btn-lg removeicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg editicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg deleteicon"></a></td>
            </tr>
            <tr class="danger">
              <td>1</td>
              <td>احمد حمدى</td>
              <td>Table cell</td>
              <td>25-1-2013</td>
              <td><a href="#" type="button" class="btn btn-default btn-lg removeicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg editicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg deleteicon"></a></td>
            </tr>
            <tr class="active">
              <td>1</td>
              <td>احمد حمدى</td>
              <td>Table cell</td>
              <td>25-1-2013</td>
              <td><a href="#" type="button" class="btn btn-default btn-lg removeicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg editicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg deleteicon"></a></td>
            </tr>
            <tr class="success">
              <td>1</td>
              <td>احمد حمدى</td>
              <td>Table cell</td>
              <td>25-1-2013</td>
              <td><a href="#" type="button" class="btn btn-default btn-lg removeicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg editicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg deleteicon"></a></td>
            </tr>
            <tr class="warning">
              <td>1</td>
              <td>احمد حمدى</td>
              <td>Table cell</td>
              <td>25-1-2013</td>
              <td><a href="#" type="button" class="btn btn-default btn-lg removeicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg editicon"></a></td>
              <td><a href="#" type="button" class="btn btn-default btn-lg deleteicon"></a></td>
            </tr>
          </tbody>
        </table>
        <div class="col-lg-offset-8 col-lg-4">
            <div class="well well-sm"><h4 class="text-center">الاجمالى 1000 {$currency}</h4></div>
        </div>
        <div class="clearfix"></div>
      </div>


       <hr/>
       <h3>مكونات صفحة</h3>
       <hr/>
       <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">عنوان تقرير او عنوان صفحة</h3>
          </div>
          <div class="panel-body">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="inputEmail1" class="col-lg-2 control-label">البريد الاكترونى</label>
                <div class="col-lg-4">
                  <input type="email" class="form-control" id="inputEmail1" placeholder="البريد الاكترونى">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword1" class="col-lg-2 control-label">كلمة المرور</label>
                <div class="col-lg-4">
                  <input type="password" class="form-control" id="inputPassword1" placeholder="كلمة المرور">
                </div>
              </div>
              <div class="form-group">
                <div class="col-lg-offset-2 col-lg-4">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> تذكرنى
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-lg-offset-2 col-lg-4">
                  <div class="checkbox">
                      <label>
                        <input type="checkbox" value="">
                        اختار
                      </label>
                  </div>

                    <div class="radio-inline">
                      <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                        نعم
                      </label>
                    </div>
                    <div class="radio-inline">
                      <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                        لا
                      </label>
                    </div>
                </div>
              </div>
            </form>
          </div>
       </div>


       <hr/>
       <h3>مكونات اساسية للفورم</h3>
       <hr/>

       	<ol class="breadcrumb">
          <li><a href="#">الرئيسية</a></li>
          <li><a href="#">المصروفات</a></li>
          <li class="active">اضافة مصروف</li>
        </ol>


        <div class="col-lg-4">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="القيمة بال{$currency}">
            <span class="input-group-addon">{$currency}</span>
        </div>
        </div>



       	<div class="clearfix"></div>
        <br/>

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">لتشغيل رسالة </h3>
          </div>
       	<!-- Button trigger modal -->
        <a data-toggle="modal" href="#myModal2" class="btn btn-primary btn-lg">اضغط هنا</a>

        <!-- Modal -->
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close pull-left" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">عنوان الرسالة</h4>
            </div>
            <div class="modal-body">
             اى كلام فى الرسالة مهما كان
            <div class="input-group">
                <input type="text" class="form-control" placeholder="القيمة بال{$currency}">
                <span class="input-group-addon">ج</span>
            </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">اغلاق</button>
              <button type="button" class="btn btn-primary savemodel" data-position="productsettingController.php" data-id="15">حفظ البيانات</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
       	</div>


        <div class="alert alert-block alert-danger fade in">
        <button type="button" class="close pull-left" data-dismiss="alert" aria-hidden="true">&times;</button>
        <h4>رسالة خطا</h4>
        <p>اى كلام فى الرسالة</p>
        <p>
          <a class="btn btn-danger pull-left" href="#">تنفيذ الامر</a>
        </p>
        <div class="clearfix"></div>
      	</div>

        <form class="form-horizontal" role="form">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">الوقت والتاريخ </h3>
          </div>

        <div class="form-group">
            <label class="col-lg-2 control-label">اختار الوقت</label>
            <div class="col-lg-4">
              <input type="text" id="t1" value="2:30 PM" data-format="hh:mm A" class="form-control clockface-open">
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-2 control-label">اختار الوقت</label>
            <div class="col-lg-4">
              	<div class="input-group">
                  <input type="text" id="t2" value="14:30" class="form-control" readonly="">
                  <span class="input-group-addon clockicon" type="button" id="toggle-btn"></span>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-2 control-label">اختار التاريخ</label>
            <div class="col-lg-4">
             <input type="text" class="form-control awdatepicker" value="02-16-2012" data-date-format="dd-mm-yyyy" >
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-2 control-label">اختار التاريخ</label>
            <div class="col-lg-4">
                <div class="input-group date" id="dp3" data-date-format="dd-mm-yyyy">
                    <input class="span2  form-control" type="text" readonly>
                    <span class="add-on input-group-addon"><i class="icon-th clandicon"></i></span>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
       	</div>
        </form>



        <hr/>
        <h3>شجرة المصنفات</h3>
        <hr/>




        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="caption"><i class="icon-comments"></i>شجرة البيانات</div>
                <div class="actions">
                    <a href="javascript:;" id="tree_1_collapse" class="btn green"> اغلاق الجميع</a>
                    <a href="javascript:;" id="tree_1_expand" class="btn yellow"> فتح الجميع</a>
                </div>
            </div>
            <div class="portlet-body fuelux">
                <ul class="tree" id="tree_1">
                    <li>
                        <a href="#" data-role="branch" class="tree-toggle" data-toggle="branch" data-value=" عنوان التصنيف الرئيسى">
                        عنوان التصنيف الرئيسى
                        </a>
                        <ul class="branch in">
                            <li>
                                <a href="#" class="tree-toggle" data-toggle="branch" data-value="الملفات" id="nut1">
                                الملفات
                                </a>
                                <ul class="branch in">
                                    <li>
                                        <a href="#" class="tree-toggle" data-toggle="branch" data-value="المالية" id="nut2">
                                        المالية
                                        </a>
                                        <ul class="branch in">
                                            <li><a href="#" data-role="leaf"> الايرادات</a></li>
                                            <li><a href="#" data-role="leaf"> مكفائات</a></li>
                                            <li><a href="#" data-role="leaf"> خصومات</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#" data-role="leaf"> منح</a></li>
                                    <li><a href="#" data-role="leaf"> موارد بشرية</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" class="tree-toggle closed" data-toggle="branch" data-value="مشاريع" id="nut3">
                                مشاريع
                                </a>
                                <ul class="branch">
                                    <li><a href="#" data-role="leaf"> داخلى</a></li>
                                    <li><a href="#" data-role="leaf"> قواعد الموظف</a></li>
                                    <li><a href="#" data-role="leaf"> اسس المنتجات</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" class="tree-toggle" data-toggle="branch" data-value="مهمات" id="nut4">
                                مهمات
                                </a>
                                <ul class="branch in">
                                    <li><a href="#" data-role="leaf"> مشاريع داخلية</a></li>
                                    <li><a href="#" data-role="leaf"> مصادر خارجية</a></li>
                                    <li><a href="#" data-role="leaf"> تتبع المشكلة</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" class="tree-toggle closed" data-toggle="branch" data-value="عملاء" id="nut6">
                                عملاء
                                </a>
                                <ul class="branch">
                                    <li><a href="#" data-role="leaf"> مالية</a></li>
                                    <li><a href="#" data-role="leaf">منح</a></li>
                                    <li><a href="#" data-role="leaf"> موارد بشرية</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" class="tree-toggle closed" data-toggle="branch" data-value="تقارير" id="nut8">
                                تقارير
                                </a>
                                <ul class="branch">
                                    <li><a href="#" data-role="leaf"> مالية</a></li>
                                    <li><a href="#" data-role="leaf"> منح</a></li>
                                    <li><a href="#" data-role="leaf"> موارد بشرية</a></li>
                                    <li>
                                        <a href="#" class="tree-toggle closed" data-toggle="branch" data-value="تقارير" id="nut8">
                                        تقارير
                                        </a>
                                        <ul class="branch">
                                            <li><a href="#" data-role="leaf"> مالية</a></li>
                                            <li><a href="#" data-role="leaf">منح</a></li>
                                            <li><a href="#" data-role="leaf"> موارد بشرية</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="http://gt4host.com" target="_blank" data-role="leaf">
                                <i class="icon-share"></i> رابط خارجى
                                </a>
                            </li>
                            <li>
                                <a href="http://gt4host.com" target="_blank" data-role="leaf">
                                <i class="icon-share"></i> رابط خارجى اخر
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>




        <hr/>
        <h3>بحث فى Select</h3>
        <hr/>

        <div class="panel panel-default">
          <!-- Default panel contents -->
          <div class="panel-heading">بعض العناصر وخصائصها</div>
          <div class="panel-body">
            <form class="form-horizontal">

              <div class="form-group">
                <label class="col-lg-2 control-label">اختار الافضل</label>
                <div class="col-lg-4">
                 <select class="select2 wdt100">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                </div>
              </div>


              <div class="form-group">
                <label class="col-lg-2 control-label">اختار الافضل</label>
                <div class="col-lg-4">
                 <select multiple class="select2 wdt100">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                </div>
              </div>

              <div class="form-group">
                <label class="col-lg-2 control-label">اختار الافضل</label>
                <div class="col-lg-4">
                 <select class="select2min2 wdt100">
                 <option>اختار </option>
                  <option>على كمال رزق</option>
                  <option>محمد حسين</option>
                  <option>احمد حمدى</option>
                  <option>مصطفى البكرى</option>
                  <option>حازم حمدى</option>
                </select>
                </div>
              </div>


              <div class="form-group">
                <label class="col-lg-2 control-label">اختار الافضل</label>
                <div class="col-lg-4">
                <input type="hidden" class="select2ajax wdt100" />
                </div>
              </div>

            </form>
          </div>
      </div>







	</div>
</div>