@extends('layouts.backend')
@section('extraCss')
    <style>
        .select2-dropdown,
        .select2-dropdown--above,
        .select2-container--open .select2-dropdown--below {
            min-width: 200px !important;
        }

    </style>
    <style>
        .pos-sale-orderCombinations td,
        .pos-sale-orderCombinations td input {
            font-size: 11px;
        }

        .selectedOrderProducts th .form-control,
        .selectedOrderProducts td .form-control {}

        .selectedOrderProducts th,
        .selectedOrderProducts td,
        .selectedOrderProducts th .form-control,
        .selectedOrderProducts td .form-control {
            font-size: 10px;
            padding: 5px;
        }

    </style>
@endsection
@php $challenType = ['1'=>'Return','2'=>'Non Return']; @endphp
@section('mainContentArea')
    <div class="card card-default">
        <div class="card-header">
            <h4>
                 Add Purchase Order
                <a href="{{ route('challan.issued') }}" class="btn btn-info float-right btn-sm backBtn"> Back</a>
            </h4>
        </div>

        <div class="card-body">
            <div class="row">
                <div class="alert alert-info processingOrder" style="display: none;">Saving Order please wait...</div>
                <div class="col-md-2 ">                   
                    <h5>Filter </h5>
                    <hr/>
                        <div class="d-none orderItems"></div>
                        <div class="form-group"><label for="bestSeller"><input type="checkbox" id="bestSeller" class='filter' name="filterby" value="bestseller"> <b>Best Seller</b></label></div>
                        <div class="form-group"><label for="latestArticle"><input type="checkbox" id="latestArticle" class='filter' name="filterby" value="latestarticle"> <b>Latest Article</b></label></div>  
                        <div class="form-group"><label for="category"><input type="checkbox" id="category" class='filter' name="filterby" value="category"> <b>Category</b></label></div> 
                        <div class="form-group"><label for="article"><input type="checkbox" id="article" class='filter' name="filterby" value="article"> <b>Article</b></label></div>
                        <div class="form-group"><label for="color"><input type="checkbox" id="color" class='filter' name="filterby" value="color"> <b>color</b></label></div>
                        <div class="form-group"><label for="size"><input type="checkbox" id="size" class='filter' name="filterby" value="size"> <b>size</b></label></div>
                </div>
                <div class="col-md-10 ">
                    <h5> Products </h5>
                    <p class="text-danger">All the fillter article will be added to order after order is saved.</p>
                    <div class="alert alert-default" style="display:none;" id='showcategory'>  
                        <table class="table filterPosSo"> 
                            <tr > 
                                <td width="15%" >Category</td>
                                <td width="15%" >Section</td>
                                <td width="15%" >SubSection</td> 
                                <td colspan="2">ACTION</td>
                            </tr>
                            <tr >
                                <td>
                                    <select name="section[]" id="section" class="input-md" multiple="multiple">
                                        @foreach($listsection as $section)
                                        <option value="{{ $section->name }}" {{ ( !empty(request("section")) && in_array($section->name, request("section")) ? "selected" : "") }}>{{ $section->name  }}</option>
                                        @endforeach
                                    </select>
                                </td>   
                                <td>
                                    <select name="subsection[]" id="subsection" class="input-md" multiple="multiple">                  
                                    </select>
                                </td> 
                                <td>
                                    <select name="subsection[]" id="subsubsection" class="input-md" multiple="multiple">                  
                                    </select>
                                </td> 
                                <td><button class="btn btn-block btn-success" id='catesubmit'><i class="fa fas fa-search" id="submit"></i></button></td>
                            </tr>
                        </table>
                    </div>
                    <div class="alert alert-default" style="display:none;" id='showarticle'>
                        <table class="table filterPosSo"> 
                            <tr>
                                <td id='farticle'>Article</td> 
                                <td colspan="2">ACTION</td>
                            </tr>
                            <tr>
                                <td>
                                    <select name="article[]" id="article" class="input-md" multiple="multiple">
                                        @foreach($listarticle as $articles)
                                        <option value="{{ $articles->article }}" {{ ( !empty(request("article")) && in_array($articles->article, request("article")) ? "selected" : "") }}>{{ $articles->article  }}</option>
                                        @endforeach
                                    </select>
                                </td>    
                                <td><button class="btn btn-block btn-success" id='articlesubmit'><i class="fa fas fa-search" id="submit"></i></button></td>
                            </tr>
                        </table>                    
                    </div>
                    <div class="alert alert-default" style="display:none;" id='showcolor'>
                        <table class="table filterPosSo"> 
                            <tr>
                                <td id='farticle'>Color</td> 
                                <td colspan="2">ACTION</td>
                            </tr>
                            <tr>
                                <td>
                                    <select name="color[]" id="color" class="input-md" multiple="multiple">
                                        @foreach($listcolor as $color)
                                        <option value="{{ $color->name }}" {{ ( !empty(request("color")) && in_array($color->name, request("color")) ? "selected" : "") }}>{{ $color->name  }}</option>
                                        @endforeach
                                    </select>
                                </td> 
                                <td><button class="btn btn-block btn-success" id='colorsubmit'><i class="fa fas fa-search" id="submit"></i></button></td>
                            </tr>
                        </table>                    
                    </div>
                    <div class="alert alert-default" style="display:none;" id='showsize'>
                        <table class="table filterPosSo"> 
                            <tr>
                                <td id='farticle'>Size</td> 
                                <td colspan="2">ACTION</td>
                            </tr>
                            <tr>
                                <td>
                                    <select name="size[]" id="size" class="input-md" multiple="multiple">
                                        @foreach($sizes as $size)
                                        <option value="{{ $size }}" {{ ( !empty(request("size")) && in_array($size, request("size")) ? "selected" : "") }}>{{ $size  }}</option>
                                        @endforeach
                                    </select>
                                </td> 
                                <td><button class="btn btn-block btn-success" id='sizesubmit'><i class="fa fas fa-search" id="submit"></i></button></td>
                            </tr>
                        </table>                    
                    </div>
                    <table class="table table-striped table-bordered storeOrder fixTable" id='compersion2'>
                        <thead>
                        <tr> 
                        <th>Image</th>
                        <th>Article</th>
                        <th>Color</th>      
                        @foreach($sizes as $size)
                        <th>{{$size}}</th>
                        @endforeach
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extraJs')
<script>
$(document).ready(function(){
  
  $('input[type=checkbox][name=filterby]').change(function() {
           // var filter = [];
            // $.each($("input[name='filter']:checked"), function(){
            //     filter.push($(this).val());
            // });
            // $("input[name='filter']:checked").val();
             var filter =  $(this).val();   

             if(filter === 'category')
             {
                $('#showcategory').css('display','block');
                $('#showarticle').css('display','none');
                $('#showcolor').css('display','none');               
                $('#showsize').css('display','none');
                $('#compersion2 tbody').html(''); 
             }
             if(filter === 'article')
             {
               $('#showarticle').css('display','block');
               $('#showcategory').css('display','none');
               $('#showcolor').css('display','none');               
               $('#showsize').css('display','none');
               $('#compersion2 tbody').html(''); 
             } 
             if(filter === 'color')
             {
               $('#showcolor').css('display','block');
               $('#showarticle').css('display','none');
               $('#showsize').css('display','none');
               $('#showcategory').css('display','none');
               $('#compersion2 tbody').html(''); 
             }
             if(filter === 'size')
             {
               $('#showsize').css('display','block');
               $('#showcategory').css('display','none');
               $('#showcolor').css('display','none');
               $('#showarticle').css('display','none');
               $('#compersion2 tbody').html(''); 
             }      

            console.log(filter);
            if( filter === 'bestseller' || filter === 'latestarticle')
            {
                var _token   = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                type: "get",
                url: "{{ route('get-filter-article-info') }}",
                data: {         
                  filter: filter,          
                  _token: _token
                },
                dataType: "json",
                success: function(response) {     

                      console.log(response);
                      $('#compersion2 tbody').html(''); 
                       $('#compersion2 tbody').append(response);
                },
                error: function(response) {
                  console.log(response.responseJSON);
                }
              });

            }
           
    });

});


$("input[type='checkbox']").on('click', function() {
    $("input[type='checkbox']").not(this).prop('checked', false);
});

 $(function () {

  if($('#section').val() != '')
  {
         section($('#section').val());
  }
  else
  {
        $('#section').on('change', function (event) {
            section($('#section').val());
        });
  }

  function section(section)
  {
      var section = $('#section').val();

    var _token   = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
    url:"{{ route('section-subsection-details') }}",
    method:"get",
    data:{section: section, _token:_token},
    success:function(res)
    { 

      if(res){ console.log(res);
        $("#subsection").empty();
       //  $("#subsection").append('<option value="">Select Section</option>');
        $.each(res,function(key,value){
          $("#subsection").append('<option value="'+value+'">'+value+'</option>');
        });

        $('#subsection').multiselect({            
             enableFiltering: true,
             allSelectedText: 'All',
             maxHeight: 200,
             includeSelectAllOption: true,
             enableCaseInsensitiveFiltering: true  
        });        

        $('#subsection').multiselect('rebuild');
      
      }else{
        $("#subsection").empty();
      }
    }
    

   })
  }

 
});

$(function () {
  console.log($('#subsection').val());
  if($('#subsection').val() != '')
  {
         subsection($('#subsection').val());
  }
  else
  {
        $('#subsection').on('change', function (event) {
            subsection($('#subsection').val());
        });
  }
  function subsection(subsection){
    
    var section = $('#subsection').val();    

    console.log(section);

    var _token   = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
    url:"{{ route('section-subsection-details') }}",
    method:"get",
    data:{section: section, _token:_token},
    success:function(res)
    { 

      if(res){ console.log(res);
        $("#subsubsection").empty();
        
        $.each(res,function(key,value){
          $("#subsubsection").append('<option value="'+value+'">'+value+'</option>');
        });

        $('#subsubsection').multiselect({            
             enableFiltering: true,
             allSelectedText: 'All',
             maxHeight: 200,
             includeSelectAllOption: true,
             enableCaseInsensitiveFiltering: true  
        });        

        $('#subsubsection').multiselect('rebuild');
      
      }else{
        $("#subsubsection").empty();
      }
    }
    

   })
    // modal.find('#colormodel').val(color);
  };
});

</script>
@endsection