<div class="col-md-8 mt-xs-5">
    <h2 class="h4 p-3 bg-dark-light text-primary-light">

        My Bundle Orders
    </h2>
    <div class="card bigbox-hvr-slow mt-4">
        <div class="card-body">
          <div class="table-responsive">
            <h4 class="card-title">My Bundles</h4>

            <table class="table table-striped border">
                <tr>
                    <th>Bundle Name</th>
                    <th>Description</th>
                    <th class="text-center">Articles<br />Allow - Download</th>
                    <th class="text-center">Book<br />Allow - Download</th>
                    <th class="text-center">Chapter<br />Allow - Download</th>
                    <th>Price</th>
                    <th>Expiry Months</th>
                    <th>Expiry Date</th>
                    <th>Downloads</th>
                </tr>
                @if(!empty($bundle_order))
                @foreach($bundle_order as $bundle)
                <tr>
                    <td>{{ $bundle->bundle_name }}</td>
                    <td>{{ $bundle->bundle_description }}</td>
                    <td class="text-center">{{ $bundle->article_download_allow }} - {{ $bundle->article }}</td>
                    <td class="text-center">{{ $bundle->ebook_download_allow }} - {{ $bundle->ebook }}</td>
                    <td class="text-center">{{ $bundle->chapter_download_allow }} - {{ $bundle->chapter }}</td>
                    <td class="text-center">${{ $bundle->price }}</td>
                    <td class="text-center">{{ $bundle->expiry }}</td>
                    <td class="text-center">{{ strftime('%Y-%m-%d',$bundle->bundle_offer_expiry) }}</td>
                    <td class="text-center"><button type="button" class="btn btn-primary" data-target="#{{$bundle->bundle_offer_order_id}}" data-toggle="modal" value="{{$bundle->bundle_offer_order_id}}" onclick="get_model({{$bundle->bundle_offer_order_id}})">View</button>


                    <!-- Modal -->
                    <div class="modal fade" id="{{$bundle->bundle_offer_order_id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="{{$bundle->bundle_offer_order_id}}">My Dowloads</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div id="model_body_{{$bundle->bundle_offer_order_id}}" class="modal-body">
                          </div>
                        </div>
                      </div>
                    </div>

                    </td>

                </tr>
                @endforeach
                @else
                <tr>
                    <td colspan="8" class="text-center">No Record Found</td>
                </tr>
                @endif
            </table>
                    @if (!empty($bundle_order))
                    <center>{{ $bundle_order->appends(request()->input())->links() }}</center>
                    @endif
        </div>
      </div>
    </div>
</div>

<script>

    function get_model(args)
    {
        
        var bundle_offer_order_id = args;
        
        if ( bundle_offer_order_id != '')
        {
        
          $.ajax({
                type: "GET",
                url: '',
                data: {bundle_offer_order_id: bundle_offer_order_id,ajx_search : true},
                success: function( data ) 
                {           
                //console.log(data);
                    if(data == false)
                    {
                        $('#model_body_'+args).empty();  
                        var tbl = "<table class='table table-striped border'><tr><th width='15%'>Bundle Name</th><th width='15%'>Content Type</th><th>Content Detail</th><th width='13%'>Download</th></tr>" ;

                        tbl =  tbl + "<tr><td colspan='3' class='text-center'>No Record Found</td></tr></table>";

                         $('#model_body_'+args).append();     
                    }
                    else
                    {
                         $('#model_body_'+args).empty();  

                          var tbl = "<table class='table table-striped border text-left'><tr><th width='15%'>Bundle Name</th><th width='15%'>Content Type</th><th>Content Detail</th><th width='13%'>Download</th></tr>" ;

                        $.each(data, function(key,value) 
                        {                           
                            //console.log(value.content_title);
                            var date  = new Date(value['downloaded_on']*1000); 
                            var formattedDate = ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
                           tbl = tbl + "<tr><td>" + value['bundle_name'] + "</td><td>" + value['content_type'] + "</td><td>" + value['content_title'] + "</td><td>" + formattedDate + "</td></tr>";
                        }); 

                          $('#model_body_'+args).append(tbl);     
                 } 
               }                  
            }); 
        }
                    
    }; 

</script>