@extends('backend.layouts.app')

@section('title', 'Assign Email Templates')

@section('content')
    @php
        $pageTitle = 'Assign Email Templates';
        $indexRoute = 'email-template.index';
        $indexLabel = 'Email Templates';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-5">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Automatic Email Events</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Choose which template each system event uses. Leave empty to use the event's built-in default template.
                </p>
            </div>

            <div class="overflow-hidden border-t border-gray-100 dark:border-gray-800">
                <div class="max-w-full overflow-x-auto">
                    <table class="w-full min-w-[900px]">
                        <thead>
                            <tr class="border-b border-gray-100 dark:border-gray-800">
                                <th class="px-5 py-3 text-center">
                                    <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Event</span>
                                </th>
                                <th class="px-5 py-3 text-center">
                                    <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Template</span>
                                </th>
                                <th class="px-5 py-3 text-center">
                                    <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Action</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            @foreach ($events as $event)
                                @php
                                    $assignedTemplate = $event['assignment']?->template;
                                    $assignedTemplateId = $event['assignment']?->template_id;
                                @endphp
                                <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                                    <td class="px-5 py-4">
                                        <p class="text-sm font-medium text-gray-800 dark:text-white/90">{{ $event['name'] }}</p>
                                        <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                                            <code class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800">{{ $event['key'] }}</code>
                                            <span>{{ $event['category'] }}</span>
                                        </div>
                                        @if ($event['description'])
                                            <p class="mt-1 max-w-xl text-xs text-gray-500 dark:text-gray-400">{{ $event['description'] }}</p>
                                        @endif
                                    </td>
                                    <td class="px-5 py-4">
                                        <form action="{{ route('email-event.update') }}" method="POST" class="flex flex-wrap items-center gap-2">
                                            @csrf
                                            <input type="hidden" name="event_key" value="{{ $event['key'] }}">
                                            <select name="template_id"
                                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-10 min-w-[260px] rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                                <option value="">Use built-in default</option>
                                                @foreach ($templates as $template)
                                                    <option value="{{ $template->id }}" @selected((string) $assignedTemplateId === (string) $template->id)>
                                                        {{ $template->template_name }} ({{ $template->template_key }})
                                                    </option>
                                                @endforeach
                                            </select>
                                            <button type="submit"
                                                class="inline-flex items-center justify-center rounded-lg bg-brand-50 p-2 text-brand-500 hover:bg-brand-100 dark:bg-brand-500/10 dark:text-brand-400 dark:hover:bg-brand-500/20"
                                                title="Save" aria-label="Save email event template">
                                                <svg class="h-[18px] w-[18px] fill-current" viewBox="0 0 20 20" aria-hidden="true">
                                                    <path d="M3 2.5h11.25L17.5 5.75V17a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1Zm2 1.5v4h8V4H5Zm0 8v4h10v-4H5Zm1.5 1.5h7v1h-7v-1Z" />
                                                </svg>
                                            </button>
                                            @can('email-template.update')
                                                @if ($assignedTemplate)
                                                    <a href="{{ route('email-template.edit', $assignedTemplate) }}"
                                                        class="inline-flex items-center justify-center rounded-lg bg-warning-50 p-2 text-warning-500 hover:bg-warning-100 dark:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/20"
                                                        title="Edit">
                                                        <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 2.5L15.5 4.5L5 15H3V13L13.5 2.5ZM14.5 1.5L12.5 3.5L14.5 5.5L16.5 3.5L14.5 1.5Z" /></svg>
                                                    </a>
                                                    <a href="{{ route('email-template.preview', $assignedTemplate) }}" target="_blank"
                                                        class="inline-flex items-center justify-center rounded-lg bg-brand-50 p-2 text-brand-500 hover:bg-brand-100 dark:bg-brand-500/10 dark:text-brand-400 dark:hover:bg-brand-500/20"
                                                        title="Preview">
                                                        <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                                            <path d="M9 4.5c3.1 0 5.7 2.2 6.7 4.5-1 2.3-3.6 4.5-6.7 4.5S3.3 11.3 2.3 9C3.3 6.7 5.9 4.5 9 4.5Zm0 1.5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z" />
                                                        </svg>
                                                    </a>
                                                @endif
                                            @endcan
                                        </form>
                                    </td>
                                    <td class="px-5 py-4 text-center">
                                        @if ($assignedTemplate)
                                            <span class="inline-flex items-center rounded-md bg-success-50 px-2 py-1 text-xs font-medium text-success-600 dark:bg-success-500/10 dark:text-success-400">Assigned</span>
                                        @else
                                            <span class="inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">Default</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection