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

{{-- Promoted Stores --}}

<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>Stores</h4>
                    {{-- <a class="btn btn-primary" href="{{route('StorePromotedItem.index')}}"><i class="fas fa-arrow-left"></i> Back</a> --}}
                </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="searchStorespromoted()" 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>Store Name</th>
                            <th>Store Group</th>
                            <th>Action</th>
                            
                    </tr> 
                           </thead>
                    <tbody id="promoted_tbl">
                       @foreach($Stores as $Store)
                        <tr>
                            <td>{{$Store->title}}</td>
                            <td>{{$Store->storecategory->title}}</td>
                            <td><button class="btn btn-info" onclick="addpromotion('{{str_replace("'", "\'",$Store->title)}}','{{$Store->id}}')" >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 Stores</h4>
                    </div>            
                </div>  
            </div>
            <div class="card-body">
            <form method="POST" action="{{route('PromotedStores.store') }}">
            @csrf
            <div class="table-responsive">
                   <table class="table">
                   <thead>
                   <tr>
                    <th>total:<span id="totalitem"></span></th>
                   </tr>
                    <tr>
                            <th>Product Name </th>
                            <th>Action</th>
                            
                    </tr> 
                           </thead>
                        <tbody id="promoteditems">
                         @if($PromotedStores)
                            @foreach($PromotedStores as $PromotedStore)
                               <tr>
                                    <td>{{$PromotedStore->Stores->title}}</td>
                                    <td><button class="btn btn-danger" onclick="remove(this,{{$PromotedStore->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 searchStorespromoted()
{
    var items = document.getElementById("searchpromoted").value;
    $.ajax({
        url: '{{ route('searchpromotedstores') }}',
        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 tbody = document.getElementById("promoteditems");
    var name = name;
    var id = id;
    tbody.innerHTML += '<tr><td><input type="hidden" name="StoreIds[]" value="'+id+'">'+ name + '</td><td><button class="btn btn-danger" onclick="remove(this)">Close</button></td></tr>'; 
  
} 

// 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 totalpromoteditems(){
    var table = document.getElementById("promoteditems");
    var totalRowCount = table.rows.length;
    document.getElementById('totalitem').innerHTML=totalRowCount;

}

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

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


</script>

   
@endsection