@extends ('backend.layouts.app') 
@section('content') 
<div class="box box-info">
    <div class="box-body setting-block" id="postList">
        <!-- Nav tabs -->
        <ul id="myTab" class="nav nav-tabs setting-tab-list" role="tablist">
            @if($contentmorning != '')
            <li role="presentation" class="active" id="newtab">
                <a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">Morning</a>
            </li>
           @endif
            @if($contentevening != '')
            <li role="presentation">
                <a href="#tab2" aria-controls="2" role="tab" data-toggle="tab">Evening</a>
            </li>
            @endif
           @if($contentafternoon != '')
            <li role="presentation">
                <a href="#tab4" aria-controls="3" role="tab" data-toggle="tab">Afternoon</a>
            </li>
            @endif
            @if($contentbreaking != '')
            <li role="presentation">
                <a href="#tab5" aria-controls="4" role="tab" data-toggle="tab">Breaking</a>
            </li>
            @endif
           @if($contentnewsupdate != '')
            <li role="presentation">
                <a href="#tab3" aria-controls="5" role="tab" data-toggle="tab">News Update</a>
            </li>
            @endif
           @if($contentcustom != '')
             <li role="presentation">
                <a href="#tab6" aria-controls="1" role="tab" data-toggle="tab">Custom Created</a>
            </li>
            @endif
            @if($contentsunday != '')
            <li role="presentation">
                <a href="#tab7" aria-controls="1" role="tab" data-toggle="tab">Sunday Newsletter</a>
            </li>
          @endif
        </ul>
                 <div class="input-group1 input-daterange" style="display: table;    width: 23%;float: right;">
                <div class="input-group-addon">Date</div> 
                <input type="date" name="from_date" id="from_date1" data-date-format="YYYY MMMM DD"  class="form-control hasDatepicker" style="background-color: rgb(255, 255, 255);"> 
            </div>
            <div id="news-table_processing" class="dataTables_processing panel panel-default" style="display: none;
    background: rgba(0, 0, 0, .75) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, .5);
    color: #fff;
    padding: 5px 0;
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -26px;
    text-align: center;
    padding: 1em 0;">Loading...</div>

        <!-- Tab panes -->
        <div id="myTabContent" class="tab-content setting-tab">
            <div role="tabpanel" class="tab-pane active" id="tab1">
            	<div class="col-md-12 col-12 col-lg-12">{!!$contentmorning!!}</div>

            </div>
            <div role="tabpanel" class="tab-pane" id="tab2">
            	<div class="col-md-12 col-12 col-lg-12">{!!$contentevening!!}</div>
                
            </div>
            <div role="tabpanel" class="tab-pane" id="tab3">
                <div class="col-md-12 col-12 col-lg-12">{!!$contentnewsupdate!!}</div>

            </div>
            <div role="tabpanel" class="tab-pane" id="tab4">
                <div class="col-md-12 col-12 col-lg-12">{!!$contentafternoon!!}</div>

            </div>
            <div role="tabpanel" class="tab-pane" id="tab5">
               <div class="col-md-12 col-12 col-lg-12">{!!$contentbreaking!!}</div>

            </div>
            <div role="tabpanel" class="tab-pane" id="tab6">
                 <div class="col-md-12 col-12 col-lg-12">{!!$contentcustom!!}</div>
            </div>
             <div role="tabpanel" class="tab-pane" id="tab7">
                 <div class="col-md-12 col-12 col-lg-12">{!!$contentsunday!!}</div>
            </div>
        </div>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
        <div class="row">
          
        </div>
    </div>
</div><!--box-->

@endsection 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
     $(document).ready(function(){
            function fetch_html()
            {

            var _token = "{{ csrf_token() }}";
            id = $('#from_date1').val();
                    $(document).ajaxStart(function(){
                    $("#news-table_processing").css("display", "block");
                    });
                    $(document).ajaxComplete(function(){
                    $("#news-table_processing").css("display", "none");
                    });
            $.ajax({
            url:"{{ url('admin/newsletters/') }}",
            data:{id:id, _token:_token},
            dataType:"json",
            type:"get",
                beforeSend: function(data){
                $('#myTabContent').empty(); 
                 $('.nav li.active').removeClass('active'); 
                },
                success:function(data)
                {
                $("#newtab").addClass("active");
                $("#myTab").hide();
                $("#news-table_processing").css("display", "none");
                $('#myTabContent').append(data.html);  
                }
                });
                }
    $("#from_date1").change(function () {
        fetch_html();
    });
     });
</script>