@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($headingOptions = [
    '<a href="' . route('my-merchants.index') . '" class="'. \Config::get('view.buttons.secondary') .'"><i class="bx bx-arrow-back"></i> My Merchants</a>',
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <x-heading-sec :module="'Risk Alerts'" :options="$headingOptions" />

    <ul class="nav nav-tabs mb-3" id="riskAlertTabs" role="tablist">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#triggered-alerts">Triggered Alerts</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#set-alerts">Set Alerts</button></li>
    </ul>

    <div class="tab-content">
        {{-- Triggered Alerts Tab --}}
        <div class="tab-pane fade show active" id="triggered-alerts">
            <div class="project-box p-3">
                <h6 class="fw-semibold mb-3">Active Triggered Alerts</h6>
                <div class="table-responsive">
                    <table class="table table-bordered mb-0">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Merchant</th>
                            <th>MID</th>
                            <th>Alert Type</th>
                            <th>Current Value</th>
                            <th>Threshold</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($triggeredAlerts ?? [] as $i => $alert)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $alert['merchant_dba'] ?? '—' }}</td>
                            <td><code>{{ $alert['merchant_mid'] ?? '—' }}</code></td>
                            <td>
                                <span class="badge bg-danger">{{ $alert['alert_type'] ?? '—' }}</span>
                            </td>
                            <td class="fw-bold text-danger">{{ $alert['value'] ?? '—' }}</td>
                            <td>{{ $alert['threshold'] ?? '—' }}</td>
                            <td>
                                <a href="{{ route('my-merchants.show', 0) }}" class="btn btn-sm btn-light">
                                    <i class="mdi mdi-eye-outline"></i>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <i class="bx bx-check-shield fs-3 text-success d-block mb-2"></i>
                                No alerts triggered. All merchants within thresholds.
                            </td>
                        </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Set Alerts Tab --}}
        <div class="tab-pane fade" id="set-alerts">
            <div class="project-box p-3">
                <h6 class="fw-semibold mb-3">Configure Risk Alert Thresholds</h6>
                <form id="risk-alerts-config-form" data-url="{{ route('merchants.risk-alerts.save') }}">
                    @csrf
                    <div class="table-responsive">
                        <table class="table table-bordered mb-0">
                            <thead>
                            <tr>
                                <th>Alert Type</th>
                                <th>Threshold Value</th>
                                <th>Threshold Type</th>
                                <th>Active</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($alertTypeLabels ?? [] as $type => $label)
                            @php($cfg = $alertConfigMap[$type] ?? null)
                            <tr>
                                <td class="fw-semibold">{{ $label }}</td>
                                <td>
                                    <input type="number" step="0.01" min="0"
                                        name="configs[{{ $type }}][threshold_value]"
                                        class="form-control form-control-sm"
                                        style="width:120px"
                                        value="{{ $cfg ? $cfg->threshold_value : '0' }}">
                                </td>
                                <td>
                                    <select name="configs[{{ $type }}][threshold_type]" class="form-select form-select-sm select2 no-search" style="width:140px">
                                        <option value="percentage" {{ ($cfg && $cfg->threshold_type === 'percentage') ? 'selected' : '' }}>Percentage (%)</option>
                                        <option value="amount" {{ ($cfg && $cfg->threshold_type === 'amount') ? 'selected' : '' }}>Amount ($)</option>
                                        <option value="count" {{ ($cfg && $cfg->threshold_type === 'count') ? 'selected' : '' }}>Count (#)</option>
                                    </select>
                                </td>
                                <td>
                                    <div class="form-check form-switch pr-input mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch"
                                            name="configs[{{ $type }}][is_active]" value="1"
                                            {{ ($cfg && $cfg->is_active) ? 'checked' : '' }}>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="bx bx-save me-1"></i> Save Alert Configuration
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('page_script')
<script src="{{ asset('assets/js/common.js') }}"></script>
<script>
(function($){
    $('#risk-alerts-config-form').on('submit', function(e){
        e.preventDefault();
        const url  = $(this).data('url');
        const data = $(this).serialize();
        $.post(url, data, function(res){
            if (res.status === 200) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({ icon: 'success', title: 'Saved', text: res.message, timer: 2000, showConfirmButton: false });
                } else {
                    alert(res.message);
                }
            } else {
                alert(res.message || 'Error saving configuration.');
            }
        }).fail(function(){
            alert('Failed to save alert configuration. Please try again.');
        });
    });
})(jQuery);
</script>
@endpush