<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Maktabti| Category</title>

    <link href="{{ asset ('css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset ('font-awesome/css/font-awesome.css') }}" rel="stylesheet">

    <!-- FooTable -->
    <link href="{{ asset ('css/plugins/footable/footable.core.css') }}" rel="stylesheet">

    <!-- Sweet Alert -->
    <link href="{{ asset ('css/sweetalert.css') }}" rel="stylesheet">

    <!-- Ladda style -->
    <link href="{{ asset ('css/ladda-themeless.min.css')}}" rel="stylesheet">

    <link href="{{ asset ('css/animate.css') }}" rel="stylesheet">
    <link href="{{ asset ('css/style.css') }}" rel="stylesheet">
    
    <style type="text/css">
        .activeSM
        {
            background-color: white !important; /* #38283c !important;*/
        }
        .container 
        {
          margin-top: 15px;
        }
        .tab-group
        {
           position: relative;
           vertical-align: middle;
           zoom: 1; /* Fix for IE7 */
           *display: inline; /* Fix for IE7 */
        }
        
        .tab-group > li
        {
            background-color: #eeeeee;
            border-radius: 4px;
            position: relative;
            float: left;
        }
        .nav > li.active 
        {
            border-left: 4px solid #566b8a;
            background: #566b8a;
        }
        .tab-group > li.active > a, 
        .tab-group > li.active > a:hover, 
        .tab-group > li.active > a:focus
        {
            background-color: #566b8a;
            color: #fff;
        }
        .tab-group > li > a 
        {
            color: #333;
            border-radius: 0;
            text-align: center;
        }
        .tab-group > li > a:hover 
        {
            border-radius: 4px;
        }
        
        .tab-group li + li 
        {
            margin-left: -1px;
        }
        
        .tab-group > li:not(:first-child):not(:last-child),
        .tab-group > li:not(:first-child):not(:last-child) > a:hover 
        {
          border-radius: 0;
        }
        .tab-group > li:first-child,
        .tab-group > li:first-child > a:hover 
        {
            margin-left: 0;
        }
        .tab-group > li:first-child:not(:last-child),
        .tab-group > li:first-child:not(:last-child) > a:hover 
        {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        .tab-group > li:last-child:not(:first-child),
        .tab-group > li:last-child:not(:first-child) > a:hover 
        {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
    </style>


<script>
    if (!localStorage.Session)
    {
        window.stop();
        window.location.replace("login");
    }
    </script>

</head>
<body>
    <div id="wrapper">
<div id="wrapper">
	<!-- Side Navbar -->
	@include('navbar_static_side') 

        <div id="page-wrapper" class="gray-bg">
          <div class="row border-bottom">
	        <!-- Top Navbar -->
                @include('navbar_static_top')               
          </div>
          <div class="row wrapper border-bottom white-bg page-heading">
              <!-- English Div -->
              <div id="view_category_header_english" class="col-lg-10" style="display:none">
                  <h2><strong>Categories</strong></h2>
                  <a href="#AddCatModal">
                      <button  data-toggle="modal" data-target="#AddCatModal" type="button" class="btn btn-default btn-sm">
                          <span class="glyphicon glyphicon-plus"></span> Add a Category
                      </button>
                  </a>
              </div>
              
              <!-- Arabic Div -->
              <div id="view_category_header_arabic" class="col-lg-10" style="display:none">
                  <h2><strong>الاقسام</strong></h2>
                  <a href="#AddCatModal">
                      <button  data-toggle="modal" data-target="#AddCatModal" type="button" class="btn btn-default btn-sm">
                          <span class="glyphicon glyphicon-plus"></span> أضف فئة
                      </button>
                  </a>
              </div>
              
              <div class="col-lg-2">

              </div>
          </div>

        <div class="wrapper wrapper-content animated fadeInRight ecommerce">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox">
                            <div class="ibox-content table-responsive">
                            	<!-- English Table -->
                                <table id="view_category_table_english" style="display:none" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Category Name (English)</th>
                                            <th>Category Name (Arabic)</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="styles_list">
                                       <!-- Dynamically appending Employees List -->                                     
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="6">
                                                <ul class="pagination pull-right"></ul>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                                <!-- End English Table -->
                                
                                <!-- Arabic Table -->                                
                                <table id="view_category_table_arabic" style="display:none" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>(اسم التصنيف (الإنجليزية</th>
                                            <th>(اسم التصنيف (عربي</th>
                                            <th>عمل</th>
                                        </tr>
                                    </thead>
                                    <tbody class="styles_list">
                                       <!-- Dynamically appending Employees List -->                                     
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="6">
                                                <ul class="pagination pull-right"></ul>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                                <!-- Arabic Table --> 
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Empty List -->
            <button id="swal_btn" type="button" style="display:none"></button>
            <!-- Delete Row -->
            <button id="swal_btn2" type="button" style="display:none"></button>
             <!-- Assign -->
            <button id="swal_btn3" type="button" style="display:none"></button>

            <!-- Footer -->
            @include('footer')

        </div>
    </div>

    <!-- Modal View Palette Details -->
    <div class="modal fade" id="palettePicDetailsModal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Palette Details</h4>
                </div>
                <div class="modal-body">  
                  <div class="form-group">
                       <img id="palette_image_detail" src="" width="50">
                    </div>              
          <div class="form-group">
                      <label>Category</label>                 
            <p id="category_name_detail"></p>
                    </div>
                   
                    <div class="form-group">
                        <label>Description</label>
                        <p id="description_detail"></p>
                    </div>                           
                    <div>
                        <button style="background-color: #566b8a;color: white;" onclick="showAssign()" class="ladda-button ladda-button-demo btn btn-sm btn-primary m-t-n-xs" type="submit" data-style="zoom-in">
                             <span class="ladda-label">Assign to a Customer</span><span class="ladda-spinner"></span>
                        </button>
                    </div>

                    <div id="assignToCustomer" style="display: none">
                      <div class="form-group">
                        <label>Customer List</label>                  
              <select class="form-control" id="customer_name" name="customer_name" required="">
                <!-- Appending all customers Dynamically -->
              </select>
                      </div>
                      <button type="button" class="btn btn-default" onclick="assigning()" style="background-color: green; color: white" >Assign</button>
                      <button type="button" class="btn btn-default" onclick="hideAssign()" style="background-color: darkorange; color: white">Hide</button>
                  </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" style="background-color: #ed5565; color: white" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Close -->

    <!-- Modal Delete Palette -->
    <div class="modal fade" id="categorydeletemodal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                    	<font id="view_cat_del_modal_eng_title" style="display:none">Delete Category</font>
                    	<font id="view_cat_del_modal_arb_title" style="display:none">حذف لوحة</font>
                    </h4>
                </div>
                <div class="modal-body">
                    <p id="view_cat_del_modal_eng" style="display:none">Are you sure you want to delete this Category?</p>
                    <p id="view_cat_del_modal_arb" style="display:none">هل أنت متأكد من أنك تريد حذف هذه الفئة؟</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default" style="background-color: #1ab394; color: white" onclick="deleteCategory()">
                     	<font id="view_cat_del_modal_eng_yes" style="display:none">Yes</font>
                     	<font id="view_cat_del_modal_arb_yes" style="display:none">نعم فعلا</font>
                     </button>
                    <button type="button" class="btn btn-default" style="background-color: #ed5565; color: white" data-dismiss="modal">
                    	<font id="view_cat_del_modal_eng_no" style="display:none">NO</font>
                     	<font id="view_cat_del_modal_arb_no" style="display:none">لا</font>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Close -->

    <!-- Modal Add Palette -->
    <div class="modal fade" id="AddCatModal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                    	<font id="view_cat_add_modal_eng_title" style="display:none">Add Category</font>
                    	<font id="view_cat_add_modal_arb_title" style="display:none">إضافة فئة</font>                    
                    </h4>
                </div>
                <div class="modal-body">  
                             
                    <form id="add_cat">          
                        <div class="form-group">
                            <label>
                            	<font id="view_cat_add_modal_eng_label_eng" style="display:none">Category Name (English)</font>
                    		<font id="view_cat_add_modal_arb_label_eng" style="display:none">(اسم التصنيف (الإنجليزية</font>  
                            </label>
                           <input type="text" id="category_name" name="category_name" placeholder="" class="form-control" required>
                        </div> 
                        <div class="form-group">
                            <label>
                            	<font id="view_cat_add_modal_eng_label_arb" style="display:none">Category Name (Arabic)</font>
                    		<font id="view_cat_add_modal_arb_label_arb" style="display:none">(اسم التصنيف (عربي</font>  
                            </label>
                           <input type="text" id="Name_Ar" name="Name_Ar" placeholder="" class="form-control" required>
                        </div>                           
                        <div>
                            <button style="background-color: #566b8a;color: white;" class="ladda-button ladda-button-demo btn btn-sm btn-primary m-t-n-xs" type="submit" data-style="zoom-in">
                                 <span class="ladda-label">
                                 	<font id="view_cat_add_modal_eng_submit" style="display:none">Submit</font>
                     			<font id="view_cat_add_modal_arb_submit" style="display:none">خضع</font>                                 	
                                 </span><span class="ladda-spinner"></span>
                            </button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" style="background-color: #ed5565; color: white" data-dismiss="modal">
                    	<font id="view_cat_add_modal_eng_cancel" style="display:none">Cancel</font>
                     	<font id="view_cat_add_modal_arb_cancel" style="display:none">إلغاء</font> 
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Close -->



    <!-- Mainly scripts -->
    <script src="{{ asset ('js/jquery-3.1.1.min.js') }}"></script>
    <script src="{{ asset ('js/bootstrap.min.js') }}"></script>
    <script src="{{ asset ('js/plugins/metisMenu/jquery.metisMenu.js') }}"></script>
    <script src="{{ asset ('js/plugins/slimscroll/jquery.slimscroll.min.js') }}"></script>

    <!-- Custom and plugin javascript -->
    <script src="{{ asset ('js/inspinia.js') }}"></script>
    <script src="{{ asset ('js/plugins/pace/pace.min.js') }}"></script>

    <!-- Sweet alert -->
    <script src="{{ asset ('js/plugins/sweetalert/sweetalert.min.js') }}"></script>

    <!-- FooTable -->
    <script src="{{ asset ('js/plugins/footable/footable.all.min.js') }}"></script>

    <!-- Jquery Validate -->
    <script src="js/plugins/validate/jquery.validate.min.js"></script>

    <!-- Ladda -->
    <script src="js/plugins/ladda/spin.min.js"></script>
    <script src="js/plugins/ladda/ladda.min.js"></script>
    <script src="js/plugins/ladda/ladda.jquery.min.js"></script>

    <!-- Page-Level Scripts -->
    <script>   
        var palette_delete_id;
        var palette_edit_id;
        var palette_details_assign;

        $(document).ready(function() 
        {
            $("#side5").addClass("activeSM");
            $("#side5 a").css("color","#224ea6");

            viewStyles();

            $(".TAB").click(function()
            {
                var status = this.id;

                if( status == "All" )
                {
                  $('.show_all_tab').css("display","block");
                }
                else
                {
                  $('.show_all_tab').css("display","none");
                  $('.'+status).css("display","block");
                }
            });

            $("#add_cat").validate({
              rules: 
              {
                  category_name: {
                      required: true,
                  },
                  Name_Ar: {
                      required: true,
                  }
              },
              messages: 
              {
              },
              submitHandler: function(form) 
              {
                  var l = $( '.ladda-button-demo' ).ladda();
                  l.ladda( 'start' );
                 // var swal_btn = document.getElementById("swal_btn");
               //var photo= document.getElementById('photo').files[0];
                  var category_name = $('#category_name').val();
                  var Name_Ar = $('#Name_Ar').val();
         


                  var formData = new FormData();
                  formData.append("Name", category_name);
                  formData.append("Name_Ar", Name_Ar);
                  
                  
                      
                  $.ajax
                  ({
                      type:'POST',
                      url:"https://maktabty.org/Maktabti/api/AddCategory",
                      data: formData,
                      contentType: false,
                      cache: false,
                      processData:false,
                      success: function(data)
                      {
                          if( data.status == "success")
                          {
                            $('#AddCatModal').modal('hide');
                              l.ladda('stop');
                              $('#category_name').val('');
                              $('#Name_Ar').val('');
                              viewStyles();
                              swal_btn.click();
                          }
                          else if( data.status == "failed" )
                          {
                            l.ladda('stop');
                              alert("Something Went Wrong!");
                          }
                      },
                      error: function(data) 
                      {
                          alert("error");
                      }           

                  });                
                  return false; // extra insurance preventing the default form action
              }
          });



            //Empty List
            $('#swal_btn').click(function(){
                swal({
                    title: "Category Added",
                    text: "",
                    type: "success",
                    confirmButtonColor: "green",
                });
            });

            //Delete Row
            $('#swal_btn2').click(function(){
                swal({
                    title: "Category Deleted!",
                    text: "",
                    type: "warning",
                    confirmButtonColor: "#DD6B55",
                });
            });

            //Delete Row
            $('#swal_btn3').click(function(){
                swal({
                    title: "Palette Assigned to a Customer!",
                    text: "",
                    type: "success",
                    confirmButtonColor: "green",
                });
            });

        });

        function deleteCategoryModal(id)
        {
            $('#categorydeletemodal').modal('show');
            delete_category = id;
        }


        function deleteCategory()
        {
            $('#categorydeletemodal').modal('hide');

            var catid = delete_category;
            $.ajax({            
                url: "https://maktabty.org/Maktabti/api/CategoryDelete",
                type: "POST",
                data: {"category_id": catid},
                success: function(data)
                {
                   // var data = jQuery.parseJSON(result);
                    if(data.status == "success")
                    {
                        swal_btn2.click();
                        viewStyles();
                    }
                    else if (data.status == "failed")
                    {
                        alert("failed");
                    }
                },
                error: function(data) 
                {
                }           
            });
        }

        function viewStyles()
        {
            var $list = $(".styles_list");
            $list.empty();
            $.ajax({
                url: "https://maktabty.org/Maktabti/api/CategoryView",
                type: "POST",
               // data: { "category_name" : "All" },
                success: function(data)
                {   
                   var count = 1;
                    if ( data.status == "success")
                    {
                        $.each(data.data, function(index,obj) 
                        {    
                                    var aa= obj.category_name;   
                                  //  alert (aa);                        
                             $list.append('<tr>'+
                                                '<td><strong>'+count+'</strong></td>'+
                                                '<td>'+obj.category_name+'</td>'+
                                                '<td>'+obj.category_arabic+'</td>'+
                                                '<td>'+
                                                '<div class="btn-group">'+
                                                
                                                    '<button id="'+obj.category_id+'" onclick ="deleteCategoryModal(this.id);" class="btn-white btn btn-xs"><img alt="image" width="20" src="img/delete_icon.png" /></button>'+

          
                                                '</div>'+
                                            '</td>'+
                                            '</tr>');

                             count++;
                        });
                    }
                    else
                    {
                        swal_btn.click();
                    }
                },
                error: function(data)
                {
                }           
            });        
        }

        function PalettePicDetailsModal(id)
        {
            palette_details_assign = id.split('-');
            var palette_details_id  = palette_details_assign[0];
            $('#palette_image_detail').attr('src','/joon/public/'+palette_details_assign[1]);
            $('#category_name_detail').html(palette_details_assign[2]);
            $('#description_detail').html(palette_details_assign[3]); 


            var $list = $("#customer_name");
            $list.empty();
            //Calling Api to get list of all customers
            $.ajax({            
                url: "/joon/api/CustomerViewAll",
                type: "POST",
                success: function(data)
                {
                    if(data.status == "success")
                    {
                        $.each(data.data, function(index,obj) 
                        {                                            
                            $list.append('<option value="'+obj.email+'">'+obj.name+'</option>');
                        });
                    }
                    else if (data.status == "failed")
                    {
                        alert("failed");
                    }
                    $('#palettePicDetailsModal').modal('show');
                },
                error: function(data) 
                {
                }           
            });
        }

        function showAssign()
        {
          $('#assignToCustomer').css('display','block');
        }


        function hideAssign()
        {
          $('#assignToCustomer').css('display','none');
        }

        function assigning()
        {
          var email = $('#customer_name').val();
          //Calling Api to get list of all customers
            $.ajax({            
                url: "/joon/api/AddStyleCus",
                type: "POST",
                data: { "customer_email" : email ,  "style_id" : palette_details_assign[0] ,  "category_name" : palette_details_assign[2] },
                success: function(data)
                {
                    if(data.status == "success")
                    {
                      swal_btn3.click();
                      $('#palettePicDetailsModal').modal('hide');
                    }
                    else if (data.status == "failed")
                    {
                        alert("failed");
                    }
                },
                error: function(data) 
                {
                }           
            });
        }

        function PalettePicDeleteModal(id)
        {
            $('#palettePicDeleteModal').modal('show');
            palette_delete_id = id;
        }


        function deletePalette()
        {
            $('#palettePicDeleteModal').modal('hide');

            $.ajax({            
                url: "/joon/api/DelStyle",
                type: "POST",
                data: {"style_id": palette_delete_id},
                success: function(data)
                {
                    if(data.status == "success")
                    {
                        swal_btn2.click();
                        viewStyles();
                    }
                    else if (data.status == "failed")
                    {
                        alert("failed");
                    }
                },
                error: function(data) 
                {
                }           
            });
        }

        function PalettePicEditModal(id)
        {
            $('#palettePicEditModal').modal('show');
            var palette_details = id.split('-');
            palette_edit_id = palette_details[0];
            $('#palette_image').attr('src','/joon/public/'+palette_details[1]);
            $('#category_name').val(palette_details[2]);
            $('#description').val(palette_details[3]); 
        }

    </script>
</body>
</html>
