@extends('layouts/base_view')
@section('title'){!! $variables['header_routes'] !!}@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-md-3">
                                <h5 class="mb-0">Item Penukaran Point Pengguna</h5>
                            </div>
                            <div class="col-md-2 ml-auto">
                                <select id="filter-status" class="form-control">
                                    <option value="">All Status</option>
                                    <option value="open">Open</option>
                                    <option value="closed">Closed</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="id_data_table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th width="5%">No</th>
                                    <th>Nama Pengguna</th>
                                    <th>No. HP</th>
                                    <th>Item</th>
                                    <th>Point Digunakan</th>
                                    <th>Status</th>
                                    <th>Tanggal Tukar</th>
                                    <th width="8%" class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
$(function() {
    var table = $('#id_data_table').DataTable({
        processing: true, serverSide: true,
        ajax: {
            url: '{{ route("reward-items.user-items") }}',
            data: function(d) { d.status = $('#filter-status').val(); }
        },
        columns: [
            { data: 0, orderable: false, searchable: false },
            { data: 1 }, { data: 2 }, { data: 3 }, { data: 4 },
            { data: 5, orderable: false },
            { data: 6 },
            { data: 7, orderable: false, searchable: false, className: 'text-center' },
        ],
        responsive: true, lengthChange: true, autoWidth: false,
        buttons: ["copy","csv","excel","pdf","print","colvis"],
    });

    table.buttons().container().appendTo('#id_data_table_wrapper .col-md-6:eq(0)');

    $('#filter-status').change(function() { table.draw(); });

    $(document).on('click', '.btn-close-item', function() {
        var id = $(this).data('id');
        Swal.fire({
            icon: 'question',
            title: 'Tutup item ini?',
            text: 'Status akan berubah menjadi Closed.',
            showCancelButton: true,
            confirmButtonText: 'Ya, tutup',
            cancelButtonText: 'Batal',
        }).then(function(result) {
            if (!result.isConfirmed) return;
            $.ajax({
                url: '/reward-items/user-items/' + id + '/close',
                method: 'POST',
                data: { _token: $('meta[name="csrf-token"]').attr('content') },
                success: function(res) {
                    if (res.success) {
                        Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1500, showConfirmButton: false });
                        table.draw();
                    } else {
                        Swal.fire({ icon: 'error', title: 'Gagal', text: res.message });
                    }
                },
                error: function() {
                    Swal.fire({ icon: 'error', title: 'Error', text: 'Terjadi kesalahan.' });
                }
            });
        });
    });
});
</script>
@endsection