@extends('admin.admin')

@section('content')

    <div class="page-wrapper">
        <div class="content bg-white">
            <div class="d-md-flex d-block align-items-center justify-content-between border-bottom pb-3">
                <div class="my-auto mb-2">
                    <h3 class="page-title mb-1">{{ __('chatbot_settings') }}</h3>
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">{{ __('dashboard') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="javascript:void(0);">{{ __('settings') }}</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('chatbot_settings') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class="row">
                @include('admin.partials.general_settings_side_menu')
                <div class="col-xxl-10 col-xl-9">
                    <div class="ps-1">

                        <div class="d-flex align-items-center justify-content-between flex-wrap border-bottom pt-3 mb-3">
                            <div class="mb-3">
                                <h5 class="mb-1">{{ __('chatbot_settings') }}</h5>
                                <p>{{ __('configure_your_chatbot') }}</p>
                            </div>

                        </div>
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif


                        <ul class="nav nav-tabs mb-4 border-bottom" id="settingsTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="widget-tab" data-bs-toggle="tab"
                                    data-bs-target="#widget-settings" type="button" role="tab">
                                    {{ __('Widget Settings') }}
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="replies-tab" data-bs-toggle="tab"
                                    data-bs-target="#auto-replies" type="button" role="tab">
                                    {{ __('Auto Replies') }}
                                </button>
                            </li>
                        </ul>

                        <!-- Tabs Content -->
                        <div class="tab-content" id="settingsTabsContent">
                            <!-- Widget Settings Tab -->
                            <div class="tab-pane fade show active" id="widget-settings" role="tabpanel">
                                <div class="row">
                                    <div class="col-lg-6 mb-4">
                                        <div class="card">
                                            <div class="card-header text-white">
                                                <h5 class="mb-0">{{ __('Widget Configuration') }}</h5>
                                            </div>
                                            <div class="card-body">
                                                <form id="chatbotSettingsForm"
                                                    action="{{ route('admin.chatbots.settings.update') }}" method="POST"
                                                    data-settings='@json($settings)'>
                                                    @csrf

                                                    <div class="row g-3 mb-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label">{{ __('Widget Position') }}</label>
                                                            <select name="widget_position" class="form-select">
                                                                <option value="bottom-right"
                                                                    {{ $settings->widget_position === 'bottom-right' ? 'selected' : '' }}>
                                                                    {{ __('Bottom Right') }}
                                                                </option>
                                                                <option value="bottom-left"
                                                                    {{ $settings->widget_position === 'bottom-left' ? 'selected' : '' }}>
                                                                    {{ __('Bottom Left') }}
                                                                </option>
                                                            </select>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <label class="form-label">{{ __('Widget Shape') }}</label>
                                                            <select name="widget_shape" class="form-select">
                                                                <option value="circle"
                                                                    {{ $settings->widget_shape === 'circle' ? 'selected' : '' }}>
                                                                    {{ __('Circle') }}
                                                                </option>
                                                                <option value="rounded"
                                                                    {{ $settings->widget_shape === 'rounded' ? 'selected' : '' }}>
                                                                    {{ __('Rounded') }}
                                                                </option>
                                                                <option value="square"
                                                                    {{ $settings->widget_shape === 'square' ? 'selected' : '' }}>
                                                                    {{ __('Square') }}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">{{ __('Primary Color') }}</label>
                                                        <input type="color" name="primary_color"
                                                            class="form-control form-control-color w-100"
                                                            value="{{ $settings->primary_color }}">
                                                    </div>

                                                    <div class="row g-3 mb-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label">{{ __('Widget Size (pixels)') }}</label>
                                                            <input type="number" name="widget_size" class="form-control"
                                                                value="{{ $settings->widget_size }}" min="40"
                                                                max="100">
                                                        </div>

                                                        <div class="col-md-6">
                                                            <label class="form-label">{{ __('Icon Type') }}</label>
                                                            <select name="icon_type" class="form-select">
                                                                <option value="message"
                                                                    {{ $settings->icon_type === 'message' ? 'selected' : '' }}>
                                                                    {{ __('Message Icon') }}
                                                                </option>
                                                                <option value="chat"
                                                                    {{ $settings->icon_type === 'chat' ? 'selected' : '' }}>
                                                                    {{ __('Chat Bubble') }}
                                                                </option>
                                                                <option value="support"
                                                                    {{ $settings->icon_type === 'support' ? 'selected' : '' }}>
                                                                    {{ __('Support Icon') }}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">{{ __('Welcome Message') }}</label>
                                                        <textarea name="welcome_message" class="form-control" rows="3">{{ $settings->welcome_message }}</textarea>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">{{ __('Floating Message Bubble') }}</label>
                                                        <textarea name="floating_message" class="form-control" rows="2"
                                                            placeholder="e.g., Hi! Need help? Chat with us now! 👋">{{ $settings->floating_message ?? '' }}</textarea>
                                                        <small class="text-muted">{{ __('Optional greeting message that appears above the widget') }}</small>
                                                    </div>

                                                    <div class="row g-3 mb-3">
                                                        <div class="col-md-4">
                                                            <div class="form-check mb-0">
                                                                <input type="checkbox" name="floating_message_enabled"
                                                                    class="form-check-input" id="floatingMessageEnabled"
                                                                    {{ $settings->floating_message_enabled ?? false ? 'checked' : '' }}
                                                                    value="1">
                                                                <label class="form-check-label"
                                                                    for="floatingMessageEnabled">
                                                                    {{ __('Floating Message') }}
                                                                </label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div class="form-check mb-0">
                                                                <input type="checkbox" name="auto_reply_enabled"
                                                                    class="form-check-input" id="autoReply"
                                                                    {{ $settings->auto_reply_enabled ? 'checked' : '' }}
                                                                    value="1">
                                                                <label class="form-check-label" for="autoReply">
                                                                    {{ __('Auto-Reply') }}
                                                                </label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div class="form-check mb-0">
                                                                <input type="checkbox" name="is_active"
                                                                    class="form-check-input" id="isActive"
                                                                    {{ $settings->is_active ? 'checked' : '' }}
                                                                    value="1">
                                                                <label class="form-check-label" for="isActive">
                                                                    {{ __('Chatbot Active') }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <button type="submit" class="btn btn-primary w-100">
                                                        {{ __('Save Widget Settings') }}
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Live Preview -->
                                    <div class="col-lg-6">
                                        <div class="card">
                                            <div class="card-header">
                                                <h6 class="mb-0">{{ __('Live Preview') }}</h6>
                                            </div>
                                            <div class="card-body text-center"
                                                style="height: 450px; position: relative; background: #f0f0f0;">
                                                <div id="widget-preview"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Auto Replies Tab -->
                            <div class="tab-pane fade" id="auto-replies" role="tabpanel">
                                <div class="row">
                                    <div class="col-lg-12 mx-auto">
                                        <div class="card">
                                            <div
                                                class="card-header text-white d-flex justify-content-between align-items-center">
                                                <h5 class="mb-0">{{ __('Auto Replies Configuration') }}</h5>
                                                <button class="btn btn-sm btn-light" data-bs-toggle="modal"
                                                    data-bs-target="#addReplyModal">
                                                    {{ __('Add New Reply') }}
                                                </button>
                                            </div>
                                            <div class="card-body p-0">
                                                <div class="table-responsive">
                                                    <table class="table table-hover mb-0">
                                                        <thead class="bg-light">
                                                            <tr>
                                                                <th>{{ __('Keywords') }}</th>
                                                                <th>{{ __('Reply Message') }}</th>
                                                                <th>{{ __('Priority') }}</th>
                                                                <th>{{ __('Status') }}</th>
                                                                <th>{{ __('Actions') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @forelse($autoReplies as $reply)
                                                                <tr>
                                                                    <td>
                                                                        @foreach ($reply->trigger_keywords as $keyword)
                                                                            <span
                                                                                class="badge bg-info me-1">{{ $keyword }}</span>
                                                                        @endforeach
                                                                    </td>
                                                                    <td>
                                                                        <small>{{ Str::limit($reply->reply_message, 50) }}</small>
                                                                    </td>
                                                                    <td>
                                                                        <span
                                                                            class="badge bg-primary">{{ $reply->priority }}</span>
                                                                    </td>
                                                                    <td>
                                                                        <span
                                                                            class="badge bg-{{ $reply->is_active ? 'success' : 'secondary' }}">
                                                                            {{ $reply->is_active ? 'Active' : 'Inactive' }}
                                                                        </span>
                                                                    </td>
                                                                    <td>
                                                                        <button class="btn btn-sm border-primary"
                                                                            onclick="editReply({{ $reply->id }})">
                                                                            <i class="fa fa-pencil"></i>
                                                                        </button>
                                                                        <button class="btn btn-sm border-danger"
                                                                            onclick="deleteReply({{ $reply->id }})">
                                                                            <i class="fa fa-trash"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            @empty
                                                                <tr>
                                                                    <td colspan="5"
                                                                        class="text-center py-5 text-muted">
                                                                        <div class="mb-2">📭</div>
                                                                        <strong>{{ __('No auto-replies configured yet') }}</strong>
                                                                        <p class="mb-0 small">{{ __('Click "Add New Reply" to create your first auto-reply') }}</p>
                                                                    </td>
                                                                </tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Examples Card -->
                                        <div class="card mt-4">
                                            <div class="card-header bg-light">
                                                <h6 class="mb-0">{{ __('Example Auto-Replies') }}</h6>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-4 mb-3">
                                                        <div class="border rounded p-3 h-100">
                                                            <strong class="d-block mb-2">{{ __('Greeting') }}</strong>
                                                            <small class="text-muted d-block mb-1">{{ __('Keywords') }}: {{ __('hello') }},
                                                                {{ __('hi') }}</small>
                                                            <small class="text-success">{{ __('Reply') }}: {{ __('Hello! How can I assist you
                                                                today?') }}</small>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <div class="border rounded p-3 h-100">
                                                            <strong class="d-block mb-2">{{ __('Price Inquiry') }}</strong>
                                                            <small class="text-muted d-block mb-1">{{ __('Keywords') }}: {{ __('price') }},
                                                                {{ __('cost') }}</small>
                                                            <small class="text-success">{{ __('Reply') }}: {{ __('Please provide details about
                                                                pricing') }}</small>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <div class="border rounded p-3 h-100">
                                                            <strong class="d-block mb-2">{{ __('Support') }}</strong>
                                                            <small class="text-muted d-block mb-1">{{ __('Keywords') }}: {{ __('support') }},
                                                                {{ __('help') }}</small>
                                                            <small class="text-success">{{ __('Reply') }}: {{ __('We are here to help
                                                                you') }}</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Add Reply Modal -->
                <div class="modal fade" id="addReplyModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">{{ __('Add Auto Reply') }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <form action="{{ route('admin.chatbots.auto-replies.store') }}" method="POST">
                                @csrf
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Trigger Keywords (comma separated)') }}</label>
                                        <input type="text" name="keywords_input" class="form-control"
                                            placeholder="{{ __('hello') }}, {{ __('hi') }}, {{ __('hey') }}" required>
                                        <small class="text-muted">{{ __('Enter keywords separated by commas') }}</small>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Reply Message') }}</label>
                                        <textarea name="reply_message" class="form-control" rows="4" required></textarea>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Priority (Higher = Matches First)') }}</label>
                                        <input type="number" name="priority" class="form-control" value="5"
                                            min="0" max="10">
                                    </div>

                                    <div class="form-check">
                                        <input type="checkbox" name="is_active" class="form-check-input"
                                            id="newReplyActive" checked value="1">
                                        <label class="form-check-label" for="newReplyActive">
                                            {{ __('Active') }}
                                        </label>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                                    <button type="submit" class="btn btn-primary">{{ __('Add Reply') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Edit Reply Modal -->
                <div class="modal fade" id="editReplyModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">{{ __('Edit Auto Reply') }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <form id="editReplyForm" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="modal-body">
                                    <input type="hidden" id="edit_reply_id" name="reply_id">

                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Trigger Keywords (comma separated)') }}</label>
                                        <input type="text" id="edit_keywords_input" name="keywords_input"
                                            class="form-control" placeholder="hello, hi" required>
                                        <small class="text-muted">{{ __('Enter keywords separated by commas') }}</small>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Reply Message') }}</label>
                                        <textarea id="edit_reply_message" name="reply_message" class="form-control" rows="4" required></textarea>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Priority (Higher = Matches First)') }}</label>
                                        <input type="number" id="edit_priority" name="priority" class="form-control"
                                            value="5" min="0" max="10">
                                    </div>

                                    <div class="form-check">
                                        <input type="checkbox" id="edit_is_active" name="is_active"
                                            class="form-check-input" value="1">
                                        <label class="form-check-label" for="edit_is_active">
                                            {{ __('Active') }}
                                        </label>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                                    <button type="submit" class="btn btn-primary">{{ __('Update Reply') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            @endsection

            @include('chatbot::admin.settings-include')