<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 table-black">
                <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 panel-m">
            <!-- 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 table-black">
                <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 panel-m">
            <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" autocomplete="off"  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 panel-m">
            <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 panel-m">
            <!-- 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>