@extends('layouts.contentLayoutMaster')

@section('title', __('locale.menu.Security and Compliance'))

@section('vendor-style')
    @if(($tab ?? '') === 'providers')
        <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    @endif
@endsection

@section('page-style')
    @if(($tab ?? '') === 'providers')
        <style>
            .security-otp-providers {
                --otp-radius: 0.85rem;
                --otp-border: rgba(34, 41, 47, 0.08);
                --otp-soft: rgba(115, 103, 240, 0.06);
            }

            .security-otp-kicker {
                font-size: 0.7rem;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: #6e6b7b;
                font-weight: 600;
                margin-bottom: 0.15rem;
            }

            .security-otp-hero {
                border: 1px solid var(--otp-border);
                border-radius: var(--otp-radius);
                padding: 1.15rem 1.25rem;
                background:
                    linear-gradient(135deg, rgba(115, 103, 240, 0.08), rgba(40, 199, 111, 0.04) 48%, rgba(0, 207, 232, 0.06));
            }

            .security-otp-hero-title {
                font-weight: 700;
                letter-spacing: -0.02em;
            }

            .security-otp-hero-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 0.4rem;
            }

            .security-otp-card {
                border: 1px solid var(--otp-border) !important;
                border-radius: var(--otp-radius) !important;
                box-shadow: 0 8px 24px rgba(34, 41, 47, 0.04);
                overflow: hidden;
            }

            .security-otp-card__header {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 0.75rem;
                border-bottom: 1px solid var(--otp-border);
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 248, 255, 0.65));
            }

            .security-otp-card--email {
                border-top: 3px solid #ff9f43 !important;
            }

            .security-otp-card--sms {
                border-top: 3px solid #7367f0 !important;
            }

            .security-otp-card--whatsapp {
                border-top: 3px solid #28c76f !important;
            }

            .security-otp-card--telegram {
                border-top: 3px solid #00cfe8 !important;
            }

            .security-otp-card--global,
            .security-otp-card--tests {
                border-top: 3px solid #82868b !important;
            }

            .security-otp-enable {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                padding: 0.85rem 1rem;
                margin-bottom: 1rem;
                border: 1px solid var(--otp-border);
                border-radius: 0.75rem;
                background: var(--otp-soft);
            }

            .security-otp-enable.is-disabled {
                opacity: 0.72;
            }

            .security-otp-note,
            .security-otp-empty {
                border-radius: 0.75rem;
            }

            .security-otp-note {
                display: flex;
                align-items: flex-start;
                padding: 0.75rem 0.9rem;
                background: rgba(130, 134, 139, 0.08);
                color: #6e6b7b;
                font-size: 0.875rem;
            }

            .security-otp-guide {
                margin-top: 0.75rem;
                padding: 1rem;
                border: 1px dashed rgba(0, 207, 232, 0.35);
                border-radius: 0.75rem;
                background: rgba(0, 207, 232, 0.05);
            }

            .security-otp-guide__title {
                font-weight: 600;
                margin-bottom: 0.65rem;
                color: #00b8cc;
            }

            .security-otp-guide__list {
                padding-left: 1.1rem;
                margin-bottom: 0;
                color: #6e6b7b;
                font-size: 0.875rem;
            }

            .security-otp-guide__list li + li {
                margin-top: 0.35rem;
            }

            .security-otp-test-panel {
                border: 1px solid var(--otp-border);
                border-radius: 0.75rem;
                padding: 1rem;
                background: linear-gradient(180deg, #fff, #fafafa);
            }


            [data-layout="dark-layout"] .security-otp-hero,
            .dark-layout .security-otp-hero {
                background: linear-gradient(135deg, rgba(115, 103, 240, 0.16), rgba(40, 199, 111, 0.08), rgba(0, 207, 232, 0.1));
                border-color: rgba(255, 255, 255, 0.08);
            }

            [data-layout="dark-layout"] .security-otp-card__header,
            .dark-layout .security-otp-card__header,
            [data-layout="dark-layout"] .security-otp-test-panel,
            .dark-layout .security-otp-test-panel {
                background: rgba(255, 255, 255, 0.02);
            }

            [data-layout="dark-layout"] .security-otp-enable,
            .dark-layout .security-otp-enable {
                background: rgba(115, 103, 240, 0.12);
                border-color: rgba(255, 255, 255, 0.08);
            }
        </style>
    @endif
@endsection

@php
    $editableTabs = ['login', 'providers', 'abuse', 'api', 'devices'];
    $isEditableTab = in_array($tab, $editableTabs, true);
    $scoreTone = $dashboard['tone'] ?? 'secondary';
    $twoFactor = $dashboard['two_factor_coverage'] ?? ['percent' => 0, 'enrolled' => 0, 'total' => 0];
    $webhookFailures = $dashboard['webhook_failures'] ?? ['percent' => 0, 'label' => 'normal', 'tone' => 'success'];
    $openRisks = (int) ($dashboard['open_risks'] ?? 0);
    $statCards = [
        [
            'label' => 'Security score',
            'value' => ($dashboard['score'] ?? 0).'/100',
            'sub' => ucfirst((string) ($dashboard['label'] ?? 'attention needed')),
            'icon' => 'shield',
            'border' => $scoreTone === 'success' ? 'success' : ($scoreTone === 'warning' ? 'warning' : 'danger'),
            'tone' => $scoreTone,
        ],
        [
            'label' => 'Open risks',
            'value' => number_format($openRisks),
            'sub' => 'Last 30 days',
            'icon' => 'alert-triangle',
            'border' => $openRisks > 0 ? 'danger' : 'success',
            'tone' => $openRisks > 0 ? 'danger' : 'success',
        ],
        [
            'label' => 'Blocked attempts',
            'value' => number_format((int) ($dashboard['blocked_attempts_24h'] ?? 0)),
            'sub' => 'Last 24 hours',
            'icon' => 'slash',
            'border' => ((int) ($dashboard['blocked_attempts_24h'] ?? 0)) > 0 ? 'warning' : 'success',
            'tone' => 'warning',
        ],
        [
            'label' => 'Outbound holds',
            'value' => number_format((int) ($dashboard['outbound_holds'] ?? 0)),
            'sub' => 'Pending review',
            'icon' => 'pause-circle',
            'border' => ((int) ($dashboard['outbound_holds'] ?? 0)) > 0 ? 'danger' : 'success',
            'tone' => ((int) ($dashboard['outbound_holds'] ?? 0)) > 0 ? 'danger' : 'success',
        ],
        [
            'label' => '2FA coverage',
            'value' => ($twoFactor['percent'] ?? 0).'%',
            'sub' => ($twoFactor['enrolled'] ?? 0).' / '.($twoFactor['total'] ?? 0).' admins',
            'icon' => 'lock',
            'border' => ($twoFactor['percent'] ?? 0) >= 80 ? 'success' : 'warning',
            'tone' => ($twoFactor['percent'] ?? 0) >= 80 ? 'success' : 'warning',
        ],
        [
            'label' => 'Webhook failures',
            'value' => ($webhookFailures['percent'] ?? 0).'%',
            'sub' => ucfirst((string) ($webhookFailures['label'] ?? 'normal')),
            'icon' => 'activity',
            'border' => ($webhookFailures['tone'] ?? 'success') === 'success' ? 'success' : 'danger',
            'tone' => $webhookFailures['tone'] ?? 'success',
        ],
    ];
    $navTabs = [
        'summary' => 'Summary',
        'login' => 'Login & MFA',
        'providers' => 'OTP Providers',
        'abuse' => 'Abuse Filters',
        'api' => 'API & Webhooks',
        'devices' => 'Devices',
        'danger' => 'Danger Zone',
    ];
@endphp

@section('content')
    <section id="security-center">
        <div class="row">
            <div class="col-12">

                <div class="me-1 mb-2">
                    <code>
                        Manage <code>security_*</code> controls, OTP delivery providers, outbound abuse filters,
                        and
                        high-impact incident actions. Changes are recorded in the security audit trail.
                    </code>
                </div>
            </div>
        </div>


        <div class="row match-height mb-2">
            @foreach($statCards as $card)

                <div class="col-lg-4 col-sm-6 col-12">

                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <p class="card-text text-muted mb-25 small">{{ $card['label'] }}</p>
                                    <h3 class="fw-bolder mb-25 text-{{ $card['tone'] }}">{{ $card['value'] }}</h3>
                                    <small class="text-muted">{{ $card['sub'] }}</small>
                                </div>
                                <div class="avatar bg-light-{{ $card['tone'] }} p-50 m-0">
                                    <div class="avatar-content">
                                        <i data-feather="{{ $card['icon'] }}"
                                           class="font-medium-3 text-{{ $card['tone'] }}"></i>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            @endforeach


        </div>

        <div class="row">
            <div class="col-12">


                <ul class="nav nav-pills mb-2 mt-2 text-uppercase flex-wrap" role="tablist">
                    @foreach($navTabs as $key => $label)
                        <li class="nav-item">
                            <a class="nav-link {{ $tab === $key ? 'active' : '' }} {{ $key === 'danger' ? 'text-danger' : '' }}"
                               href="{{ route('admin.settings.security', ['tab' => $key]) }}">
                               @if($key == "summary")
                                   <i data-feather="file-text"></i>
                                @elseif($key == "login")
                                   <i data-feather="key"></i>
                                @elseif($key == "providers")
                                   <i data-feather="cpu"></i>
                                @elseif($key == "abuse")
                                   <i data-feather="shield"></i>
                                @elseif($key == "api")
                                   <i data-feather="code"></i>
                                @elseif($key == "devices")
                                   <i data-feather="smartphone"></i>
                               @else
                                   <i data-feather="alert-triangle"></i>
                               @endif {{ $label }}
                            </a>
                        </li>
                    @endforeach
                </ul>

                @if(isset($errors) && $errors->any())
                    <div class="alert alert-danger" role="alert">
                        <div class="alert-body">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                @if($isEditableTab)
                    <form id="security-settings-form"
                          class="form form-vertical"
                          action="{{ route('admin.settings.security.update') }}"
                          method="post">
                        @csrf
                        <input type="hidden" name="tab" value="{{ $tab }}">
                        @include('admin.security.tabs._'.$tab)
                    </form>
                    @if($tab === 'providers')
                        @include('admin.security.tabs._providers_tests')
                    @endif
                @else
                    @include('admin.security.tabs._'.$tab)
                @endif
            </div>

        </div>
    </section>
@endsection

@section('vendor-script')
    @if(($tab ?? '') === 'providers')
        <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    @endif
@endsection

@section('page-script')
    @if(($tab ?? '') === 'providers')
        <script>
            (function ($) {
                'use strict';

                // Basic Select2 select
                $(".select2").each(function () {
                    let $this = $(this);
                    $this.wrap('<div class="position-relative"></div>');
                    $this.select2({
                        // the following code is used to disable x-scrollbar when click in select input and
                        // take 100% width in responsive also
                        dropdownAutoWidth: true,
                        width: '100%',
                        dropdownParent: $this.parent()
                    });
                });

                $(document).on('click', '#copy-telegram-webhook', function () {
                    const url = $(this).data('url') || '';
                    const $temp = $('<textarea>');
                    $('body').append($temp);
                    $temp.val(url).select();

                    try {
                        document.execCommand('copy');
                        if (typeof toastr !== 'undefined') {
                            toastr['success']('Webhook URL copied', 'Success', {
                                closeButton: true,
                                positionClass: 'toast-top-right',
                                progressBar: true,
                                newestOnTop: true,
                                rtl: typeof isRtl !== 'undefined' ? isRtl : false
                            });
                        }
                    } catch (e) {
                        if (typeof toastr !== 'undefined') {
                            toastr['error']('Unable to copy webhook URL', 'Error');
                        }
                    }

                    $temp.remove();
                });

                if (typeof feather !== 'undefined') {
                    feather.replace({width: 14, height: 14});
                }
            })(jQuery);
        </script>
    @endif
@endsection