@extends('layouts.app')

@section('css')
@endsection

@section('js')
<script>
    const userActivities = {!! \Illuminate\Support\Js::from(
        old('activities',
            (isset($userSession->activities) && count($userSession->activities))
                ? $userSession->activities
                : []
        )
    ) !!};
</script>

<script src="{{ asset('assets/custom/js/session-logs/activity-logs.js') }}?v=2"></script>

<script>
    @if(old('activities',
        (isset($userSession->activities) && count($userSession->activities))))
        document.addEventListener("DOMContentLoaded", function () {
            createActivityFilters();
        });
    @endif
</script>
@endsection

@push('pageTitle')
    {{ __('labels.session_logs') }}
@endpush

@section('content')

@include('components.common.page-header', [
    'pageTitle' =>
        isset($userSession) && isset($readonly) && $readonly
            ? __('labels.view_user_session')
            : (isset($userSession)
                ? __('labels.edit_session')
                : __('labels.create_session')),
    'actionButton' => [
        'url' => route('user-sessions.index'),
        'text' => __('labels.back_to_logs'),
    ],
])

@include('components.common.flush-message')
@include('components.common.validation-errors')

<form
    @if(!isset($readonly) || (isset($readonly) && !$readonly))
        action="{{ isset($userSession) ? route('user-sessions.update', $userSession->id) : route('user-sessions.store') }}" 
        method="POST"
        enctype="multipart/form-data"
    @endif 
    id="documentForm">

    @csrf
    @if(isset($userSession))
        @method('PUT')
    @endif

    @php
        $isActiveSession = isset($userSession->user->last_session_id) &&
                           $userSession->user->last_session_id == $userSession->id;
    @endphp

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

            <div class="card session-card">

                <div class="card-header">
                    <h3><i class="fas fa-user-clock"></i> {{ __('labels.session_details') }}</h3>

                    <div>
                        <p>
                            <strong>{{ __('labels.status') }}:</strong>
                            <span class="status-indicator @if($isActiveSession) bg-success @else bg-secondary @endif"></span>

                            @if($isActiveSession)
                                {{ __('labels.active_session') }}
                            @else
                                {{ __('labels.closed_session') }}
                            @endif
                        </p>

                        <span class="badge rounded-pill bg-primary">
                            <i class="fas fa-clock"></i>
                            {{ __('labels.duration') }}:
                            {{ $userSession->duration_seconds ?? $userSession->duration_till_last_active ?? '0s' }}
                        </span>
                    </div>
                </div>

                <div class="card-body">

                    <input type="hidden" name="id" value="{{ $userSession->id ?? '' }}" />

                    <!-- User -->
                    <div class="mb-4">
                        <label class="form-label">
                            <i class="fas fa-user me-1"></i> {{ __('labels.user') }}
                        </label>

                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>

                            <input class="form-control"
                                   type="text"
                                   name="title"
                                   value="{{ old('title', $userSession->user->name ?? '') }}"
                                   {{ (isset($readonly) && $readonly) ? "readonly" : "" }}
                                   required>

                            <a @if(isset($userSession->user->id))
                                    href="{{ route('users.show', ['user' => $userSession->user->id]) }}"
                                    target="_blank"
                                @endif
                                data-bs-toggle="tooltip" title="{{ __('labels.details') }}"
                                class="input-group-text">
                                <i class="fas fa-external-link-alt"></i>
                            </a>

                        </div>
                    </div>

                    <!-- Login / Logout -->
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label class="form-label">
                                <i class="fas fa-sign-in-alt me-1"></i> {{ __('labels.logged_in_at') }}
                            </label>

                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                <input class="form-control"
                                       name="logged_in_at"
                                       value="{{ old('logged_in_at', $userSession?->logged_in_at?->format('d.m.Y H:i')) }}"
                                       {{ (isset($readonly) && $readonly) ? "readonly" : "" }}>
                            </div>
                        </div>

                        <div class="col-md-6 mb-4">
                            <label class="form-label">
                                <i class="fas fa-sign-out-alt me-1"></i> {{ __('labels.logged_out_at') }}
                            </label>

                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>

                                <input class="form-control"
                                       name="logged_out_at"
                                       value="{{ old('logged_out_at', $userSession?->logged_out_at?->format('d.m.Y H:i')) }}"
                                       {{ (isset($readonly) && $readonly) ? "readonly" : "" }}>
                            </div>
                        </div>
                    </div>

                    <!-- Duration -->
                    <div class="mb-4">
                        <label class="form-label">
                            <i class="fas fa-hourglass-half me-1"></i> {{ __('labels.duration_seconds') }}
                        </label>

                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-stopwatch"></i></span>
                            <input class="form-control"
                                   name="duration_seconds"
                                   value="{{ old('duration_seconds', $userSession->duration_seconds ?? $userSession->duration_till_last_active ?? '') }}"
                                   {{ (isset($readonly) && $readonly) ? "readonly" : "" }}>
                        </div>
                    </div>

                    <!-- IP Address -->
                    <div class="mb-4">
                        <label class="form-label">
                            <i class="fas fa-network-wired me-1"></i> {{ __('labels.ip_address') }}
                        </label>

                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-globe"></i></span>
                            <input class="form-control"
                                   name="ip_address"
                                   value="{{ old('ip_address', $userSession->ip_address ?? '') }}"
                                   {{ (isset($readonly) && $readonly) ? "readonly" : "" }}>
                        </div>
                    </div>

                    <!-- User Agent -->
                    <div class="mb-4">
                        <label class="form-label">
                            <i class="fas fa-desktop me-1"></i> {{ __('labels.user_agent') }}
                        </label>

                        <div class="user-agent-container">
                            <textarea class="form-control"
                                      name="user_agent"
                                      rows="3"
                                      {{ (isset($readonly) && $readonly) ? "readonly" : "" }}>{{ old('user_agent', $userSession->user_agent ?? '') }}</textarea>

                            <button type="button" class="btn btn-info copy-btn" onclick="copyUserAgent()">
                                <i class="fas fa-copy"></i> {{ __('labels.copy') }}
                            </button>
                        </div>
                    </div>

                </div>
            </div>

            {{-- Activity Logs Section --}}
            @include('pages.session-logs.templates.activity-logs.index', [
                'activityLog' => $userSession->activities ?? [],
            ])

        </div>
    </div>

    @if(!isset($readonly) || (isset($readonly) && !$readonly))
        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">

            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-1"></i>
                {{ isset($userSession) ? __('labels.update') : __('labels.save') }}
            </button>

            <a href="{{ route('user-sessions.index') }}" class="btn btn-secondary">
                {{ __('labels.cancel') }}
            </a>

        </div>
    @endif

</form>
@endsection