@extends('layouts.app')

@section('content')
	<div class="row">
	    <div class="col-lg-12 margin-tb">
	        <div class="pull-left">
	            <h3>Advertisements</h3>
	        </div>
	        <div class="pull-right">
	            <a class="btn btn-success btn-sm" href="{{route('advertisements.create')}}">Create New</a>
	        </div>
	    </div>
	</div>

	@if ($message = Session::get('success'))
		<div class="alert alert-success">
			<p>{{ $message }}</p>
		</div>
	@endif

	<table class="table table-bordered">
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Schedule</th>
			<th>Ads Script</th>
			<th>Type</th>
			<th>Action</th>
		</tr>

		@foreach ($advertisements as $key => $advertise)
		<tr class="ads_{{ $advertise->id }}">
			<td>{{ $advertise->id }}</td>
			<td>{{ $advertise->video_name }}</td>
			<td>{{ (new \App\Http\Helper)->time_format($advertise->start_time)." - ".(new \App\Http\Helper)->time_format($advertise->end_time) }}</td>
			<td class="adsBox">{{ $advertise->advertisement }}</td>
			<td>{{ $advertise->type }}</td>
			<td>
				<a class="btn btn-success btn-sm btn-block space_buttons watch_ads">Watch Ads</a>
				<a class="btn btn-danger btn-sm btn-block space_buttons deleteAds" data-id="{{ $advertise->id }}" href="#">Delete</a>
			</td>
		</tr>
		@endforeach
	</table>

	<div class="modal fade" id="modalWatchAds" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="add-modal-label">Advertisement</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group" style="text-align:center;">
                        <div id="watchAds"></div>
                    </div>
                </div>
                <div class="modal-footer"></div> 
            </div>
        </div>
    </div>


	{!! $advertisements->render() !!}

	<script type="text/javascript">
	//Watch ads popup
    $(document).on('click', '.watch_ads', function(e) {
        e.preventDefault();
        
        //console.log($(this).parent().siblings('td.adsBox').text());
        var iframe = $(this).parent().siblings('td.adsBox').text();

        $('#watchAds').html(iframe);
        $('#modalWatchAds').modal('show');
    });

	//Delete record
    $(document).on('click', '.deleteAds', function (e) {
        e.preventDefault();
        var that = $(this);
        var checkMsg = confirm("Are you sure you want to delete this record!");
        if(!checkMsg){return false;}
        $.ajax({
            type: "POST",
            url: '/advertisements/destroy',
            data: {"_token": "{{ csrf_token() }}", "id": $(this).data('id')},
            success: function (json) {
                if (json.status == 'success') {
                    that.closest('.ads_'+json.id).delay(1000).html('<td colspan="5" style="text-align:center;">'+json.message+'</td>').fadeOut(1000, function(){
				      	$(this).remove();
				    });
                } else if (json.status == 'failure') {
                    //that.css("display", "block");
                }
            }
        });
    });
	</script>
@endsection