@extends('layouts.app')

    @section('content')
    <div class="emailingFormWrap" style="width:70%; max-width:950px; margin:40px auto 0; background:#f8fbff; border-radius:16px; box-shadow:0 4px 24px #e1e9f5; padding:32px 28px; font-family:Arial,sans-serif;">
        <!-- Nadpis -->
        <div style="display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:28px;">
            <img src="https://cdn-icons-png.flaticon.com/512/732/732200.png" alt="mail" width="32" height="32">
            <span style="font-size:1.65em; font-weight:bold; color:#242a39;">Emailing</span>
        </div>

        @if(session('success'))
            <div style="background:#dbffe0; color:#187c13; padding:8px 15px; border-radius:8px; margin-bottom:22px; font-weight:600;">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('emailing.send') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div style="display:flex; flex-direction:row; gap:38px; align-items:flex-start;">
                <!-- Levý sloupec: Výběr příjemců -->
                <div style="flex:1; min-width:260px;">
                    <div style="background: #eef5fc; padding: 18px 18px 15px 18px; border-radius: 10px; margin-bottom: 28px;">
                        <div style="font-weight:bold; margin-bottom:8px; color:#18447d;">Výběr příjemců</div>
                        <div style="display:flex; gap:8px; margin-bottom:9px;">
                            <select id="selection" name="selection_id" style="padding:4px 7px; border-radius:5px; border:1px solid #bdd2e7; min-width:150px; font-size:0.98em;">
                                <option value="">-- Vyber uložený výběr --</option>
                                @foreach($selections as $sel)
                                    <option value="{{ $sel->id }}">{{ $sel->name }}</option>
                                @endforeach
                            </select>
                            <button type="button" id="btnLoadSelection" style="padding:3px 11px; font-size:0.96em; background:#fff; border:1px solid #acc7e6; border-radius:6px; cursor:pointer;">Načíst</button>
                        </div>
                        <div style="display:flex; gap:8px;">
                            <input type="text" id="selectionName" placeholder="Název aktuálního výběru..." style="padding:4px 7px; border-radius:5px; border:1px solid #bdd2e7; width:115px; font-size:0.97em;">
                            <button type="button" id="btnSaveSelection" style="background:#e5f1fc; color:#2156a6; border:none; border-radius:6px; padding:4px 11px; font-size:0.97em; cursor:pointer;">Uložit výběr</button>
                        </div>
                    </div>
                    <div style="font-weight:600; margin-bottom:5px; color:#174076;">Označení příjemců: <span id="recipientCount" style="color:#1673ba;">0 vybraných</span></div>
                    <div style="background: #f7fafd; border-radius: 8px; border:1px solid #e3eaf2; padding:8px 5px 8px 8px; max-height:162px; overflow:auto; margin-bottom:24px;">
                        <table style="width:100%; font-size:0.97em; border-collapse:collapse;">
                            <thead>
                                <tr style="background:#f1f6fa; color:#285e92;">
                                    <th style="width:30px; font-weight:500;">X</th>
                                    <th style="font-weight:500; text-align:left;">Jméno</th>
                                    <th style="font-weight:500; text-align:left;">E-mail</th>
                                </tr>
                            </thead>
                            <tbody id="recipientsTable">
                                @foreach($tenants as $tenant)
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="recipient_ids[]" value="{{ $tenant->id }}" class="recipient-checkbox">
                                        </td>
                                        <td>{{ $tenant->Jmeno }} {{ $tenant->Prijmeni }}</td>
                                        <td>{{ $tenant->Email }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div style="font-size:0.97em; color:#577199; margin-top:12px; margin-bottom:6px; font-weight:600;">
                        Historie rozesílek <a href="{{ route('emailing.history') }}" style="color:#1876d1; text-decoration:underline; margin-left:6px;">Zobrazit</a>
                    </div>
                    {{-- Volitelně můžeš vložit část s historií zde --}}
                </div>
                <!-- Pravý sloupec: Formulář -->
                <div style="flex:2; min-width:340px; max-width:560px;">
                    <div>
                        <label style="font-weight: bold; color: #1c3556;" for="emailing-predmet">Předmět:</label>
                        <input id="emailing-predmet" name="subject" type="text" style="width:100%;padding:7px 10px; border-radius:6px; border:1px solid #bdd2e7; margin-top:5px; font-size:1.01em;" required>
                    </div>
                    <div>
                        <label style="font-weight: bold; color: #1c3556;" for="emailing-text">Text zprávy:</label>
                        <textarea id="emailing-text" name="text" rows="7" style="width:100%;padding:9px 12px; border-radius:6px; border:1px solid #bdd2e7; margin-top:5px; font-size:1.01em;" required></textarea>
                    </div>
                    <div style="display:flex; gap:12px; align-items:center; margin-bottom:2px; flex-wrap:wrap;">
                        <label for="emailing-template" style="font-weight: 500; color:#1c3556;">Šablona:</label>
                        <select id="emailing-template" name="template_id" style="padding:3px 8px; border-radius:5px; border:1px solid #bdd2e7;">
                            <option value="">-- Vyber šablonu --</option>
                            @foreach($templates as $tpl)
                                <option value="{{ $tpl->id }}">{{ $tpl->name }}</option>
                            @endforeach
                        </select>
                        <button type="button" id="btnSaveTemplate" style="background:#e5f1fc; color:#2156a6; border:none; border-radius:6px; padding:4px 11px; font-size:0.97em; cursor:pointer;">Uložit jako šablonu</button>
                    </div>
                    <div style="display:flex; gap:18px; align-items:center; flex-wrap:wrap;">
                        <label for="emailing-priloha" style="font-weight:bold; color:#1c3556;">Příloha:</label>
                        <input id="emailing-priloha" name="priloha" type="file" style="margin-right:8px; font-size:1em;">
                        <span style="font-size:0.98em; color:#8498b1;">Nevybrán žádný soubor</span>
                    </div>
                    <div style="margin-bottom:3px; margin-top:0; display:flex; align-items:center; gap:7px; font-size:0.99em;">
                        <input type="checkbox" id="ulozit-ke-kartam" name="ulozit_ke_kartam" style="margin-top:1px;">
                        <label for="ulozit-ke-kartam" style="font-size:0.99em; color:#183a65;">Uložit zprávu k nájemníkovi/jednotce</label>
                    </div>
                    <div style="display:flex; gap:13px; justify-content: flex-end; margin-top:6px;">
                        <button type="reset" style="background:#f0f4fa; color:#426087; border:none; border-radius:6px; padding:8px 19px; font-size:1.01em; cursor:pointer;">Zavřít</button>
                        <button type="button" style="background:#e5f1fc; color:#2156a6; border:none; border-radius:6px; padding:8px 17px; font-size:1.01em; cursor:pointer;">Uložit koncept</button>
                        <button type="submit" style="background:#2592fd; color:white; border:none; border-radius:6px; padding:8px 26px; font-size:1.07em; font-weight:600; cursor:pointer;">Odeslat</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script>
    // Počet označených příjemců
    function updateRecipientCount() {
        let count = document.querySelectorAll('.recipient-checkbox:checked').length;
        document.getElementById('recipientCount').textContent = count + ' vybraných';
    }
    document.querySelectorAll('.recipient-checkbox').forEach(cb => {
        cb.addEventListener('change', updateRecipientCount);
    });
    updateRecipientCount();
    </script>
    @endsection