@extends('layouts.affiliatorlayout')

@section('head')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.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="#" class="ms-1 text-xs  md:ms-2">Link Tokomu</a>
                </div>
            </li>
        </ol>
    </div>

    <div class="mt-6 md:mt-0">
        <div class="mb-4 bg-gradient-to-r from-primary to-[#FDBB2D] rounded-xl p-6">
            <p class="text-lg mb-3 text-white font-medium">Link Tokomu</p>
            <div class="flex items-stretch gap-2">
                <a href="https://bacabuku.com/link/{{ $kode }}" target="_blank"
                    class="flex-1 bg-white  text-primary hover:text-primary-dark px-4 py-2 rounded-lg text-sm sm:text-base focus:outline-none truncate  hover:border-primary transition-all flex items-center justify-between">
                    <span class="truncate">https://bacabuku.com/link/{{ $kode }}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2 flex-shrink-0" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                </a>
                <button onclick="copyAffiliateLink()" data-twe-ripple-init data-twe-ripple-color="secondary"
                    class="bg-white text-primary px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-center"
                    title="Salin link">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                    </svg>
                </button>
            </div>
        </div>
    </div>




    {{-- End Breadcrumb --}}
    {{-- <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
        <div> --}}
            {{-- <h1 class="text-2xl md:text-3xl font-bold text-gray-800">Link Pilihan</h1>
            <p class="text-gray-600 mt-1">list konten terbaik yang anda pilih.</p> --}}
            {{--
        </div>
        <div class="mt-4 md:mt-0 w-full flex justify-end">
            <a class="btn btn-primary flex items-center gap-2 px-8" href="{{ route('affiliator.listKonten') }}"><i
                    class="fas fa-plus"></i>
                Tambah
            </a>
        </div>
    </div> --}}

    <div class="mt-6 mb-6 bg-white rounded-xl shadow-md overflow-hidden">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800">Update Toko</h2>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left text-gray-600">
                <thead class="bg-gray-100 text-gray-700 uppercase text-xs">
                    <tr>
                        <th class="px-6 py-3">Gambar Toko</th>
                        <th class="px-6 py-3">Judul Toko</th>
                        <th class="px-6 py-3">Deskripsi Toko</th>
                        <th class="px-6 py-3 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4">
                            <img src="{{ asset('storage/logoToko/' . $getAffiliator->imageToko) }}" alt="Gambar Toko"
                                class="w-20 h-20 object-cover rounded-lg shadow-sm">
                        </td>


                        <td class="px-6 py-4">
                            <span class="text-sm font-medium text-gray-900">
                                {{ $getAffiliator->judulToko ?: '-' }}
                            </span>
                        </td>

                        <td class="px-6 py-4">
                            <span class="text-sm text-gray-700">
                                {{ $getAffiliator->deskripsiToko ?: '-' }}
                            </span>
                        </td>

                        {{-- <td class="px-6 py-4 text-center">
                            <button onclick="editToko()"
                                class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium rounded-md bg-blue-100 text-blue-600 hover:bg-blue-200 transition">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                        </td> --}}
                        <td class="px-6 py-4 text-center">
                            <button
                                onclick="editToko(this, '{{ $getAffiliator->kode_pengguna ?? $getAffiliator->kode }}')"
                                class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium rounded-md bg-blue-100 text-blue-600 hover:bg-blue-200 transition">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <div class="mt-6 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">Link Tokomu</h2>
            <a class="btn btn-primary flex items-center gap-2 px-6" href="{{ route('affiliator.listKonten') }}"><i
                    class="fas fa-plus"></i>
                Tambah
            </a>
        </div>
        <table id="tableAffiliasi" class="hover w-full text-sm text-left text-gray-500">
            <thead>
                <tr>
                    <th>Detail Konten</th>
                    <th>Urutan</th>
                    <th>Status List
                        <p class="text-[10px] lowercase font-normal">*Klik status untuk merubah status</p>
                    </th>
                    <th>Aksi</th>
                </tr>
            </thead>
        </table>
    </div>


    <!-- Modal Edit Toko -->
    <div id="editTokoModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg w-full max-w-md shadow-lg p-6 relative">

            <!-- Tombol X untuk close -->
            <button type="button" onclick="closeEditToko()"
                class="absolute top-3 right-3 text-gray-400 hover:text-gray-600">
                ✕
            </button>

            <h3 class="text-lg font-semibold mb-4">Edit Toko</h3>

            <form id="formEditToko" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="kode_pengguna" name="kode_pengguna">

                <div class="mb-3">
                    <label class="block text-sm font-medium">Judul Toko</label>
                    <input type="text" id="judul" name="judul"
                        class="mt-1 block w-full border rounded-md px-3 py-2 text-sm" required>
                </div>

                <div class="mb-3">
                    <label class="block text-sm font-medium">Deskripsi Toko</label>
                    <textarea id="deskripsi" name="deskripsi"
                        class="mt-1 block w-full border rounded-md px-3 py-2 text-sm" rows="3" required></textarea>
                </div>

                <div class="mb-3">
                    <label class="block text-sm font-medium">Gambar Toko</label>
                    <input type="file" id="image" name="image" accept="image/jpeg,image/png,image/webp"
                        class="mt-1 block w-full text-sm border rounded-md px-3 py-2">
                    <p class="text-xs text-gray-500 mt-1">
                        *Jenis file yang diperbolehkan: <span class="font-medium">JPG, JPEG, PNG, WEBP</span><br>
                        *Maksimal ukuran file: <span class="font-medium">2MB</span>
                    </p>
                    <img id="previewImage" src="" alt="Preview" class="mt-2 w-20 h-20 object-cover rounded-md hidden">
                </div>

                <div class="flex justify-end gap-2 mt-4">
                    <button type="button" onclick="closeEditToko()"
                        class="px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100">
                        Batal
                    </button>
                    <button type="submit" class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700">
                        Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>







</main>
@endsection

@section('javascript')
<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="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>

<script src="{{ asset('plugins/datatables/datatables.min.js')}}"></script>

<script>
    /* Utility: pastikan notyf ada */
$.ajaxSetup({
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});

function editToko(button, kode_pengguna) {
    // ambil row dari tombol
    let row = button.closest("tr");
    let judul = row.querySelector("td:nth-child(2) span").innerText.trim();
    let deskripsi = row.querySelector("td:nth-child(3) span").innerText.trim();
    let imageSrc = row.querySelector("td:nth-child(1) img").src;

    // isi form
    if (document.getElementById("kode_pengguna")) document.getElementById("kode_pengguna").value = kode_pengguna;
    if (document.getElementById("judul")) document.getElementById("judul").value = judul;
    if (document.getElementById("deskripsi")) document.getElementById("deskripsi").value = deskripsi;
    if (document.getElementById("previewImage")) {
        document.getElementById("previewImage").src = imageSrc;
        document.getElementById("previewImage").classList.remove("hidden");
    }

    // tampilkan modal (pastikan modal ada dan controllernya sesuai)
    document.getElementById("editTokoModal").classList.remove("hidden");
}

function closeEditToko() {
    document.getElementById("editTokoModal").classList.add("hidden");
}

/* Preview + check size (2MB) */
const imageInput = document.getElementById("image");
const preview = document.getElementById("previewImage");
if (imageInput) {
    imageInput.addEventListener("change", function () {
        let file = this.files[0];
        if (!file) return;

        // batasi 2MB
        if (file.size > 2 * 1024 * 1024) {
            notyf.error("Ukuran file maksimal 2MB");
            this.value = ""; // reset input
            if (preview) {
                preview.src = "";
                preview.classList.add("hidden");
            }
            return;
        }

        let reader = new FileReader();
        reader.onload = function (e) {
            if (preview) {
                preview.src = e.target.result;
                preview.classList.remove("hidden");
            }
        };
        reader.readAsDataURL(file);
    });
}

/* Submit form pakai AJAX dengan handling error yang benar */
$("#formEditToko").submit(function (e) {
    e.preventDefault();

    // ekstra: cek ukuran file lagi sebelum submit
    let fileInput = this.querySelector("#image");
    if (fileInput && fileInput.files[0] && fileInput.files[0].size > 2 * 1024 * 1024) {
        notyf.error("Ukuran file maksimal 2MB");
        return;
    }

    let formData = new FormData(this);
    let $btn = $(this).find("button[type=submit]");

    // ubah tombol jadi loading
    $btn.prop("disabled", true).html(`
        <span class="flex items-center gap-2">
            <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
            </svg>
            Menyimpan...
        </span>
    `);

    $.ajax({
        url: "{{ route('store.AffiliatorToko') }}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (res) {
            if (res && res.success) {
                notyf.success(res.message || "Berhasil disimpan");
                setTimeout(function() {
                    location.reload();
                }, 1000);
            } else {
                notyf.error(res.message || "Gagal update toko");
            }
        },
        error: function (xhr) {
            console.error(xhr);
            if (xhr.status === 413) {
                notyf.error("Ukuran file terlalu besar (melebihi batas server).");
            } else if (xhr.status === 422) {
                // validation errors
                let errors = xhr.responseJSON && xhr.responseJSON.errors ? xhr.responseJSON.errors : null;
                if (errors) {
                    Object.values(errors).forEach(arr => {
                        if (Array.isArray(arr)) notyf.error(arr[0]);
                    });
                } else {
                    notyf.error("Validasi gagal");
                }
            } else {
                let msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : "Terjadi kesalahan server";
                notyf.error(msg);
            }
        },
        complete: function () {
            $btn.prop("disabled", false).text("Simpan");
        }
    });
});
</script>


<script>
    $(document).ready(function() {
        $('#tableAffiliasi').DataTable({
            processing: true,
            serverSide: false,
            scrollX: true,
            ajax: {
                url: "{{ route('data.dataUrlList') }}",
                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']], // Sort by urutan column (column index 1) ascending
            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="mt-1 text-xs font-medium text-primary">${row.harga ? 'Rp' + parseInt(row.harga).toLocaleString('id-ID') : 'Rp0'}</div>
                                </div>
                            </div>
                        `;
                    }
                },
                {
                    data: 'urutan',
                    render: function(data, type, row) {
                        const urlId = row.url_id || 0;
                        const urutan = data || "-";
                        
                        return `
                            <div class="flex items-center gap-2">
                                <button onclick="moveUp(${urlId}, this)"
                                    class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-primary/20 hover:text-primary transition-all duration-200 ease-in-out rounded-md"
                                    id="up-btn-${urlId}">
                                    <i class="fas fa-arrow-up"></i>
                                </button>
                                <button onclick="moveDown(${urlId}, this)"
                                    class="w-8 h-8 flex items-center justify-center text-gray-500 hover:bg-primary/20 hover:text-primary transition-all duration-200 ease-in-out rounded-md"
                                    id="down-btn-${urlId}">
                                    <i class="fas fa-arrow-down"></i>
                                </button>
                                <span class="text-sm font-medium text-gray-900">
                                    ${urutan}
                                </span>
                                <span id="loading-${urlId}" class="hidden text-sm text-gray-500 ml-2">
                                    <i class="fas fa-spinner fa-spin"></i> Memproses...
                                </span>
                            </div>
                        `;
                    }
                },
                {
                    data: 'sts',
                    render: function(data, type, row) {
                        const urlId = row.url_id || 0;
                        const status = data || '0';
                        
                        const statusClass = status === '1' ? 
                            'bg-green-500/20 text-green-500' : 
                            'bg-red-500/20 text-red-500';
                        
                        const statusIcon = status === '1' ? 
                            '<i class="fas fa-check-circle"></i> Aktif' : 
                            '<i class="fas fa-times-circle"></i> Nonaktif';
                        
                        return `
                            <button onclick="toggleStatus(${urlId}, this)" 
                                class="flex items-center py-1 px-3 whitespace-nowrap inline-block text-xs text-center rounded-md gap-1 ${statusClass}"
                                id="status-btn-${urlId}">
                                ${statusIcon}
                            </button>
                        `;
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        const urlId = row.url_id || 0;
                        return `
                            <button onclick="deleteUrl(${urlId}, this)"
                                class="flex items-center py-1 px-3 whitespace-nowrap inline-block text-xs text-center rounded-md gap-1 bg-red-500/20 text-red-500 hover:text-red-700 transition-colors">
                                <i class="fas fa-trash-alt"></i> Hapus
                            </button>
                        `;
                    }
                }
            ],
            createdRow: function(row, data, dataIndex) {
                // Add data-url-id attribute to each row
                $(row).attr('data-url-id', data.url_id || 0);
            },
            searching: true,
        });


    });

  
</script>




<script>
    function copyAffiliateLink() {
    const link = "https://bacabuku.com/link/{{ $kode }}";
    navigator.clipboard.writeText(link).then(() => {
        // Show notification
        const notif = document.createElement('div');
        notif.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg text-sm';
        notif.textContent = 'Link berhasil disalin!';
        document.body.appendChild(notif);
        
        setTimeout(() => {
            document.body.removeChild(notif);
        }, 2000);
    }).catch(err => {
        console.error('Failed to copy: ', err);
    });
}

    function moveUp(urlId, element) {
        const table = $('#tableAffiliasi').DataTable();
        const row = $(`tr[data-url-id="${urlId}"]`);
        const prevRow = row.prev();
        
        if (!prevRow.length) {
            notyf.error('Sudah berada di urutan paling atas');
            return;
        }

        const prevUrlId = prevRow.data('url-id');
        showLoading(urlId);
        swapOrders(urlId, prevUrlId, urlId);
    }

    function moveDown(urlId, element) {
        const table = $('#tableAffiliasi').DataTable();
        const row = $(`tr[data-url-id="${urlId}"]`);
        const nextRow = row.next();
        
        if (!nextRow.length) {
            notyf.error('Sudah berada di urutan paling bawah');
            return;
        }

        const nextUrlId = nextRow.data('url-id');
        showLoading(urlId);
        swapOrders(urlId, nextUrlId, urlId);
    }

    function showLoading(urlId) {
        // Disable both buttons
        $(`#up-btn-${urlId}`).prop('disabled', true);
        $(`#down-btn-${urlId}`).prop('disabled', true);
        // Show loading indicator
        $(`#loading-${urlId}`).removeClass('hidden');
    }

    function hideLoading(urlId) {
        // Enable both buttons
        $(`#up-btn-${urlId}`).prop('disabled', false);
        $(`#down-btn-${urlId}`).prop('disabled', false);
        // Hide loading indicator
        $(`#loading-${urlId}`).addClass('hidden');
    }

    function swapOrders(urlId1, urlId2, sourceUrlId) {
        const table = $('#tableAffiliasi').DataTable();
        
        fetch('{{ route("affiliator.swapUrlOrders") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                url_id1: urlId1,
                url_id2: urlId2
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                notyf.success('Urutan berhasil diubah!');
                table.ajax.reload(null, false);
            } else {
                notyf.error(data.message || 'Gagal mengubah urutan');
            }
        })
        .catch(error => {
            notyf.error('Terjadi kesalahan saat mengubah urutan');
            console.error('Error:', error);
        })
        .finally(() => {
            hideLoading(sourceUrlId);
        });
    }


    function toggleStatus(urlId, element) {
        const table = $('#tableAffiliasi').DataTable();
        const button = document.getElementById(`status-btn-${urlId}`);
        
        // Disable button and show loading
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses';
        
        fetch('{{ route("affiliator.toggleUrlStatus") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                url_id: urlId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const newStatus = data.new_status;
                
                table.ajax.reload(null, false);

                if (newStatus == 1) {
                    button.innerHTML = '<i class="fas fa-check-circle"></i> Aktif';
                    button.className = button.className.replace('bg-red-500/20 text-red-500', 'bg-green-500/20 text-green-500');
                } else {
                    button.innerHTML = '<i class="fas fa-times-circle"></i> Nonaktif';
                    button.className = button.className.replace('bg-green-500/20 text-green-500', 'bg-red-500/20 text-red-500');
                }

                notyf.success('Status berhasil diubah!');
                }
            })
            .catch(error => {
                notyf.error('Terjadi kesalahan!');
                console.error('Error:', error);
            })
            .finally(() => {
                button.disabled = false;
            });
    }



    function deleteUrl(urlId, button) {
        if (!confirm('Apakah Anda yakin ingin menghapus URL ini?')) {
            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.deleteUrl") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                url_id: urlId
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                notyf.success(data.message);
                
                // Animasi penghapusan baris
                // row.style.transition = 'all 0.3s ease';
                // row.style.opacity = '0';
                // row.style.height = '0';
                // row.style.padding = '0';
                // row.style.margin = '0';
                // row.style.border = 'none';
                
                setTimeout(() => {
                    window.location.reload()                
                    // Update nomor urut untuk baris yang tersisa
                    document.querySelectorAll('tbody tr').forEach((tr, index) => {
                        const orderSpan = tr.querySelector('.order-display');
                        if (orderSpan) {
                            orderSpan.textContent = index + 1;
                        }
                        
                        // Update input order jika ada
                        const orderInput = tr.querySelector('.order-input');
                        if (orderInput) {
                            orderInput.value = index + 1;
                        }
                    });
                }, 300);
                
            } else {
                notyf.error(data.message);
            }
        })
        .catch(error => {
            notyf.error('Terjadi kesalahan saat menghapus URL');
            console.error('Error:', error);
        })
        .finally(() => {
            button.innerHTML = originalHtml;
            button.disabled = false;
        });
    }

</script>

@endsection