@extends(decide_template())

@section('title', $pageTitle)

@section('page_styles')
<link href="{{ asset('css/setting.css') }}?v={{$local_version}}" rel="stylesheet" type="text/css">
<style type="text/css">
    .ai-credit-balance {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        padding: 20px 25px;
        border-radius: 8px;
        margin-bottom: 25px;
        position: relative;
    }
    .ai-credit-balance .credit-amount {
        font-size: 32px;
        font-weight: 700;
        margin-top: 5px;
    }
    .ai-credit-balance .credit-label {
        font-size: 13px;
        opacity: 0.85;
    }
    .ai-credit-balance .credit-stats {
        display: flex;
        gap: 25px;
        margin-top: 12px;
        font-size: 13px;
        opacity: 0.85;
    }
    .ai-tier-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        border: 1px solid #ebedf2;
        border-radius: 4px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: border-color 0.15s;
    }
    .ai-tier-item:hover {
        border-color: #c5cbe3;
    }
    .ai-tier-item input[type="checkbox"] {
        margin-top: 2px;
        flex-shrink: 0;
    }
    .ai-tier-item .tier-name {
        font-weight: 500;
        font-size: 13px;
        color: #333;
    }
    .ai-tier-item .tier-desc {
        font-size: 12px;
        color: #888;
        margin-top: 3px;
        line-height: 1.4;
    }
    .ai-rates-card {
        background: #f7f8fa;
        border: 1px solid #ebedf2;
        border-radius: 4px;
        padding: 16px 18px;
        margin-top: 5px;
    }
    .ai-rates-card .rates-heading {
        font-weight: 500;
        font-size: 13px;
        color: #333;
        margin-bottom: 8px;
    }
    .ai-rates-card .rates-credit-value {
        font-size: 13px;
        font-weight: 600;
        color: #5867dd;
        background: #eef0fb;
        display: inline-block;
        padding: 5px 12px;
        border-radius: 3px;
        margin-bottom: 10px;
    }
    .ai-rates-card .rates-desc {
        font-size: 12px;
        color: #888;
        margin-bottom: 12px;
        line-height: 1.4;
    }
    .ai-rates-card table {
        width: 100%;
        font-size: 12px;
    }
    .ai-rates-card table th {
        font-weight: 500;
        color: #555;
        padding: 6px 8px;
        border-bottom: 1px solid #e0e2e8;
        white-space: nowrap;
    }
    .ai-rates-card table td {
        padding: 5px 8px;
        color: #666;
        border-bottom: 1px solid #f0f1f5;
    }
    .ai-rates-card table td:not(:first-child),
    .ai-rates-card table th:not(:first-child) {
        text-align: center;
    }
    .ai-rates-card .rates-note {
        font-size: 11px;
        color: #aaa;
        margin-top: 10px;
    }
    .btn-add-credits {
        position: absolute;
        top: 18px;
        right: 20px;
        z-index: 2;
        background: rgba(255,255,255,0.2);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.35);
        padding: 5px 14px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s;
    }
    .btn-add-credits:hover {
        background: rgba(255,255,255,0.35);
        color: #fff;
        text-decoration: none;
    }
    .purchase-amount-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 15px;
    }
    .purchase-amount-btn {
        padding: 8px 18px;
        border: 1px solid #e0e2e8;
        border-radius: 4px;
        background: #fff;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        transition: all 0.15s;
    }
    .purchase-amount-btn:hover {
        border-color: #5867dd;
        color: #5867dd;
    }
    .purchase-amount-btn.active {
        background: #5867dd;
        border-color: #5867dd;
        color: #fff;
    }
</style>
@endsection

@section('page_scripts')
<script>
$(document).ready(function() {
    function loadCreditBalance() {
        $.ajax({
            url: '{{ route("broadcasts.ai.admin-credits") }}',
            type: 'GET',
            success: function(response) {
                if (response.success && response.balance !== null) {
                    $('#ai-credit-amount').text(Number(response.balance).toLocaleString());
                    $('#ai-credits-today').text(Number(response.credits_used_today || 0).toLocaleString());
                    $('#ai-credits-month').text(Number(response.credits_used_this_month || 0).toLocaleString());
                } else {
                    $('#ai-credit-amount').text('@lang("ai_settings.credit_balance.not_available")');
                }
            },
            error: function() {
                $('#ai-credit-amount').text('@lang("ai_settings.credit_balance.error")');
            }
        });
    }

    loadCreditBalance();

    $('#ai_enabled_toggle').on('change', function() {
        if ($(this).is(':checked')) {
            $('#ai-settings-blk').slideDown();
        } else {
            $('#ai-settings-blk').slideUp();
        }
    });

    // Toggle checkbox when clicking anywhere on the tier card
    $('.ai-tier-item').on('click', function(e) {
        if (e.target.tagName !== 'INPUT') {
            var $cb = $(this).find('input[type="checkbox"]');
            $cb.prop('checked', !$cb.prop('checked'));
        }
    });

    // Purchase Credits
    var selectedAmount = null;

    $('.purchase-amount-btn').on('click', function() {
        $('.purchase-amount-btn').removeClass('active');
        $(this).addClass('active');
        selectedAmount = parseFloat($(this).data('amount'));
        $('#purchaseCustomAmount').val('');
        $('#btnProceedPayment').prop('disabled', false);
    });

    $('#purchaseCustomAmount').on('input', function() {
        var val = parseFloat($(this).val());
        $('.purchase-amount-btn').removeClass('active');
        if (val >= 5 && val <= 500) {
            selectedAmount = val;
            $('#btnProceedPayment').prop('disabled', false);
        } else {
            selectedAmount = null;
            $('#btnProceedPayment').prop('disabled', true);
        }
    });

    $('#btnProceedPayment').on('click', function() {
        if (!selectedAmount) return;

        var $btn = $(this);
        $btn.prop('disabled', true).text('@lang("ai_settings.purchase.processing")');

        $.ajax({
            url: '{{ route("setting.ai.purchase-credits") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                amount: selectedAmount
            },
            success: function(response) {
                if (response.success && response.invoice_url) {
                    window.location.href = response.invoice_url;
                } else {
                    toastr.error(response.message || '@lang("ai_settings.purchase.create_failed")');
                }
            },
            error: function(xhr) {
                var msg = '@lang("ai_settings.purchase.create_failed")';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                toastr.error(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).text('@lang("ai_settings.purchase.proceed_to_payment")');
            }
        });
    });

    // Reset modal state when closed
    $('#purchaseCreditsModal').on('hidden.bs.modal', function() {
        selectedAmount = null;
        $('.purchase-amount-btn').removeClass('active');
        $('#purchaseCustomAmount').val('');
        $('#btnProceedPayment').prop('disabled', true);
    });

    $('#ai-settings-form').on('submit', function(e) {
        e.preventDefault();
        var $btn = $(this).find('button[type=submit]');
        $btn.prop('disabled', true).text('{{ trans("ai_settings.messages.saving") }}');

        $.ajax({
            url: '{{ route("setting.ai") }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message || '@lang("ai_settings.messages.saved")');
                } else {
                    toastr.error(response.message || '@lang("ai_settings.messages.save_failed")');
                }
            },
            error: function(xhr) {
                var msg = '@lang("ai_settings.messages.error")';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                toastr.error(msg);
            },
            complete: function() {
                $btn.prop('disabled', false).text('{{ trans("common.form.button.save") }}');
            }
        });
    });
});
</script>
@endsection

@section(decide_content())

<div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid" data-name="AiSettings">
    <div class="row">
        <div class="col-md-9">

            <!-- Credit Balance Card -->
            <div class="ai-credit-balance">
                <a href="javascript:;" class="btn-add-credits" data-toggle="modal" data-target="#purchaseCreditsModal">+ @lang('ai_settings.purchase.add_credits')</a>
                <div class="credit-label">@lang('ai_settings.credit_balance.label')</div>
                <div class="credit-amount" id="ai-credit-amount">@lang('ai_settings.credit_balance.loading')</div>
                <div class="credit-stats">
                    <span>@lang('ai_settings.credit_balance.today'): <strong id="ai-credits-today">-</strong></span>
                    <span>@lang('ai_settings.credit_balance.this_month'): <strong id="ai-credits-month">-</strong></span>
                </div>
            </div>

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

                <div class="kt-portlet" data-name="AiSettingsPortlet">
                    <div class="kt-portlet__head">
                        <div class="kt-portlet__head-label">
                            <h3 class="kt-portlet__head-title">@lang('ai_settings.form.heading')</h3>
                        </div>
                    </div>
                    <div class="kt-portlet__body">

                        <!-- Enable AI Email Builder -->
                        <div class="form-group row" data-name="aiEnable">
                            <div class="col-md-4">
                                <label class="col-form-label switch-label top-label label-link general-right" for="ai_enabled_toggle">
                                    @lang('ai_settings.form.enable')
                                </label>
                            </div>
                            <div class="col-md-1">
                                <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success top-switch">
                                    <label>
                                        <input id="ai_enabled_toggle" type="checkbox" autocomplete="off" name="mumara_ai_enabled" @if(isset($app_settings['mumara_ai_enabled']) && $app_settings['mumara_ai_enabled'] == 'on') checked @endif>
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>

                        <div id="ai-settings-blk" style="{{ isset($app_settings['mumara_ai_enabled']) && $app_settings['mumara_ai_enabled'] == 'on' ? '' : 'display:none;' }}">

                            <!-- Enable Personalization Knowledge -->
                            <div class="form-group row" data-name="aiPersonalization">
                                <div class="col-md-4">
                                    <label class="col-form-label switch-label top-label label-link general-right" for="ai_personalization_toggle">
                                        @lang('ai_settings.form.personalization')
                                    </label>
                                </div>
                                <div class="col-md-1">
                                    <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success top-switch">
                                        <label>
                                            <input id="ai_personalization_toggle" type="checkbox" autocomplete="off" name="mumara_ai_personalization" @if(!isset($app_settings['mumara_ai_personalization']) || $app_settings['mumara_ai_personalization'] == 'on') checked @endif>
                                            <span></span>
                                        </label>
                                    </span>
                                </div>
                                <div class="col-md-7">
                                    <small class="form-text text-muted" style="margin-top:10px;">@lang('ai_settings.form.personalization_help')</small>
                                </div>
                            </div>

                            <!-- System Prompt -->
                            <div class="form-group row">
                                <label class="col-form-label col-md-12 general-right">
                                    @lang('ai_settings.form.system_prompt')
                                </label>
                                <div class="col-md-6">
                                    <textarea name="mumara_ai_system_prompt" rows="4" class="form-control" placeholder="@lang('ai_settings.form.system_prompt_placeholder')">{{ $app_settings['mumara_ai_system_prompt'] ?? '' }}</textarea>
                                    <small class="form-text text-muted">@lang('ai_settings.form.system_prompt_help')</small>
                                </div>
                            </div>

                            <!-- Enable/Disable Tiers -->
                            <div class="form-group row">
                                <label class="col-form-label col-md-12 general-right">
                                    @lang('ai_settings.form.available_tiers')
                                </label>
                                <div class="col-md-6">
                                    @foreach(config('mumara.ai_tiers', []) as $tierKey => $tier)
                                    <label class="ai-tier-item">
                                        <input type="checkbox" name="mumara_ai_tier_{{ $tierKey }}" value="on"
                                            {{ (isset($app_settings['mumara_ai_tier_' . $tierKey]) ? $app_settings['mumara_ai_tier_' . $tierKey] == 'on' : true) ? 'checked' : '' }}>
                                        <div>
                                            <div class="tier-name">@lang('ai_settings.tiers.' . $tierKey . '.label')</div>
                                            <div class="tier-desc">@lang('ai_settings.tiers.' . $tierKey . '.description')</div>
                                        </div>
                                    </label>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Credit Usage Guide -->
                            <div class="form-group row">
                                <div class="col-md-8">
                                    <div class="ai-rates-card">
                                        <div class="rates-heading">@lang('ai_settings.rates.heading')</div>
                                        <div class="rates-credit-value">@lang('ai_settings.rates.credit_value')</div>
                                        <div class="rates-desc">@lang('ai_settings.rates.description')</div>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>@lang('ai_settings.rates.col_task')</th>
                                                    <th>@lang('ai_settings.rates.col_fast')</th>
                                                    <th>@lang('ai_settings.rates.col_balanced')</th>
                                                    <th>@lang('ai_settings.rates.col_advanced')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>@lang('ai_settings.rates.task_subject_lines')</td>
                                                    <td>1 &ndash; 2</td>
                                                    <td>3 &ndash; 5</td>
                                                    <td>10 &ndash; 15</td>
                                                </tr>
                                                <tr>
                                                    <td>@lang('ai_settings.rates.task_plain_email')</td>
                                                    <td>2 &ndash; 4</td>
                                                    <td>6 &ndash; 10</td>
                                                    <td>20 &ndash; 35</td>
                                                </tr>
                                                <tr>
                                                    <td>@lang('ai_settings.rates.task_html_email')</td>
                                                    <td>3 &ndash; 8</td>
                                                    <td>10 &ndash; 20</td>
                                                    <td>35 &ndash; 80</td>
                                                </tr>
                                                <tr>
                                                    <td>@lang('ai_settings.rates.task_complex_email')</td>
                                                    <td>5 &ndash; 12</td>
                                                    <td>15 &ndash; 30</td>
                                                    <td>50 &ndash; 120</td>
                                                </tr>
                                                <tr>
                                                    <td>@lang('ai_settings.rates.task_followup')</td>
                                                    <td>2 &ndash; 5</td>
                                                    <td>8 &ndash; 15</td>
                                                    <td>25 &ndash; 60</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div class="rates-note">@lang('ai_settings.rates.note')</div>
                                    </div>
                                </div>
                            </div>

                            <!-- User Credit Markup -->
                            <div class="form-group row">
                                <label class="col-form-label col-md-12 general-right">
                                    @lang('ai_settings.form.user_markup')
                                </label>
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <input type="number" name="mumara_ai_user_markup" value="{{ $app_settings['mumara_ai_user_markup'] ?? 50 }}" class="form-control" min="0" max="500" step="1" />
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                    <small class="form-text text-muted">@lang('ai_settings.form.user_markup_help')</small>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="kt-portlet__foot">
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-6">
                                    <button type="submit" class="btn btn-success">{{ trans('common.form.button.save') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<!-- Purchase Credits Modal -->
<div class="modal fade" id="purchaseCreditsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@lang('ai_settings.purchase.modal_title')</h5>
                <button type="button" class="close" data-dismiss="modal"><span></span></button>
            </div>
            <div class="modal-body">
                <p class="text-muted" style="font-size:13px; margin-bottom:18px;">@lang('ai_settings.purchase.modal_description')</p>

                <div class="purchase-amount-options">
                    <button type="button" class="purchase-amount-btn" data-amount="5">$5</button>
                    <button type="button" class="purchase-amount-btn" data-amount="10">$10</button>
                    <button type="button" class="purchase-amount-btn" data-amount="25">$25</button>
                    <button type="button" class="purchase-amount-btn" data-amount="50">$50</button>
                    <button type="button" class="purchase-amount-btn" data-amount="100">$100</button>
                </div>

                <div class="form-group">
                    <label style="font-size:13px; font-weight:500;">@lang('ai_settings.purchase.custom_amount')</label>
                    <div class="input-group" style="max-width:200px;">
                        <div class="input-group-prepend">
                            <span class="input-group-text">$</span>
                        </div>
                        <input type="number" id="purchaseCustomAmount" class="form-control" min="5" max="500" step="1" placeholder="5 - 500">
                    </div>
                    <small class="form-text text-muted">@lang('ai_settings.purchase.amount_range')</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ trans('common.form.button.cancel') }}</button>
                <button type="button" class="btn btn-primary" id="btnProceedPayment" disabled>@lang('ai_settings.purchase.proceed_to_payment')</button>
            </div>
        </div>
    </div>
</div>

@endsection