@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">
    {{-- 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('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="{{ route('affiliator.admin') }}"
                        class="ms-1 text-xs text-primary hover:text-primary-dark md:ms-2">Dashboard</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    <a href="{{ route('affiliator.performa') }}"
                        class="ms-1 text-xs text-primary hover:text-primary-dark md:ms-2">Performa</a>
                </div>
            </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">Detail Transaksi Affiliator</a>
                </div>
            </li>
        </ol>
    </div>
    {{-- End Breadcrumb --}}
    <div class="bg-white rounded-xl shadow-custom p-6 mb-6">
        <!-- Book Info Section -->
        <div class="flex flex-col md:flex-row gap-6 mb-8">
            <!-- Book Cover -->
            <div class="flex-shrink-0">
                <a href="https://bacabuku.info/{{ $alias }}" target="_blank"
                    class="block hover:opacity-90 transition-opacity">
                    <img class="h-48 w-32 rounded-lg object-cover shadow-md border border-gray-100"
                        src="https://kubuku.id/api/generic/showCover/{{ $konten->kode_konten }}"
                        alt="Cover buku {{ $konten->judul }}">
                </a>
            </div>

            <!-- Book Details -->
            <div class="flex-1">
                <a href="https://bacabuku.info/{{ $konten->alias }}" target="_blank"
                    class="text-xl font-bold text-gray-900 hover:text-primary transition-colors mb-1 inline-block">
                    {{ $konten->judul }}
                </a>

                <div>
                    <div class="text-sm text-gray-500">{{ $konten->penulis }}</div>
                    <div class="text-sm text-gray-500">{{ $konten->penerbit }}</div>
                    <div class="mt-1 flex items-center">
                        <span class="text-lg font-semibold text-primary">
                            Rp {{ number_format($konten->harga, 0, ',', '.') }}
                        </span>
                    </div>
                </div>
                <!-- URL Card -->
                <a href="https://bacabuku.info/{{ $alias }}" target="_blank"
                    class="mt-6 inline-block bg-primary/20 text-primary rounded-xl py-2 px-3 transition-all duration-200 ease-in-out hover:bg-primary hover:text-white">
                    <div class="flex justify-between items-center gap-2">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M36.6666 20C36.6666 29.2048 29.2047 36.6667 19.9999 36.6667M36.6666 20C36.6666 10.7953 29.2047 3.33337 19.9999 3.33337M36.6666 20C36.6666 17.2386 29.2047 15 19.9999 15C10.7952 15 3.33325 17.2386 3.33325 20M36.6666 20C36.6666 22.7615 29.2047 25 19.9999 25C10.7952 25 3.33325 22.7615 3.33325 20M19.9999 36.6667C10.7952 36.6667 3.33325 29.2048 3.33325 20M19.9999 36.6667C23.6818 36.6667 26.6666 29.2048 26.6666 20C26.6666 10.7953 23.6818 3.33337 19.9999 3.33337M19.9999 36.6667C16.318 36.6667 13.3333 29.2048 13.3333 20C13.3333 10.7953 16.318 3.33337 19.9999 3.33337M3.33325 20C3.33325 10.7953 10.7952 3.33337 19.9999 3.33337"
                                stroke="currentColor" stroke-width="2.5" />
                        </svg>


                        <div>
                            <p class="text-sm">Affiliate URL</p>
                            <h3 class="font-medium">
                                bacabuku.info/{{ $alias }}
                            </h3>
                        </div>
                        {{-- <div class="w-3/12 flex justify-end">
                            <div
                                class="flex flex-none items-center justify-center w-12 h-12 bg-indigo-200 p-3 rounded-xl text-indigo-500">
                                <i class="fas fa-mouse-pointer text-xl"></i>
                            </div>
                        </div> --}}

                    </div>
                </a>
            </div>
        </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" id="dalamProses">
                            Rp. 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" id="belumDitagih">
                            {{-- 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" id="belumDibayar">
                            Rp 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" id="komisiTerklaim">
                            Rp 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>

    <div class="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">Transaksi</h2>
        </div>
        <table id="tableTransaction" class="hover w-full text-sm text-left text-gray-500">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Tanggal Transaksi</th>
                    <th>Harga Transaksi</th>
                    <th>Status</th>
                    <th>Jumlah Komisi</th>
                </tr>
            </thead>
            <tbody>

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

</div>
@endsection

@section('javascript')
<script src="{{ asset('plugins/datatables/datatables.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script>
    $(document).ready(function() {
    const alias = "{{ $alias }}"; 

    $('#tableTransaction').DataTable({
        scrollX: true,
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('data.dataTransaksiAffiliator') }}",
            type: 'GET',
            data: {
                alias: alias 
            },
            dataSrc: function(json) {
                    // Format and display the totals
                    if(json.success) {
                        $('#komisiTerklaim').text(
                            'Rp ' + parseFloat(json.komisiTerklaim || 0).toLocaleString('id-ID', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            })
                        );
                        
                        $('#belumDibayar').text(
                            'Rp ' + parseFloat(json.komisiBelumDibayar || 0).toLocaleString('id-ID', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            })
                        );
                        $('#belumDitagih').text(
                            'Rp ' + parseFloat(json.komisiBelumDitagih || 0).toLocaleString('id-ID', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            })
                        );
                        
                        $('#dalamProses').text(
                            'Rp ' + parseFloat(json.komisiDalamProses || 0).toLocaleString('id-ID', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            })
                        );
                    }
                    
                    return json.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",
        },
        columns: [ 
            {
                data: 'order_id',
                render: function(data) {
                    return data || '-';
                }
            },
            {
                data: 'tgl_input',
                render: function(data) {
                    if (!data) return '-';
                    
                    // Buat objek Date dari string
                    const date = new Date(data);
                    
                    // Daftar nama bulan dalam bahasa Indonesia
                    const bulan = [
                        'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                        'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                    ];
                    
                    const day = date.getDate();
                    const monthIndex = date.getMonth();
                    const year = date.getFullYear();
                    const hours = String(date.getHours()).padStart(2, '0');
                    const minutes = String(date.getMinutes()).padStart(2, '0');
                    
                    // Format: "12 Januari 2023 14:30"
                    return `${day} ${bulan[monthIndex]} ${year} ${hours}:${minutes}`;
                }
            },
            {
                data: 'total',
                render: function(data) {
                    
                    return data ? 'Rp' + parseInt(data).toLocaleString('id-ID') : '0';
                }
            },
            {
                    data: 'sts',
                    render: function(data, type, row) {
                        console.log(row.id_tagihan);
                        
                        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: 'nominal_komisi',
                render: function(data) {
                    return data ? 'Rp' + parseFloat(data).toLocaleString('id-ID', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    }) : '-';
                }
            }
        ],
        order: [[1, 'desc']],
        
    });
    
    $('#copy-text-link').on('click', function() {
        notyf.success('Teks berhasil disalin!');
    });
});
</script>
@endsection