@extends('dashboard.layout')

@section('title', 'Instructions')
@section('meta_description', 'Manage URL-specific page instructions.')
@section('page_title', 'Instructions')

@section('content')

<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-xl font-bold text-gray-900">Instructions</h2>
        <p class="text-sm text-gray-900 mt-0.5">URL-specific help content shown in the side panel.</p>
    </div>
    <a href="{{ route('instructions.create') }}"
       class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-violet-600 text-white text-sm font-medium shadow-sm hover:bg-violet-700 active:scale-95 transition-all">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.5v15m7.5-7.5h-15"/>
        </svg>
        New Instruction
    </a>
</div>

@if(session('success'))
    <div class="mb-4 px-4 py-3 rounded-xl bg-emerald-50 border border-emerald-200 text-sm text-emerald-700">
        {{ session('success') }}
    </div>
@endif

<div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
    @if($instructions->isEmpty())
        <div class="flex flex-col items-center justify-center py-20 text-center">
            <div class="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center mb-4">
                <svg class="w-7 h-7 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
                </svg>
            </div>
            <p class="text-sm font-medium text-gray-900">No instructions yet</p>
            <p class="text-xs text-gray-900 mt-1">Create your first page instruction above.</p>
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/60">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">URL</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Preview</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">Updated</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($instructions as $instruction)
                        <tr class="hover:bg-violet-50/30 transition-colors group">
                            <td class="px-4 py-3 font-mono text-xs text-violet-700 font-medium">{{ $instruction->url }}</td>
                            <td class="px-4 py-3 text-gray-900 text-xs truncate max-w-xs">
                                {{ Str::limit(strip_tags($instruction->content), 80) }}
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-900 whitespace-nowrap">
                                {{ \Carbon\Carbon::parse($instruction->updated_at)->diffForHumans() }}
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2 justify-end">
                                    <a href="{{ route('instructions.edit', $instruction) }}"
                                       class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-gray-100 text-gray-900 text-xs font-medium hover:bg-violet-100 hover:text-violet-700 transition">
                                        Edit
                                    </a>
                                    <form method="POST" action="{{ route('instructions.destroy', $instruction) }}"
                                          onsubmit="return confirm('Delete this instruction?')">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                                class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-gray-100 text-gray-900 text-xs font-medium hover:bg-red-50 hover:text-red-600 transition">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($instructions->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">
                {{ $instructions->links() }}
            </div>
        @endif
    @endif
</div>

@endsection