@extends('layouts.affiliatorlayout')

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link rel="stylesheet" href="{{ asset('plugins/datatables/datatables.min.css') }}">
@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('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.komisi') }}"
                        class="ms-1 text-xs text-primary hover:text-primary-dark md:ms-2">Komisi</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">List Tagihan</a>
                </div>
            </li>
        </ol>
    </div>
    {{-- End Breadcrumb --}}
    <div>
        <!-- Bulk Actions -->
        <div class="bulk-actions" id="bulkActions">
            <div class="selection-count" id="selectedCount">0 item dipilih</div>
            <div class="flex space-x-2">
                <button id="addSelectedBtn" class="btn-sm btn-primary flex items-center gap-2" data-twe-ripple-init
                    data-twe-ripple-color="light">
                    <i class="fas fa-plus"></i> <span>Tambahkan</span>
                </button>
                <button onclick="clearSelection()" class="btn-sm btn-outline flex items-center gap-2"
                    data-twe-ripple-init data-twe-ripple-color="primary">
                    <i class="fas fa-times"></i> <span>Batalkan</span>
                </button>
            </div>
        </div>

        <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">List Tagihan</h2>
            </div>
            <table id="tableListKonten" class="hover w-full text-sm text-left text-gray-500">
                <thead>
                    <tr>
                        <th style="width: 50px;" class="no-sort">
                            <div class="checkbox-container">
                                <div id="selectAll" class="custom-checkbox"></div>
                            </div>
                        </th>
                        <th>Detail Konten</th>
                        <th>Nominal Komisi</th>
                        <th style="width: 120px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTable will populate this -->
                </tbody>
            </table>
        </div>
    </div>
</main>
@endsection

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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 src="{{ asset('plugins/datatables/datatables.min.js')}}"></script>
<script>
    // Global variables
    let selectedItems = new Set();
    let dataTable;
    
    $(document).ready(function() {
        dataTable = $('#tableListKonten').DataTable({
            processing: true,
            serverSide: false,
            scrollX: true,
            ajax: {
                url: "{{ route('data.dataListTagihan') }}",
                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",
            },
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Semua"]],
            // order: [[1, 'asc']],
            columns: [
                {
                    data: 'id_komisi',
                    orderable: false,
                    render: function(data, type, row) {
                        return `<div class="checkbox-container">
                                    <div class="custom-checkbox content-checkbox" data-konten="${data}"></div>
                                </div>`;
                    }
                },
                {
                    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="mt-1 text-xs font-medium text-primary">${row.harga ? 'Rp' + parseInt(row.harga).toLocaleString('id-ID') : 'Rp0'}</div>
                                </div>
                            </div>
                        `;
                    }
                },{
                    data: 'nominal_komisi',
                      render: function(data, type, row) {
                        return data

                      }
                },
                {
                    data: 'id_komisi',
                    render: function(data, type, row) {
                        return `
                            <button onclick="addSingleItem('${data}')" class="action-btn add-btn flex items-center gap-2 btn-sm btn-primary">
                                <i class="fas fa-plus"></i> <span>Tambah</span>
                            </button>
                        `;
                    }
                }
            ],
            createdRow: function(row, data, dataIndex) {
                // Add data-konten attribute to the row
                $(row).attr('data-konten', data.kode_konten);
                
                // Initialize checkbox event
                $(row).find('.content-checkbox').on('click', function() {
                    const kontenId = $(this).data('konten');
                    
                    if ($(this).hasClass('checked')) {
                        $(this).removeClass('checked');
                        selectedItems.delete(kontenId);
                    } else {
                        $(this).addClass('checked');
                        selectedItems.add(kontenId);
                    }
                    
                    updateSelectionUI();
                });
            },
            drawCallback: function() {
                // Re-apply checked state after table redraw
                $('.content-checkbox').each(function() {
                    const kontenId = $(this).data('konten');
                    if (selectedItems.has(kontenId)) {
                        $(this).addClass('checked');
                    } else {
                        $(this).removeClass('checked');
                    }
                });
                
                // Update select all checkbox state
                updateSelectAllCheckbox();
            },
            searching: true,
        });

        // Select all checkbox event
        $('#selectAll').on('click', function() {
            const isChecked = !$(this).hasClass('checked');
            
            $('.content-checkbox').each(function() {
                const kontenId = $(this).data('konten');
                if (isChecked) {
                    $(this).addClass('checked');
                    selectedItems.add(kontenId);
                } else {
                    $(this).removeClass('checked');
                    selectedItems.delete(kontenId);
                }
            });
            
            $(this).toggleClass('checked', isChecked);
            updateSelectionUI();
        });
        
        // Bulk add button event
        $('#addSelectedBtn').on('click', function() {
            if (selectedItems.size > 0) {
                addItemsToUrlList(Array.from(selectedItems));
            } else {
                Swal.fire({
                    icon: 'info',
                    title: 'Peringatan',
                    text: 'Pilih setidaknya satu konten untuk ditambahkan',
                    confirmButtonColor: '#FFA503'
                });
            }
        });
    });
    
    // Update select all checkbox state
    function updateSelectAllCheckbox() {
        const allCheckboxes = $('.content-checkbox');
        const checkedCount = $('.content-checkbox.checked').length;
        
        if (checkedCount > 0 && checkedCount === allCheckboxes.length) {
            $('#selectAll').addClass('checked');
        } else {
            $('#selectAll').removeClass('checked');
        }
    }
    
    // Update selection UI
    function updateSelectionUI() {
        const countElement = $('#selectedCount');
        const bulkActions = $('#bulkActions');
        
        countElement.text(`${selectedItems.size} item dipilih`);
        
        if (selectedItems.size > 0) {
            bulkActions.addClass('active');
        } else {
            bulkActions.removeClass('active');
        }
        
        updateSelectAllCheckbox();
    }
    
    // Clear selection
    function clearSelection() {
        selectedItems.clear();
        $('.content-checkbox').removeClass('checked');
        $('#selectAll').removeClass('checked');
        updateSelectionUI();
    }
    
    // Add single item
    function addSingleItem(kontenId) {
        addItemsToUrlList([kontenId]);
    }
    
    // Add multiple items
    function addItemsToUrlList(kontenIds) {

        const button = $('#addSelectedBtn');
        const originalText = button.html();
        
        // Show loading
        button.html('<i class="fas fa-spinner fa-spin"></i> <span>Memproses...</span>');
        button.prop('disabled', true);
        
        // Get CSRF token
        const csrfToken = $('meta[name="csrf-token"]').attr('content');
        
        // Make API request
        $.ajax({
            url: "{{ route('affiliator.storeListTagihan') }}",
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            data: JSON.stringify({
                id_komisi: kontenIds
            }),
            contentType: 'application/json',
            success: function(data) {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: data.message,
                        showConfirmButton: false,
                        timer: 2000,
                        timerProgressBar: true,
                        didClose: () => {
                            // Refresh tabel saja tanpa reload seluruh halaman
                            dataTable.ajax.reload(null, false); // Parameter false untuk mempertahankan halaman saat ini
                        }
                    });
                    
                    clearSelection();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: data.message || 'Terjadi kesalahan',
                        confirmButtonColor: '#FFA503'
                    });
                }
            },
            error: function(error) {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Terjadi kesalahan saat menyimpan data',
                    confirmButtonColor: '#FFA503'
                });
            },
            complete: function() {
                button.html(originalText);
                button.prop('disabled', false);
            }
        });
    }
</script>
@endsection