<!-- Link Generator Page -->
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row">
        <div class="col-sm-12">
            <ol class="breadcrumb">
                <li><a href="<?= base_url('admin/promotion'); ?>"><i class="fa fa-arrow-left"></i> Kembali ke Promosi</a></li>
                <li class="active">Link Generator</li>
            </ol>

            <!-- Alert Messages -->
            <?php if ($this->session->flashdata('success')): ?>
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <?= $this->session->flashdata('success'); ?>
                </div>
            <?php endif; ?>

            <?php if ($this->session->flashdata('error')): ?>
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <?= $this->session->flashdata('error'); ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Generate UTM Link</h3>
                </div>
                <div class="panel-body">
                    <form id="linkGeneratorForm">
                        <!-- Link Type Selection -->
                        <div class="form-group">
                            <label>Jenis Link – Pilih jenis halaman yang akan ditautkan</label>
                            <select class="form-control" id="linkType" required>
                                <option value="">Pilih Jenis Link</option>
                                <option value="product">Produk – Link langsung ke produk tertentu</option>
                                <option value="brand">Merek – Link ke halaman merek tertentu</option>
                                <option value="category">Kategori – Link ke halaman kategori produk</option>
                            </select>
                        </div>

                        <!-- Search and Selection Area -->
                        <div class="form-group" id="searchArea" style="display: none;">
                            <label>Cari <span id="searchLabel">Product</span></label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="searchInput" placeholder="Ketik untuk mencari...">
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                            <div class="list-group" id="searchResults" style="max-height: 200px; overflow-y: auto; margin-top: 10px;">
                                <!-- Results will be populated here -->
                            </div>
                        </div>

                        <!-- UTM Parameters -->
                        <div class="form-group">
                            <label>Sumber Trafik (Source) – Dari mana pengunjung datang?</label>
                            <div class="source-container">
                                <button type="button" class="source-btn" data-value="facebook">
                                    <img src="https://cdn-icons-png.flaticon.com/128/174/174848.png" alt="Facebook">
                                    <span>Facebook</span>
                                </button>
                                <button type="button" class="source-btn" data-value="instagram">
                                    <img src="https://cdn-icons-png.flaticon.com/128/15713/15713420.png" alt="Instagram">
                                    <span>Instagram</span>
                                </button>
                                <button type="button" class="source-btn" data-value="youtube">
                                    <img src="https://cdn-icons-png.flaticon.com/128/5968/5968852.png" alt="Youtube">
                                    <span>Youtube</span>
                                </button>
                                <button type="button" class="source-btn" data-value="linkedin">
                                    <img src="https://cdn-icons-png.flaticon.com/128/3536/3536505.png" alt="Linkedin">
                                    <span>Linkedin</span>
                                </button>
                                <button type="button" class="source-btn" data-value="googleads">
                                    <img src="https://cdn-icons-png.flaticon.com/128/2875/2875421.png" alt="Google Ads">
                                    <span>Google Ads</span>
                                </button>
                                <button type="button" class="source-btn" data-value="metaads">
                                    <img src="https://cdn-icons-png.flaticon.com/128/6033/6033716.png" alt="Meta">
                                    <span>Meta Ads</span>
                                </button>
                                <button type="button" class="source-btn" data-value="tiktok">
                                    <img src="https://cdn-icons-png.flaticon.com/128/15713/15713399.png" alt="TikTok">
                                    <span>TikTok</span>
                                </button>
                            </div>
                            <input type="hidden" id="utmSource" name="utmSource">
                        </div>


                        <div class="form-group">
                            <label>Jenis Trafik (Medium) – Bagaimana mereka menemukan link ini?</label>
                            <input type="text" class="form-control" id="utmMedium" placeholder="Contoh: cpc, banner" required>
                        </div>

                        <div class="form-group">
                            <label>Nama Promosi (Campaign) – Nama promosi atau kampanye yang sedang berjalan</label>
                            <input type="text" class="form-control" id="utmCampaign" placeholder="Contoh: valentine" required>
                        </div>

                        <div class="form-group">
                            <label>Konten Iklan (Content) – Gunakan untuk membedakan variasi iklan dalam kampanye yang sama</label>
                            <input type="text" class="form-control" id="utmContent" placeholder="Contoh: cta-button, header-banner">
                        </div>
                        <div class="form-group">
                            <label>Kata Kunci (Term) – Kata kunci yang digunakan dalam iklan berbayar</label>
                            <input type="text" class="form-control" id="utmTerm" placeholder="Contoh: vibrator+satisfyer">
                        </div>

                        <button type="submit" class="btn btn-primary btn-block">
                            <i class="fa fa-magic"></i> Generate Link
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <!-- Generated Link Result -->
            <div class="panel panel-success" id="resultPanel" style="display: none;">
                <div class="panel-heading">
                    <h3 class="panel-title">Link Generated</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label>Generated Link</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="generatedLink" readonly>
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" id="copyButton">
                                    <i class="fa fa-copy"></i> Copy
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Generated Links -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Recently Generated Links</h3>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Generated Link</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="recentLinks">
                                <!-- Recent links will be populated here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for interactivity -->
<script>
    const BASE_URLS = {
        product: '<?= base_url('admin/search/product'); ?>',
        brand: '<?= base_url('admin/search/brand'); ?>',
        category: '<?= base_url('admin/search/category'); ?>'
    };

    const CSRF_TOKEN = "<?= $this->security->get_csrf_token_name(); ?>";
    const CSRF_HASH = "<?= $this->security->get_csrf_hash(); ?>";

    $(document).ready(function() {
        loadRecentLinks();

        // Handle link type selection
        $('#linkType').change(function() {
            const selectedType = $(this).val();

            $('#searchInput').val('');
            $('#searchResults').empty();

            if (selectedType) {
                $('#searchArea').show();
                $('#searchLabel').text(selectedType.charAt(0).toUpperCase() + selectedType.slice(1));
                let placeholder = '';
                switch (selectedType) {
                    case 'product':
                        placeholder = 'Cari produk...';
                        break;
                    case 'brand':
                        placeholder = 'Cari merek...';
                        break;
                    case 'category':
                        placeholder = 'Cari kategori...';
                        break;
                }
                $('#searchInput').attr('placeholder', placeholder);
            } else {
                $('#searchArea').hide();
            }
        });

        $('#searchInput').on('input', async function() {
            const query = $(this).val().trim();
            const type = $('#linkType').val();
            if (query.length < 2 || !type) return;

            const BASE_URL = BASE_URLS[type]; // Tentukan endpoint sesuai tipe link
            const requestData = {
                query
            };

            try {
                const results = await makeRequest(BASE_URL, requestData);
                console.log(results);
                updateSearchResults(results);
            } catch (error) {
                console.error('Error fetching search results:', error);
            }
        });

        const updateSearchResults = (results) => {
            const $resultsContainer = $('#searchResults');
            $resultsContainer.empty();

            if (results.length === 0) {
                $resultsContainer.append('<div class="list-group-item">Tidak ada hasil ditemukan</div>');
                return;
            }

            results.forEach(item => {
                const resultItem = `
                    <label class="list-group-item">
                        <input type="checkbox" class="search-checkbox" value="${item.id}" data-name="${item.name}" data-url="${item.url}">
                        ${item.name}
                    </label>`;
                $resultsContainer.append(resultItem);
            });
        };

        // Menyimpan item yang dipilih
        const selectedItems = new Set();

        $('#searchResults').on('change', '.search-checkbox', function() {
            // Uncheck semua checkbox kecuali yang dipilih
            $('.search-checkbox').not(this).prop('checked', false);

            // Kosongkan selectedItems karena hanya boleh ada satu item
            selectedItems.clear();

            if ($(this).is(':checked')) {
                const itemId = $(this).val();
                const itemName = $(this).data('name');
                const itemUrl = $(this).data('url');

                selectedItems.add({
                    id: itemId,
                    name: itemName,
                    url: itemUrl,
                });
            }
        });


        // Handle form submission
        $('#linkGeneratorForm').submit(async function(e) {
            e.preventDefault();

            // Validasi input
            const source = $('#utmSource').val().trim();
            const medium = $('#utmMedium').val().trim();
            const campaign = $('#utmCampaign').val().trim();
            const content = $('#utmContent').val().trim();
            const term = $('#utmTerm').val().trim(); // Opsional, hanya untuk iklan berbayar

            if (!source || !medium || !campaign) {
                alert('Mohon lengkapi semua field UTM parameters');
                return;
            }

            // Validasi item yang dipilih
            if (selectedItems.size === 0) {
                alert('Mohon pilih setidaknya satu item');
                return;
            }

            // Get first selected item (bisa dimodifikasi jika ingin support multiple items)
            const selectedItem = Array.from(selectedItems)[0];

            // Generate UTM link
            const generatedLink = generateUtmLink(
                selectedItem.url,
                source,
                medium,
                campaign,
                content,
                term
            );

            try {
                // Simpan ke database
                const saveResponse = await makeRequest('<?= base_url("admin/link/save_link") ?>', {
                    url: generatedLink,
                    item_id: selectedItem.id,
                    item_type: $('#linkType').val(),
                    utm_source: source,
                    utm_medium: medium,
                    utm_campaign: campaign,
                    utm_content: content,
                    utm_term: term
                });

                if (saveResponse.success) {
                    // Tampilkan hasil
                    $('#generatedLink').val(generatedLink);
                    $('#resultPanel').show();
                    loadRecentLinks();
                } else {
                    throw new Error(saveResponse.message);
                }
            } catch (error) {
                console.error('Error saving link:', error);
                alert('Gagal menyimpan link: ' + error.message);
            }
        });

        // Handle copy button
        $('#copyButton').click(function() {
            var copyText = document.getElementById("generatedLink");
            copyText.select();
            document.execCommand("copy");

            // Show feedback
            $(this).tooltip({
                title: "Copied!",
                trigger: "manual"
            }).tooltip("show");

            setTimeout(function() {
                $('#copyButton').tooltip("destroy");
            }, 1000);
        });

    });

    $(document).on('click', '.copy-btn', function() {
        // Get the link from the button's data-link attribute
        var copyText = $(this).data('link');

        // Create a temporary input element to copy the text
        var $tempInput = $('<input>');
        $('body').append($tempInput);
        $tempInput.val(copyText).select();
        document.execCommand('copy');
        $tempInput.remove();

        // Show feedback tooltip
        $(this).tooltip({
            title: "Copied!",
            trigger: "manual"
        }).tooltip("show");

        // Destroy the tooltip after 1 second
        setTimeout(function() {
            $(this).tooltip("destroy");
        }.bind(this), 1000); // `bind(this)` ensures the correct `this` context
    });

    document.querySelectorAll('.source-btn').forEach(button => {
        button.addEventListener('click', function() {
            document.getElementById('utmSource').value = this.dataset.value;
            document.querySelectorAll('.source-btn').forEach(btn => btn.classList.remove('selected'));
            this.classList.add('selected');
        });
    });

    async function loadRecentLinks() {
        try {
            // Send the request to fetch recent links
            const response = await makeRequest('<?= base_url("admin/link/get_recent_links") ?>', {});

            // Clear any existing links in the table
            const recentLinksTableBody = document.getElementById('recentLinks');
            recentLinksTableBody.innerHTML = '';

            // Loop through the results and add them to the table
            response.forEach(link => {
                addToRecentLinks({
                    type: link.item_type,
                    link: link.url
                });
            });
        } catch (error) {
            console.error('Error loading recent links:', error);
        }
    }

    function addToRecentLinks(linkData) {
        const newRow = `
            <tr>
                <td>${linkData.type}</td>
                <td class="text-truncate" style="max-width: 200px;">${linkData.link}</td>
                <td>
                    <button class="btn btn-xs btn-default copy-btn" type="button" data-link="${linkData.link}">
                        <i class="fa fa-copy"></i>
                    </button>
                </td>
            </tr>
        `;
        // Append the new row to the table
        const recentLinksTableBody = document.getElementById('recentLinks');
        recentLinksTableBody.insertAdjacentHTML('beforeend', newRow);
    }

    // Generate Function 
    function generateUtmLink(baseUrl, source, medium, campaign, content, term) {
        const utmParams = new URLSearchParams({
            utm_source: source,
            utm_medium: medium,
            utm_campaign: campaign
        });

        // Tambahkan utm_content jika diisi
        if (content) {
            utmParams.append("utm_content", content);
        }

        // Tambahkan utm_term jika diisi
        if (term) {
            utmParams.append("utm_term", term);
        }

        // Jika utm_source adalah "googleads", hanya tampilkan parameter UTM tanpa baseUrl
        if (source.toLowerCase() === "googleads") {
            return `?${utmParams.toString()}`.toLowerCase();
        }

        return `${baseUrl}?${utmParams.toString()}`.toLowerCase();
    }
    // Fungsi helper untuk membuat form data dengan CSRF
    const createFormData = (data) => {
        const formData = new FormData();
        formData.append(CSRF_TOKEN, CSRF_HASH);
        Object.keys(data).forEach(key => {
            if (key === 'orderDetailData') {
                formData.append(key, JSON.stringify(data[key]));
            } else {
                formData.append(key, data[key]);
            }
        });
        return formData;
    };

    // Fungsi helper untuk request
    const makeRequest = async (url, data) => {
        const formData = createFormData(data);
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
        });
        return response.json();
    };
</script>

<style>
    /* Styling container agar responsif */
    .text-truncate {
        overflow: hidden;
        /* Hide the overflowed content */
        white-space: nowrap;
        /* Prevent the text from wrapping to the next line */
        text-overflow: ellipsis;
        /* Show ellipsis (...) when the text overflows */
    }

    .source-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        color: #333;
    }

    /* Styling tombol */
    .source-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        height: 40px;
        padding: 10px;
        border: 2px solid #ddd;
        background: white;
        cursor: pointer;
        border-radius: 10px;
        text-align: center;
        transition: all 0.3s ease-in-out;
        font-size: 14px;
        font-weight: bold;
        gap: 8px;
    }

    /* Hover effect */
    .source-btn:hover {
        border-color: #7A4397;
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Pilihan aktif */
    .source-btn.selected {
        background: #7A4397;
        color: white;
        border-color: #7A4397;
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* Styling ikon */
    .source-btn img {
        width: 24px;
        height: 24px;
        transition: transform 0.2s ease-in-out;
    }

    /* Efek hover untuk ikon */
    .source-btn:hover img {
        transform: scale(1.1);
    }
</style>