@extends('layouts.admin')
    @section('title', 'Services - ' . getRadioUsers()->name)
    @section('content')
        <div class="row g-4 mb-4">

            <div class="p-5 bg-linear-gradient mt-0">
                <div class="container-fluid text-white text-center">
                    <div class="row justify-content-center">
                        <div class="col-md-10">
                            <h2 class="fw-bold mb-4" style="font-size: clamp(1.1rem, 2.5vw + 0.7rem, 2.1875rem);">Prompts AWR
                                Studio AI</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="px-4">
                <div class="rounded-4 p-4 shadow-sm bg-white">
                    @if (count($prompts) > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped align-middle w-100" id="datatable-buttons">
                                <thead class="table-white">
                                    <tr>
                                        <th>#</th>
                                        <th>Intention</th>
                                        <th>Instruction</th>
                                        <th>Objectif</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($prompts as $key => $prompt)
                                        @php
                                            $containsKeywords = containsTargetKeywords($prompt->instruction);
                                            $categoryText = $containsKeywords ? $categories : '';
                                        @endphp

                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>
                                                <span class="d-block d-sm-none ">
                                                    {!!$prompt->intention->name !!}
                                                </span>

                                                <span class="d-none d-sm-block">
                                                    {!! $prompt->intention->name !!}
                                                </span>
                                            </td>

                                            <td>
                                                <span class="d-block d-sm-none ">
                                                {!! Str::limit(strip_tags($prompt->instruction), 200) !!}
                                                </span>

                                                <span class="d-none d-sm-block">
                                                    {!! strip_tags($prompt->instruction) !!}
                                                </span>
                                            </td>

                                            <td>
                                                <span class="d-block d-sm-none ">
                                                    {!! Str::limit($prompt->objectif, 10) !!}
                                                </span>

                                                <span class="d-none d-sm-block">
                                                    {{ $prompt->objectif }}
                                                </span>
                                            </td>

                                        
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn p-0 border-0 bg-transparent" type="button"
                                                        id="dropdownMenu{{ $key }}" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="bi bi-three-dots-vertical fs-5"></i>
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu{{ $key }}">
                                                        <li>
                                                            <a href="#" class="dropdown-item" data-bs-toggle="modal"
                                                                data-bs-target="#viewPromptModal"
                                                                data-intention="{!! htmlspecialchars($prompt->intention->name, ENT_QUOTES, 'UTF-8') !!}"
                                                                data-objectif="{!! htmlspecialchars($prompt->objectif, ENT_QUOTES, 'UTF-8') !!}"
                                                                data-instruction="{!! htmlspecialchars($prompt->instruction, ENT_QUOTES, 'UTF-8') !!}"
                                                                data-categories="{{ $categoryText }}">
                                                                <i class="bi bi-eye"></i> Voir
                                                            </a>
                                                        </li>

                                                        <li>
                                                            <a href="#" class="dropdown-item copy-btn"
                                                                data-instruction="{{ htmlspecialchars($prompt->instruction, ENT_QUOTES, 'UTF-8') }}">
                                                                <i class="bi bi-clipboard"></i> Copier
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="main-content-card">
                            <div>
                                <img src="{{ asset('assets/images/not-content.svg') }}" alt="aucun" />
                            </div>
                            <div>
                                <p class="h5">Pas de prompts</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="modal fade" id="viewPromptModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header d-flex flex-column text-center">
                        <h5 class="modal-title w-100" style="font-size: 30px;">Détails du Prompt</h5>
                        <hr class="w-100 my-2" style="border-top: 2px solid #dee2e6;">
                        <button type="button" class="btn-close position-absolute top-0 end-0 m-3"
                            data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <strong>Intention :</strong>
                            <p id="viewIntentionName" class="text-primary fw-bold"></p>
                        </div>
                        <div class="mb-3">
                            <strong>Objectif :</strong>
                            <p id="viewObjectif" class="text-dark"></p>
                        </div>
                        <div id="viewCategoriesInfo" class="text-muted mt-3 d-none"></div>
                        <div class="mb-3 mt-2">
                            <strong>Instruction :</strong>
                            <div id="viewInstruction" class="border rounded p-3" style="background:#f9f9f9;"></div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="copyFromModal">
                            <i class="bi bi-clipboard"></i> Copier pour WhatsApp
                        </button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    </div>
                </div>
            </div>
        </div>


    @endsection


    @section('script')
        <script>
            function submit(btn, formId) {
                btn.disabled = true;
                $('#' + formId).submit();
            }
        </script>

        <script>
            function convertHtmlToWhatsApp(htmlContent) {
                return htmlContent
                    .replace(/<br\s*\/?>/gi, '\n')
                    .replace(/<\/p>/gi, '\n')
                    .replace(/<p[^>]*>/gi, '')
                    .replace(/<(b|strong)[^>]*>(.*?)<\/\1>/gi, '*$2*')
                    .replace(/<(i|em)[^>]*>(.*?)<\/\1>/gi, '_$2_')
                    .replace(/&nbsp;/gi, ' ')
                    .replace(/<\/?[^>]+(>|$)/g, '');
            }

            function showToast(message) {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: message,
                    showConfirmButton: false,
                    timer: 2000
                });
            }

            document.querySelectorAll('.copy-btn').forEach(button => {
                button.addEventListener('click', function (e) {
                    e.preventDefault();

                    const rawHtml = this.getAttribute('data-instruction');

                    // Décoder HTML entities
                    const txtArea = document.createElement('textarea');
                    txtArea.innerHTML = rawHtml;
                    const decodedHtml = txtArea.value;

                    const whatsappText = convertHtmlToWhatsApp(decodedHtml);

                    navigator.clipboard.writeText(whatsappText)
                        .then(() => showToast('Instruction copiée pour WhatsApp !'))
                        .catch(err => console.error('Erreur de copie :', err));
                });
            });
        </script>
        <script>
            function convertHtmlToWhatsApp(htmlContent) {
                return htmlContent
                    .replace(/<br\s*\/?>/gi, '\n') // <br> → saut de ligne
                    .replace(/<\/p>/gi, '\n') // Fin paragraphe → saut de ligne
                    .replace(/<p[^>]*>/gi, '') // Début paragraphe → rien
                    .replace(/<(b|strong)[^>]*>(.*?)<\/\1>/gi, '*$2*') // Gras
                    .replace(/<(i|em)[^>]*>(.*?)<\/\1>/gi, '_$2_') // Italique
                    .replace(/&nbsp;/gi, ' ') // Espace
                    .replace(/<\/?[^>]+(>|$)/g, ''); // Supprime toute autre balise
            }

            function showToast(message) {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: message,
                    showConfirmButton: false,
                    timer: 2000
                });
            }


            document.addEventListener("DOMContentLoaded", function () {
                let currentInstructionHtml = '';

                const viewModal = document.getElementById('viewPromptModal');
                viewModal.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;

                    const intention = button.getAttribute('data-intention');
                    const objectif = button.getAttribute('data-objectif');
                    const rawHtml = button.getAttribute(
                        'data-instruction'); // HTML encodé avec htmlspecialchars
                    const categories = button.getAttribute('data-categories');

                    // Décoder les entités HTML pour restaurer le HTML original
                    const parser = new DOMParser();
                    const decodedHtml = parser.parseFromString(rawHtml, 'text/html').body.innerHTML;

                    currentInstructionHtml = decodedHtml; // On garde la version HTML complète

                    // Injection dans le modal
                    document.getElementById('viewIntentionName').innerHTML = intention;
                    document.getElementById('viewObjectif').textContent = objectif;
                    document.getElementById('viewInstruction').innerHTML = decodedHtml; // ✅ Affiche Rich Text

                    const categoryLine = document.getElementById('viewCategoriesInfo');
                    if (categories && categories.trim() !== '') {
                        categoryLine.innerHTML = categories;
                        categoryLine.classList.remove('d-none');
                    } else {
                        categoryLine.classList.add('d-none');
                    }
                });

                // Bouton Copier pour WhatsApp
                document.getElementById('copyFromModal').addEventListener('click', function () {
                    const whatsappText = convertHtmlToWhatsApp(currentInstructionHtml);
                    navigator.clipboard.writeText(whatsappText)
                        .then(() => showToast('Texte copié pour WhatsApp !'))
                        .catch(err => console.error('Erreur de copie :', err));
                });
            });
        </script>

    @endsection