@extends('layouts.superadmin')
@section('title', __('Prompts'))
@section('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="card rounded-5 border-0 m-b-30">
                    <div class="card-header rounded-top-5">
                        <div class="row d-flex justify-content-end align-items-center">
                            <div class="col-md-6">
                                <h5 class="card-title mb-0">Prompts AWR Studio AI</h5>
                            </div>
                            <div class="col-md-6 mt-3 mt-md-0 ">
                                <button class="btn text-white gradient-btn float-end" data-bs-toggle="modal"
                                    data-bs-target="#createPromptModal">
                                    + Créer un prompt
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="">
                            <table id="intentionsTable" class="table table-bordered table-striped align-middle w-100">
                                <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 $prompt)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>
                                                {{-- Version mobile : limit à 10 caractères --}}
                                                <span class="d-block d-sm-none">
                                                    {!! $prompt->intention->name !!}
                                                </span>

                                                {{-- Version tablette / desktop : texte complet --}}
                                                <span class="d-none d-sm-block">
                                                    {!! $prompt->intention->name !!}
                                                </span>
                                            </td>

                                            <td>
                                                {{-- Version mobile : limit à 10 caractères --}}
                                                <span class="d-block d-sm-none text-truncate">
                                                    {!! Str::limit(strip_tags($prompt->instruction), 15) !!}
                                                </span>

                                                {{-- Version tablette / desktop : texte complet --}}
                                                <span class="d-none d-sm-block">
                                                    {!!  $prompt->instruction !!}
                                                </span>
                                            </td>

                                            <td>
                                                {{-- Version mobile : limit à 10 caractères --}}
                                                <span class="d-block d-sm-none text-truncate">
                                                    {!! Str::limit($prompt->objectif, 10) !!}
                                                </span>

                                                {{-- Version tablette / desktop : texte complet --}}
                                                <span class="d-none d-sm-block">
                                                    {{ $prompt->objectif }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="dropdown z-1000">
                                                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown">
                                                        Actions
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <!-- Voir -->
                                                        <li>
                                                        <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') !!}">
                                                                <i class="bi bi-eye"></i> Voir
                                                            </a>
                                                        </li>

                                                        </li>

                                                        <!-- Modifier -->
                                                        <li>
                                                            <a href="#" class="dropdown-item editPromptBtn"
                                                                data-bs-toggle="modal" data-bs-target="#editPromptModal"
                                                                data-id="{{ $prompt->id }}"
                                                                data-intention-id="{{ $prompt->intention_id }}"
                                                                data-instruction="{{ htmlentities($prompt->instruction) }}"
                                                                data-objectif="{{ $prompt->objectif }}">
                                                                <i class="far fa-edit me-2"></i>Modifier
                                                            </a>
                                                        </li>

                                                        <!-- Copier -->
                                                        <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>


                                                        <!-- Supprimer -->
                                                        <li>
                                                            <a href="#" class="dropdown-item text-danger" data-bs-toggle="modal"
                                                                data-bs-target="#deletePromptModal" data-id="{{ $prompt->id }}">
                                                                <i class="bi bi-trash"></i> Supprimer
                                                            </a>
                                                        </li>
                                                    </ul>

                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal de création --}}
    <div class="modal fade" id="createPromptModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('prompts.store') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Créer un nouveau prompt</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Intention liée</label>
                            <select name="intention_id" class="form-select" required>
                                <option value="">-- Sélectionner --</option>
                                @foreach($intentions as $intention)
                                    <option value="{{ $intention->id }}">{!! $intention->name !!}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label>Instruction</label>
                            <textarea id="instruction-editor" name="instruction" class="form-control"></textarea>
                        </div>



                        <div class="mb-3">
                            <label>Objectif</label>
                            <textarea name="objectif" class="form-control" required></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal de suppression --}}
    <div class="modal fade" id="deletePromptModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" id="deletePromptForm" action="{{ route('intentions.destroy', $intention->id) }}">
                    @csrf
                    @method('DELETE')
                    <div class="modal-header">
                        <h5 class="modal-title">Confirmer la suppression</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p>Voulez-vous vraiment supprimer ce prompt ?</p>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Modal Voir Prompt --}}
    <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">
                    <h5 class="modal-title">Détails du Prompt</h5>
                    <button type="button" class="btn-close" 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 class="mb-3">
                        <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>
    {{-- Modal d'édition --}}
    <div class="modal fade" id="editPromptModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" id="editPromptForm">
                    @csrf
                    @method('PATCH')
                    <div class="modal-header">
                        <h5 class="modal-title">Modifier le prompt</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="id" id="editPromptId">

                        <div class="mb-3">
                            <label>Intention liée</label>
                            <select name="intention_id" id="editIntention" class="form-select" required>
                                @foreach($intentions as $intention)
                                <option value="{{ $intention->id }}">{!! $intention->name !!}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label>Instruction</label>
                            <textarea id="edit-instruction-editor" name="instruction" class="form-control"></textarea>
                        </div>

                        <div class="mb-3">
                            <label>Objectif</label>
                            <textarea name="objectif" id="editObjectif" class="form-control" required></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Mettre à jour</button>
                    </div>
                </form>
            </div>
        </div>
    </div>



@endsection

@section('script')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datepicker/datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datepicker/i18n/datepicker.en.js') }}"></script>
    <script src="{{ asset('assets/js/musioo-custom.js') }}"></script>

    <script>
        $(document).ready(function () {

            $('#intentionsTable').DataTable({
                responsive: true,
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json',
                    paginate: {
                        previous: '<i class="bi bi-chevron-left"></i>',
                        next: '<i class="bi bi-chevron-right"></i>'
                    }
                },
                initComplete: function () {
                    $('.dataTables_filter input[type="search"]').css({
                        'width': '180px',
                        'display': 'inline-block'
                    });
                },

                /* buttons: [
                    'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'
                ], */
                lengthMenu: [
                    [5, 10, 25, 50, 100, -1],
                    [5, 10, 25, 50, 100, "Tous"]
                ],
                pageLength: 5,
                lengthChange: true,
            });
        });
    </script>

    <script>
        const deleteModal = document.getElementById('deletePromptModal');
        deleteModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const promptId = button.getAttribute('data-id');
            const form = document.getElementById('deletePromptForm');
            form.action = `${window.location.protocol}//${window.location.host}/prompts/${promptId}`;
        });
    </script>

    <script>
        $(document).ready(function () {
            $('#instruction-editor').summernote({
                placeholder: 'Saisissez votre instruction...',
                tabsize: 2,
                height: 200,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link']],
                    ['view', ['codeview']]
                ]
            });
        });
    </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

                // 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
            });

            // 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>

    <script>
        $(document).ready(function () {
            $('#instruction-editor, #edit-instruction-editor').summernote({

                placeholder: 'Saisissez votre instruction...',
                tabsize: 2,
                height: 200,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link']],
                    ['view', ['codeview']]
                ],
                callbacks: {
                    onChange: function (contents) {
                        // Re-render LaTeX after any change
                        MathJax.typesetPromise();
                    }
                }
            });

            $('.editPromptBtn').on('click', function () {
                const id = $(this).data('id');
                const instruction = $('<div>').html($(this).data('instruction')).text(); // decode HTML
                const objectif = $(this).data('objectif');
                const intentionId = $(this).data('intention-id');

                $('#editPromptId').val(id);
                $('#editIntention').val(intentionId);
                $('#editObjectif').val(objectif);
                $('#editPromptForm').attr('action', '/prompts/' + id);

                $('#edit-instruction-editor').summernote('code', instruction);
            });
        });

    </script>
    <script>
        MathJax.typesetPromise();
    </script>
@endsection