@extends('admin.layouts.master')
@section('title', 'Visitors')

@section('css')
<link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" rel="stylesheet">
<style>
    /* DataTable chrome */
    #visitors_table_wrapper { padding: 1rem 1rem 0; }
    #visitors_table_wrapper .dataTables_filter label,
    #visitors_table_wrapper .dataTables_length label { font-size: .85rem; }
    #visitors_table_wrapper .dataTables_filter input,
    #visitors_table_wrapper .dataTables_length select {
        border: 1px solid #d1d5db;
        border-radius: .375rem;
        padding: .25rem .6rem;
        font-size: .85rem;
        margin-left: .35rem;
    }
    #visitors_table_wrapper .dataTables_info { font-size: .8rem; color: #6b7280; padding: .75rem 0; }
    #visitors_table_wrapper .dataTables_paginate { padding: .5rem 0; }
    #visitors_table_wrapper .dataTables_paginate .paginate_button {
        border-radius: .375rem !important;
        padding: .3rem .65rem !important;
        margin: 0 2px;
        font-size: .8rem;
        border: 1px solid transparent !important;
    }
    #visitors_table_wrapper .dataTables_paginate .paginate_button:hover {
        background: #eff6ff !important;
        color: #3b82f6 !important;
        border-color: #bfdbfe !important;
    }
    #visitors_table_wrapper .dataTables_paginate .paginate_button.current,
    #visitors_table_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: #3b82f6 !important;
        color: #fff !important;
        border-color: #3b82f6 !important;
    }
    #visitors_table_wrapper .dataTables_paginate .paginate_button.disabled {
        color: #9ca3af !important;
    }

    /* Table */
    #visitors_table thead th {
        white-space: nowrap;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #6b7280;
        background: #f9fafb;
        border-bottom: 2px solid #e5e7eb;
        padding: .75rem 1rem;
    }
    #visitors_table tbody td {
        vertical-align: middle;
        font-size: .85rem;
        padding: .6rem 1rem;
        border-bottom: 1px solid #f3f4f6;
    }
    #visitors_table tbody tr:hover td { background: #f9fafb; }

    /* Status badges */
    .badge-blocked {
        display: inline-flex; align-items: center; gap: .3rem;
        background: #fee2e2; color: #dc2626;
        font-size: .72rem; font-weight: 600;
        padding: .25em .65em; border-radius: 999px;
    }
    .badge-allowed {
        display: inline-flex; align-items: center; gap: .3rem;
        background: #dcfce7; color: #16a34a;
        font-size: .72rem; font-weight: 600;
        padding: .25em .65em; border-radius: 999px;
    }

    /* Detail buttons */
    .show-detail-btn {
        font-size: .75rem !important;
        padding: .2rem .6rem !important;
        border-radius: .3rem !important;
        white-space: nowrap;
    }
    .show-detail-btn.btn-outline-secondary { color: #4b5563 !important; border-color: #d1d5db !important; }
    .show-detail-btn.btn-outline-secondary:hover { background: #f3f4f6 !important; }
    .show-detail-btn.btn-outline-primary { color: #2563eb !important; border-color: #bfdbfe !important; }
    .show-detail-btn.btn-outline-primary:hover { background: #eff6ff !important; }

    /* Detail modal body */
    #detail-modal-content {
        font-family: ui-monospace, monospace;
        font-size: .82rem;
        word-break: break-all;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: .375rem;
        padding: .75rem 1rem;
        line-height: 1.6;
        color: #1e293b;
    }
</style>
@endsection

@section('content')
<div class="page-title-head">
    <h4 class="page-main-title">Visitors</h4>
    <div class="hidden items-center gap-1.25 text-sm md:flex">
        <a href="{{ route('dashboard') }}" class="text-sm">Dashboard</a>
        <i class="iconify tabler--chevron-right text-sm"></i>
        <span class="text-default-400">Visitors</span>
    </div>
</div>

<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title flex items-center gap-2">
                <i class="iconify tabler--users text-primary"></i>
                All Visitors
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="visitors_table" class="table mb-0" style="width:100%">
                    <thead>
                        <tr>
                            <th>IP</th>
                            <th>Status</th>
                            <th>#Visits</th>
                            <th>User Agent</th>
                            <th>Refer By</th>
                            <th>ISP</th>
                            <th>City</th>
                            <th>Country</th>
                            <th>Continent</th>
                            <th>Block Reason</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- ── Detail modal ───────────────────────────────── -->
<div class="modal fade" id="detail-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:.5rem; border:none; box-shadow:0 20px 60px rgba(0,0,0,.15);">
            <div class="modal-header" style="border-bottom:1px solid #e5e7eb; padding:.9rem 1.25rem;">
                <div class="d-flex align-items-center gap-2">
                    <span id="detail-modal-icon" class="d-flex align-items-center" style="font-size:1.1rem;"></span>
                    <h6 class="modal-title mb-0 fw-semibold" id="detail-modal-title">Details</h6>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding:1.25rem;">
                <div id="detail-modal-content"></div>
            </div>
            <div class="modal-footer" style="border-top:1px solid #e5e7eb; padding:.7rem 1.25rem;">
                <button type="button" class="btn btn-sm btn-light" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="detail-copy-btn">
                    <i class="iconify tabler--copy me-1"></i> Copy
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {

    var dt = $('#visitors_table').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 50,
        order: [[10, 'desc']],
        ajax: "{{ route('visitors') }}",
        columns: [
            { data: 'ip_address',   name: 'ip_address' },
            { data: 'status',       name: 'status',       orderable: false },
            { data: 'visite_count', name: 'visite_count', className: 'text-center' },
            { 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: 'block_reason', name: 'block_reason' },
            { data: 'create_date',  name: 'create_date' },
        ],
    });

    // ── Detail modal via event delegation ───────────
    var detailModal = new bootstrap.Modal(document.getElementById('detail-modal'));

    $(document).on('click', '.show-detail-btn', function () {
        var title   = $(this).data('title');
        var content = $(this).data('content');
        var isUA    = title === 'User Agent';

        $('#detail-modal-title').text(title);
        $('#detail-modal-icon').html(
            isUA
                ? '<i class="iconify tabler--device-laptop text-secondary" style="font-size:1.1rem"></i>'
                : '<i class="iconify tabler--link text-primary" style="font-size:1.1rem"></i>'
        );
        $('#detail-modal-content').text(content);
        $('#detail-copy-btn').data('content', content);

        detailModal.show();
    });

    // ── Copy button ──────────────────────────────────
    $('#detail-copy-btn').on('click', function () {
        var text = $(this).data('content');
        navigator.clipboard.writeText(text).then(function () {
            var btn = $('#detail-copy-btn');
            btn.html('<i class="iconify tabler--check me-1"></i> Copied!');
            setTimeout(function () {
                btn.html('<i class="iconify tabler--copy me-1"></i> Copy');
            }, 1800);
        });
    });

});
</script>
@endsection