@extends('adminlte::page')

@section('title', 'Dashboard')



@section('content_header')
    <div class="row mb-12">
        <div class="col-md-3">
            <h1>Blog</h1>
        </div>
        <div class="col-md-9">
         	<div class="row">
                <div class="col-md-2">
                    <a class="btn btn-success" href="{{route('additional-visa.index')}}">Additional Visa</a>
                </div>
                <div class="col-md-2">
                    <a class="btn btn-warning" href="{{ route('additional-category.index') }}">Additional Service</a>
                </div>
                <div class="col-md-3">
                    <button class="btn btn-danger delete_all"  data-url="{{ route('blog.deleteAll') }}">Delete All Selected </button>
                </div>
                <div class="col-md-4">
                    <form method="get">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="search" value="{{Request::get('search')}}">
                            <span class="input-group-addon"><a href="javascript:void(0);" class="btn-submit-form"><i class="fa fa-search" aria-hidden="true"></i></a>&nbsp;&nbsp;&nbsp;<a href="{{route('blog.index')}}"><i class="fa fa-refresh" aria-hidden="true"></i></a></span>
                            <button type="submit" style="display: none;"></button>
                        </div>
                    </form>
                </div>
                <div class="col-md-1">
                    <span class="pull-right">
                        <a href="{{ route('blog.create') }}" class="btn btn-primary">+Add</a>
                    </span>
                </div>
			</div>
     
        </div>
    </div>
@stop




@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body table-responsive">
                    <table class="table table-bordered">
                        <tr>
                            <th width="50px"><input type="checkbox" id="master"></th>
                            <th>Image</th>
                            <th>Category</th>
                            <th>Title</th>
                            <th>Post</th>
                            <th>Recent</th>
                            <th>Trending</th>
                            <th>Popular</th>
                            <th>Status</th>
                            <th>Added</th>
                            <th>Action</th>
                            <th>Published /Drafted</th>
                            <th>Last Updated By</th>
                        </tr>
                        @foreach ($blog as $blg)
                            <tr id="tr_{{$blg->id}}">
                                <td><input type="checkbox" class="sub_chk" data-id="{{$blg->id}}"></td>
                                {{--<td><img width="50"
                                         onError="this.onerror=null;this.src='{{asset('img/no-image.png')}}';"
                                         src="{{(!empty($blg->blogImages[0]))?config('app.front_url').$blg->blogImages[0]->image:''}}"/>
                                </td>--}}
                                <td>
                                    <img 
                                        width="50"
                                        onError="this.onerror=null;this.src='{{ asset('img/no-image.png') }}';"
                                        src="{{ !empty($blg->blogImages[0]) ? $front_url.'img_blog/'.$blg->blogImages[0]->image : asset('img/no-image.png') }}" 
                                    />
                                </td>
                                <td style="width: 10%;">{{!empty($blg->blogcategory->name)?$blg->blogcategory->name:'--'}}</td>
                                <td style="width: 13%;">{{$blg->title}}</td>
                                <td style="width: 18%;">{{substr(strip_tags($blg->content),0,50)}}...</td>
                                <td><input type="checkbox" {{$blg->is_recent?'checked':''}} class="chk_recent"
                                           data-url="{{ route('blog.updateIsrecent',$blg->id) }}"/></td>
                                <td><input type="checkbox" {{$blg->is_home_news?'checked':''}} class="chk_recent"
                                           data-url="{{ route('blog.updateIsHomeNews',$blg->id) }}"/></td>
                                <td><input type="checkbox" {{$blg->is_popular?'checked':''}} class="chk_recent"
                                           data-url="{{ route('blog.updateIspopular',$blg->id) }}"/></td>
                                <td>{{($blg->status)?'Active':'Deactive'}}</td>
								<td>{{$blg->date_added}}</td>
                                <td style="width: 7%;">
                                    {{--@if($blg->pricing)
                                        <a href="{{ route('blog_pricings.edit', $blg->pricing->id) }}" class="btn btn-primary btn-xs o">Pricing</a>
                                    @else
                                        <a href="{{ route('blog_pricings.create', ['blog_id' => $blg->id]) }}" class="btn btn-success btn-xs o">Pricing</a>
                                    @endif--}}
                                    <a href="{{route('blog.edit',$blg->id)}}" class="btn btn-warning btn-xs o">
                                        Edit
                                    </a>&nbsp;&nbsp;
                                    <a href="{{route('blog.delete',$blg->id)}}" class="btn btn-danger btn-xs o" onclick="return confirm('Are you sure?')">
                                        Delete
                                    </a>
                                     &nbsp;&nbsp;
                                    <a href="{{route('blog.review.index',$blg->id)}}" class="btn btn-primary btn-xs o">Review</a>
                                </td>
                                <td style="width: 3%;">
                                    <input type="checkbox" data-id="{{ $blg->id }}" name="is_published" class="js-switch" {{ $blg->is_published == 1 ? 'checked' : '' }}>
                                </td>
                                <td>
                                    {{ $blg->updatedBy->name ?? 'N/A' }}<br/>
                                    <small class="text-primary">({{$blg->updated_at->setTimezone('Asia/Kolkata')->format('d-m-Y h:i A')}})</small>
                                </td>
                            </tr>
                        @endforeach
                    </table>
                    <div class="box-footer clearfix">
                    {{ $blog->links() }}
                </div>
                </div>
                <!-- /.box-body -->

             
            </div>
        </div>
        <!-- /.col -->
    </div>

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@stop

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.btn-submit-form').on('click', function (e) {
                $(this).parents('form').submit();
            });

            $('#master').on('click', function (e) {
                if ($(this).is(':checked', true)) {
                    $(".sub_chk").prop('checked', true);
                } else {
                    $(".sub_chk").prop('checked', false);
                }
            });


            $('.delete_all').on('click', function (e) {


                var allVals = [];
                $(".sub_chk:checked").each(function () {
                    allVals.push($(this).attr('data-id'));
                });


                if (allVals.length <= 0) {
                    alert("Please select row.");
                } else {


                    var check = confirm("Are you sure you want to delete this row?");
                    if (check == true) {


                        var join_selected_values = allVals.join(",");

                        console.log("$(this).data('url')", $(this).data('url'))
                        $.ajax({
                            url: $(this).data('url'),
                            type: 'DELETE',
                            data: 'ids=' + join_selected_values + '&_token=' + $('input[name=_token]').val(),
                            success: function (data) {
                                if (data['success']) {
                                    $(".sub_chk:checked").each(function () {
                                        $(this).parents("tr").remove();
                                    });
                                    alert(data['success']);
                                } else if (data['error']) {
                                    alert(data['error']);
                                } else {
                                    alert('Whoops Something went wrong!!');
                                }
                            },
                            error: function (data) {
                                alert(data.responseText);
                            }
                        });


                        $.each(allVals, function (index, value) {
                            $('table tr').filter("[data-row-id='" + value + "']").remove();
                        });
                    }
                }
            });
            $(document).on('confirm', function (e) {
                var ele = e.target;
                e.preventDefault();


                $.ajax({
                    url: ele.href,
                    type: 'DELETE',
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    success: function (data) {
                        if (data['success']) {
                            $("#" + data['tr']).slideUp("slow");
                            alert(data['success']);
                        } else if (data['error']) {
                            alert(data['error']);
                        } else {
                            alert('Whoops Something went wrong!!');
                        }
                    },
                    error: function (data) {
                        alert(data.responseText);
                    }
                });


                return false;
            });

            $('.chk_recent').change(function (e) {
                var featured = 0; 
                if ($(this).is(':checked')) {
                    featured = 1;
                }
                $.ajax({
                    url: $(this).attr('data-url'),
                    data: {featured: featured},
                    type: "GET",
                    success: function (data) {
                        data = JSON.parse(data);
                        if (data['error'] == true) {
                            new PNotify({
                                title: 'Alert',
                                text: data['message'],
                                type: 'error',
                                styling: 'bootstrap3',
                                delay: 3000
                            });
                        } else {
                            new PNotify({
                                title: 'Alert',
                                text: data['message'],
                                type: 'success',
                                styling: 'bootstrap3',
                                delay: 3000
                            });
                        }
                    }
                });
            });
        });
    </script>

<script>
    let publishedElems = Array.prototype.slice.call(document.querySelectorAll('.js-switch[name="is_published"]'));
    publishedElems.forEach(function(html) {
        new Switchery(html, {
            size: 'small',
            color: '#28a745',
            secondaryColor: '#dc3545'
            
        });
    });

    $('.js-switch[name="is_published"]').change(function () {
        let is_published = $(this).prop('checked') === true ? 1 : 0;
        let blog_id = $(this).data('id');
        $.ajax({
            type: "GET",
            dataType: "json",
            url: 'blog/publish-status/' + blog_id,
            data: {
                'is_published': is_published,
                'blog_id': blog_id,
                '_token': '{{ csrf_token() }}'
            },
            success: function (data) {
                console.log(data.message);
                toastr.clear();
                // toastr.success(data.message);
                let toast = toastr.success(data.message, 'Notification', {
                    closeButton: true,
                    progressBar: true,
                    positionClass: 'toast-top-right',
                    timeOut: 500,
                    extendedTimeOut: 700 
                });

                
                // let toastElement = $('.toast');
                let toastElement = $(toast);
                if (data.is_published === "1") {
                    toastElement.addClass('toast-success');
                } else {
                    toastElement.addClass('toast-danger');
                }
                if (data.redirect_url) {
                    window.location.href = data.redirect_url;
                }
            },
            error: function (data) {
                console.log('Error:', data);
                toastr.error('Failed to update status');
            }
        });
    });
</script>
@stop

@stop