@extends('layouts.admin')

@section('header')
    Onboarding Messages
@endsection

@section('content')
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-semibold">Manage Onboarding Messages</h2>
        <a href="{{ route('admin.onboarding.create') }}" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
            Create New Message
        </a>
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-full bg-white">
            <thead class="bg-gray-100">
                <tr>
                    <th class="py-3 px-4 text-left">Order</th>
                    <th class="py-3 px-4 text-left">Title</th>
                    <th class="py-3 px-4 text-left">Type</th>
                    <th class="py-3 px-4 text-left">Status</th>
                    <th class="py-3 px-4 text-left">Display Dates</th>
                    <th class="py-3 px-4 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse ($messages as $message)
                    <tr class="hover:bg-gray-50">
                        <td class="py-3 px-4">
                            <div class="flex items-center">
                                <span class="font-medium">{{ $message->display_order }}</span>
                                <div class="ml-2 flex space-x-1">
                                    @if (!$loop->first)
                                        <form method="POST" action="{{ route('admin.onboarding.move-up', $message) }}">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="text-gray-500 hover:text-gray-700">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                                </svg>
                                            </button>
                                        </form>
                                    @endif
                                    @if (!$loop->last)
                                        <form method="POST" action="{{ route('admin.onboarding.move-down', $message) }}">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="text-gray-500 hover:text-gray-700">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                                </svg>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="py-3 px-4">
                            <div class="font-medium">{{ $message->title }}</div>
                            <div class="text-sm text-gray-500">{{ Str::limit($message->content, 60) }}</div>
                        </td>
                        <td class="py-3 px-4">{{ ucfirst($message->type) }}</td>
                        <td class="py-3 px-4">
                            @if ($message->is_active)
                                <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Active</span>
                            @else
                                <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Inactive</span>
                            @endif
                        </td>
                        <td class="py-3 px-4">
                            @if ($message->display_from && $message->display_until)
                                {{ $message->display_from->format('M d') }} - {{ $message->display_until->format('M d') }}
                            @elseif ($message->display_from)
                                From {{ $message->display_from->format('M d') }}
                            @elseif ($message->display_until)
                                Until {{ $message->display_until->format('M d') }}
                            @else
                                <span class="text-gray-500">Always</span>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-right">
                            <div class="flex justify-end space-x-2">
                                <a href="{{ route('admin.onboarding.edit', $message) }}" class="text-blue-600 hover:text-blue-900">Edit</a>
                                <form method="POST" action="{{ route('admin.onboarding.destroy', $message) }}" class="inline" onsubmit="return confirm('Are you sure you want to delete this message?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-900 ml-2">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="py-6 text-center text-gray-500">No onboarding messages found</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">
        {{ $messages->links() }}
    </div>
@endsection