@extends('layouts.app')

@section('title', 'My Dashboard - SOFT Paste')

@section('content')
<div class="max-w-7xl mx-auto w-full mt-4 p-6 md:p-8 bg-white dark:bg-slate-900 rounded-2xl shadow-xl shadow-slate-200/50 dark:shadow-none border border-slate-100 dark:border-slate-800 transition-colors">

    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">My Dashboard</h1>
            <p class="text-slate-500 dark:text-slate-400 text-sm mt-1">Manage all your saved code snippets and texts.</p>
        </div>
        <a href="{{ route('pastes.create') }}" class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-xl transition-all font-semibold shadow-sm shadow-indigo-500/30 dark:shadow-indigo-900/40">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            Create Paste
        </a>
    </div>

    @if(session('success'))
        <div class="bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 text-emerald-700 dark:text-emerald-400 px-5 py-4 rounded-xl mb-6 flex items-center gap-3 font-medium">
            <svg class="w-5 h-5 text-emerald-500 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            {{ session('success') }}
        </div>
    @endif

    <div class="overflow-x-auto rounded-xl border border-slate-200 dark:border-slate-800 p-1">
        <table id="pastesTable" class="w-full text-left border-collapse stripe hover">
            <thead>
                <tr class="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-800">
                    <th class="p-4 font-semibold text-sm text-slate-600 dark:text-slate-400">Title</th>
                    <th class="p-4 font-semibold text-sm text-slate-600 dark:text-slate-400">Syntax</th>
                    <th class="p-4 font-semibold text-sm text-slate-600 dark:text-slate-400">Visibility</th>
                    <th class="p-4 font-semibold text-sm text-slate-600 dark:text-slate-400">Status</th>
                    <th class="p-4 font-semibold text-sm text-slate-600 dark:text-slate-400">Created</th>
                    <th class="p-4 font-semibold text-sm text-slate-600 dark:text-slate-400 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                @foreach($pastes as $paste)
                    <tr class="hover:bg-slate-50/80 dark:hover:bg-slate-800/50 transition group">
                        <td class="p-4 font-medium">
                            <a href="{{ route('pastes.show', $paste) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition">
                                {{ $paste->title ?? 'Untitled Snippet' }}
                            </a>
                        </td>
                        <td class="p-4 text-xs font-bold tracking-wide uppercase text-slate-500 dark:text-slate-400">{{ $paste->syntax }}</td>
                        <td class="p-4 text-sm capitalize text-slate-600 dark:text-slate-300 flex items-center gap-1.5">
                            @if($paste->visibility === 'public') 🌍
                            @elseif($paste->visibility === 'unlisted') 🔗
                            @else 🔒 @endif
                            {{ $paste->visibility }}
                        </td>
                        <td class="p-4">
                            @if($paste->expires_at && $paste->expires_at->isPast())
                                <span class="bg-rose-50 dark:bg-rose-500/10 text-rose-700 dark:text-rose-400 px-2.5 py-1 rounded-md text-xs font-bold tracking-wide border border-rose-100 dark:border-rose-500/20">Expired</span>
                            @else
                                <span class="bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 px-2.5 py-1 rounded-md text-xs font-bold tracking-wide border border-emerald-100 dark:border-emerald-500/20">Active</span>
                            @endif
                        </td>
                        <td class="p-4 text-sm text-slate-500 dark:text-slate-400" data-order="{{ $paste->created_at->timestamp }}">
                            {{ $paste->created_at->format('M d, Y H:i') }}
                        </td>
                        <td class="p-4 text-right">
                            <div class="flex justify-end items-center gap-3">
                                <a target="_blank" href="{{ route('pastes.show', $paste) }}" class="text-sm font-medium text-slate-500 dark:text-slate-400 hover:text-indigo-600 transition">View</a>
                                <form action="{{ route('pastes.destroy', $paste->slug) }}" method="POST" onsubmit="confirmDelete(event, this);">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-sm font-medium text-rose-500 hover:text-rose-700 transition">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>

@push('scripts')
<script>
    $(document).ready(function() {
        $('#pastesTable').DataTable({
            responsive: true,
            order: [[4, 'desc']], // Sort by "Created" column descending
            language: {
                search: "", // Remove "Search:" label
                searchPlaceholder: "Search snippets...",
                emptyTable: "Looks like your dashboard is a blank slate. Let's create your first paste!"
            },
            columnDefs: [
                { orderable: false, targets: 5 } // Disable sorting on the Actions column
            ]
        });
    });
</script>
@endpush
@endsection