@extends('layouts.affiliatorlayout')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/datatables/datatables.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/apexcharts/apexcharts.css')}}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>
@endsection

@section('content')
<main class="flex-1 p-4 lg:p-6 overflow-y-auto">
    {{-- Breadcrumb --}}
    <div class="mb-6 flex text-gray-700" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
            <li class="inline-flex items-center">
                <a href="{{ route('admin.affiliator') }}"
                    class="inline-flex items-center text-xs text-primary hover:text-primary-dark">Dashboard
                    Affiliator</a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <a href="#" class="ms-1 text-xs  md:ms-2">Affiliator</a>
                </div>
            </li>
        </ol>
    </div>
    {{-- End Breadcrumb --}}




    <div class="my-6 py-6 bg-white rounded-xl shadow-custom relative overflow-x-auto">

        <div class="flex items-center justify-between p-6">
            <h2 class="text-lg font-semibold text-gray-800">Data Affiliator</h2>
            <a class="btn btn-primary flex items-center gap-2 px-6" href="{{ route('tambah.Affiliator') }}"><i
                    class="fas fa-plus"></i>
                Tambah
            </a>
        </div>
        <table id="tableAffiliator" class="hover w-full text-sm text-left text-gray-500">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                <tr>
                    <th>Email</th>
                    <th>Persentase Komisi</th>
                    <th>Jumlah Transaksi</th>
                    <th>Total Komisi Affiliator</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</main>


@endsection

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>

{{-- <script src=" {{ asset('js/tw-elements.umd.min.js') }}"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="{{ asset('plugins/datatables/datatables.min.js')}}"></script>
<script src="{{ asset('plugins/apexcharts/apexcharts.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script>
    // Ensure jQuery document ready wraps all jQuery code
    $(document).ready(function() {
        // Initialize DataTable only if the element exists
        if ($('#tableAffiliator').length) {
            const table = $('#tableAffiliator').DataTable({
                processing: true,
                serverSide: false,
                scrollX: true,
                ajax: {
                    url: "{{ route('data.dataAffiliator') }}",
                    type: 'GET',
                    dataSrc: 'data',
                },
                language: {
                    decimal: "",
                    emptyTable: "Tidak ada data yang tersedia",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    infoFiltered: "(disaring dari _MAX_ total data)",
                    thousands: ",",
                    lengthMenu: "Tampilkan _MENU_ data",
                    loadingRecords: "Memuat...",
                    processing: "Memproses...",
                    search: "Cari:",
                    zeroRecords: "Tidak ditemukan data yang cocok",
                },
                columns: [
                    {
                        data: 'email',
                        render: function(data) {
                            return data || 'Email tidak tersedia';
                        }
                    },
                    {
                        data: 'persentase_komisi',
                        render: function(data) {
                            return data + '%'|| '0%';
                        }
                    },
                    {
                        data: 'jumlah_penjualan',
                        render: function(data) {
                            return data || '0';
                        }
                    },
                    {
                        data: 'total_komisi',
                        render: function(data) {
                            return data ? `Rp. ${parseInt(data).toLocaleString('id-ID')}` : 'Rp. 0';
                        }
                    },
                    {
                        data: null,
                        render: function (data, type, row) {
                            const id = row.id ? encodeURIComponent(row.id) : '';
                            const kode_pengguna = row.kode_pengguna ? encodeURIComponent(row.kode_pengguna) : '';

                            return `
                                <div class="flex items-center gap-2">
                                    <button
                                        type="button"
                                        class="btn-delete flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg border border-red-200 text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-700 transition-colors duration-200"
                                        data-id="${id}"
                                        data-kode="${kode_pengguna}"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="3 6 5 6 21 6"></polyline>
                                            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
                                            <path d="M10 11v6"></path>
                                            <path d="M14 11v6"></path>
                                            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
                                        </svg>
                                        <span>Hapus</span>
                                    </button>
                                </div>
                            `;
                        }
                    }
                ],
                searching: true,
                order: [[0, 'asc']],
            });
        }

        function initTooltips() {
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-twe-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new twe.Tooltip(tooltipTriggerEl);
            });
        }

        initTooltips();
        
        // Fungsi untuk inisialisasi ulang tombol modal
       function initModalTriggers() {
            $('.btn-modal-share').off('click').on('click', function () {
                const id = $(this).data('id');
                const kode_pengguna = $(this).data('kode');

                // simpan sementara di modal (pakai data-attribute)
                $('#modalShare').data('id', id);
                $('#modalShare').data('kode', kode_pengguna);

                // tampilkan modal
                const modal = new twe.Modal(document.getElementById('modalShare'));
                modal.show();
            });
        }

        initModalTriggers();

        $('#tableAffiliator').on('draw.dt', function () {
            initTooltips();
            initModalTriggers();
        });


    });

        // Global function untuk hapus affiliator
        $(document).on("click", ".btn-delete", function () {
            const id = $(this).data("id");
            const kode_pengguna = $(this).data("kode");

            Swal.fire({
                title: "Konfirmasi Hapus",
                text: "Apakah kamu yakin ingin menghapus affiliator dari daftar?",
                showCancelButton: true,
                confirmButtonColor: "#e3342f",
                cancelButtonColor: "#6c757d",
                confirmButtonText: "Ya, hapus",
                cancelButtonText: "Batal"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('delete.Affiliator') }}",
                        type: "POST",
                        data: {
                            id: id,
                            kode_pengguna: kode_pengguna,
                            _token: $('meta[name="csrf-token"]').attr("content")
                        },
                        success: function (response) {
                           if (response.success) {
                                Swal.fire({
                                    icon: "success",
                                    title: "Berhasil",
                                    text: response.msg,
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                                $('#tableAffiliator').DataTable().ajax.reload(null, false);
                            } else {
                                Swal.fire("Gagal!", response.msg, "error");
                            }
                        },
                        error: function (xhr) {
                            console.error(xhr.responseText);
                            Swal.fire("Error!", "Terjadi kesalahan pada server.", "error");
                        }
                    });
                }
            });
        });




    // Clipboard initialization
    if (document.querySelector('.copy-btn')) {
        const clipboard = new ClipboardJS('.copy-btn', {
            text: function(trigger) {
                return trigger.getAttribute('data-clipboard-text');
            }
        });

        clipboard.on('success', function(e) {
            const trigger = e.trigger;
            trigger.innerHTML = '<i class="fas fa-check"></i>';
            trigger.classList.add('copied');
            setTimeout(() => {
                trigger.innerHTML = '<i class="far fa-copy"></i>';
                trigger.classList.remove('copied');
            }, 1000);
        });

        clipboard.on('error', function(e) {
            alert('Gagal menyalin teks. Silakan salin manual.');
        });
    }
    


    //  function closeModal() {
    //     const modal = document.getElementById('modalShare');
    //     modal.classList.add('hidden');
    // }






</script>
@endsection