@extends('layouts.admin')

@section('admin-content')

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<style>
    /* Smooth hover effect for detail boxes */
    .hover-card:hover {
        background-color: #f8f9fa !important;
        transition: 0.2s ease;
        transform: scale(1.01);
    }

    /* Map container styling */
    #locationMap {
        height: 350px;
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
</style>

<div class="card">
   <div class="card-header">
        <h4 class="mb-0">
            <i class="fas fa-info-circle text-primary me-2"></i>
            {{ trans('app.Request Log Details') }}
        </h4>
    </div>

    <div class="card-body bg-white">

        <div class="row">
            <!-- IP INFORMATION -->
            <div class="col-md-6">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-network-wired text-info me-1"></i>
                    {{ trans('app.IP Information') }}
                </h5>

                <div class="p-3 mb-4 border rounded bg-light shadow-sm hover-card">
                    <p><strong>{{ trans('app.Client IP') }}:</strong> {{ $log->end_user_ip }}</p>
                    <p><strong>{{ trans('app.Server IP') }}:</strong> {{ $log->host_server_ip }}</p>
                    <p><strong>{{ trans('app.Request Time') }}:</strong> {{ $log->request_timestamp }}</p>
                </div>
            </div>

            <!-- LOCATION DETAILS -->
            <div class="col-md-6">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-map-marker-alt text-danger me-1"></i>
                    {{ trans('app.Location Details') }}
                </h5>

                @if($location)
                    <div class="p-3 mb-4 border rounded bg-light shadow-sm hover-card">
                        <p><strong>{{ trans('app.Country') }}:</strong> {{ $location->countryName }}</p>
                        <p><strong>{{ trans('app.Country Code') }}:</strong> {{ $location->countryCode }}</p>
                        <p><strong>{{ trans('app.Region') }}:</strong> {{ $location->regionName }}</p>
                        <p><strong>{{ trans('app.City') }}:</strong> {{ $location->cityName }}</p>
                        <p><strong>{{ trans('app.Latitude') }}:</strong> {{ $location->latitude }}</p>
                        <p><strong>{{ trans('app.Longitude') }}:</strong> {{ $location->longitude }}</p>
                        <p><strong>{{ trans('app.Timezone') }}:</strong> {{ $location->timezone }}</p>
                    </div>
                @else
                    <p class="text-danger">{{ trans('app.Location details could not be fetched') }}.</p>
                @endif
            </div>
        </div>

        <!-- MAP SECTION -->
        @if($location)
        <div class="mt-4">
            

            <div id="locationMap"></div>
        </div>
        @endif

        <hr>

        <!-- REQUEST LOG DATA -->
        <h5 class="fw-bold mb-3">
            <i class="fas fa-database text-success me-1"></i>
            {{ trans('app.Request Log Data') }}
        </h5>

        <div class="p-3 border rounded bg-light shadow-sm">
            <p><strong>{{ trans('app.Product Slug') }}:</strong> {{ $log->product_slug }}</p>
            <p><strong>{{ trans('app.Purchase Code') }}:</strong> {{ $log->purchase_code }}</p>
            <p><strong>{{ trans('app.Request Method') }}:</strong> {{ $log->request_method }}</p>
            <p><strong>{{ trans('app.Domain') }}:</strong> {{ $log->domain }}</p>
            <p><strong>{{ trans('app.Path') }}:</strong> {{ $log->path }}</p>
            <p><strong>{{ trans('app.User Agent') }}:</strong> {{ $log->user_agent }}</p>
            <p><strong>{{ trans('app.Created At') }}:</strong> {{ $log->created_at }}</p>
            <p><strong>{{ trans('app.Updated At') }}:</strong> {{ $log->updated_at }}</p>
        </div>

        <a href="{{ url()->previous() }}" class="btn btn-secondary mt-3">
            <i class="fas fa-arrow-left me-1"></i>
            {{ trans('app.Back') }}
        </a>

    </div>
</div>

@if($location)
<script>
document.addEventListener("DOMContentLoaded", function () {

    const lat = {{ $location->latitude }};
    const lng = {{ $location->longitude }};

    // Initialize map
    const map = L.map('locationMap', {
        scrollWheelZoom: false,
        zoomControl: true
    }).setView([lat, lng], 11);

    // Tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: ''
    }).addTo(map);

    // Marker
    L.marker([lat, lng])
        .addTo(map)
        .bindPopup("{{ $location->cityName }}, {{ $location->countryName }}")
        .openPopup();

    // Fix map not rendering correctly inside hidden containers
    setTimeout(() => {
        map.invalidateSize();
    }, 300);
});
</script>
@endif

@endsection
