@extends('main')

@section('css')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
@endsection

@section('content')
<div class="content-wrapper">

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-12">
        @if(session('message'))
            <div class="form-group mt-3">
                <div class="alert alert-success" role="alert">
                    {{ session('message') }}
                </div>
            </div>
        @endif
          <div class="card mt-3">
            <div class="card-header">
                <a href="{{ route('blog.create') }}" class="btn btn-primary float-right">Add New Article</a>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <table id="example2" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>Title</th>
                  <th>Category</th>
                  <th>Status</th>
                  <th>Created At</th>
                  <th>Options</th>
                </tr>
                </thead>
                <tbody>
                @if(!empty($blogs))
                @foreach($blogs as $b)
                <tr>
                  <td>{{ $b->title }}</td>
                  <td>{{ $b->category->name }}</td>
                  <td class="blog_status">{{ strtoupper($b->status) }}</td>
                  <td><?= date('d-m-Y', strtotime($b->created)) ?></td>
                  <td class="text-center">
                      <a href="{{ route('template.blog-detail', ['slug' => $b->slug]) }}" class="btn btn-primary btn-sm"  title="see article" target="_blank"><i class="fas fa-link"></i></a>
                      <button class="btn btn-info btn-sm btn-change-status" blog-id="{{ $b->id }}" blog-status="{{ $b->status }}" title="change status"><i class="fas fa-retweet"></i></button>
                      <a href="{{ route('blog.detail', ['id' => \Crypt::encrypt($b->id)]) }}" class="btn btn-success btn-sm"  title="detail blog"><i class="fas fa-eye"></i></a>
                      <a href="{{ route('blog.edit', ['id' => \Crypt::encrypt($b->id) ]) }}" class="btn btn-warning btn-sm"  title="edit blog"><i class="fas fa-edit"></i></a>
                      <button class="btn btn-danger btn-sm btn-delete-blog" blog-id="{{ $b->id }}" title="delete blog"><i class="fas fa-trash"></i></button>
                  </td>
                </tr>
               @endforeach
               @endif
                </tbody>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
@endsection

@section('js')
<!-- DataTables -->
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>


<script>
$(document).ready(function() {
    $('#example2').DataTable({
      "ordering": false
    })

    $('body').on('click', '.btn-delete-blog', function() {
        let blog_id = $(this).attr('blog-id')
        Swal.fire({
            title: 'Do you want to delete this article ?',
            text: "",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('blog.delete') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        blog_id
                    },
                    beforeSend: function() {
                        let timerInterval;
                        Swal.fire({
                            title: 'Please Wait',
                            html: 'We Deleting the Article',
                            timerProgressBar: true,
                            onBeforeOpen: () => {
                                Swal.showLoading()
                            },
                            onClose: () => {
                                clearInterval(timerInterval)
                            }
                            }).then((result) => {
                            if (
                                /* Read more about handling dismissals below */
                                result.dismiss === Swal.DismissReason.timer
                            ) {
                                console.log('I was closed by the timer') // eslint-disable-line
                            }
                            })
                    },
                    success: function(response) {
                        $('body').find('.btn-delete-blog[blog-id="' + blog_id + '"]').parent().parent().remove()
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Article Successfuly Deleted',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            }
        });
    })

    $('body').on('click', '.btn-change-status', function() {
        let blog_id = $(this).attr('blog-id')
        let status = $(this).attr('blog-status')

        Swal.fire({
            title: `Do you want to change this article status to ${status == 'draft' ? 'post' : 'draft'} ?`,
            text: "",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('blog.change-status') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        blog_id,
                        status
                    },
                    beforeSend: function() {
                        let timerInterval;
                        Swal.fire({
                            title: 'Please Wait',
                            html: 'We Changing Article\'s  status',
                            timerProgressBar: true,
                            onBeforeOpen: () => {
                                Swal.showLoading()
                            },
                            onClose: () => {
                                clearInterval(timerInterval)
                            }
                            }).then((result) => {
                            if (
                                /* Read more about handling dismissals below */
                                result.dismiss === Swal.DismissReason.timer
                            ) {
                                console.log('I was closed by the timer') // eslint-disable-line
                            }
                            })
                    },
                    success: function(response) {
                        $('body').find('.btn-change-status[blog-id="' + blog_id + '"]').parent().parent().find('.blog_status').html(response.toUpperCase())
                        $('body').find('.btn-change-status[blog-id="' + blog_id + '"]').attr('blog-status', response)
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Article\'s status successfully changed',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            }
        });
    })
})
</script>

@endsection