@extends('layouts.backend.index')
@section('title', $label)

@section('content')
<div class="card">
    <div class="card-body">
        <x-section-header
            action="verify"
            :icon="$icon"
            :label="$label"
            description="Fitur untuk verifikasi NPWP Affiliator"
        />

        <div class="table-responsive">
            <table class="table" id="table-affiliator">
                <thead>
                    <tr>
                        <th style="width: 50px;">No</th>
                        <th>Nama</th>
                        <th>No. HP</th>
                        <th>Email</th>
                        <th>Nomor NPWP</th>
                        <th>Foto NPWP</th>
                        <th class="text-center" style="width: 40px;">#</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-photo" tabindex="-1" aria-labelledby="modal-photoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-photoLabel">Foto NPWP</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="{{ asset('images/no-image/npwp.png') }}" class="img-fluid" />
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
<script src="{{ asset('vendor/datatables.net/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>

<script>
$(document).ready(function() {
    window.LaravelDataTables = window.LaravelDataTables || {}
    window.LaravelDataTables["table-affiliator"] = $("#table-affiliator").DataTable({
        dom: 'fltpr',
        language: {
            search: "",
            searchPlaceholder: "Pencarian...",
            lengthMenu: "_MENU_ Data"
        },
        ajax:
        {
            url: "{{ route('user.datatable.verify-npwp') }}",
            type: "POST",
            data: {_token: token}
        },
        processing: true,
        serverSide: true,
        deferRender: true,
        ordering: true,
        order: [[ 1, 'asc' ]],
        aLengthMenu: [[10, 25, 50, 100],[10, 25, 50, 100]],
        drawCallback: function() {
            $(".set-tooltip").tooltip({
                container: "body"
            })
        },
        columns: [
            {
                data: null,
                class: "align-top",
                orderable: false,
                searchable: false,
                render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
            },
            {
                data: "name",
                class: "align-top",
                render: (data, type, row) => htmlEntities(row.name)
            },
            {
                data: "name",
                class: "align-top",
                render: (data, type, row) => phoneFormat(row.phone)
            },
            {
                data: "name",
                class: "align-top",
                render: (data, type, row) => htmlEntities(row.email)
            },
            {
                class: "align-top",
                orderable: false,
                render: (data, type, row) => htmlEntities(row.npwp_number)
            },
            {
                class: "align-top",
                orderable: false,
                render: (data, type, row) => `<a href="javascript:void(0)" class="btn-photo" data-url="${row.npwp_file_url}">Lihat Foto</a>`
            },
            {
                class: "align-top text-center",
                width: "80px",
                orderable: false,
                searchable: false,
                render: (data, type, row) => `<button type="button" class="btn btn-success btn-xs btn-verify set-tooltip" title="Verifikasi" data-id="${row.encrypted_id}">
                        <i class="mdi mdi-check-bold"></i>
                    </button>`
            }
        ]
    })

    $($.fn.dataTable.tables(true)).css('width', '100%')

    $("#table-affiliator").on("click", ".btn-photo", function() {
        $("#modal-photo img").attr("src", $(this).data("url"))
        $("#modal-photo").modal("show")
    })

    $("#table-affiliator").on("click", ".btn-verify", function() {
        const id = $(this).data("id")

        swal({
            title: "KONFIRMASI",
            text: "Apakah Anda yakin NPWP ini sudah benar?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#fe7c96',
            confirmButtonText: "YES",
            cancelButtonText: "CANCEL",
            closeOnConfirm: false,
            closeOnCancel: false,
            showLoaderOnConfirm: true,
        },
        function (confirm) {
            if (confirm) {
                const formData = { _token: token, id }

                $.ajax({
                    type: "POST",
                    url: "{{ route('user.store.verify-npwp') }}",
                    data: formData,
                    dataType: "json",
                    success: function (response) {
                        window.LaravelDataTables["table-affiliator"].ajax.reload()
                        setNotifsuccess(response.message, false)
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        ajaxError(xhr.status)
                    }
                })
            } else {
                swal.close()
            }
        })
    })
})
</script>
@endpush