@extends('layouts.app')

@section('title','Preview Email Template')
@section('page_title','Preview Email Template')

@section('content')

<div style="background:#fff;padding:24px;border-radius:8px;">

    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;">

        <div>
            <h3 style="font-size:20px;font-weight:bold;margin-bottom:8px;">
                {{ $emailTemplate->template_name }}
            </h3>

            <p>
                <b>Subject:</b> {{ $emailTemplate->subject }}
            </p>
        </div>

        <div>
            <a href="{{ route('email-templates.edit',$emailTemplate->id) }}"
               style="background:#f59e0b;color:#fff;padding:10px 15px;border-radius:6px;text-decoration:none;">
                Edit
            </a>

            <a href="{{ route('email-templates.index') }}"
               style="background:#6b7280;color:#fff;padding:10px 15px;border-radius:6px;text-decoration:none;margin-left:5px;">
                Back
            </a>
        </div>

    </div>

    <hr style="margin:20px 0;">

    <h4 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
        Available Variables
    </h4>

    <div style="margin-bottom:20px;">

        @forelse($emailTemplate->variables as $variable)

            <span style="
                display:inline-block;
                background:#eff6ff;
                color:#1d4ed8;
                padding:6px 10px;
                border-radius:20px;
                margin-right:6px;
                margin-bottom:6px;
                font-size:13px;
                font-weight:600;
            ">
                [{{ $variable->variable_key }}]
            </span>

        @empty

            <span style="color:#6b7280;">
                No variables defined
            </span>

        @endforelse

    </div>

    <table style="width:100%;border-collapse:collapse;background:#fff;margin-bottom:25px;">

        <thead>
            <tr style="background:#f3f4f6;">
                <th style="padding:10px;border:1px solid #ddd;text-align:left;">
                    Variable
                </th>

                <th style="padding:10px;border:1px solid #ddd;text-align:left;">
                    Label
                </th>

                <th style="padding:10px;border:1px solid #ddd;text-align:left;">
                    Type
                </th>

                <th style="padding:10px;border:1px solid #ddd;text-align:left;">
                    Required
                </th>
            </tr>
        </thead>

        <tbody>

            @forelse($emailTemplate->variables as $variable)

                <tr>

                    <td style="padding:10px;border:1px solid #ddd;">
                        [{{ $variable->variable_key }}]
                    </td>

                    <td style="padding:10px;border:1px solid #ddd;">
                        {{ $variable->label }}
                    </td>

                    <td style="padding:10px;border:1px solid #ddd;">
                        {{ ucfirst($variable->field_type) }}
                    </td>

                    <td style="padding:10px;border:1px solid #ddd;">

                        @if($variable->is_required)

                            <span style="
                                background:#dcfce7;
                                color:#166534;
                                padding:4px 8px;
                                border-radius:4px;
                                font-size:12px;
                            ">
                                Required
                            </span>

                        @else

                            <span style="
                                background:#f3f4f6;
                                color:#374151;
                                padding:4px 8px;
                                border-radius:4px;
                                font-size:12px;
                            ">
                                Optional
                            </span>

                        @endif

                    </td>

                </tr>

            @empty

                <tr>
                    <td colspan="4"
                        style="padding:15px;text-align:center;color:#6b7280;">
                        No variables available
                    </td>
                </tr>

            @endforelse

        </tbody>

    </table>

    <hr style="margin:20px 0;">

    <h4 style="font-size:18px;font-weight:bold;margin-bottom:10px;">
        Email Preview
    </h4>

    <div style="
        background:#fafafa;
        border:1px solid #e5e7eb;
        padding:20px;
        border-radius:8px;
        min-height:150px;
    ">

        {!! $emailTemplate->body !!}

    </div>

</div>

@endsection