@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') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.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('web-tour.create') }}?page={{ request()->get('page') }}" class="btn btn-primary float-right">Add New</a>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <table id="example2" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>Name</th>
                  <th>Title</th>
                  <th>Description</th>
                  <th>Image</th>
                  <th>Highlight</th>
                  <th>Options</th>
                </tr>
                </thead>
                <tbody>
                @if(!empty($tours))
                @foreach($tours as $t)
                <tr>
                  <td>{{ $t->name }}</td>
                  <td>{{ $t->title ?? '-' }}</td>
                  <td>{!! $t->content !!}</td>
                  <td>{!! $t->image ? '<a href="' . asset('tour/' . $t->image) . '" data-fancybox>See Image</a>' : '-' !!}</td>
                  <td>{!! $t->element_id ? '<span class="badge badge-success">Set</span>' : '<span class="badge badge-danger">Unset</span>' !!}</td>
                  <td class="text-center">
                      <a href="{{ route('web-tour.edit', ['id' => $t->id]) }}" class="btn btn-warning btn-sm"  title="edit tour description"><i class="fas fa-edit"></i></a>
                      <button class="btn btn-danger btn-sm btn-delete-tour" tour-id="{{ $t->id }}" title="delete tour"><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/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.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-tour', function() {
        let tour_id = $(this).attr('tour-id')
        Swal.fire({
            title: 'Do you want to delete this tour ?',
            text: "",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('web-tour.delete') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        tour_id
                    },
                    beforeSend: function() {
                        let timerInterval;
                        Swal.fire({
                            title: 'Please Wait',
                            html: 'We Deleting the Tour',
                            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-tour[tour-id="' + tour_id + '"]').parent().parent().remove()
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Tour Successfully Deleted',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            }
        });
    })
})
</script>

@endsection