@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('testimonial.create') }}" class="btn btn-primary float-right">Add New Testimonial</a>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <table id="example2" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>Name</th>
                  <th>Image</th>
                  <th>Logo</th>
                  <th>Job</th>
                  <th>Testimonial</th>
                  <th>Options</th>
                </tr>
                </thead>
                <tbody>
                @if(!empty($testimonials))
                @foreach($testimonials as $t)
                <tr>
                  <td>{{ $t->name }}</td>
                  <td>{!! $t->image ? '<img src="'.asset('media/' . $t->image).'" width="150">' : '' !!}</td>
                  <td>{!! $t->logo ? '<img src="'.asset('media/' . $t->logo).'" width="140" height="50">' : '' !!}</td>
                  <td>{{ $t->job }}</td>
                  <td>{{ $t->testimonial }}</td>
                  <td class="text-center">
                      <a href="{{ route('testimonial.edit', ['id' => \Crypt::encrypt($t->id) ]) }}" class="btn btn-warning btn-sm"  title="edit testimonial"><i class="fas fa-edit"></i></a>
                      <button class="btn btn-danger btn-sm btn-delete-testimonial" testimonial-id="{{ $t->id }}" title="delete testimonial"><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-testimonial', function() {
        let testimonial_id = $(this).attr('testimonial-id')
        Swal.fire({
            title: 'Do you want to delete this testimonial ?',
            text: "",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('testimonial.delete') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        testimonial_id
                    },
                    beforeSend: function() {
                        let timerInterval;
                        Swal.fire({
                            title: 'Please Wait',
                            html: 'We Deleting the Testimonial',
                            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-testimonial[testimonial-id="' + testimonial_id + '"]').parent().parent().remove()
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Testimonial Successfuly Deleted',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            }
        });
    })
})
</script>

@endsection