@extends('layouts.admin')

@section('title', 'Site Settings')

@section('breadcrumb')
    <li class="breadcrumb-item active">Settings</li>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title">General Settings</h3>
            </div>
            <!-- /.card-header -->
            <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    @php
                        $groups = $settings->groupBy('group');
                    @endphp

                    @foreach($groups as $group => $groupSettings)
                        <div class="mb-4">
                            <h4 class="text-primary border-bottom pb-2 mb-3">{{ ucfirst($group) }}</h4>
                            <div class="row">
                                @foreach($groupSettings as $setting)
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="{{ $setting->key }}">{{ $setting->label }}</label>
                                            
                                            @if($setting->type === 'text')
                                                @if($setting->key === 'live_chat_active')
                                                    <select name="{{ $setting->key }}" id="{{ $setting->key }}" class="form-control">
                                                        <option value="1" {{ $setting->value == '1' ? 'selected' : '' }}>Online (Human Agents)</option>
                                                        <option value="0" {{ $setting->value == '0' ? 'selected' : '' }}>Offline (AI Bot)</option>
                                                    </select>
                                                @else
                                                    <input type="text" name="{{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}" class="form-control">
                                                @endif

                                                @if($setting->key === 'scrolling_text')
                                                    <small class="form-text text-muted">Separate multiple items with a pipe character (|). Example: Item 1 | Item 2 | Item 3</small>
                                                @endif
                                            @elseif($setting->type === 'textarea')
                                                <textarea name="{{ $setting->key }}" id="{{ $setting->key }}" rows="3" class="form-control">{{ $setting->value }}</textarea>
                                            @elseif($setting->type === 'password')
                                                <input type="password" name="{{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}" class="form-control" placeholder="{{ config('services.openai.key') ? 'Loaded from .env' : '' }}">
                                                @if($setting->key === 'openai_api_key')
                                                    <small class="form-text text-muted">Leave empty to use OPENAI_API_KEY from .env file. Use 'mock' to simulate AI.</small>
                                                @endif
                                                @if($setting->key === 'openrouter_api_key')
                                                    <small class="form-text text-muted">Use 'mock' to simulate AI. Fallback if OpenAI/ChatGPT keys fail.</small>
                                                @endif
                                            @elseif($setting->type === 'image')
                                                @if($setting->value)
                                                    <div class="mb-2">
                                                        <img src="{{ asset('storage/' . $setting->value) }}" alt="{{ $setting->label }}" class="img-thumbnail" style="max-height: 150px;">
                                                    </div>
                                                @endif
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" name="{{ $setting->key }}" id="{{ $setting->key }}">
                                                    <label class="custom-file-label" for="{{ $setting->key }}">Choose file</label>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- /.card-body -->
                <div class="card-footer d-flex justify-content-between">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i> Save Settings
                    </button>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#testEmailModal">
                        <i class="fas fa-paper-plane mr-1"></i> Send Test Email
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Test Email Modal -->
<div class="modal fade" id="testEmailModal" tabindex="-1" role="dialog" aria-labelledby="testEmailModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="testEmailModalLabel">Send Test Email</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('admin.settings.test-email') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="test_email">Recipient Email</label>
                        <input type="email" class="form-control" id="test_email" name="test_email" required placeholder="Enter email to receive test message">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(function () {
        bsCustomFileInput.init();
    });
</script>
@endpush