@extends('admin.layouts.app')

@section('title', 'Email Templates')
@section('breadcrumb')
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><a href="#" class="hover:text-primary-600 transition-colors">Settings</a></li>
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><span class="text-gray-500">Email Templates</span></li>
@endsection
@section('heading', 'Email Templates')
@section('subheading', 'Manage transactional and marketing email templates.')

@section('content')

<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Template Name</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Subject Line</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Type</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Variables Available</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Last Edited</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Status</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ([
                    ['name' => 'Welcome Email', 'subject' => 'Welcome to PropEstate!', 'type' => 'Transactional', 'vars' => '{{name}}, {{email}}', 'edited' => '14 Feb 2025', 'status' => 1],
                    ['name' => 'Property Enquiry', 'subject' => 'New enquiry for {{property_title}}', 'type' => 'Transactional', 'vars' => '{{name}}, {{property_title}}, {{message}}', 'edited' => '12 Feb 2025', 'status' => 1],
                    ['name' => 'Visit Scheduled', 'subject' => 'Your property visit is confirmed', 'type' => 'Transactional', 'vars' => '{{name}}, {{date}}, {{time}}, {{address}}', 'edited' => '10 Feb 2025', 'status' => 1],
                    ['name' => 'Password Reset', 'subject' => 'Reset your password', 'type' => 'Transactional', 'vars' => '{{name}}, {{reset_link}}', 'edited' => '08 Feb 2025', 'status' => 1],
                    ['name' => 'New Listing Alert', 'subject' => 'New properties matching your criteria', 'type' => 'Notification', 'vars' => '{{name}}, {{properties}}', 'edited' => '05 Feb 2025', 'status' => 1],
                    ['name' => 'Weekly Digest', 'subject' => 'Your weekly property digest', 'type' => 'Marketing', 'vars' => '{{name}}, {{properties}}, {{trends}}', 'edited' => '01 Feb 2025', 'status' => 1],
                    ['name' => 'Agent Approval', 'subject' => 'Your agent account has been approved', 'type' => 'Transactional', 'vars' => '{{name}}, {{login_url}}', 'edited' => '28 Jan 2025', 'status' => 1],
                    ['name' => 'Payment Receipt', 'subject' => 'Payment receipt - {{invoice_id}}', 'type' => 'Transactional', 'vars' => '{{name}}, {{amount}}, {{invoice_id}}', 'edited' => '25 Jan 2025', 'status' => 1],
                ] as $tpl)
                <tr class="hover:bg-gray-50/50 transition-colors group">
                    <td class="px-5 py-3.5 font-medium text-gray-800">{{ $tpl['name'] }}</td>
                    <td class="px-5 py-3.5 text-gray-600 max-w-[200px]">{{ Str::limit($tpl['subject'], 35) }}</td>
                    <td class="px-5 py-3.5">
                        @php
                            $typeClass = match($tpl['type']) {
                                'Transactional' => 'bg-blue-50 text-blue-700',
                                'Notification' => 'bg-amber-50 text-amber-700',
                                'Marketing' => 'bg-purple-50 text-purple-700',
                                default => 'bg-gray-100 text-gray-600'
                            };
                        @endphp
                        <span class="inline-flex px-2 py-0.5 text-xs font-medium rounded-full {{ $typeClass }}">{{ $tpl['type'] }}</span>
                    </td>
                    <td class="px-5 py-3.5 text-gray-600 text-xs max-w-[180px]">{{ Str::limit($tpl['vars'], 40) }}</td>
                    <td class="px-5 py-3.5 text-gray-600">{{ $tpl['edited'] }}</td>
                    <td class="px-5 py-3.5">
                        <span class="inline-flex px-2 py-0.5 text-xs font-medium rounded-full {{ $tpl['status'] ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-600' }}">{{ $tpl['status'] ? 'Active' : 'Inactive' }}</span>
                    </td>
                    <td class="px-5 py-3.5">
                        <div class="flex items-center gap-2">
                            <a href="#" class="text-primary-500 hover:text-primary-600 text-sm font-medium">Edit</a>
                            <a href="#" class="text-gray-500 hover:text-gray-600 text-sm font-medium">Preview</a>
                            <a href="#" class="text-gray-500 hover:text-gray-600 text-sm font-medium">Test</a>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@endsection