@extends('layouts.master')
@section('title', __('locale.Partners_Management'))
@section('content')
    <style>
        .stat-card {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            padding: 20px;
            color: white;
            margin-bottom: 20px;
            transition: transform 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-card.bg-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .stat-card.bg-success {
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
        }

        .stat-card.bg-danger {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .stat-card.bg-info {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .stat-card h6 {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .stat-card h3 {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-card h3 small {
            font-size: 14px;
        }

        .stat-card p {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 5px;
        }

        .stat-card .stat-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 48px;
            opacity: 0.2;
        }

        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        code {
            font-size: 12px;
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        #new-api-key {
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }

        .btn-group-sm>.btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
    </style>
    <div class="main-content app-content mt-0">
        <div class="side-app">

            <!-- CONTAINER -->
            <div class="main-container container-fluid">
                <div class="row">
                    <div class="col-12">
                        <!-- Header Card -->
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <div>
                                    <h3 class="card-title">
                                        <i class="fe fe-users"></i> {{ __('locale.partner_details') }}
                                    </h3>
                                    <p class="text-muted mb-0 mt-2">
                                        {{ __('locale.viewing_details_for') }}:
                                        <strong>{{ $partner?->company?->name }}</strong>
                                    </p>
                                </div>
                                <div>
                                    <a href="{{ route('admin.partners.edit', $partner->id) }}" class="btn btn-warning">
                                        <i class="fe fe-edit"></i> {{ __('common.edit') }}
                                    </a>
                                    <a href="{{ route('admin.partners.index') }}" class="btn btn-secondary">
                                        <i class="fe fe-arrow-left"></i> {{ __('common.back') }}
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Statistics Cards -->
                        <div class="row mt-3">
                            <div class="col-md-3">
                                <div class="stat-card bg-primary">
                                    <div class="stat-icon">
                                        <i class="fe fe-check-circle"></i>
                                    </div>
                                    <h6>{{ __('locale.total_verifications') }}</h6>
                                    <h3 class="counter">{{ number_format($stats['total_verifications']) }}</h3>
                                    <p class="mb-0">All time</p>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="stat-card bg-success">
                                    <div class="stat-icon">
                                        <i class="fe fe-shield"></i>
                                    </div>
                                    <h6>{{ __('locale.authentic') }}</h6>
                                    <h3 class="counter">{{ number_format($stats['authentic_count']) }}</h3>
                                    <p class="mb-0">
                                        {{ $stats['total_verifications'] > 0 ? round(($stats['authentic_count'] / $stats['total_verifications']) * 100, 2) : 0 }}%
                                        of total
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="stat-card bg-danger">
                                    <div class="stat-icon">
                                        <i class="fe fe-alert-triangle"></i>
                                    </div>
                                    <h6>{{ __('locale.non_authentic') }}</h6>
                                    <h3 class="counter">{{ number_format($stats['non_authentic_count']) }}</h3>
                                    <p class="mb-0">
                                        {{ $stats['total_verifications'] > 0 ? round(($stats['non_authentic_count'] / $stats['total_verifications']) * 100, 2) : 0 }}%
                                        of total
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="stat-card bg-info">
                                    <div class="stat-icon">
                                        <i class="fe fe-clock"></i>
                                    </div>
                                    <h6>{{ __('locale.average_response') }}</h6>
                                    <h3 class="counter">{{ number_format($stats['average_response_ms'], 2) }}
                                        <small>ms</small>
                                    </h3>
                                    <p class="mb-0">Last 7 days: {{ number_format($stats['last_7_days']) }} verifications
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Partner Information -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">{{ __('locale.basic_information') }}</h4>
                                    </div>
                                    <div class="card-body">
                                        <table class="table table-bordered">
                                            <tr>
                                                <th width="35%">{{ __('locale.partner_id') }}</th>
                                                <td><code>{{ $partner->partner_id }}</code></td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.name') }}</th>
                                                <td><strong>{{ $partner?->company?->name }}</strong></td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.email') }}</th>
                                                <td>
                                                    <a
                                                        href="mailto:{{ $partner?->company?->email }}">{{ $partner?->company?->email }}</a>
                                                    @if($partner?->company?->email_verified_at)
                                                        <span class="badge bg-success ms-2">Verified</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.phone') }}</th>
                                                <td>{{ $partner?->company?->dial_code }}
                                                    {{ $partner?->company?->phone_number }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.company_name') }}</th>
                                                <td>{{ $partner?->company?->name ?? '—' }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.status') }}</th>
                                                <td>
                                                    @if($partner->is_active)
                                                        <span class="badge bg-success">{{ __('common.active') }}</span>
                                                    @else
                                                        <span class="badge bg-danger">{{ __('common.inactive') }}</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.created_at') }}</th>
                                                <td>{{ dateFormat($partner->created_at, DISPLAY_DATETIME) }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.updated_at') }}</th>
                                                <td>{{ dateFormat($partner->updated_at, DISPLAY_DATETIME) }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">{{ __('locale.api_configuration') }}</h4>
                                    </div>
                                    <div class="card-body">
                                        <table class="table table-bordered">
                                            <tr>
                                                <th width="40%">{{ __('locale.api_key_prefix') }}</th>
                                                <td>
                                                    <code>{{ $partner->api_key_prefix }}...********</code>
                                                    <button class="btn btn-sm btn-outline-info ms-2"
                                                        onclick="copyToClipboard('{{ $partner->api_key_prefix }}...')">
                                                        <i class="fe fe-copy"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.Rate_Limit_Per_Minute') }}</th>
                                                <td>
                                                    <span class="badge bg-info">{{ $partner->rate_limit_per_minute }}
                                                        requests/minute</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.Webhook_URL') }}</th>
                                                <td>
                                                    @if($partner->webhook_url)
                                                        <code class="text-primary">{{ $partner->webhook_url }}</code>
                                                        <button class="btn btn-sm btn-outline-info ms-2"
                                                            onclick="copyToClipboard('{{ $partner->webhook_url }}')">
                                                            <i class="fe fe-copy"></i>
                                                        </button>
                                                    @else
                                                        <span class="text-muted">—</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.API_Key_Expiry_Date') }}</th>
                                                <td>
                                                    @if($partner->key_expires_at)
                                                        @if($partner->key_expires_at->isPast())
                                                            <span
                                                                class="text-danger">{{ dateFormat($partner->key_expires_at, DISPLAY_DATE) }}
                                                                (Expired)</span>
                                                        @else
                                                            <span
                                                                class="text-success">{{ dateFormat($partner->key_expires_at, DISPLAY_DATE) }}</span>
                                                            <small
                                                                class="text-muted">({{ $partner->key_expires_at->diffForHumans() }})</small>
                                                        @endif
                                                    @else
                                                        <span class="text-muted">{{ __('locale.no_expiry') }}</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.IP_Whitelist') }}</th>
                                                <td>
                                                    @php
                                                        $ipWhitelist = is_array($partner->ip_whitelist) ? $partner->ip_whitelist : [];
                                                    @endphp
                                                    @if(count($ipWhitelist) > 0)
                                                        <div class="d-flex flex-wrap gap-2">
                                                            @foreach($ipWhitelist as $ip)
                                                                <span class="badge bg-secondary">
                                                                    <i class="fe fe-server"></i> {{ $ip }}
                                                                </span>
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        <span class="text-muted">{{ __('locale.all_ips_allowed') }}</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        </table>

                                        @if(!$partner->is_active)
                                            <div class="alert alert-warning mt-3">
                                                <i class="fe fe-alert-triangle"></i>
                                                {{ __('locale.inactive_warning') }}
                                            </div>
                                        @endif

                                        @if($partner->key_expires_at && $partner->key_expires_at->isPast())
                                            <div class="alert alert-danger mt-3">
                                                <i class="fe fe-alert-circle"></i>
                                                {{ __('locale.key_expired_warning') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Recent Verifications -->
                        <div class="card mt-4">

                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="card-title mb-0">{{ __('locale.recent_verifications') }}</h4>

                                <a href="{{ route('admin.api-logs.index', ['partner_id' => $partner->id]) }}"
                                    class="btn btn-sm btn-primary">
                                    <i class="fe fe-eye"></i> {{ __('locale.view_all') }}
                                </a>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover" id="recent-verifications-table">
                                        <thead>
                                            <tr>
                                                <th>{{ __('locale.verification_id') }}</th>
                                                <th>{{ __('locale.transaction_id') }}</th>
                                                <th>{{ __('locale.uid') }}</th>
                                                <th>{{ __('locale.status') }}</th>
                                                <th>{{ __('locale.response_time') }}</th>
                                                <th>{{ __('locale.location') }}</th>
                                                <th>{{ __('locale.timestamp') }}</th>
                                                <th>{{ __('locale.actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($recentVerifications ?? [] as $log)
                                                <tr>
                                                    <td><code>{{ $log->verification_id }}</code></td>
                                                    <td>{{ $log->transaction_id ?? '—' }}</td>
                                                    <td><code>{{ $log->uid }}</code></td>
                                                    <td>
                                                        @if($log->authentic)
                                                            <span class="badge bg-success">{{ __('locale.authentic') }}</span>
                                                        @else
                                                            <span class="badge bg-danger">{{ __('locale.counterfeit') }}</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <span
                                                            class="badge {{ $log->response_ms < 50 ? 'bg-success' : ($log->response_ms < 100 ? 'bg-warning' : 'bg-danger') }}">
                                                            {{ $log->response_ms }} ms
                                                        </span>
                                                    </td>
                                                    <td>{{ $log->location ?? '—' }}</td>
                                                    <td>{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
                                                    <td>
                                                        <a href="{{ route('admin.api-logs.show', $log->id) }}"
                                                            class="btn btn-sm btn-info">
                                                            <i class="fe fe-eye"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="8" class="text-center">
                                                        <i class="fe fe-inbox"></i> {{ __('locale.no_verifications_found') }}
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- API Key Management Card -->
                        <div class="card mt-4">
                            <div class="card-header bg-warning">
                                <h4 class="card-title text-dark">{{ __('locale.api_key_management') }}</h4>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-info">
                                    <i class="fe fe-info"></i>
                                    {{ __('locale.api_key_management_info') }}
                                </div>

                                <button type="button" class="btn btn-warning" id="regenerate-api-key-btn"
                                    data-id="{{ $partner->id }}">
                                    <i class="fe fe-refresh-cw"></i> {{ __('locale.Regenerate_API_Key') }}
                                </button>

                                @if(session('api_key'))
                                    <div class="alert alert-success mt-3" id="api-key-alert">
                                        <i class="fe fe-check-circle"></i>
                                        <strong>{{ __('locale.new_api_key_generated') }}</strong><br>
                                        <div class="input-group mt-2">
                                            <input type="text" class="form-control font-monospace" id="new-api-key"
                                                value="{{ session('api_key') }}" readonly>
                                            <button class="btn btn-outline-success" type="button" onclick="copyNewApiKey()">
                                                <i class="fe fe-copy"></i> {{ __('common.copy') }}
                                            </button>
                                        </div>
                                        <p class="mt-2 mb-0 text-danger">
                                            <small><i class="fe fe-alert-triangle"></i>
                                                {{ __('locale.api_key_shown_once_warning') }}</small>
                                        </p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Regenerate API Key Modal -->
    <div class="modal fade" id="regenerateModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('locale.confirm_regenerate') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('locale.regenerate_warning_message') }}</p>
                    <p class="text-danger"><strong>{{ __('locale.this_action_cannot_be_undone') }}</strong></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                    <button type="button" class="btn btn-danger"
                        id="confirm-regenerate">{{ __('locale.Regenerate_API_Key') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('bottom_script')
    <script>
        $(document).ready(function () {
            // Animate counters
            $('.counter').each(function () {
                var $this = $(this);
                var target = parseInt($this.text().replace(/[^0-9.-]+/g, ''));

                if (!isNaN(target) && target > 0) {
                    $({ Counter: 0 }).animate({ Counter: target }, {
                        duration: 1000,
                        easing: 'swing',
                        step: function () {
                            $this.text(Math.ceil(this.Counter).toLocaleString() + ($this.html().includes('ms') ? ' ms' : ''));
                        }
                    });
                }
            });

            // Initialize DataTable for recent verifications
            if ($('#recent-verifications-table tbody tr').length > 1) {
                $('#recent-verifications-table').DataTable({
                    pageLength: 10,
                    responsive: true,
                    language: {
                        processing: "{{ __('pagination.processing') }}",
                        search: "{{ __('pagination.search') }}",
                        lengthMenu: "{{ __('pagination.length_menu') }}",
                        info: "{{ __('pagination.info') }}",
                        infoEmpty: "{{ __('pagination.info_empty') }}",
                        infoFiltered: "{{ __('pagination.info_filtered') }}",
                        zeroRecords: "{{ __('pagination.zero_records') }}",
                        paginate: {
                            first: "{{ __('pagination.first') }}",
                            last: "{{ __('pagination.last') }}",
                            next: "{{ __('pagination.next') }}",
                            previous: "{{ __('pagination.previous') }}"
                        }
                    }
                });
            }

            // Regenerate API Key
            var partnerId = null;

            $('#regenerate-api-key-btn').click(function () {
                partnerId = $(this).data('id');
                $('#regenerateModal').modal('show');
            });

            $('#confirm-regenerate').click(function () {
                if (partnerId) {
                    $.ajax({
                        url: '{{ url("admin/partners") }}/' + partnerId + '/regenerate-api-key',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            if (response.status) {
                                $('#regenerateModal').modal('hide');
                                // Reload page to show new API key
                                location.reload();
                            } else {
                                alert(response.message);
                            }
                        },
                        error: function (xhr) {
                            alert('{{ __("partners.error_regenerating_key") }}');
                        }
                    });
                }
            });
        });

        // Copy to clipboard functions
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function () {
                showToast('{{ __("common.copied_to_clipboard") }}', 'success');
            });
        }

        function copyNewApiKey() {
            const apiKeyInput = document.getElementById('new-api-key');
            apiKeyInput.select();
            apiKeyInput.setSelectionRange(0, 99999);
            document.execCommand('copy');
            showToast('{{ __("partners.api_key_copied") }}', 'success');
        }

        function showToast(message, type) {
            // You can implement toast notification here
            alert(message);
        }

        // Auto-refresh recent verifications every 30 seconds (optional)
        setInterval(function () {
            location.reload();
        }, 30000);
    </script>
@endsection