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

&&&
@php
 $chapter = $chapter ?? 'EV';
@endphp

{{-- CSS sekce --}}
<link rel="stylesheet" href="{{ asset('css/emailing/emailing-manager.css') }}">

<div class="flex_row_center" style="font-size: 0.9em;">
    <div id="emailFormContent" style="width: 75%; 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;">Nový E-mail</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>

        <!-- ZPRÁVY -->
        @if(session('success'))
            <div style="background:#d4edda; color:#155724; padding:10px; border-radius:5px; margin:15px 0; border:1px solid #c3e6cb;">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div style="background:#f8d7da; color:#721c24; padding:10px; border-radius:5px; margin:15px 0; border:1px solid #f5c6cb;">
                {{ session('error') }}
            </div>
        @endif

        <!-- FORMULÁŘ PRO VYTVOŘENÍ EMAILU -->
        <form id="emailForm" method="POST" action="{{ route('emailing.send') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="chapter" value="{{ $chapter }}">

            <!-- ŠABLONY A VÝBĚRY -->
            <div style="display:flex; justify-content:space-between; margin:20px 0; gap:15px;">
                <!-- Šablony -->
                <div style="flex:1;">
                    <label style="color:#18447d; font-size:1.1em; margin-bottom:5px; display:block;">Šablona emailu:</label>
                    <select id="emailTemplate" name="template_id" style="width:100%; padding:8px; border-radius:5px; border:1px solid #bdd2e7;">
                        <option value="">Vyberte šablonu nebo vytvořte nový email</option>
                        @foreach($templates as $template)
                            <option value="{{ $template->id }}" data-subject="{{ $template->subject }}" data-body="{{ $template->body }}">
                                {{ $template->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Skupiny příjemců -->
                <div style="flex:1;">
                    <label style="color:#18447d; font-size:1.1em; margin-bottom:5px; display:block;">Skupina příjemců:</label>
                    <select id="recipientSelection" name="selection_id" style="width:100%; padding:8px; border-radius:5px; border:1px solid #bdd2e7;">
                        <option value="">Aktuální výběr příjemců</option>
                        @foreach($selections as $selection)
                            <option value="{{ $selection->id }}">{{ $selection->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- PŘEDMĚT EMAILU -->
            <div style="margin:15px 0;">
                <label for="emailSubject" style="color:#18447d; font-size:1.1em; margin-bottom:5px; display:block;">Předmět emailu:</label>
                <input type="text" id="emailSubject" name="subject" required
                       style="width:100%; padding:10px; border-radius:5px; border:1px solid #bdd2e7; font-size:1em;"
                       placeholder="Zadejte předmět emailu">
            </div>

            <!-- OBSAH EMAILU -->
            <div style="margin:15px 0;">
                <label for="emailBody" style="color:#18447d; font-size:1.1em; margin-bottom:5px; display:block;">Obsah emailu:</label>
                <textarea id="emailBody" name="body" required rows="12"
                          style="width:100%; padding:10px; border-radius:5px; border:1px solid #bdd2e7; font-size:1em; resize:vertical;"
                          placeholder="Napište text emailu..."></textarea>
            </div>

            <!-- PŘÍLOHY -->
            <div style="margin:15px 0;">
                <label for="emailAttachments" style="color:#18447d; font-size:1.1em; margin-bottom:5px; display:block;">Přílohy:</label>
                <input type="file" id="emailAttachments" name="attachments[]" multiple
                       style="width:100%; padding:8px; border-radius:5px; border:1px solid #bdd2e7;"
                       accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif">
                <small style="color:#666; font-size:0.9em;">Povolené formáty: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG, GIF (max. 10MB celkem)</small>
            </div>

            <!-- SEZNAM PŘÍJEMCŮ -->
            <div style="margin:20px 0;">
                <h4 style="color:#18447d; margin-bottom:10px;">Příjemci emailu ({{ count($recipients) }}):</h4>
                <div style="max-height:200px; overflow-y:auto; background:#eef5fc; padding:10px; border-radius:5px; border:1px solid #bdd2e7;">
                    @if(count($recipients) > 0)
                        @foreach($recipients as $recipient)
                            <div style="display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid #ddd;">
                                <span><strong>{{ $recipient['Provozovatel'] ?? 'N/A' }}</strong></span>
                                <span style="color:#666;">{{ $recipient['Email'] ?? 'Bez emailu' }}</span>
                                <span style="font-size:0.9em; color:#888;">{{ $recipient['JN_cislo'] ?? '' }} - {{ $recipient['Ulice_cislo'] ?? '' }}</span>
                            </div>
                        @endforeach
                    @else
                        <p style="color:#888; text-align:center; margin:20px 0;">
                            Nejsou vybráni žádní příjemci. Vyberte příjemce v tabulkách budov.
                        </p>
                    @endif
                </div>
            </div>

            <!-- TLAČÍTKA -->
            <div style="display:flex; justify-content:space-between; align-items:center; margin-top:25px; padding-top:15px; border-top:1px solid #ddd;">
                <div>
                    <button type="button" id="saveAsTemplate" style="background:#28a745; color:white; padding:10px 20px; border:none; border-radius:5px; cursor:pointer; margin-right:10px;">
                        Uložit jako šablonu
                    </button>
                    <button type="button" id="previewEmail" style="background:#17a2b8; color:white; padding:10px 20px; border:none; border-radius:5px; cursor:pointer;">
                        Náhled
                    </button>
                </div>
                <div>
                    <button type="button" onclick="closeAllAccordions('.button_color', '#aee8ff');"
                            style="background:#6c757d; color:white; padding:10px 20px; border:none; border-radius:5px; cursor:pointer; margin-right:10px;">
                        Zrušit
                    </button>
                    <button type="submit" id="sendEmail"
                            style="background:#dc3545; color:white; padding:12px 25px; border:none; border-radius:5px; cursor:pointer; font-weight:bold;">
                        Odeslat E-mail
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal pro náhled emailu -->
<div id="emailPreviewModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:20px; border-radius:10px; max-width:80%; max-height:80%; overflow:auto;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; border-bottom:1px solid #ddd; padding-bottom:10px;">
            <h3 style="margin:0; color:#18447d;">Náhled emailu</h3>
            <button type="button" onclick="$('#emailPreviewModal').hide();" style="background:none; border:none; font-size:1.5em; cursor:pointer;">&times;</button>
        </div>
        <div id="previewContent"></div>
    </div>
</div>

<!-- Modal pro uložení šablony -->
<div id="saveTemplateModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:20px; border-radius:10px; min-width:400px;">
        <h3 style="margin:0 0 15px 0; color:#18447d;">Uložit jako šablonu</h3>
        <input type="text" id="templateName" placeholder="Zadejte název šablony" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:5px; margin-bottom:15px;">
        <div style="text-align:right;">
            <button type="button" onclick="$('#saveTemplateModal').hide();" style="background:#6c757d; color:white; padding:8px 15px; border:none; border-radius:5px; margin-right:10px;">Zrušit</button>
            <button type="button" id="confirmSaveTemplate" style="background:#28a745; color:white; padding:8px 15px; border:none; border-radius:5px;">Uložit</button>
        </div>
    </div>
</div>

<script>
$(function(){
    // Načtení šablony
    $('#emailTemplate').on('change', function(){
        var selectedOption = $(this).find('option:selected');
        if(selectedOption.val()) {
            $('#emailSubject').val(selectedOption.data('subject') || '');
            $('#emailBody').val(selectedOption.data('body') || '');
        }
    });

    // Načtení skupiny příjemců
    $('#recipientSelection').on('change', function(){
        var selectionId = $(this).val();
        if(selectionId) {
            // Zde by se měl načíst výběr příjemců přes AJAX
            // Pro nyní pouze informujeme uživatele
            alert('Funkce načtení skupiny příjemců bude implementována v další fázi.');
        }
    });

    // Náhled emailu
    $('#previewEmail').on('click', function(){
        var subject = $('#emailSubject').val();
        var body = $('#emailBody').val().replace(/\n/g, '<br>');

        if(!subject || !body) {
            alert('Vyplňte předmět a obsah emailu pro náhled.');
            return;
        }

        var previewHtml = '<div style="border:1px solid #ddd; padding:15px; font-family:Arial,sans-serif;">';
        previewHtml += '<div style="background:#f5f5f5; padding:10px; margin-bottom:15px; border-radius:5px;">';
        previewHtml += '<strong>Předmět:</strong> ' + subject;
        previewHtml += '</div>';
        previewHtml += '<div style="line-height:1.6;">' + body + '</div>';
        previewHtml += '</div>';

        $('#previewContent').html(previewHtml);
        $('#emailPreviewModal').show();
    });

    // Uložení jako šablona
    $('#saveAsTemplate').on('click', function(){
        var subject = $('#emailSubject').val();
        var body = $('#emailBody').val();

        if(!subject || !body) {
            alert('Vyplňte předmět a obsah emailu před uložením šablony.');
            return;
        }

        $('#saveTemplateModal').show();
        $('#templateName').focus();
    });

    // Potvrzení uložení šablony
    $('#confirmSaveTemplate').on('click', function(){
        var templateName = $('#templateName').val().trim();
        if(!templateName) {
            alert('Zadejte název šablony.');
            return;
        }

        var formData = {
            _token: '{{ csrf_token() }}',
            name: templateName,
            subject: $('#emailSubject').val(),
            body: $('#emailBody').val(),
            chapter: '{{ $chapter }}'
        };

        $.ajax({
            url: '{{ route("emailing.saveTemplate") }}',
            type: 'POST',
            data: formData,
            success: function(response) {
                if(response.success) {
                    alert('Šablona byla úspěšně uložena!');
                    $('#saveTemplateModal').hide();
                    $('#templateName').val('');

                    // Přidat novou šablonu do selectu
                    $('#emailTemplate').append('<option value="' + response.id + '" data-subject="' + formData.subject + '" data-body="' + formData.body + '">' + templateName + '</option>');
                } else {
                    alert('Chyba při ukládání šablony: ' + (response.error || 'Neznámá chyba'));
                }
            },
            error: function() {
                alert('Chyba při komunikaci se serverem.');
            }
        });
    });

    // Validace před odesláním
    $('#emailForm').on('submit', function(e) {
        var subject = $('#emailSubject').val().trim();
        var body = $('#emailBody').val().trim();
        var recipientsCount = {{ count($recipients) }};

        if(!subject) {
            alert('Zadejte předmět emailu.');
            e.preventDefault();
            return false;
        }

        if(!body) {
            alert('Zadejte obsah emailu.');
            e.preventDefault();
            return false;
        }

        if(recipientsCount === 0) {
            alert('Nejsou vybráni žádní příjemci. Vyberte příjemce v tabulkách budov.');
            e.preventDefault();
            return false;
        }

        // Potvrzení odeslání
        if(!confirm('Opravdu chcete odeslat email ' + recipientsCount + ' příjemcům?')) {
            e.preventDefault();
            return false;
        }

        // Zobrazit loading stav
        $('#sendEmail').prop('disabled', true).text('Odesílám...');
    });

    // Zavření modalů při kliknutí mimo
    $(document).on('click', function(e) {
        if($(e.target).is('#emailPreviewModal')) {
            $('#emailPreviewModal').hide();
        }
        if($(e.target).is('#saveTemplateModal')) {
            $('#saveTemplateModal').hide();
        }
    });
});
</script>
&&&