@extends('wallet.layouts.master')
@section('title','Visitors')
@section('description', 'View Visitors')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('materio/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
@endsection
@section('content')
    <div class="heading d-flex justify-content-between align-items-center gap-3 mt-5 px-1">
            <h2 class='fw-bold fs-2'>Visitors</h2>
        </div>
        <div class="bg-line-dark rounded-4 shadow p-3 mt-32">
            <div class="table-responsive">
                <table class="display table table-bordered" id="deafult_ordering_table" style="width:100%">
                    <thead>
                    <tr>
                        <th>IP</th>
                        <th>#Visite</th>
                        <th>User Agent</th>
                        <th>Refer By</th>
                        <th>ISP</th>
                        <th>City</th>
                        <th>Country</th>
                        <th>Continent</th>
                        <th>Date</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

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

@section('script')
    <script src="{{ asset('materio/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("#visitors-page").addClass('active');
            $('#deafult_ordering_table').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 50,
                order: [[1, 'desc']],
                ajax: "{{ route('visitors') }}",
                columns: [
                    {data: 'ip_address', name: 'ip_address'},
                    {data: 'visite_count', name: 'visite_count'},
                    {data: 'ua', name: 'ua', orderable: false, searchable: false},
                    {data: 'refer_by', name: 'refer_by', orderable: false, searchable: false},
                    {data: 'isp', name: 'isp'},
                    {data: 'city', name: 'city'},
                    {data: 'country', name: 'country'},
                    {data: 'continent', name: 'continent'},
                    {data: 'create_date', name: 'create_date'}
                ]
            });
        });

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