{{-- TDS talep: firma adı + mail + isim --}}
@php
    $itemType = $itemType ?? 'product';
    $itemId = $itemId ?? null;
    $docs = is_array($docs ?? null) ? $docs : [];
@endphp

<style>
.tds-panel {
    margin-top: 8px;
    max-width: 640px;
}
.tds-panel__intro {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}
.tds-docs {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tds-docs__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #f7f7f8;
    border: 1px solid #ececec;
    border-radius: 12px;
    transition: border-color .2s, background .2s;
}
.tds-docs__item.is-selected {
    border-color: #ad2230;
    background: #fff5f5;
}
.tds-docs__name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    min-width: 0;
}
.tds-docs__name i {
    color: #ad2230;
    flex-shrink: 0;
}
.tds-docs__name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tds-docs__pick {
    flex-shrink: 0;
    border: 1px solid #ad2230;
    background: #fff;
    color: #ad2230;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: .2s;
}
.tds-docs__pick:hover,
.tds-docs__item.is-selected .tds-docs__pick {
    background: #ad2230;
    color: #fff;
}
.tds-form {
    display: grid;
    gap: 14px;
}
.tds-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 575px) {
    .tds-form__row { grid-template-columns: 1fr; }
    .tds-docs__item { flex-direction: column; align-items: stretch; }
    .tds-docs__pick { width: 100%; text-align: center; }
}
.tds-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #777;
}
.tds-field input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    color: #222;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.tds-field input:focus {
    border-color: #ad2230;
    box-shadow: 0 0 0 3px rgba(173, 34, 48, .12);
}
.tds-field input::placeholder { color: #aaa; }
.tds-form__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.tds-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 180px;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: #ad2230;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.tds-submit:hover { background: #8f1b26; }
.tds-submit:disabled { opacity: .65; cursor: wait; }
.tds-selected {
    font-size: 13px;
    color: #555;
}
.tds-selected strong { color: #ad2230; }
.tds-msg {
    display: none;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}
.tds-msg.is-ok {
    display: block;
    background: #eefaf1;
    color: #0a7a2f;
    border: 1px solid #c6ebd1;
}
.tds-msg.is-err {
    display: block;
    background: #fff1f1;
    color: #b42318;
    border: 1px solid #f3c4c0;
}
</style>

<div class="tds-panel">
    <p class="tds-panel__intro">{{ ui('tds_intro', 'Teknik dokümanlar doğrudan indirilmez. Firma bilgilerinizi bırakın; doküman e-posta adresinize iletilecektir.') }}</p>

    @if(session('tds_success'))
        <div class="tds-msg is-ok" style="display:block;">{{ session('tds_success') }}</div>
    @endif

    <div class="tds-msg tds-form-message" role="status"></div>

    @if(count($docs))
        <ul class="tds-docs">
            @foreach($docs as $doc)
                <li class="tds-docs__item {{ count($docs) === 1 ? 'is-selected' : '' }}">
                    <div class="tds-docs__name">
                        <i class="fal fa-file-pdf"></i>
                        <span>{{ basename($doc) }}</span>
                    </div>
                    <button type="button"
                        class="tds-docs__pick tds-select-doc"
                        data-path="{{ $doc }}"
                        data-name="{{ basename($doc) }}">
                        {{ ui('tds_request_btn', 'Seç') }}
                    </button>
                </li>
            @endforeach
        </ul>
    @endif

    <form class="tds-request-form tds-form" action="{{ url('/tds-request') }}" method="POST" novalidate>
        @csrf
        <input type="hidden" name="item_type" value="{{ $itemType }}">
        <input type="hidden" name="item_id" value="{{ $itemId }}">
        <input type="hidden" name="document_path" class="tds-document-path" value="{{ count($docs) === 1 ? $docs[0] : '' }}">

        <div class="tds-form__row">
            <div class="tds-field">
                <label for="tds-company-{{ $itemId }}">{{ ui('tds_company', 'Firma Adı') }}</label>
                <input id="tds-company-{{ $itemId }}" type="text" name="company_name" placeholder="{{ ui('tds_company', 'Firma Adı') }}" required autocomplete="organization">
            </div>
            <div class="tds-field">
                <label for="tds-email-{{ $itemId }}">{{ ui('tds_email', 'E-posta') }}</label>
                <input id="tds-email-{{ $itemId }}" type="email" name="company_email" placeholder="{{ ui('tds_email', 'E-posta') }}" required autocomplete="email">
            </div>
        </div>

        <div class="tds-field">
            <label for="tds-name-{{ $itemId }}">{{ ui('tds_contact', 'Ad Soyad') }}</label>
            <input id="tds-name-{{ $itemId }}" type="text" name="contact_name" placeholder="{{ ui('tds_contact', 'Ad Soyad') }}" required autocomplete="name">
        </div>

        <div class="tds-form__actions">
            <button type="submit" class="tds-submit">
                <i class="fal fa-paper-plane"></i>
                {{ ui('tds_submit', 'Talep Gönder') }}
            </button>
            <p class="tds-selected" style="{{ count($docs) === 1 ? '' : 'display:none;' }}">
                {{ ui('tds_selected', 'Seçili doküman') }}:
                <strong class="tds-selected-name">{{ count($docs) === 1 ? basename($docs[0]) : '' }}</strong>
            </p>
        </div>
    </form>
</div>

@once
<script>
(function () {
    function bindTdsBox(box) {
        if (!box || box.dataset.tdsBound) return;
        box.dataset.tdsBound = '1';

        var form = box.querySelector('.tds-request-form');
        var pathInput = box.querySelector('.tds-document-path');
        var selectedWrap = box.querySelector('.tds-selected');
        var selectedName = box.querySelector('.tds-selected-name');
        var msg = box.querySelector('.tds-form-message');

        box.querySelectorAll('.tds-select-doc').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var path = btn.getAttribute('data-path') || '';
                var name = btn.getAttribute('data-name') || '';
                if (pathInput) pathInput.value = path;
                if (selectedName) selectedName.textContent = name;
                if (selectedWrap) selectedWrap.style.display = '';
                box.querySelectorAll('.tds-docs__item').forEach(function (item) {
                    item.classList.remove('is-selected');
                });
                var li = btn.closest('.tds-docs__item');
                if (li) li.classList.add('is-selected');
            });
        });

        if (!form) return;

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var btn = form.querySelector('button[type="submit"]');
            var original = btn ? btn.innerHTML : '';
            if (btn) {
                btn.disabled = true;
                btn.textContent = '...';
            }
            if (msg) {
                msg.className = 'tds-msg tds-form-message';
                msg.style.display = 'none';
                msg.textContent = '';
            }

            fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: new FormData(form)
            })
            .then(async function (res) {
                var data = {};
                try { data = await res.json(); } catch (err) {}
                if (!res.ok) throw new Error(data.message || 'Error');
                if (msg) {
                    msg.className = 'tds-msg tds-form-message is-ok';
                    msg.textContent = data.message || 'OK';
                }
                form.reset();
                if (pathInput && box.querySelectorAll('.tds-select-doc').length === 1) {
                    var only = box.querySelector('.tds-select-doc');
                    pathInput.value = only.getAttribute('data-path') || '';
                    var onlyItem = only.closest('.tds-docs__item');
                    if (onlyItem) onlyItem.classList.add('is-selected');
                    if (selectedName) selectedName.textContent = only.getAttribute('data-name') || '';
                    if (selectedWrap) selectedWrap.style.display = '';
                } else if (pathInput) {
                    pathInput.value = '';
                    box.querySelectorAll('.tds-docs__item').forEach(function (item) {
                        item.classList.remove('is-selected');
                    });
                    if (selectedWrap) selectedWrap.style.display = 'none';
                }
            })
            .catch(function (err) {
                if (msg) {
                    msg.className = 'tds-msg tds-form-message is-err';
                    msg.textContent = err.message || 'Error';
                }
            })
            .finally(function () {
                if (btn) {
                    btn.disabled = false;
                    btn.innerHTML = original;
                }
            });
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.tds-panel').forEach(bindTdsBox);
    });
})();
</script>
@endonce