@extends('layouts.admin', ['active' => 'quick-reply'])

@section('title', 'Quick Reply')
@section('heading', 'Quick Reply')

@section('content')
    @php
        $rows = $domains->getCollection();
        $hasActiveFilters = $filters['search'] !== '';
        $grid = $canManageQuickReplies
            ? 'grid-cols-[minmax(0,1.2fr)_minmax(0,1.4fr)_7rem_3.5rem]'
            : 'grid-cols-[minmax(0,1.2fr)_minmax(0,1.4fr)_7rem]';
        $answerMax = \App\Models\DomainQuickReply::ANSWER_MAX;
    @endphp

    <div class="flex shrink-0 flex-wrap items-center justify-between gap-3">
        <form id="quick-reply-filter-form" method="GET" action="{{ route('quick-reply') }}" class="flex flex-wrap items-center gap-3">
            <div class="relative w-full sm:w-80">
                <svg class="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0Z" />
                </svg>
                <input
                    type="search"
                    name="search"
                    value="{{ $filters['search'] }}"
                    placeholder="Search…"
                    aria-label="Search Quick Reply"
                    data-search-input
                    class="h-9 w-full rounded-lg border border-border/80 bg-muted/40 pr-3 pl-9 text-sm shadow-none outline-none"
                >
            </div>
        </form>
    </div>

    <div class="flex min-h-0 flex-1 flex-col gap-3">
        <div class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-background">
            <div class="grid {{ $grid }} shrink-0 gap-3 bg-muted/40 px-4 py-2.5 text-sm font-medium">
                <div>Account name</div>
                <div>Domain</div>
                <div>Status</div>
                @if ($canManageQuickReplies)
                    <div>Action</div>
                @endif
            </div>

            <div class="flex min-h-0 flex-1 flex-col">
                @forelse ($rows as $row)
                    @php $hasReply = $row->quickReply !== null; @endphp
                    <div class="grid {{ $grid }} items-center gap-3 border-t border-border/50 px-4 py-2.5 text-sm">
                        <div class="min-w-0 truncate">{{ $row->domain_name }}</div>
                        <div class="min-w-0 truncate text-muted-foreground">{{ $row->domain }}</div>
                        <div>{{ $hasReply ? 'Set' : 'Not set' }}</div>
                        @if ($canManageQuickReplies)
                            <div class="relative">
                                <button type="button" data-menu-toggle class="inline-flex size-8 cursor-pointer items-center justify-center rounded-lg hover:bg-muted" aria-label="Actions">
                                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
                                    </svg>
                                </button>
                                <div data-menu class="absolute right-0 z-20 hidden min-w-52 rounded-lg border border-border bg-card p-1.5 shadow-lg">
                                    <button
                                        type="button"
                                        class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm hover:bg-muted"
                                        data-edit-quick-reply
                                        data-id="{{ $row->id }}"
                                        data-domain-name="{{ $row->domain_name }}"
                                        data-has-reply="{{ $hasReply ? '1' : '0' }}"
                                        data-quickreply='@json($row->quickReply?->quickreply ?? [])'
                                        data-update-action="{{ route('quick-reply.update', $row) }}"
                                    >
                                        @include('admin.partials.icon', ['name' => $hasReply ? 'pencil' : 'plus'])
                                        {{ $hasReply ? 'Edit' : 'Add' }}
                                    </button>
                                    @if ($hasReply)
                                        <form method="POST" action="{{ route('quick-reply.destroy', $row) }}" data-confirm="Are you sure you want to delete quick replies for {{ $row->domain_name }}? This action cannot be undone.">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm text-destructive hover:bg-muted">
                                                @include('admin.partials.icon', ['name' => 'trash'])
                                                Delete
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                @empty
                    <div class="flex flex-1 items-center justify-center px-4 text-sm text-muted-foreground">
                        {{ $hasActiveFilters ? 'No matching Domain.' : 'No Domain found.' }}
                    </div>
                @endforelse
            </div>
        </div>

        @include('admin.partials.pagination', ['paginator' => $domains])
    </div>
@endsection

@section('dialogs')
    <div data-dialog="quick-reply-form" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
        <div data-dialog-close class="absolute inset-0 bg-black/50"></div>
        <div class="relative mx-auto flex max-h-[90vh] w-full max-w-xl flex-col overflow-hidden rounded-xl border border-border bg-card shadow-lg">
            <div class="shrink-0 border-b bg-muted/50 p-4">
                <h2 data-dialog-title class="text-lg font-semibold">Add Quick Reply</h2>
                <p data-dialog-description class="text-sm text-muted-foreground">Save canned answers for this domain.</p>
            </div>
            <form id="quick-reply-form" method="POST" action="{{ route('quick-reply') }}" novalidate class="flex min-h-0 flex-1 flex-col">
                @csrf
                @method('PUT')
                <div class="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-4">
                    <div data-field="deposit" class="flex flex-col gap-2">
                        <label for="deposit" class="text-xs font-medium tracking-wider text-muted-foreground uppercase">
                            Deposit <span class="text-destructive">*</span>
                        </label>
                        <textarea
                            id="deposit"
                            name="deposit"
                            rows="4"
                            maxlength="{{ $answerMax }}"
                            placeholder="💰 Minimum Deposit ₹99"
                            class="h-28 resize-none overflow-y-auto rounded-lg border border-border/80 bg-muted/40 px-3 py-2 text-sm outline-none"
                        ></textarea>
                        <div class="flex items-start justify-between gap-3">
                            <p data-error-for="deposit" class="hidden text-sm text-destructive"></p>
                            <p data-quick-reply-count="deposit" class="ml-auto text-xs tabular-nums text-muted-foreground">0/{{ $answerMax }}</p>
                        </div>
                    </div>
                    <div data-field="withdrawal" class="flex flex-col gap-2">
                        <label for="withdrawal" class="text-xs font-medium tracking-wider text-muted-foreground uppercase">
                            Withdrawal <span class="text-destructive">*</span>
                        </label>
                        <textarea
                            id="withdrawal"
                            name="withdrawal"
                            rows="4"
                            maxlength="{{ $answerMax }}"
                            placeholder="💵 Withdrawal Minimum ₹500"
                            class="h-28 resize-none overflow-y-auto rounded-lg border border-border/80 bg-muted/40 px-3 py-2 text-sm outline-none"
                        ></textarea>
                        <div class="flex items-start justify-between gap-3">
                            <p data-error-for="withdrawal" class="hidden text-sm text-destructive"></p>
                            <p data-quick-reply-count="withdrawal" class="ml-auto text-xs tabular-nums text-muted-foreground">0/{{ $answerMax }}</p>
                        </div>
                    </div>
                    <div data-field="game_rate" class="flex flex-col gap-2">
                        <label for="game_rate" class="text-xs font-medium tracking-wider text-muted-foreground uppercase">
                            Game Rate <span class="text-destructive">*</span>
                        </label>
                        <textarea
                            id="game_rate"
                            name="game_rate"
                            rows="6"
                            maxlength="{{ $answerMax }}"
                            placeholder="🎯 Game Rates 🎯"
                            class="h-40 resize-none overflow-y-auto rounded-lg border border-border/80 bg-muted/40 px-3 py-2 text-sm outline-none"
                        ></textarea>
                        <div class="flex items-start justify-between gap-3">
                            <p data-error-for="game_rate" class="hidden text-sm text-destructive"></p>
                            <p data-quick-reply-count="game_rate" class="ml-auto text-xs tabular-nums text-muted-foreground">0/{{ $answerMax }}</p>
                        </div>
                    </div>
                    <div data-field="other" class="flex flex-col gap-2">
                        <label for="other" class="text-xs font-medium tracking-wider text-muted-foreground uppercase">
                            Other <span class="text-destructive">*</span>
                        </label>
                        <textarea
                            id="other"
                            name="other"
                            rows="4"
                            maxlength="{{ $answerMax }}"
                            placeholder="⚡ Fast Withdrawal 5-10 मिनट Guaranteed"
                            class="h-28 resize-none overflow-y-auto rounded-lg border border-border/80 bg-muted/40 px-3 py-2 text-sm outline-none"
                        ></textarea>
                        <div class="flex items-start justify-between gap-3">
                            <p data-error-for="other" class="hidden text-sm text-destructive"></p>
                            <p data-quick-reply-count="other" class="ml-auto text-xs tabular-nums text-muted-foreground">0/{{ $answerMax }}</p>
                        </div>
                    </div>
                </div>
                <div class="flex shrink-0 gap-3 border-t border-border bg-card p-4">
                    <button type="button" data-dialog-close class="h-11 flex-1 cursor-pointer rounded-lg border border-border bg-background text-sm font-medium">
                        Cancel
                    </button>
                    <button type="submit" data-submit-label class="h-11 flex-1 cursor-pointer rounded-lg bg-primary text-sm font-medium text-primary-foreground">
                        Save Quick Reply
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection