@extends('layouts.admin')

@section('title', __('admin.channels.title'))

@section('content')
    <div class="flex flex-wrap items-center justify-between gap-4">
        <h1 class="text-2xl font-bold text-brand-deep">{{ __('admin.channels.title') }}</h1>
        <a href="{{ lroute('admin.channels.create') }}" class="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-deep">{{ __('admin.channels.create') }}</a>
    </div>

    <div class="mt-6 overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-black/5">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-black/5 text-xs uppercase tracking-wide text-ink-soft">
                    <th class="px-4 py-3 text-start font-semibold">{{ __('admin.channels.type') }}</th>
                    <th class="px-4 py-3 text-start font-semibold">{{ __('admin.channels.label_ar') }}</th>
                    <th class="px-4 py-3 text-start font-semibold">{{ __('admin.channels.label_en') }}</th>
                    <th class="px-4 py-3 text-start font-semibold">{{ __('admin.channels.value') }}</th>
                    <th class="px-4 py-3 text-start font-semibold">{{ __('admin.channels.status') }}</th>
                    <th class="px-4 py-3 text-start font-semibold">{{ __('admin.channels.floating') }}</th>
                    <th class="px-4 py-3 text-start font-semibold">{{ __('admin.channels.sort_order') }}</th>
                    <th class="px-4 py-3 text-start font-semibold"></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($channels as $channel)
                    <tr class="border-b border-black/5 last:border-0">
                        <td class="px-4 py-3">
                            <span class="inline-flex items-center gap-2 text-ink-soft">
                                <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand/10 text-brand">
                                    @include('partials.channel-icon', ['type' => $channel->type, 'class' => 'h-3.5 w-3.5'])
                                </span>
                                {{ __("admin.channels.types.{$channel->type}") }}
                            </span>
                        </td>
                        <td class="px-4 py-3 font-medium text-ink">{{ $channel->label_ar }}</td>
                        <td class="px-4 py-3 text-ink-soft">{{ $channel->label_en }}</td>
                        <td class="px-4 py-3 text-ink-soft" dir="ltr">{{ $channel->value }}</td>
                        <td class="px-4 py-3">
                            <span class="rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $channel->is_active ? 'bg-leaf/15 text-ink' : 'bg-peach/25 text-ink' }}">{{ $channel->is_active ? __('admin.channels.active') : __('admin.channels.inactive') }}</span>
                        </td>
                        <td class="px-4 py-3 text-ink-soft">{{ $channel->is_floating ? __('admin.users.yes') : __('admin.users.no') }}</td>
                        <td class="px-4 py-3 text-ink-soft">{{ $channel->sort_order }}</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center justify-end gap-3">
                                <a href="{{ lroute('admin.channels.edit', $channel) }}" class="text-sm font-medium text-brand transition hover:text-brand-deep">{{ __('admin.actions.edit') }}</a>
                                <form method="POST" action="{{ lroute('admin.channels.destroy', $channel) }}" onsubmit="return confirm('{{ __('admin.actions.confirm_delete') }}')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-sm font-medium text-red-600 transition hover:text-red-800">{{ __('admin.actions.delete') }}</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="px-4 py-8 text-center text-ink-soft">{{ __('admin.channels.empty') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection