@extends('layouts.app')

@section('title', 'Data Member')

@section('content')


    <div class="container-fluid">
        <h3><i class="fa-solid fa-users"></i> Data Member</h3>

        <div class="card">
            <div class="card-body">
                {{-- pencarian --}}
                <div class="row">
                    <div class="col-md-12">
                        <div class="input-group">
                            <select class="form-select form-select-lg" id="kategori" style="flex:0 0 180px;">
                                <option value="name">Nama</option>
                                <option value="email">Email</option>
                            </select>

                            <input type="text" id="kolom" class="form-control form-control-lg" placeholder="Cari member">

                            <button class="btn btn-primary btn-lg" type="button" id="btn-search">
                                <i class="fa fa-search"></i> Cari
                            </button>

                            <button class="btn btn-success btn-lg" type="button" id="btn-show-all">
                                <i class="fa fa-bars"></i> Semua
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mt-4" style="display: none;">
            <div class="card-body">

                <div class="table-responsive">
                    <table class="table table-bordered table-hover w-100" id="datatable">
                        <thead>
                            <tr>
                                <th>&nbsp;</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Country</th>
                                <th>City</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        let table;

        $(document).ready(function () {
            table = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                deferLoading: 0,
                searching: false,
                paging: true,
                lengthChange: false,
                ajax: {
                    url: "{{ route('member.list') }}",
                    type: "POST",
                    data: function (d) {
                        // yajra DataTables expects: start, length, draw, and optionally for custom filter - just merge everything needed
                        d.page = (d.start / d.length) + 1;
                        d.limit = d.length;
                        d.sort_by = d.columns[d.order[0].column].name || 'name';
                        d.sort_dir = d.order[0].dir;

                        d.search_value = $('#kolom').val();
                        d.search_field = $('#kategori').val();
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Authorization': 'Bearer ' + @json($apiToken)
                    },
                    beforeSend: function (xhr) {
                        $.blockUI({
                            message: '<h4><i class="fa fa-spinner fa-spin"></i> Memuat data...</h4>',
                            css: {
                                border: 'none',
                                padding: '15px',
                                backgroundColor: '#000',
                                '-webkit-border-radius': '10px',
                                '-moz-border-radius': '10px',
                                opacity: .5,
                                color: '#fff'
                            }
                        });
                    },
                    dataSrc: 'data',
                    complete: function () {
                        $.unblockUI();
                    }
                },
                columns: [
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'phone', name: 'phone' },
                    { data: 'country', name: 'country' },
                    { data: 'city', name: 'city' },
                    { data: 'status', name: 'status' },
                ],
                order: [[1, 'asc']],
                error: function (xhr, error, thrown) {
                    $.unblockUI();
                    alert('Error: ' + xhr.status + ' - ' + xhr.statusText);
                }
            });
        });

        function loadTable() {
            table.ajax.reload(function () {
                $('#datatable').closest('.card').show();
            });
        }

        $('#btn-search').click(function () {
            if ($('#kolom').val().trim() === '') {
                alert('Masukkan kata kunci pencarian');
                return;
            }
            table.page('first');
            loadTable();
        });

        $('#btn-show-all').click(function () {
            $('#kolom').val('');
            loadTable();
        });

        $('#kolom').on('keyup', function (e) {
            if (e.keyCode == 13) {
                loadTable();
            }
        });

        function hapus(member_id) {
            Swal.fire({
                title: 'Hapus Data Member',
                text: 'Apakah anda yakin?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, hapus',
                cancelButtonText: 'Batal',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('member.hapus') }}",
                        type: "POST",
                        data: { member_id: member_id },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'Authorization': 'Bearer ' + @json($apiToken)
                        },
                    }).done(function (response) {
                        Swal.fire({
                            text: response?.content?.message ?? 'Hapus data member berhasil',
                            icon: 'success',
                        }).then(() => {
                            // reload table
                            loadTable();
                        });

                    }).fail(function (xhr, error, thrown) {
                        Swal.fire({
                            text: xhr?.responseJSON?.content?.message ?? 'Terjadi kesalahan saat menghapus data member',
                            icon: 'error',
                        });
                    });
                }
            });
        }
    </script>

@endsection