@extends('LaravelUserMonitoring::layouts.master')

@section('title', 'Visits Monitoring')

@section('content')
    <div class="mt-7 overflow-x-auto">
        <table class="w-full whitespace-nowrap">
            <tbody>
                @foreach ($visits as $visit)
                    <tr tabindex="0" class="focus:outline-none h-16 border border-gray-100 rounded">
                        <td>
                            <div class="flex items-center pl-5">
                                <a href="{{ $visit->page }}" class="text-base font-medium leading-none text-gray-700 mr-2">
                                    {{ $visit->page }}
                                </a>
                            </div>
                        </td>
                        <td class="pl-24">
                            <div class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                <p class="text-sm leading-none text-gray-600 ml-2">
                                    {{ $visit->user->{config('user-monitoring.user.display_attribute')} ?? 'Guest User' }}
                                </p>
                            </div>
                        </td>
                        <td class="pl-5">
                            <div class="flex items-center">
                                @if ($visit->browser_name === 'Opera')
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-6 h-6" stroke-width="1.5" viewBox="0 0 50 50">
                                        <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#1fb141"><path d="M21.5,21.5v129h64.5v-32.25v-64.5v-32.25zM86,53.75c0,17.7805 14.4695,32.25 32.25,32.25c17.7805,0 32.25,-14.4695 32.25,-32.25c0,-17.7805 -14.4695,-32.25 -32.25,-32.25c-17.7805,0 -32.25,14.4695 -32.25,32.25zM118.25,86c-17.7805,0 -32.25,14.4695 -32.25,32.25c0,17.7805 14.4695,32.25 32.25,32.25c17.7805,0 32.25,-14.4695 32.25,-32.25c0,-17.7805 -14.4695,-32.25 -32.25,-32.25z"></path></g></g>
                                    </svg>
                                @elseif ($visit->browser_name === 'Safari')
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-6 h-6" stroke-width="1.5" viewBox="0 0 50 50">
                                        <path d="M 25 1.9199219 C 12.265113 1.9199219 1.9199219 12.265113 1.9199219 25 C 1.9199219 37.734887 12.265113 48.080078 25 48.080078 C 37.734887 48.080078 48.080078 37.734887 48.080078 25 C 48.080078 12.265113 37.734887 1.9199219 25 1.9199219 z M 25 3.9199219 C 36.654007 3.9199219 46.080078 13.345993 46.080078 25 C 46.080078 36.654007 36.654007 46.080078 25 46.080078 C 13.345993 46.080078 3.9199219 36.654007 3.9199219 25 C 3.9199219 24.635812 3.929075 24.27368 3.9472656 23.914062 C 4.511175 12.765948 13.710181 3.9199219 25 3.9199219 z M 25 6 C 14.518434 6 6 14.518434 6 25 C 6 35.481566 14.518434 44 25 44 C 35.481566 44 44 35.481566 44 25 C 44 14.518434 35.481566 6 25 6 z M 25 8 C 29.327588 8 33.261303 9.6240278 36.259766 12.279297 L 21.486328 21.142578 A 1.0001 1.0001 0 0 0 21.142578 21.486328 L 12.279297 36.259766 C 9.6240278 33.261303 8 29.327588 8 25 C 8 15.599315 15.599315 8 25 8 z M 24.984375 8.9863281 A 1.0001 1.0001 0 0 0 24 10 L 24 11 A 1.0001 1.0001 0 1 0 26 11 L 26 10 A 1.0001 1.0001 0 0 0 24.984375 8.9863281 z M 30.724609 10.128906 A 1.0001 1.0001 0 0 0 29.816406 10.759766 L 29.433594 11.683594 A 1.0001 1.0001 0 1 0 31.28125 12.449219 L 31.664062 11.525391 A 1.0001 1.0001 0 0 0 30.724609 10.128906 z M 19.234375 10.132812 A 1.0001 1.0001 0 0 0 18.326172 11.529297 L 18.708984 12.453125 A 1.0003765 1.0003765 0 1 0 20.556641 11.685547 L 20.171875 10.761719 A 1.0001 1.0001 0 0 0 19.234375 10.132812 z M 14.373047 13.392578 A 1.0001 1.0001 0 0 0 13.677734 15.111328 L 14.386719 15.816406 A 1.0001 1.0001 0 1 0 15.798828 14.400391 L 15.089844 13.695312 A 1.0001 1.0001 0 0 0 14.373047 13.392578 z M 37.720703 13.740234 C 40.375972 16.738697 42 20.672412 42 25 C 42 34.400685 34.400685 42 25 42 C 20.672412 42 16.738697 40.375972 13.740234 37.720703 L 28.513672 28.857422 A 1.0001 1.0001 0 0 0 28.857422 28.513672 L 37.720703 13.740234 z M 34.085938 15.914062 L 27.271484 27.271484 L 15.914062 34.085938 L 22.728516 22.728516 L 34.085938 15.914062 z M 38.816406 18.214844 A 1.0001 1.0001 0 0 0 38.457031 18.296875 L 37.533203 18.681641 A 1.0002261 1.0002261 0 1 0 38.304688 20.527344 L 39.226562 20.142578 A 1.0001 1.0001 0 0 0 38.816406 18.214844 z M 11.134766 18.255859 A 1.0001 1.0001 0 0 0 10.757812 20.185547 L 11.681641 20.568359 A 1.0001 1.0001 0 1 0 12.447266 18.720703 L 11.523438 18.337891 A 1.0001 1.0001 0 0 0 11.134766 18.255859 z M 25 23 A 2 2 0 0 0 23 25 A 2 2 0 0 0 25 27 A 2 2 0 0 0 27 25 A 2 2 0 0 0 25 23 z M 10 24 A 1.0001 1.0001 0 1 0 10 26 L 11 26 A 1.0001 1.0001 0 1 0 11 24 L 10 24 z M 39 24 A 1.0001 1.0001 0 1 0 39 26 L 40 26 A 1.0001 1.0001 0 1 0 40 24 L 39 24 z M 37.929688 29.349609 A 1.0001 1.0001 0 0 0 37.552734 31.279297 L 38.476562 31.662109 A 1.0001 1.0001 0 1 0 39.242188 29.814453 L 38.318359 29.431641 A 1.0001 1.0001 0 0 0 37.929688 29.349609 z M 12.054688 29.390625 A 1.0001 1.0001 0 0 0 11.695312 29.472656 L 10.773438 29.857422 A 1.0001 1.0001 0 1 0 11.542969 31.703125 L 12.466797 31.318359 A 1.0001 1.0001 0 0 0 12.054688 29.390625 z M 34.896484 33.880859 A 1.0001 1.0001 0 0 0 34.201172 35.599609 L 34.910156 36.304688 A 1.0001 1.0001 0 1 0 36.322266 34.888672 L 35.613281 34.183594 A 1.0001 1.0001 0 0 0 34.896484 33.880859 z M 30.353516 36.916016 A 1.0001 1.0001 0 0 0 29.443359 38.314453 L 29.828125 39.238281 A 1.0001 1.0001 0 1 0 31.673828 38.470703 L 31.291016 37.546875 A 1.0001 1.0001 0 0 0 30.353516 36.916016 z M 19.625 36.921875 A 1.0001 1.0001 0 0 0 18.71875 37.550781 L 18.335938 38.474609 A 1.0001 1.0001 0 1 0 20.183594 39.240234 L 20.566406 38.316406 A 1.0001 1.0001 0 0 0 19.625 36.921875 z M 24.984375 37.986328 A 1.0001 1.0001 0 0 0 24 39 L 24 40 A 1.0001 1.0001 0 1 0 26 40 L 26 39 A 1.0001 1.0001 0 0 0 24.984375 37.986328 z"></path>
                                    </svg>
                                @else
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-6 h-6" stroke-width="1.5" viewBox="0 0 50 50">
                                        <path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 32.987976 4 39.925645 8.44503 43.476562 15 L 25 15 A 1.0001 1.0001 0 0 0 24.886719 15.005859 C 19.738868 15.064094 15.511666 19.035373 15.046875 24.078125 L 8.0351562 12.650391 C 11.851593 7.4136918 18.014806 4 25 4 z M 6.8242188 14.501953 L 16.476562 30.230469 A 1.0001 1.0001 0 0 0 16.591797 30.388672 A 1.0001 1.0001 0 0 0 16.59375 30.392578 C 18.3752 33.158533 21.474925 35 25 35 C 26.413063 35 27.756327 34.701734 28.976562 34.169922 L 22.320312 45.824219 C 11.979967 44.509804 4 35.701108 4 25 C 4 21.169738 5.0375742 17.591533 6.8242188 14.501953 z M 25 17 C 29.430123 17 33 20.569877 33 25 C 33 26.42117 32.629678 27.751591 31.984375 28.90625 A 1.0001 1.0001 0 0 0 31.982422 28.908203 A 1.0001 1.0001 0 0 0 31.947266 28.966797 C 30.57172 31.37734 27.983486 33 25 33 C 20.569877 33 17 29.430123 17 25 C 17 20.569877 20.569877 17 25 17 z M 30.972656 17 L 44.421875 17 C 45.43679 19.465341 46 22.165771 46 25 C 46 36.609824 36.609824 46 25 46 C 24.842174 46 24.686285 45.991734 24.529297 45.988281 L 33.683594 29.958984 A 1.0001 1.0001 0 0 0 33.742188 29.841797 C 34.541266 28.405674 35 26.755664 35 25 C 35 21.728612 33.411062 18.825934 30.972656 17 z"></path>
                                    </svg>
                                @endif
                                <p class="text-sm leading-none text-gray-600 ml-2">
                                    {{ $visit->browser_name }}
                                </p>
                            </div>
                        </td>
                        <td class="pl-5">
                            <div class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
                                </svg>
                                <p class="text-sm leading-none text-gray-600 ml-2">
                                    {{ $visit->ip }}
                                </p>
                            </div>
                        </td>
                        <td class="pl-5">
                            <div class="flex items-center">
                                @include('LaravelUserMonitoring::layouts.platform', ['platform' => $visit->platform])
                                <p class="text-sm leading-none text-gray-600 ml-2">
                                    {{ $visit->platform }}
                                </p>
                            </div>
                        </td>
                        <td class="pl-5">
                            <button class="py-3 px-3 text-sm focus:outline-none leading-none text-blue-700 bg-blue-100 rounded">
                                {{ $visit->created_at->format('Y-m-d H:i') }}
                            </button>
                        </td>
                        <td class="pl-4">
                            <form method="post" action="{{ route('user-monitoring.visits-monitoring-delete', $visit->id) }}">
                                @csrf
                                @method('DELETE')

                                <button class="delete-btn focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                    </svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        {{ $visits->links() }}
    </div>
@endsection
