@extends('main')

@section('css')
<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('android.project-create') }}" class="btn btn-primary btn-add-jasa float-right">Add Project</a>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div class="table-responsive">
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                            <th class="d-none">ID</th>
                            <th>Title</th>
                            <th>Image</th>
                            <th>Category</th>
                            <th>Description</th>
                            <th>Options</th>
                            </tr>
                        </thead>
                        <tbody>
                        @if(!empty($projects))
                        @foreach($projects as $p)
                        <tr>
                            <td class="d-none">{{ $p->id }}</td>
                            <td>{{ $p->title }}</td>
                            <td>{!! $p->image ? '<img width="150" src="'.asset('media/' . $p->image).'">' : '-' !!}</td>
                            <td>{{ $p->category }}</td>
                            <td>{{ $p->description }}</td>
                            <td class="text-center">
                            <a href="{{ route('android.project-layout', ['id' => \Crypt::encrypt($p->id) ]) }}" class="btn btn-success btn-sm"  title="project detail layout"><i class="fas fa-newspaper"></i></a>
                            <a href="{{ route('android.project-edit', ['id' => \Crypt::encrypt($p->id) ]) }}" class="btn btn-warning btn-sm"  title="edit project"><i class="fas fa-edit"></i></a>
                                <button class="btn btn-danger btn-sm btn-delete-project" project-id="{{ $p->id }}" title="delete project"><i class="fas fa-trash"></i></button>
                            </td>
                        </tr>
                        @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>  
@endsection

@section('js')
<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({
        "order": [[0, "desc"]]
    })
    $('body').on('click', '.btn-delete-project', function() {
        let project_id = $(this).attr('project-id')
        Swal.fire({
            title: 'Do you want to delete this project ?',
            text: "",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('android.project-delete') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        project_id
                    },
                    beforeSend: function() {
                        let timerInterval;
                        Swal.fire({
                            title: 'Please Wait',
                            html: 'We Deleting the Team Member',
                            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-project[project-id="' + project_id + '"]').parent().parent().remove()
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Project Successfully Deleted',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            }
        });
    })
})
</script>
@endsection