@extends('master-admin')

@section('title', 'All Short URLs')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-6">All Short URLs</h1>
    <div class="bg-white rounded shadow p-4">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
            <div></div>
            <div id="datatable-search-container" class="w-full md:w-1/3 flex justify-end"></div>
        </div>
        <table id="admin-shorturls-table" class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Short URL</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Header</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Destination</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                <!-- DataTables will populate -->
            </tbody>
        </table>
        <div id="datatable-error" class="text-red-600 mt-4 hidden"></div>
    </div>
</div>
@endsection

@push('post_js')
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
    $(function() {
        var table = $('#admin-shorturls-table').DataTable({
            processing: true,
            serverSide: true,
            pagingType: 'simple_numbers',
            language: {
                search: '',
                searchPlaceholder: 'Search URLs...',
                paginate: {
                    previous: '<span class="inline-flex items-center justify-center w-8 h-8 rounded bg-gray-100 text-gray-700 hover:bg-gray-200">&lt;</span>',
                    next: '<span class="inline-flex items-center justify-center w-8 h-8 rounded bg-gray-100 text-gray-700 hover:bg-gray-200">&gt;</span>'
                }
            },
            dom: '<"top"f>rt<"bottom"ilp><"clear">',
            drawCallback: function() {
                // Style pagination numbers
                var paginate = $('#admin-shorturls-table_paginate');
                paginate.addClass('flex justify-end');
                paginate.find('.paginate_button').addClass('inline-flex items-center justify-center w-8 h-8 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 mx-1').removeClass('current');
                paginate.find('.paginate_button.current').addClass('bg-indigo-600 text-white font-bold');
                // Style search box
                var searchBox = $('#admin-shorturls-table_filter input');
                searchBox.addClass('block w-full md:w-64 px-4 py-2 border border-gray-300 rounded focus:ring focus:ring-indigo-200 focus:border-indigo-400 text-sm text-gray-700 bg-white placeholder-gray-400').attr('placeholder', 'Search URLs...');
                $('#admin-shorturls-table_filter').addClass('flex justify-end mb-4').appendTo('#datatable-search-container');
            },
            ajax: {
                url: '{{ route('admin.urls.datatable') }}',
                type: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                error: function(xhr, error, thrown) {
                    let msg = 'Ajax error: ' + xhr.status + ' ' + xhr.statusText + '\n';
                    if (xhr.responseText) {
                        msg += xhr.responseText;
                    }
                    $('#datatable-error').removeClass('hidden').text(msg);
                }
            },
            order: [[0, 'desc']],
            columns: [
                { data: 'id', name: 'id', className: 'px-4 py-2' },
                { data: 'short', name: 'short', className: 'px-4 py-2', render: function(data, type, row) {
                    return '<a href="' + data + '" class="text-blue-600 hover:underline" target="_blank">' + data + '</a>';
                }},
                { data: 'header', name: 'header', className: 'px-4 py-2' },
                { data: 'full_url', name: 'full_url', className: 'px-4 py-2' },
                { data: 'user', name: 'user', className: 'px-4 py-2' },
                { data: 'created_at', name: 'created_at', className: 'px-4 py-2' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'px-4 py-2' }
            ]
        });
    });
</script>
@endpush