@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('crm.create') }}" class="btn btn-primary float-right">Add Client</a>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div class="table-responsive">
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Phone</th>
                                <th>Jasa</th>
                                <th>Status</th>
                                <th>Catatan</th>
                                <th>Created At</th>
                                <th>Options</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <nav aria-label="..." class="nav-pagination d-none">
                        <ul class="pagination" style="width: fit-content; margin:auto;">
                          <li class="page-item">
                            <a class="page-link page-link-previous" href="#">Previous</a>
                          </li>
                            <a class="page-link page-link-next" href="#">Next</a>
                          </li>
                        </ul>
                      </nav>
                    <div class="spinner text-center d-none" style="width:100%;">
                        <div class="spinner-border text-primary mx-auto"></div>
                    </div>
                </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>
const crm_url = 'https://crm.bintorocorp.co.id/ApiBinggo/getAllData';
const binggo_id = "{{ $binggo_id }}"
let data_param = {
    binggo_id
};
const page_url = "{{ route('crm.index') }}"

$(document).ready(function() {
    getAllData(data_param);

    $('body').on('click', '.btn-delete-client', function() {
        let client_id = $(this).attr('client-id')
        Swal.fire({
            title: 'Do you want to delete this client ?',
            text: "",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: `https://crm.bintorocorp.co.id/ApiBinggo/delete/${client_id}`,
                    data: {},
                    beforeSend: function() {
                        let timerInterval;
                        Swal.fire({
                            title: 'Please Wait',
                            html: 'We Deleting the Client',
                            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-client[client-id="' + client_id + '"]').parent().parent().remove()
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Client Successfully Deleted',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            }
        });
    })
})

function getAllData(data) {
    $.ajax({
        type: 'get',
        url: crm_url,
        data,
        beforeSend() {
            $('body').find('.spinner').removeClass('d-none');
        },
        success(res) {
            $('body').find('.spinner').addClass('d-none');
            const res_data = JSON.parse(res);

            if(res_data) {
                let table_html = '';
                let last_id;
                let first_id;
                for(let i = 0; i <= res_data.length - 1; i++) {
                    if(i == 0) {
                        first_id = res_data[i].form_binggo_id;
                    }

                    table_html += `
                        <tr>
                            <td>${res_data[i].form_binggo_first_name} ${res_data[i].form_binggo_last_name ? res_data[i].form_binggo_last_name : ''}</td>
                            <td>${res_data[i].form_binggo_telp}</td>
                            <td>${res_data[i].form_binggo_jasa}</td>
                            <td>${res_data[i].form_binggo_status_order} ${res_data[i].form_binggo_ket_order ? ' - ' + res_data[i].form_binggo_ket_order : ''}</td>
                            <td>${res_data[i].form_binggo_message}</td>
                            <td>${res_data[i].form_binggo_created_at}</td>
                            <td>
                                <a href="{{ route('crm.edit') }}?id=${res_data[i].form_binggo_id}" class="btn btn-warning btn-sm"><i class="fas fa-edit"></i></a>
                                <button class="btn btn-danger btn-sm btn-delete-client" client-id="${res_data[i].form_binggo_id}"><i class="fas fa-trash"></i></button>
                            </td>
                        </tr>
                    `
                    last_id = res_data[i].form_binggo_id;
                }

                $('body').find('tbody').html(table_html);
                $('body').find('.page-link-previous').attr('href', `${page_url}?id=${parseInt(first_id)+25}`);
                $('body').find('.page-link-next').attr('href', `${page_url}?id=${parseInt(last_id)-1}`);
                $('body').find('.nav-pagination').removeClass('d-none');
            }

        }

    })
}
</script>
@endsection