{{-- resources/views/emailing/_form.blade.php --}}

&&&
@php
 $chapter = $chapter ?? 'EV';
 $filePath = public_path('servis/form/html_vklad_apl.php');
 require_once($filePath);
 $datamenu_emailing = [
 ['pozice'=>'A','text_info'=>'Nový E-mail','title'=>'Nový email','checked'=>true],
 ['pozice'=>'B','text_info'=>'Odeslané E-maily','title'=>'Odeslané emaily'],
 ['pozice'=>'C','text_info'=>'Doručené E-maily','title'=>'Doručené emaily'],
 ['pozice'=>'D','text_info'=>'Nová SMS','title'=>'Nová SMS'],
 ['pozice'=>'E','text_info'=>'Odeslané SMS','title'=>'Odeslané SMS'],
 ['pozice'=>'F','text_info'=>'Přijaté SMS','title'=>'Přijaté SMS']];

 $htmltopmenutelo_B=generuj_menu("","menu_emailing",$datamenu_emailing,1);

 $htmltopmenutelo_B="
        <div class='flex_row_left' style='margin:40px 0px 10px 0px;'>
           $htmltopmenutelo_B
        </div> ";
 $htmltopmenutelo_B="";
@endphp

{{-- CSS sekce - DataTables CSS první --}}
<link rel="stylesheet" href="{{ asset('css/emailing/emailing-manager.css') }}">
<!--{{-- Pak Vite CSS --}}
@vite(['resources/css/emailing/emailing-manager.css'])      -->

<div class="flex_row_center" style="font-size: 0.9em;">
    <div id="emailingAjaxContent" class='emailing' style="width: 65%; margin-bottom:40px; background: #f8fcff; border-radius: 14px; box-shadow: 0 2px 10px #8a8d91; padding: 15px 35px 30px 35px;z-index:2000">
        <!-- HLAVIČKA -->
        <div style="display:flex; justify-content:space-between; align-items: flex-end; margin-top:20px;">
            <div></div>
            <div style="display:flex; align-items:center; gap:12px;">
                <img src="https://cdn-icons-png.flaticon.com/512/732/732200.png" alt="mail" width="32" height="32">
                <span style="font-size:1.75em; font-weight:bold; color:#242a39;">Emailová a SMS komunikace</span>
            </div>
            <!-- Křížek pro zavření -->
            <button type="button" style="background:none; border:none; font-size:2.1em; color:#c3c3c3; cursor:pointer;"
               onclick="closeAllAccordions('.button_color', '#aee8ff');" >&times;
            </button>
        </div>
        {!! $htmltopmenutelo_B !!}
        <div>
            <!-- Radio button pro spuštění formuláře pro vytvoření emailu -->
            <div style="margin: 15px 0; padding: 10px; background: #f0f8ff; border-radius: 8px; border: 1px solid #bdd2e7;">
                <label style="display: flex; align-items: center; cursor: pointer;">
                    <span  class="seda EMAILINGACD">
                      <input id="EMAILINGACD_0" data-id="EMAILINGACD_0_0_0_0_EV" type="radio" name="option" style="margin-right: 10px;">
                    </span>
                    <span style="color: #18447d; font-weight: bold;">Vytvořit nový e-mail</span>
                </label>
                <small style="color: #666; margin-left: 25px;">Klikněte pro otevření formuláře pro vytvoření a odeslání nového emailu</small>
            </div>
            <div id='accordioning_emailingacd'>
            </div>
        </div>

        <div style="display:flex; justify-content:center; margin-top:0px;">
            <div id="divTableEmailing" style="width:98%;">
                <table id="recipientsDataTable" class="display" style="width:100%; font-size:0.96em; background:#eef5fc; padding:15px; border-radius:9px;">
                    <thead class="thead_telo thead_emailing">
                        <tr style="background:#f1f6fa; color:#285e92;">
                            <th id="removeUncheckedTh" style="cursor:pointer;">X</th>
                            <th>Jméno</th>
                            <th>E-mail</th>
                            <th>Jednotka</th>
                            <th>Ulice a č.p.</th>
                            <th>Město</th>
                            <th>Mobil</th>
                        </tr>
                    </thead>
                    <tbody class="tbody_telo">
                      @foreach($recipients as $recipient)
                       @php
                        $chapter_class="emailing";
                       @endphp
                        <tr>
                            <td>
                              <input id="{{ $recipient['id_chapter'] }}" type="checkbox" title="Výběr" class = "{{ $chapter_class }}" data-chapter="{{ $chapter }}" checked>
                            </td>
                             <td>{{ $recipient['Provozovatel'] ?? '' }}</td>
                             <td>{{ $recipient['Email'] ?? '' }}</td>
                             <td>{{ $recipient['JN_cislo'] ?? '' }}</td>
                             <td>{{ $recipient['Ulice_cislo'] ?? '' }}</td>
                             <td>{{ $recipient['Mesto'] ?? '' }}</td>
                             <td>{{ $recipient['Mobil'] ?? '' }}</td>
                        </tr>
                      @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div style="width:100%; margin:15px 0px;">
            <div style="display:flex; justify-content:space-between; align-items: flex-end; margin-bottom:0px; width:100%;gap: 12px;background:#eef5fc; padding:15px; border-radius:9px;">
                 <!-- Levá část -->
                <div>
                    <span style="color:#18447d; font-size:1.15em;margin-right:10px;">Skupina</span>
                    <select id="selection" name="selection_id" style="padding:4px 7px; border-radius:5px; border:1px solid #bdd2e7; min-width:130px;width: 300px;">
                        <option value="">Zvolte skupinu příjemců pro komunikaci</option>
                        @foreach($selections as $sel)
                            <option value="{{ $sel->id }}">{{ $sel->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <input type="text" id="saveSelectionName" placeholder="Zadej název vytvořené skupiny příjemců" style="width: 300px;padding:5px 10px; border-radius:5px; border:1px solid #bdd2e7;">
                    <button type="button" id="btnSaveSelection" style="margin-left:8px;">Uložit</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- JavaScript na konci - DataTables první --}}
<!--<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>-->
<!--{{-- Pak Vite JavaScript --}}
@vite(['resources/js/emailing/emailing-manager.js'])  -->

<!--<script src="{{ asset('js/emailing/emailing-manager.js') }}"></script> -->

<script>
     $(function(){
        // Funkce pro inicializaci DataTable
        function initializeDataTable() {
            // Kontrola a zničení existující DataTable
            if ($.fn.DataTable.isDataTable('#recipientsDataTable')) {
                $('#recipientsDataTable').DataTable().clear().destroy();
            }

            // Kontrola existence tabulky
            if ($('#recipientsDataTable').length) {
                try {
                    var table = $('#recipientsDataTable').DataTable({
                        language: {
                            url: 'https://cdn.datatables.net/plug-ins/1.13.4/i18n/cs.json',
                            search: "Hledej:",
                            emptyTable: "V tabulkách budov vyberte příjemce pro komunikaci",
                            zeroRecords: "Nebyly nalezeny žádné záznamy",
                            info: "Zobrazuje se _START_ až _END_ z celkem _TOTAL_ záznamů",
                            infoEmpty: "Zobrazuje se 0 až 0 z 0 záznamů",
                            infoFiltered: "(filtrováno z celkem _MAX_ záznamů)",
                            lengthMenu: "Zobrazit _MENU_ záznamů na stránku",
                            paginate: {
                                first: "První",
                                last: "Poslední",
                                next: "Další",
                                previous: "Předchozí"
                            },
                            processing: "Zpracovávám...",
                            loadingRecords: "Načítám záznamy...",
                            searchPlaceholder: "Zadej vyhledávací řetězec"
                        },
                        lengthChange: false,
                        info: false,
                        searching: true,
                        paging: true,
                        pageLength: 10,
                        destroy: true,
                        columnDefs: [
                            {
                                targets: 0, // Checkbox sloupec
                                orderable: false,
                                searchable: false,
                                width: '50px'
                            }
                        ],
                        ordering: false,
                        dom: 'frtip',
                        responsive: true,
                        initComplete: function() {
                            // Vytvoř kontainer pod tabulkou
                            var wrapper = $('#recipientsDataTable_wrapper');
                            var table = $('#recipientsDataTable');

                            // Najdi existující elementy
                            var filter = wrapper.find('.dataTables_filter');
                            var paginate = wrapper.find('.dataTables_paginate');

                            // Vytvoř nový spodní panel
                            var bottomPanel = $('<div class="bottom-controls d-flex justify-content-between align-items-center mt-3"></div>');

                            // Vytvoř kontejnery
                            var paginationContainer = $('<div class="pagination-container"></div>');
                            var searchContainer = $('<div class="search-container"></div>');

                            // Přesuň elementy
                            paginationContainer.append(paginate);
                            searchContainer.append(filter);

                            // Sestav spodní panel
                            bottomPanel.append(paginationContainer);
                            bottomPanel.append(searchContainer);

                            // Vlož pod tabulku
                            table.after(bottomPanel);

                            // Styling
                            filter.find('label').css({
                                "font-weight": "normal",
                                "font-size": "1em",
                                "margin-bottom": "0",
                                "display": "flex",
                                "align-items": "center"
                            });

                            filter.find('input[type="search"]').css({
                                "margin-left": "8px",
                                "border-radius": "6px",
                                "border": "1px solid #bdd2e7",
                                "padding": "6px 10px",
                                "height": "32px",
                                "font-size": "1em",
                                "min-width": "200px"
                            });

                            paginate.css({
                                "margin": "0",
                                "float": "none"
                            });

                            // NASTAV PLACEHOLDER pro vyhledávání
                            setTimeout(function() {
                                $('.dataTables_filter input[type="search"]').attr('placeholder', 'Zadej vyhledávací řetězec');
                            }, 100);

                            console.log('DataTable inicializována úspěšně');
                        }
                    });

                } catch (error) {
                    console.error('Chyba při inicializaci DataTable:', error);
                }
            }
        }

        // Inicializovat DataTable při načtení stránky
        initializeDataTable();

        // Vystavit funkci globálně
        window.initializeDataTable = initializeDataTable;
     });
</script>
&&&