@extends('backend.layout.master-tailwind')
@section('title', __('All Restricted Words'))

@section('admin_styles')
    <style>
        .row-pop {
            position: fixed;
            z-index: 9999;
            background: var(--bg-elev, var(--surface));
            border: 1px solid var(--border-strong, var(--border));
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
            min-width: 160px;
            overflow: hidden;
            padding: 4px;
        }

        .dialog-head {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .dialog-head h3 {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            margin: 0;
        }

        .dialog-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .dialog-foot {
            padding: 12px 20px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        @media (max-width: 600px) {
            .tbl .col-id { display: none; }
            #string_search { width: 100% !important; }
        }
    </style>
@endsection

@section('content')
    <div class="page">

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('All Restricted Words') }}</h1>
                <p class="page-sub">{{ __('Words added here are blocked from client-freelancer conversations') }}</p>
            </div>
            <div class="page-actions">
                <button type="button" class="btn ghost sm" id="bulkDeleteBtn"
                    style="display:none;color:var(--danger,#ef4444);border-color:var(--danger,#ef4444)"
                    onclick="bulkDelete()">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="3 6 5 6 21 6" />
                        <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
                        <path d="M10 11v6" />
                        <path d="M14 11v6" />
                        <path d="M9 6V4h6v2" />
                    </svg>
                    {{ __('Delete Selected') }}
                </button>
                <input type="search" id="string_search" class="input" placeholder="{{ __('Search…') }}"
                    style="width:200px">
                <button type="button" class="btn primary sm"
                    onclick="document.getElementById('addWordDialog').showModal()">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 5v14M5 12h14" />
                    </svg>
                    {{ __('Add Word') }}
                </button>
            </div>
        </div>

        <div
            style="background:color-mix(in oklch,#f59e0b 10%,transparent);border:1px solid color-mix(in oklch,#f59e0b 30%,transparent);border-radius:8px;padding:12px 14px;font-size:12px;color:#92400e;line-height:1.6;margin-bottom:16px">
            {{ __('Notice: You can add any words to the list that you\'d like to exclude from the conversation between the client and freelancer. If user try to send any restricted word listed below will not send.') }}
        </div>

        <div class="card">
            <div class="search_result">
                @include('securitymanage::backend.word.search-result')
            </div>
        </div>

    </div>

    {{-- Add Word Dialog --}}
    <dialog id="addWordDialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Add Restricted Word') }}</h3>
            <button type="button" class="icon-btn" onclick="document.getElementById('addWordDialog').close()">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg>
            </button>
        </div>
        <form action="{{ route('admin.word.add') }}" method="POST">
            @csrf
            <div class="dialog-body">
                <div>
                    <label class="field-label" style="display:block;margin-bottom:6px">{{ __('Word') }}</label>
                    <input type="text" name="word" id="add_word_input" class="input wide"
                        placeholder="{{ __('Enter word') }}" autocomplete="off">
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('addWordDialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Edit Word Dialog --}}
    <dialog id="editWordDialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Edit Restricted Word') }}</h3>
            <button type="button" class="icon-btn" onclick="document.getElementById('editWordDialog').close()">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg>
            </button>
        </div>
        <form action="{{ route('admin.word.edit') }}" method="POST">
            @csrf
            <input type="hidden" name="word_id" id="edit_word_id">
            <div class="dialog-body">
                <div>
                    <label class="field-label" style="display:block;margin-bottom:6px">{{ __('Word') }}</label>
                    <input type="text" name="edit_word" id="edit_word_input" class="input wide"
                        placeholder="{{ __('Enter word') }}" autocomplete="off">
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('editWordDialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Update') }}</button>
            </div>
        </form>
    </dialog>

@endsection

@section('script')
    @include('securitymanage::backend.word.word-js')
@endsection