@extends('master-user')

@section('content')
<section class="py-8">
    <div class="max-w-7xl mx-auto px-4">
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-2xl font-bold text-[#3a3058] mb-6 flex items-center gap-2">
                <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M12 20a8 8 0 100-16 8 8 0 000 16z" /></svg>
                My Short URLs
            </h3>
            <div class="overflow-x-auto rounded-lg border border-gray-200">
                <table id="shortUrlsTable" class="min-w-full bg-white text-base text-left whitespace-nowrap">
                    <thead>
                        <tr>
                            <th style="background-color: #3a3058;" class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Prefix/Header</th>
                            <th style="background-color: #3a3058;" class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Short URL</th>
                            <th style="background-color: #3a3058;" class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Full URL</th>
                            <th style="background-color: #3a3058;" class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Visit Count</th>
                            <th style="background-color: #3a3058;" class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Source</th>
                            <th style="background-color: #3a3058;" class="px-6 py-4 font-semibold text-sm uppercase tracking-wider text-left text-yellow-200">Created At</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 text-base">
                        <!-- Data will be populated via AJAX -->
                    </tbody>
                </table>
                <!-- DataTables search/filter UI will be rendered here by JS, but we can style the default input/select -->                
            </div>
            <input type="hidden" class="hidden listShortUrl" value="{{ route('user.shorturl.list') }}">
        </div>
    </div>
</section>
@endsection

@push('head_end')
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap.min.css">
<style>
.dataTables_paginate {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1.5rem;
    width: 100% !important;
    gap: 0.25rem;
}
.dataTables_wrapper .dataTables_paginate {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}
.dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
    transition: background 0.15s, color 0.15s, border 0.15s;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    cursor: pointer;
}
.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: #e5e7eb;
    color: #111827;
    border-color: #a1a1aa;
}
.dataTables_paginate .paginate_button.current {
    background: #374151;
    color: #fffbe7;
    border-color: #374151;
    font-weight: 700;
    box-shadow: 0 2px 6px 0 rgb(55 65 81 / 0.15);
    cursor: default;
}
.dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f3f4f6;
    color: #a1a1aa;
    border-color: #e5e7eb;
}
.dataTables_paginate .ellipsis {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: #a1a1aa;
}
</style>
@endpush

@push('post_js')
<script src="{!! getAssetPath('assets/js/plugins/jquery.dataTables.min.js') !!}"></script>
<script>
$(document).ready(function() {
    $('#shortUrlsTable').on('draw.dt', function() {
        $('#shortUrlsTable tbody tr').each(function() {
            $(this).find('td').addClass('px-6 py-3');
        });
        // Make Short URL column clickable with target _blank
        $('#shortUrlsTable tbody tr').each(function() {
            var td = $(this).find('td').eq(1);
            var url = td.text().trim();
            if(url && !td.find('a').length) {
                td.html('<a href="'+url+'" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline font-medium">'+url+'</a>');
            }
        });
    });
    // Initial draw
    $('#shortUrlsTable').on('init.dt', function() {
        $('#shortUrlsTable tbody tr').each(function() {
            $(this).find('td').addClass('px-6 py-3');
        });
        // Make Short URL column clickable with target _blank
        $('#shortUrlsTable tbody tr').each(function() {
            var td = $(this).find('td').eq(1);
            var url = td.text().trim();
            if(url && !td.find('a').length) {
                td.html('<a href="'+url+'" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline font-medium">'+url+'</a>');
            }
        });
    });
});
</script>
@endpush