@include('includes.main.header') 
	<!--Work-Starts-Here-->
	 <!-- content-section-starts -->
    <div class="gallery-content">
        <div class="container">
            <div class="gallery-content-head text-left">
                    <h3>SPONSORS</h3>

                   
                    <p>Anytime choose the services and products offered by our sponsors! This way you contribute to the development of our club!</p>
            </div>
            @if (Session::has('general'))
            <form class='col-xs-12' enctype="multipart/form-data">
                {{ implode('', $errors->all('<div class="alert alert-danger">:message</div>')) }}
                <div class='col-xs-12 well'>
                    <div class="error-box" style="display: none">

                    </div>
                    <label class='col-xs-12'>
                        Upload Banners
                    </label>
                    <div class="col-xs-12 col-sm-6">
                        <input type='file' class='form-control' name="banner" id='banner'/>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <input type="text" id="url" class="form-control" placeholder="Link to webite including http:// or https://" />
                    </div>
                    <button type='button' class='btn btn-primary col-xs-12 top-margin' id='btn-upload'>
                        Upload Banner
                    </button>
                </div>
            </form>
            <div class="col-xs-12" id="pending_container">
                 
            </div>
            @endif
             
             
			<div class="section group" id='banner-group'>
<!--				<div class="col-xs-12 col-sm-6 col-md-3 no-padding margin-t-5" >
					 <a class="fancybox col-xs-12 no-padding banner-img" style="background-image: url('images/one-1.jpg')" href="images/one-1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><span> </span></a>
				</div>-->
				
			
				
			</div> 	
             <div class="col-xs-12 hcenter" id="loading" style='display: none'>
                        <img src="/images/loading.gif" />
                    </div>
   </div>
</div>
         
         <script>
             $(document).ready(function(){
                 getAllBanners();
                $('#btn-upload').click(function(){
                    $('#btn-upload').html('Uploading Banner....').attr('disabled', 'disabled');
                    $('#banner-group').hide();
                    $('#loading').show();
                    $('.error-box').hide().html('');
                    var data = new FormData();
                    var banner = $("#banner").get(0).files[0];
                    data.append("banner", banner);
                    data.append("url", $('#url').val());
                    $.ajax({
                        url:'/api/v1/banner/submit',
                        data:data,
                      //  _token: "{{ csrf_token() }}",
                        headers: {
                            'X-CSRF-Token': '{{ csrf_token() }}'
                         },
                        dataType:'json',
                        async:false,
                        type:'post',
                        processData: false,
                        contentType: false,
                        success:function(response){
                            alert("Banner Uploaded Successfully");
                            $('#banner-group').show();
                            $('#loading').hide();
                            $('#btn-upload').html('Upload Banner').removeAttr('disabled');
                            getAllBanners();
                            
                        },
                        error: function (res) {
                            var html = '';
                            $('#btn-upload').html('Upload Banner').removeAttr('disabled');
//                            var html = '';
//                            $(res.responseText).each(function(i, value){
//                                html+= '<p>' + value + '</p>';
//                            });
//                            $('.error-box').html(html).show();
//                            $('#btn-upload').html('Upload Banner').removeAttr('disabled');
                            $(res.responseJSON).each(function(i, value){
                                html+= value + '\n';
                            });
                            alert(html);
                            $('#banner-group').show();
                            $('#loading').hide();
                        }
                      });
                   
                });
             });
             
            function getAllBanners()
            {
                $('#banner-group').hide().html('');
                $('#loading').show();
                $.get('/api/v1/banners/all', function(res){
                    //$('#banner-group').show();
                    //$('#loading').hide();
                    var count = 0
                    $(res).each(function(i,value){

                        var location = '/uploads/banner/' + value.banner_location;
                        $('#banner-group').append('<div class="col-xs-12 col-sm-6 col-md-3 no-padding margin-t-5" ><a class="fancybox col-xs-12 no-padding banner-img" style="background-image: url(' + location + ')" href="' + value.url + '" target="_blank" data-fancybox-group="gallery"><span> </span></a></div>');
                        count++;
                    });
                    if(count < 16)
                    {
                        for(;count < 16; count++)
                        {
                            $('#banner-group').append('<div class="col-xs-12 col-sm-6 col-md-3 no-padding margin-t-5 empty-banner" ><a class="fancybox col-xs-12 no-padding banner-img" data-fancybox-group="gallery" style=""><div class="col-xs-12 empty-banner-title1">This spot is available!</div> <div class="col-xs-12 empty-banner-title2">250 x 250</div></a></div>');
                        }
                    }
                    getAllNonPaidBanners();
                });
            }

            function getAllNonPaidBanners()
            {
                
                $('#loading').show();
                $.get('/api/v1/banners/all/pending', function(res){
                    $('#pending_container').html('');
                    $('#banner-group').show();
                    $('#loading').hide();
                    var count = 0
                    var html = '<table class="table table-striped"><thead><tr><th colspan="3">Pending Payments for Banners</th></tr></thead>';
                    $(res).each(function(i,value){
                        html+= '<tr><td>' + value.url + '</td><td><img style="width:100px" src="/uploads/banner/' + value.banner_location + '" /></td><td><button type="button" class="btn btn-danger banner-delete" data-id="' + value.UUID + '">Delete</button></td></tr>';
                    });
                    html+= '<tfoot><tr><td colspan="3"><a href="/banner/pay" class="btn btn-success pull-right">Pay For Banners</a></td></tr></tfoot></table>';
                    if(res.length != 0)
                    {
                        $('#pending_container').html(html);
                    }
                });
            }
            
            $(document).on('click', '.banner-delete', function(){
                var id = $(this).attr('data-id');
                $(this).text('Deleting Banner').attr('disabled', 'disabled');
                var current = $(this);
                $.post('/api/v1/banners/' + id + '/delete',{"_token": "{{ csrf_token() }}"}, function(){
                    alert("Banner Deleted Successfully");
                    getAllNonPaidBanners();
                    
                },'json').fail(function(xhr) {
                    alert("Something Went Wrong While Deleting Banner");
                    $(current).text('Delete').removeAttr('disabled');
                },'json');
            });
             </script>
	 <!-- content-section-ends -->
	<!--Work-Ends-Here-->
@include('includes.main.footer')