@extends('dashboard.layouts.master')
@section('title','Visitors | Dashboard | '.env('app_name'))
@section('description', 'View Visitors')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('materio/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
@endsection
@section('main-content')
    <h4 class="mb-4">Visitors</h4>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="display table table-bordered" id="deafult_ordering_table" style="width:100%">
                    <thead>
                    <tr>
                        <th>IP</th>
                        <th>#Hits</th>
                        <th>Status</th>
                        <th>User Agent</th>
                        <th>Refer By</th>
                        <th>ISP</th>
                        <th>City</th>
                        <th>Country</th>
                        <th>Continent</th>
                        <th>Last Visit</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($visitors as $visitor)
                        @php
                            $logData = json_decode($visitor->logs);
                            $city = $logData->geoplugin_city ?? $logData->city ?? '';
                            $continent = $logData->geoplugin_continentName ?? $logData->continent ?? '';
                        @endphp
                        <tr>
                            <td>{{ $visitor->ip_address }}</td>
                            <td>{{ $visitor->visite_count }}</td>
                            <td>
                                @if($visitor->is_blocked)
                                    <span class="badge bg-danger">Blocked</span>
                                @else
                                    <span class="badge bg-success">Allowed</span>
                                @endif
                            </td>
                            <td>
                                @if($visitor->ua)
                                    <button type="button" class="btn btn-sm btn-info" onclick="showUA(@json($visitor->ua))">View UA</button>
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                @if($visitor->refer_by)
                                    <button type="button" class="btn btn-sm btn-primary" onclick="showUA(@json($visitor->refer_by))">View Refer</button>
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>{{ $visitor->isp }}</td>
                            <td>{{ $city }}</td>
                            <td>{{ $visitor->country }}</td>
                            <td>{{ $continent }}</td>
                            <td>{{ $visitor->last_visit ?? $visitor->create_date }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="text-center text-muted">No visitors recorded yet. New site visits will appear here.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="show_message_model" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p id="show_message"></p>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script src="{{ asset('materio/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("#visitors-page").addClass('active');
            $('#deafult_ordering_table').DataTable({
                pageLength: 50,
                order: [[9, 'desc']]
            });
        });

        function showUA(message) {
            $("#show_message").text(message);
            $("#show_message_model").modal('show');
        }
    </script>
@endsection