@extends('admin.admin')

@stack('styles')
<link rel="stylesheet" href="{{ asset('assets/css/whatsapp-settings.css') }}">

@section('content')
    <div class="page-wrapper">
        <div class="content">
            <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">{{ __('whatsapp_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">{{ __('whatsapp_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="settings-grid">
                            <!-- Configuration Form -->
                            <div class="settings-card card">
                                <div class="card-header d-flex align-items-center justify-content-between">
                                    <div class="skeleton label-skeleton label-loader" style="display: none;"></div>
                                    <div class="d-flex align-items-center real-label">
                                        <span class="avatar avatar-lg p-2 rounded bg-gray flex-shrink-0 me-2">
                                            <img src="https://static.vecteezy.com/system/resources/previews/016/716/480/non_2x/whatsapp-icon-free-png.png"
                                                alt="Img">
                                        </span>
                                        <div>
                                            <h2 class="mb-0">{{ __('API Configuration') }}</h2>
                                            <p class="mb-0 text-muted">
                                                {{ __('Configure your WhatsApp Business API credentials') }}</p>
                                        </div>
                                    </div>
                                    <div class="status-toggle modal-status real-label">
                                        <input type="checkbox" id="is_active_toggle" name="is_active"
                                            {{ old('is_active', $settings?->is_active ?? false) ? 'checked' : '' }}>
                                        <label for="is_active_toggle" class="checktoggle"></label>
                                    </div>
                                </div>

                                <form id="whatsapp-settings-form" method="POST"
                                    action="{{ route('admin.whatsapp.settings.update') }}">
                                    @csrf

                                    <div class="form-row">
                                        <div class="form-group">
                                            <label for="access_token">
                                                <i class="fas fa-key"></i> {{ __('Access Token') }} *
                                            </label>
                                            <input type="password" id="access_token" name="access_token"
                                                class="form-control"
                                                value="{{ old('access_token', $settings->access_token ?? '') }}" required
                                                placeholder="{{ __('Enter your WhatsApp Business API access token') }}">
                                            <small class="form-text">
                                                {{ __('Get this from your Meta Developer Console') }}
                                            </small>
                                        </div>

                                        <div class="form-group">
                                            <label for="phone_number_id">
                                                <i class="fas fa-phone"></i> {{ __('Phone Number ID') }} *
                                            </label>
                                            <input type="text" id="phone_number_id" name="phone_number_id"
                                                class="form-control"
                                                value="{{ old('phone_number_id', $settings->phone_number_id ?? '') }}"
                                                required placeholder="123456789012345">
                                            <small class="form-text">
                                                {{ __('Your WhatsApp Business phone number ID from Meta') }}
                                            </small>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group">
                                            <label for="business_account_id">
                                                <i class="fas fa-building"></i> {{ __('Business Account ID') }}
                                            </label>
                                            <input type="text" id="business_account_id" name="business_account_id"
                                                class="form-control"
                                                value="{{ old('business_account_id', $settings->business_account_id ?? '') }}"
                                                placeholder="987654321098765">
                                            <small class="form-text">
                                                {{ __('Optional') }}: {{ __('Your WhatsApp Business Account ID') }}
                                            </small>
                                        </div>

                                        <div class="form-group">
                                            <label for="webhook_verify_token">
                                                <i class="fas fa-shield-alt"></i> {{ __('Webhook Verify Token') }} *
                                            </label>
                                            <input type="text" id="webhook_verify_token" name="webhook_verify_token"
                                                class="form-control"
                                                value="{{ old('webhook_verify_token', $settings->webhook_verify_token ?? Str::random(32)) }}"
                                                required placeholder="{{ __('Enter a secure random string') }}">
                                            <small class="form-text">
                                                {{ __('Use this token when setting up webhook in Meta Developer Console') }}
                                            </small>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <button type="button" onclick="saveSettings()"
                                            class="btn btn-primary general_setting_btn fixed-size-btn real-label">
                                            <i class="fas fa-save"></i> {{ __('Save') }}
                                        </button>
                                        <button type="button"
                                            class="btn btn-secondary general_setting_btn fixed-size-btn real-label"
                                            onclick="testConnection()">
                                            <i class="fas fa-plug"></i> {{ __('Test') }}
                                        </button>
                                    </div>



                                </form>

                                <!-- Connection Status Section -->
                                <div id="test-result" class="connection-status-wrapper" style="display: none;">
                                    <div class="connection-status-content">
                                        <div class="status-icon">
                                            <i class="fas fa-spinner fa-spin"></i>
                                        </div>
                                        <div class="status-details">
                                            <h3 class="status-title">{{ __('Testing connection') }}...</h3>
                                            <p class="status-message"></p>
                                            <div class="status-info"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Webhook Info -->
                            <div class="settings-card card">
                                <div class="card-header">
                                    <h2>{{ __('Webhook Configuration') }}</h2>
                                </div>

                                <div class="webhook-info">
                                    <div class="webhook-fields-row">
                                        <div class="info-group">
                                            <label>{{ __('Webhook URL') }}:</label>
                                            <div class="copy-field">
                                                <input type="text" readonly
                                                    value="{{ route(name: 'api.whatsapp.webhook.handle') }}"
                                                    id="webhook-url">
                                                <button onclick="copyToClipboard('webhook-url')" class="copy-btn">
                                                    <i class="fas fa-copy"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="info-group">
                                            <label>{{ __('Verify Token') }}:</label>
                                            <div class="copy-field">
                                                <input type="text" readonly
                                                    value="{{ $settings->webhook_verify_token ?? 'Not configured yet' }}"
                                                    id="verify-token">
                                                <button onclick="copyToClipboard('verify-token')" class="copy-btn">
                                                    <i class="fas fa-copy"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="webhook-content-row">
                                        <div class="setup-steps">
                                            <h3>{{ __('Setup Instructions') }}:</h3>
                                            <ol>
                                                <li>{{ __('Go to') }} <strong>{{ __('Meta Developer Console') }}</strong></li>
                                                <li>{{ __('Select your app') }}</li>
                                                <li>{{ __('Go to') }} <strong>{{ __('WhatsApp > Configuration') }}</strong></li>
                                                <li>{{ __('Click') }} <strong>{{ __('Edit') }}</strong> {{ __('on Webhook') }}</li>
                                                <li>{{ __('Enter the') }} <strong>{{ __('Webhook URL') }}</strong> {{ __('above') }}</li>
                                                <li>{{ __('Enter the') }} <strong>{{ __('Verify Token') }}</strong> {{ __('above') }}</li>
                                                <li>{{ __('Subscribe to') }} <strong>{{ __('messages') }}</strong> {{ __('webhook field') }}</li>
                                            </ol>
                                        </div>

                                        <div class="doc-links-section">
                                            <h3>
                                                <i class="fas fa-book"></i> {{ __('Documentation & Resources') }}
                                            </h3>

                                            <a href="https://developers.facebook.com/docs/whatsapp/cloud-api/get-started"
                                                target="_blank" class="doc-link">
                                                <i class="fab fa-whatsapp"></i>
                                                <span>{{ __('WhatsApp Cloud API - Getting Started') }}</span>
                                                <i class="fas fa-external-link-alt"></i>
                                            </a>

                                            <a href="https://developers.facebook.com/docs/whatsapp/cloud-api/webhooks"
                                                target="_blank" class="doc-link">
                                                <i class="fas fa-code"></i>
                                                <span>{{ __('Webhook Configuration Guide') }}</span>
                                                <i class="fas fa-external-link-alt"></i>
                                            </a>

                                            <a href="https://developers.facebook.com/apps" target="_blank"
                                                class="doc-link">
                                                <i class="fas fa-cog"></i>
                                                <span>{{ __('Meta Developer Console') }}</span>
                                                <i class="fas fa-external-link-alt"></i>
                                            </a>

                                            <a href="https://developers.facebook.com/docs/whatsapp/cloud-api/reference/messages"
                                                target="_blank" class="doc-link">
                                                <i class="fas fa-file-code"></i>
                                                <span>{{ __('Messages API Reference') }}</span>
                                                <i class="fas fa-external-link-alt"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <!-- Help Note -->
                                <div class="help-note">
                                    <i class="fas fa-info-circle"></i>
                                    <p>
                                        <strong>{{ __('Need help') }}?</strong>
                                        {{ __('Make sure your webhook is verified in Meta Developer Console. Test the connection using the button above to ensure everything is configured correctly') }}.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@stack('script')
<script src="{{ asset('assets/js/whatsapp-settings.js') }}"></script>

@endsection