@extends('admin.layout.master')

@section('content-header')
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Manage Categories
        <small>All Categories</small>
      </h1>
     <!--  <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Tables</a></li>
        <li class="active">Data tables</li>
      </ol> -->
    </section>
@stop

@section('content')
<!-- Main content -->
    <div class="page-header clearfix">
        <!-- <div class="pull-right">
        <p>Domain List</p>
        </div> -->

        <div class="pull-left leftmargin15">
            <a href="#" class="btn btn-bg btn-primary" id="add_cat" title="New">
                <span><i class="fa fa-plus-circle fa-btn fa-primary"></i> {{ trans('table.new') }}</span></a>
            <a href="#" class="btn btn-bg btn-primary" id="add_subcat"  title="Room Defaults">
            <span><i class="fa fa-plus-circle fa-btn fa-primary"></i> {{ trans('table.room_defaults') }}</span></a>
            <a href="#" class="btn btn-bg btn-primary" id="add_subcat_room_finishes"  title="Room Finishes">
                <span><i class="fa fa-plus-circle fa-btn fa-primary"></i> Room Finishes</span></a>
        </div>
    </div>

    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          
          <!-- /.box -->

          <div class="box">
            <div class="box-header">
              <!-- <h3 class="box-title">Data Table With Full Features</h3> -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="listTable" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th class="text-left">Category</th>
                  <th class="text-center">Subcategory</th>
                  <th class="text-center" data-orderable="false">Actions</th>
                </tr>
                </thead>
                <tbody>


                @foreach($categories as $category)

                <tr>
                  <td class="text-left">{{$category->category_name}}</td>
                  
                   <td class="text-center">
                    <button type="button" class="btn btn-green subCategory"  title="Subcategory" data-id="{{$category->id}}"
                        @if(in_array($category->id,$childCategories)) disabled @endif
                    >
                        Sub-Categories
                    </button>
                  </td>

                  <td class="text-center">
                    <!-- <a class="btn  btn-warning"  href=""><span class="fa fa-edit"></span></a> -->
                    <!-- <a class="btn  btn-warning"  href=""><span class="fa fa-close"></span></a> -->
                    <!-- <a href= '' class="btn btn-primary" title="Show" >
                    <i class="fa fa-fw fa-eye"></i> </a> -->
                  
                    <!-- <a href= "" class="btn btn-warning"  title="Edit" data-target="" data-toggle="modal" id="modal-edit">
                    <i class="fa fa-fw fa-edit"></i> </a>  -->

                    <a href="{{ url('category-edit',$category->id )}}"  title="Edit">
                      <button type="button" class="btn btn-warning">
                          <i class="fa fa-fw fa-edit"></i> 
                      </button>
                    </a>
    
               <!--      <a href= "" class="btn btn-danger"title="Delete">
                    <i class="fa fa-fw fa-times"></i> </a> -->

                    <a href="{{ url('category-delete',$category->id )}}"  title="Delete">
                      <button type="button" class="btn btn-danger">
                          <i class="fa fa-fw fa-times"></i>
                      </button>
                    </a>
                  </td>           
                </tr>

                @endforeach

        <input type="hidden" value="{{URL::to('admin')}}" class="apiUrl">
        <div class="example-modal">
            <div class="modal modal_sub">
                <div class="modal-dialog">
                    <div class="modal-content" style="margin-top: 50%">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Subcategory List</h4>
                        </div>
                        <div class="modal-body">
                            <ul class="subCategory_list">

                            </ul>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
        </div>
        <!-- /.example-modal -->    

<div class="modal fade" id="CatSubModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Category/Subcategory </h4>
            </div>
            <div class="modal-body">
                   <form role="form" action="{{url('save-category')}}" method="POST" enctype="multipart/form-data">
              {{ csrf_field() }}
              <div class="box-body">
                <div class="form-group">
                  <label for="category_name">Category/Subcategory Name</label>
                  <input type="text" class="form-control" id="category_name" name="category_name" placeholder="Enter Category/Subcategory Name" data-validation="required" data-validation-error-msg="Please Category/SubCategory name">
                  <span class="help-block"></span>
                </div>
                  <div class="form-group">
                      <label for="category_name">Type</label>
                      <select class="form-control" name="type" id="type">
                          <option value="0">Room Default</option>
                          <option value="1">Room Finishes</option>
                      </select>
                      <span class="help-block"></span>
                  </div>
             
              </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
             </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="SubModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Category & Subcategory </h4>
            </div>
            <div class="modal-body">
                   <form role="form" action="{{url('save-category-sub')}}" method="POST" enctype="multipart/form-data">
              {{ csrf_field() }}
                       <input type="hidden" id="room_finishes" name="room_finishes" value="0">
              <div class="box-body">
           <!--      <div class="form-group">
                  <label for="category_name">Category Name</label>
                  <input type="text" class="form-control" id="category_name" name="category_name" placeholder="Enter Category Name" data-validation="required" data-validation-error-msg="Please Category/SubCategory name">
                  <span class="help-block"></span>
                </div> -->


                      <br/>
                      <label for="category_child">Select Parent Category</label>
                      <div class="form-group {{ $errors->has('category_id') ? ' has-error' : '' }}">
                          <select class="form-control" name="category_id" required="">
                           <option value=""> Please Select </option>
                              @foreach($allParentCategory as $category)
                                  <option value="{{$category->id}}">
                                      {{$category->category_name}}
                                  </option>
                              @endforeach
                          </select>

                          @if ($errors->has('category_idcategory_id'))
                            <span class="help-block">
                                <strong>{{ $errors->first('category_id') }}</strong>
                            </span>
                          @endif
                      </div> 
               
                <div class="form-group">                           
                  <label for="subcategory">Select Sub-Category</label>    
                    <select class="tags-field form-control select_sub_category" name="category_child[]" multiple="multiple"> 

                        @foreach($allCategories as $category)
                          <option value="{{$category->id}}">
                              {{$category->category_name}}
                          </option>
                        @endforeach                    
                    </select>     
                </div>  

   
              </div>

              <!-- /.box-body -->

              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>

             <!--  <div class="box-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
              </div> -->
            </form>
            </div>
        </div>
    </div>
</div>

                </tbody>
<!--                  <tfoot>
                <tr>
                  <th class="text-center">Full Name</th>
                  <th class="text-center">Company Name</th>
                  <th class="text-center">Email</th>
                  <th class="text-center">Address</th>
                  <th class="text-center">Website</th>
                  <th class="text-center">Phone No</th>
                  <th class="text-center">Fax</th>
                  <th class="text-center">License No</th>
                  <th class="text-center">No of Designers</th>
                  <th class="text-center" data-orderable="false">Actions</th>
                </tr>
                </tfoot> --> 
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->




@stop

@section('javascript')
<!-- page script -->
<script>
 $(function () {
$("#listTable").DataTable({
    "stateSave": true
});
});


  $(".tags-field").select2({
  //   tags: true,
  //   tokenSeparators: [','],
  //   placeholder: "Type your text & click Enter Button"
  // tokenSeparators: [',', ' ']
  });
</script>

    <script>
        $(document).ready(function () {

        var host = "{{URL::to('/')}}"; 

            /**
             * function to display the modal
             */
            $(".subCategory").on('click', function () {

                 
                var category_id = $(this).attr('data-id');

                // console.log(category_id);
                var string = '';
                var url = host+'/get-subcategory/'+category_id;

                console.log(url);

                $.ajax({
                    type: 'GET',
                    url: url,
                    success: function (response) {
                      // console.log(response);
                        if (response.success) {

                            if(response.data.length !== 0){
                                response.data.forEach(function (e) {
                                    string+= "<li>"+ e.category_name+ "</li>";
                                });
                            }else{
                                string+= "<li> No subcategories added </li>";;
                            }
                            $( string ).appendTo( ".subCategory_list" );
                        }
                    }
                });

                $(".modal_sub").modal();
                /**
                 * on modal close clear the previous data
                 */
                $('.modal_sub').on('hidden.bs.modal', function (e) {
                    $(".subCategory_list").html("");
                });

            });

           $("#add_cat").click(function(){
                  $("#CatSubModal").modal();
              });


           $("#add_subcat").click(function(){
               $('#room_finishes').val(0);
                  $("#SubModal").modal();
              });
            $("#add_subcat_room_finishes").click(function(){
                $('#room_finishes').val(1);
                $("#SubModal").modal();
            });
           
        });


    </script>
        <script type="text/javascript">
        (function () {
            //validator
            $.validate();
        })();

 
  </script>

@stop