@extends('layouts.storeapp')
@section('content')

{{-- Banner ADD New --}}

<x-flash/>
<div class="row">
<div class="col-md-8">
    <div class="card">
        <div class="card-header">        
            <div class="d-flex align-items-center">
                <div class="p-2 flex-fill">
                 <h4>Products</h4>
                    {{-- <a class="btn btn-primary" href="{{route('StorePromotedItem.index')}}"><i class="fas fa-arrow-left"></i> Back</a> --}}
                </div>            
                <!-- <div class="p-2  flex-fill bd-highlight">
                    <h4>Slider <span class="badge badge-info">Add New</span></h4>
                </div>             -->
            </div>  
        </div>
        <div class="card-body">
            <div class="row"> 
                <div class="col-sm-12 form-group">
                <div class="input-group">
                <input type="text" id="searchpromoted"  oninput="searchProductpromoted()" class="form-control bg-light border-0 small" placeholder="Search products..." aria-label="Search" aria-describedby="basic-addon2">
                <div class="input-group-append">
                  <button class="btn btn-primary" type="button">
                    <i class="fas fa-search fa-sm"></i>
                  </button>
                </div>
              </div>
          
                </div>          
                <div class="col-sm-12 form-group">
                <div class="table-responsive">
                   <table class="table">
                   <thead>
                    <tr>
                            <th>Product Name</th>
                            <th>Product Group</th>
                            <th>Action</th>
                            
                    </tr> 
                           </thead>
                    <tbody id="promoted_tbl">
                       @foreach($Products as $Product)
                        <tr>
                            <td>{{$Product->title}}</td>
                            <td>{{$Product->productgroup->title}}</td>
                            <td><button onclick="addpromotion('{{str_replace("'", "\'",$Product->title)}}','{{$Product->id}}')" class="btn btn-info" >Add</button></td>
                        </tr>
                        @endforeach
                    <tbody>
                   </table>
                   </div>
                </div>
            </div>

        </div>
        <div class="card-footer">
            <div class="d-flex  justify-content-end">
            </div>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="card">
            <div class="card-header">        
                <div class="d-flex align-items-center">                          
                    <div class="p-2  flex-fill bd-highlight">
                        <h4>Promoted Products</h4>
                    </div>            
                </div>  
            </div>
            <div class="card-body">
            <form method="POST" action="{{route('StorePromotedItem.store') }}">
            @csrf
            <div class="table-responsive">
                   <table class="table">
                   <thead>
                   <tr>
                    <th>total:15</th>
                    <th>remining:<span onload="reminingitems()" id="remining"></span></th>
                   </tr>
                    <tr>
                            <th>Product Name </th>
                            <th>Action</th>
                            
                    </tr> 
                           </thead>
                        <tbody id="promoteditems">
                        @if($PromotedItems)
                            @foreach($PromotedItems as $PromotedItem)
                               <tr>
                                    <td>{{$PromotedItem->Product->title}}</td>
                                    <td><button class="btn btn-danger" onclick="remove(this,{{$PromotedItem->id}})">Close</button></td>
                               </tr> 
                            @endforeach
                        @endif
                        </tbody>
                   </table>
                   </div>
                   <div id="deletedItems">
    
                    </div>
            </div>
           
            <div class="card-footer">
            <div class="d-flex  justify-content-end">
                <button type="submit" class="btn btn-primary" name="btnSave">Save</button>               
            </div>
        </div>
        </form>
        </div>
    </div>
</div>

<script>
function searchProductpromoted()
{
    var items = document.getElementById("searchpromoted").value;
    $.ajax({
        url: '{{ route('searchpromotedproducts') }}',
        method: "get",
        data: {_token: '{{ csrf_token() }}',searchitems:items },
                    success: function (response){
                    // alert(response);
                     document.getElementById('promoted_tbl').innerHTML=response;                    
                    // window.location.reload();
                    
                        }
                });      
}

 function addpromotion(name,id){
    var table = document.getElementById("promoteditems");
    var totalRowCount = table.rows.length;
    if(totalRowCount<15){     
    var tbody = document.getElementById('promoteditems');
    var name = name;
    var id = id;
    tbody.innerHTML += '<tr><td><input type="hidden" name="Productids[]" value="'+id+'">'+ name + '</td><td><button class="btn btn-danger" onclick="remove(this);totalitems()">Close</button></td></tr>'; 
    totalitems();
        }
    else if(totalRowCount>=15){
      var message = "\n total promoted items: " + totalRowCount;
        message += "\n can't add more than 15 items \n";
        alert(message);
    }
    
} 

function totalitems(){
    var table = document.getElementById("promoteditems");
    var totalRowCount = table.rows.length;
    var reminingItem = 15 - totalRowCount;
    document.getElementById('remining').innerHTML=reminingItem;
}

 function reminingitems(){
    var table = document.getElementById("promoteditems");
    var totalRowCount = table.rows.length;
    var reminingItem = 15 - totalRowCount;
    document.getElementById('remining').innerHTML=reminingItem;
}

function remove(btnremove,promotedItemId) {               
                btnremove.parentNode.parentNode.remove();
                var deletedItems=document.getElementById('deletedItems');
                deletedItems.innerHTML +='<input type="hidden" name="deleteID[]" value="'+promotedItemId+'">';
                totalitems();
           } 

 window.onload=function(){ 
    reminingitems();
 };


</script>

   
@endsection