@extends('clientarea.profile.layout')

@section('profile-content')

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-desktop me-2"></i>{{ __('store.session_active_sessions') }}</h5>
        @if($activeSessions->count() > 1)
            <form action="{{ route('store.auth.profile.sessions.revoke-all') }}" method="POST" class="d-inline js-revoke-all-form">
                @csrf
                <button type="submit" class="btn btn-outline-danger btn-sm js-revoke-all-btn">
                    <i class="fas fa-sign-out-alt me-1"></i>{{ __('store.session_revoke_all') }}
                </button>
            </form>
        @endif
    </div>
    <div class="card-body">
        <p class="text-muted mb-4">{{ __('store.session_active_sessions_description') }}</p>

        @if($activeSessions->count() > 0)
            <div class="list-group">
                @foreach($activeSessions as $session)
                    @php
                        $isCurrentSession = $session->ip_address === $currentIp
                            && $session->browser === $currentParsed['browser']
                            && $session->platform === $currentParsed['platform'];

                        $deviceIcon = match($session->device_type) {
                            'mobile' => 'fas fa-mobile-alt',
                            'tablet' => 'fas fa-tablet-alt',
                            default => 'fas fa-desktop',
                        };

                        $platformIcon = match($session->platform) {
                            'Windows' => 'fab fa-windows',
                            'macOS' => 'fab fa-apple',
                            'Linux' => 'fab fa-linux',
                            'Android' => 'fab fa-android',
                            'iOS' => 'fab fa-apple',
                            'Chrome OS' => 'fab fa-chrome',
                            default => 'fas fa-desktop',
                        };
                    @endphp
                    <div class="list-group-item d-flex justify-content-between align-items-center {{ $isCurrentSession ? 'border-start border-3 border-success' : '' }}">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <i class="{{ $deviceIcon }} fa-2x text-muted"></i>
                            </div>
                            <div>
                                <div class="fw-bold">
                                    <i class="{{ $platformIcon }} me-1"></i>
                                    {{ $session->platform ?? __('store.login_history_unknown') }} - {{ $session->browser ?? __('store.login_history_unknown') }}
                                    @if($isCurrentSession)
                                        <span class="badge bg-success ms-2">{{ __('store.session_current_session') }}</span>
                                    @endif
                                </div>
                                <div class="text-muted small">
                                    <code>{{ $session->ip_address }}</code>
                                    @if($session->city || $session->country)
                                        <span class="ms-2"><i class="fas fa-map-marker-alt me-1"></i>{{ $session->city ? $session->city . ', ' : '' }}{{ $session->country ?? '' }}</span>
                                    @endif
                                </div>
                                <div class="text-muted small">
                                    {{ __('store.session_last_active') }}: {{ $session->logged_in_at->diffForHumans() }}
                                    <span class="ms-2">{{ __('store.session_created') }}: {{ $session->logged_in_at->format($dateTimeFormat) }}</span>
                                </div>
                            </div>
                        </div>
                        @if(!$isCurrentSession)
                            <form action="{{ route('store.auth.profile.sessions.revoke', $session->id) }}" method="POST" class="js-revoke-form">
                                @csrf
                                <button type="submit" class="btn btn-outline-danger btn-sm js-revoke-btn">
                                    <i class="fas fa-times me-1"></i>{{ __('store.session_revoke') }}
                                </button>
                            </form>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-3 text-muted">
                <i class="fas fa-check-circle fa-2x mb-2"></i>
                <p class="mb-0">{{ __('store.session_no_other_sessions') }}</p>
            </div>
        @endif
    </div>
</div>


<div class="card border-0 shadow-sm">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-shield-alt me-2"></i>{{ __('store.login_history_title') }}</h5>
    </div>
    <div class="card-body">
        <p class="text-muted mb-4">{{ __('store.login_history_description') }}</p>

        @if($loginHistory && $loginHistory->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th>{{ __('store.login_history_date') }}</th>
                            <th>{{ __('store.login_history_ip_address') }}</th>
                            <th>{{ __('store.login_history_browser') }}</th>
                            <th>{{ __('store.login_history_platform') }}</th>
                            <th>{{ __('store.login_history_device') }}</th>
                            <th>{{ __('store.login_history_location') }}</th>
                            <th>{{ __('store.login_history_status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($loginHistory as $entry)
                            <tr>
                                <td class="text-nowrap">
                                    <i class="fas fa-clock me-1 text-muted"></i>
                                    {{ $entry->logged_in_at->format($dateTimeFormat) }}
                                    @if($loop->first && $entry->status === 'success' && $entry->ip_address === request()->ip())
                                        <span class="badge bg-info ms-1">{{ __('store.login_history_current_session') }}</span>
                                    @endif
                                </td>
                                <td>
                                    <code>{{ $entry->ip_address }}</code>
                                </td>
                                <td>
                                    @if($entry->browser)
                                        <i class="fas fa-globe me-1 text-muted"></i>{{ $entry->browser }}
                                    @else
                                        <span class="text-muted">{{ __('store.login_history_unknown') }}</span>
                                    @endif
                                </td>
                                <td>
                                    @if($entry->platform)
                                        @php
                                            $platformIcon = match($entry->platform) {
                                                'Windows' => 'fab fa-windows',
                                                'macOS' => 'fab fa-apple',
                                                'Linux' => 'fab fa-linux',
                                                'Android' => 'fab fa-android',
                                                'iOS' => 'fab fa-apple',
                                                'Chrome OS' => 'fab fa-chrome',
                                                default => 'fas fa-desktop',
                                            };
                                        @endphp
                                        <i class="{{ $platformIcon }} me-1 text-muted"></i>{{ $entry->platform }}
                                    @else
                                        <span class="text-muted">{{ __('store.login_history_unknown') }}</span>
                                    @endif
                                </td>
                                <td>
                                    @if($entry->device_type)
                                        @php
                                            $deviceIcon = match($entry->device_type) {
                                                'mobile' => 'fas fa-mobile-alt',
                                                'tablet' => 'fas fa-tablet-alt',
                                                default => 'fas fa-desktop',
                                            };
                                        @endphp
                                        <i class="{{ $deviceIcon }} me-1 text-muted"></i>
                                        {{ __('store.login_history_device_' . $entry->device_type) }}
                                    @else
                                        <span class="text-muted">{{ __('store.login_history_unknown') }}</span>
                                    @endif
                                </td>
                                <td>
                                    @if($entry->city || $entry->country)
                                        <i class="fas fa-map-marker-alt me-1 text-muted"></i>
                                        {{ $entry->city ? $entry->city . ', ' : '' }}{{ $entry->country ?? '' }}
                                    @else
                                        <span class="text-muted">{{ __('store.login_history_unknown') }}</span>
                                    @endif
                                </td>
                                <td>
                                    @if($entry->status === 'success')
                                        <span class="badge bg-success">
                                            <i class="fas fa-check-circle me-1"></i>{{ __('store.login_history_success') }}
                                        </span>
                                    @else
                                        <span class="badge bg-danger" title="{{ $entry->failure_reason }}">
                                            <i class="fas fa-times-circle me-1"></i>{{ __('store.login_history_failed') }}
                                        </span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                {{ $loginHistory->links() }}
            </div>
        @else
            <div class="text-center py-5">
                <i class="fas fa-shield-alt fa-3x text-muted mb-3"></i>
                <h5>{{ __('store.login_history_no_records') }}</h5>
            </div>
        @endif
    </div>
</div>

@push('profile-scripts')
<script>
window.sessionConfig = {
    translations: {
        revokeConfirm: '{{ __("store.session_revoke_confirm") }}',
        revokeAllConfirm: '{{ __("store.session_revoke_all_confirm") }}'
    }
};
</script>
@vite('resources/js/store/login-history.js')
@endpush
@endsection
