@extends('layouts.affiliatorlayout')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/datatables/datatables.min.css') }}">
@endsection

@section('content')
<div class="flex-1 p-4 lg:p-6 overflow-y-auto">
    <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('beranda') }}"
                    class="inline-flex items-center text-xs text-primary hover:text-primary-dark">Beranda</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">Komisi Affiliator</a>
                </div>
            </li>
        </ol>
    </div>

    {{-- Stats Cards --}}
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 lg:gap-6 mb-6">
        <div
            class="relative flex items-center justify-between bg-gradient-to-r from-[#F37335] to-[#FDC830] px-4 py-6 rounded-xl">
            <div class="w-full flex justify-between items-center">
                <div class="w-9/12">
                    <p class="text-sm text-white">Komisi Dalam Proses</p>
                    <h3 class="mt-1 text-xl font-bold text-white whitespace-normal">
                        Rp {{ number_format($komisiSedangProses, 0, ',', '.') }}
                    </h3>
                </div>
                <img src="{{ asset('images/komisi-proses.webp') }}" alt="saldo dana"
                    class="absolute right-2 top-4 w-20">
            </div>
        </div>
        <div
            class="relative flex items-center justify-between bg-gradient-to-r from-[#56ab2f] to-[#a8e063] px-4 py-6 rounded-xl">
            <div class="w-full flex justify-between items-center">
                <div class="w-9/12">
                    <p class="text-sm text-white">Komisi Belum Ditagih</p>
                    <h3 class="mt-1 text-xl font-bold text-white whitespace-normal">
                        Rp {{ number_format($komisiBelumDitagih, 0, ',', '.') }}
                    </h3>
                </div>
                <img src="{{ asset('images/komisi-belum-ditagih.webp') }}" alt="saldo dana"
                    class="absolute right-1 top-1 w-24">
            </div>
        </div>
        <div
            class="relative flex items-center justify-between bg-gradient-to-r from-blue-500 to-cyan-500 px-4 py-6 rounded-xl">
            <div class="w-full flex justify-between items-center">
                <div class="w-9/12">
                    <p class="text-sm text-white">Komisi Belum Dibayar</p>
                    <h3 class="mt-1 text-xl font-bold text-white truncate">
                        Rp {{ number_format($komisiBelumDibayar, 0, ',', '.') }}
                    </h3>
                </div>
                <img src="{{ asset('images/saldo-dana.webp') }}" alt="saldo dana" class="absolute right-2 top-4 w-20">
            </div>
        </div>
        <div
            class="relative flex items-center justify-between bg-gradient-to-r from-[#2A7B9B] to-[#57C785] px-4 py-6 rounded-xl">
            <div class="w-full flex justify-between items-center">
                <div class="w-9/12">
                    <p class="text-sm text-white">Komisi Sudah Dibayar</p>
                    <h3 class="mt-1 text-xl font-bold text-white truncate">
                        Rp {{ number_format($komisiTerklaim,0,',','.') }}
                    </h3>
                </div>
                <img src="{{ asset('images/komisi-dana.webp') }}" alt="saldo dana" class="absolute right-0 top-3 w-20">
            </div>
        </div>
    </div>
    {{-- End Stats Cards --}}


    <div class="mb-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">Tagihan Komisi</h2>
            @if($notif == true)
            <a class="btn btn-primary flex items-center gap-2 px-6" href="{{ route('affiliator.editProfile') }}"><i
                    class="fas fa-plus"></i>
                Tagih Komisi
            </a>
            @else
            <a class="btn btn-primary flex items-center gap-2 px-6" href="{{ route('affiliator.listTagihan') }}"><i
                    class="fas fa-plus"></i>
                Tagih Komisi
            </a>
            @endif

        </div>
        <table id="tableCostCommision" class="hover w-full text-sm text-left text-gray-500">
            <thead>
                <tr>
                    <th>Nomor Tagihan</th>
                    <th>Total Tagihan</th>
                    <th>Status Tagihan</th>
                    <th>Aksi</th>
                </tr>
            </thead>

        </table>
    </div>



    {{-- Tabel Komisi Affiliator --}}
    <div class="mb-6 py-6 bg-white rounded-xl shadow-custom relative overflow-x-auto">
        <div class="px-6 pb-8">
            <h2 class="text-lg font-semibold text-gray-800">Komisi Affiliator</h2>
        </div>
        <table id="tableCommision" class="hover w-full text-sm text-left text-gray-500">
            <thead>
                <tr>
                    <th>Detail Buku</th>
                    @if($flagParent == 0 || ($flagParent == 1 && $kodeParent != null))

                    <th>Order ID</th>
                    @endif
                    @if($flagParent == 1)
                    <th>Affiliator</th>
                    @endif
                    <th>Tanggal Transaksi</th>
                    <th>Harga Transaksi</th>
                    <th>Status</th>
                    <th>Presentase Komisi</th>
                    <th>Jumlah Komisi</th>
                </tr>
            </thead>

        </table>
    </div>
    {{-- End Tabel Komisi Affiliator --}}

    {{-- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 mb-6">
        <div
            class="flex items-center justify-between bg-gradient-to-br from-green-200 to-white rounded-xl p-6 border border-green-500 shadow-custom">
            <div class="w-full flex justify-between items-center">
                <div>
                    <p class="text-sm text-green-500 mb-1">Komisi Keseluruhan</p>
                    <h3 class="text-2xl font-bold text-green-500">
                        Rp {{ number_format($komisiKeseluruhan, 0, ',', '.') }}
                    </h3>
                </div>
                <div class="flex items-center justify-center w-12 h-12 bg-green-200 p-3 rounded-full text-green-600">
                    <i class="fas fa-money-bill-wave text-xl"></i>
                </div>
            </div>
        </div>

        <div
            class="flex items-center justify-between bg-gradient-to-br from-indigo-200 to-white rounded-xl p-6 border border-indigo-500 shadow-custom">
            <div class="w-full flex items-center justify-between">
                <div>
                    <p class="text-sm text-indigo-500 mb-1">Komisi Terklaim</p>
                    <h3 class="text-2xl font-bold text-indigo-500">
                        Rp {{ number_format($komisiTerklaim, 0,',','.') }}
                    </h3>
                </div>
                <div class="flex items-center justify-center w-12 h-12 bg-indigo-200 p-3 rounded-full text-indigo-600">
                    <i class="fas fa-money-bill-wave text-xl"></i>
                </div>
            </div>
        </div>


    </div> --}}

</div>

@endsection

@section('javascript')
<script src="{{ asset('plugins/datatables/datatables.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script>
    $(document).ready( function () {
        let flagParent = '{{ $flagParent }}';
        let kodeParent = '{{ $kodeParent }}';

        
        let columns = [
            {
                data: null,
                render: function (data, type, row) {
                    return `
                        <div class="flex items-center gap-2">
                            <div class="flex-none w-20 h-20 bg-cover bg-no-repeat bg-top rounded-lg" 
                                style="background-image: url('https://kubuku.id/api/generic/showCover/${row.kode_konten}')"
                                onerror="this.src='{{ asset('images/ph-bacabuku.webp') }}'">
                            </div>
                            <div class="text-left">
                                <h3 class="text-black text-sm font-medium">${row.judul || 'Judul tidak tersedia'}</h3>
                                <div class="text-xs text-gray-500">${row.penulis || 'Penulis tidak tersedia'}</div>
                                <div class="text-xs text-gray-500">${row.penerbit || 'Penerbit tidak tersedia'}</div>
                                <div class="text-xs text-gray-500">Rp. ${row.harga || 'Rp. 0'}</div>
                            </div>
                        </div>
                    `;
                }
            },
        ];

        if (flagParent == 0 || (flagParent == 1 && kodeParent )) {
            columns.push({
                data: 'order_id',
                render: function(data) {
                    return data || '-';
                }
            });
        }

        if (flagParent == 1) {
            columns.push({
                data: 'nama',
                render: function(data) {
                    return data || '-';
                }
            });
        }


        // Kolom lain
        columns.push(
            {
                data: 'tgl_input',
                render: function(data) {
                    if (!data) return '-';
                    const options = { day: 'numeric', month: 'long', year: 'numeric' };
                    return new Date(data).toLocaleDateString('id-ID', options);
                }
            },
            {
                data: 'total',
                render: function(data) {
                    return data ? `Rp ${parseInt(data).toLocaleString('id-ID')}` : 'Rp. 0';
                }
            },
            {
                data: 'sts',
                render: function(data, type, row) {
                    let daysDiff = 0;
                    if (data == 0 && row.tgl_input) {
                        const inputDate = new Date(row.tgl_input);
                        const today = new Date();
                        daysDiff = Math.floor((today - inputDate) / 86400000);
                    }

                    let statusText = 'Unknown';
                    let statusClass = 'bg-gray-100 text-gray-800';
                    
                    if (data == 1) {
                        statusText = 'Sudah Dibayar';
                        statusClass = 'bg-green-100 text-green-800';
                    } else if (data == 2) {
                        statusText = 'Gagal';
                        statusClass = 'bg-red-100 text-red-800';
                    } else if (data == 0) {
                        if (daysDiff <= 7) {
                            statusText = 'Dalam Proses';
                            statusClass = 'bg-blue-100 text-blue-800';
                        } else if (row.id_tagihan === null || row.id_tagihan === undefined) {
                            statusText = 'Belum Ditagih';
                            statusClass = 'bg-yellow-100 text-yellow-800';
                        } else {
                            statusText = 'Belum Dibayar';
                            statusClass = 'bg-orange-100 text-orange-800';
                        }
                    }

                    return `<span class="px-2 py-1 text-xs font-medium rounded-full ${statusClass}">
                                ${statusText}
                            </span>`;
                }
            },
            {
                data: 'persentase_komisi',
                render: function(data) {
                    return data ? `${data}%` : '0%';
                }
            },
            {
                data: 'nominal_komisi',
                render: function(data) {
                    return data ? `Rp${parseInt(data).toLocaleString('id-ID')}` : 'Rp0';
                }
            }
        );

        $('#tableCommision').DataTable({
            processing: true,
            serverSide: false,
            scrollX: true,
            ajax: {
                url: "{{ route('data.dataKomisi') }}",
                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)",
                lengthMenu: "Tampilkan _MENU_ data",
                loadingRecords: "Memuat...",
                processing: "Memproses...",
                search: "Cari:",
                zeroRecords: "Tidak ditemukan data yang cocok",
            },
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Semua"]],
            columns: columns,
            searching: true,
            order: [[2, 'desc']], 
        });



         $('#tableCostCommision').DataTable({
            processing: true,
            serverSide: false,
            scrollX: true,
            ajax: {
                url: "{{ route('data.dataTagihanKomisi') }}",
                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)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Tampilkan _MENU_ data",
                "loadingRecords": "Memuat...",
                "processing": "Memproses...",
                "search": "Cari:",
                "zeroRecords": "Tidak ditemukan data yang cocok",
            },
            // pageLength: 2, 
            lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "Semua"]], 
            columns: [
                
                {
                    data: 'nomor_tagihan',
                    render: function(data) {
                        return data || '-';
                    }
                },
                {
                    data: 'total',
                    render: function(data) {
                        return data ? `Rp ${parseInt(data).toLocaleString('id-ID')}` : 'Rp. 0';
                    }
                },
               {
                    data: 'sts',
                    render: function(data, type, row) {
                        switch (data) {
                            case '0':
                                return '<span class="badge bg-warning">Belum Diproses</span>';
                            case '1':
                                return '<span class="badge bg-success">Sudah Dibayar</span>';
                            case '2':
                                return '<span class="badge bg-secondary">Cancel</span>';
                            case '3':
                                return '<span class="badge bg-danger">Ditolak</span>';
                            default:
                                return '<span class="badge bg-light">Unknown</span>';
                        }
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        if (row.sts === '0') {
                            return `<button onclick="CancelUrl('${row.id}', this)"
                                    class="flex items-center py-1 px-3 whitespace-nowrap inline-block text-xs text-center rounded-md gap-1 bg-yellow-500/20 text-yellow-500 hover:text-yellow-700 transition-colors">
                                    <i class="fas fa-close"></i> Cancel
                                </button>`;
                        } else {
                            return `<span class="text-gray-500 text-xs italic">Data sudah ${getStatusText(row.sts)}</span>`;
                        }
                    }
                }

            ],
            searching: true,
            order: [[2, 'desc']], // Default sort by transaction date descending
        });
        
        $('#copy-text-link').on('click', function() {
            notyf.success('Teks berhasil disalin!');
        })
    } );

  function getStatusText(sts) {
    switch (sts) {
        case '1':
            return 'dibayar';
        case '2':
            return 'dibatalkan';
        case '3':
            return 'ditolak';
        default:
            return 'diproses';
    }
    }

// Fungsi ini harus berada DI LUAR dari fungsi lain
function CancelUrl(id, button) {
    
    if (!confirm('Apakah Anda yakin ingin membatalkan tagihan?')) {
        return;
    }

    const row = button.closest('tr');
    const originalHtml = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    button.disabled = true;

    fetch('{{ route("affiliator.cancelUrl") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ id: id })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            notyf.success(data.message);
                        $('#tableCostCommision').DataTable().ajax.reload();

            // button.outerHTML = `<span class="text-gray-500 text-xs italic">Data sudah Dibatalkan</span>`;
        } else {
            notyf.error(data.message);
            throw new Error(data.message);
        }
    })
    .catch(error => {
        notyf.error(error.message || 'Terjadi kesalahan saat membatalkan tagihan');
        console.error('Error:', error);
    })
    .finally(() => {
        if (button.parentNode) {
            button.innerHTML = originalHtml;
            button.disabled = false;
        }
    });
}



</script>
@endsection