@extends('layouts.site')

@section('title', $ticket['device_name'] ?? __('site.account_requests_section'))

@section('content')
@php
    $lc = ['locale' => app()->getLocale()];
    $lastId = collect($thread)->max('id') ?: 0;
@endphp

<div
    class="site-container eca-account-page"
    x-data="siteAccountRequest({
        messagesUrl: @js($messagesUrl),
        replyUrl: @js($replyUrl),
        lastId: {{ (int) $lastId }},
        canReply: @js($canReply),
                labels: {
                    sending: @js(__('site.account_request_sending')),
                    closed: @js(__('site.account_request_chat_closed')),
                    error: @js(__('site.auth_otp_send_failed')),
                    you: @js(__('site.account_request_you')),
                    team: @js(__('site.account_request_team')),
                },
    })"
>
    <div class="mb-4">
        <a href="{{ route('site.account.requests', array_merge($lc, ['tab' => 'requests'])) }}" class="eca-account-back">
            ← {{ __('site.account_request_back') }}
        </a>
    </div>

    <x-site.repair-ticket-card
        :ticket="$ticket"
        :show-actions="false"
        :show-financial="(bool) ($ticket['show_financial'] ?? false)"
        class="mb-5"
    />

    <section class="eca-account-section eca-request-thread">
        <h2 class="eca-account-section__title">{{ __('site.account_request_thread_title') }}</h2>
        <p class="eca-account-section__subtitle">{{ __('site.account_request_thread_hint') }}</p>

        <div class="eca-request-thread__list" x-ref="list">
            @forelse ($thread as $message)
                @include('site.account.partials.thread-message', ['message' => $message])
            @empty
                <p class="eca-request-thread__empty" x-show="!hasMessages">{{ __('site.account_request_thread_empty') }}</p>
            @endforelse
        </div>

        <template x-ref="rowTpl">
            <div class="eca-request-thread__row" data-dynamic="1">
                <p class="eca-request-thread__meta"></p>
                <div class="eca-request-thread__bubble"></div>
            </div>
        </template>

        @if ($canReply)
            <form class="eca-request-thread__composer" @submit.prevent="send()">
                <label class="sr-only" for="account-request-reply">{{ __('site.account_request_reply_placeholder') }}</label>
                <textarea
                    id="account-request-reply"
                    class="eca-auth-modal__input"
                    rows="3"
                    x-model="draft"
                    :disabled="sending"
                    placeholder="{{ __('site.account_request_reply_placeholder') }}"
                    @keydown.enter="if (!$event.shiftKey && !$event.isComposing) { $event.preventDefault(); send(); }"
                ></textarea>
                <p x-show="error" x-text="error" class="eca-account-feedback eca-account-feedback--error" x-cloak></p>
                <button type="submit" class="site-btn-primary" :disabled="sending || !String(draft).trim()">
                    <span x-show="!sending">{{ __('site.account_request_send') }}</span>
                    <span x-show="sending" x-cloak>{{ __('site.account_request_sending') }}</span>
                </button>
            </form>
        @else
            <p class="mt-4 text-sm eca-theme-text-muted">{{ __('site.account_request_chat_closed') }}</p>
        @endif
    </section>
</div>
@endsection