@extends('layouts.app')

@section('title', 'Preview Letter')

@section('breadcrumbs')
<div class="breadcrumb">
    <a href="{{ route('dashboard') }}">Home</a>
    <span class="separator">/</span>
    <a href="{{ route('letters.generate.select') }}">Generate Letter</a>
    <span class="separator">/</span>
    <span class="current">Preview</span>
</div>
@endsection

@section('content')
<div class="mb-6">
    <h1 class="font-display text-2xl font-semibold text-gray-900">Preview Letter</h1>
    <p class="text-sm text-gray-500 mt-1">
        {{ $template->category_label }} for <strong>{{ $employee->first_name }} {{ $employee->last_name }}</strong> ({{ $employee->employee_code }})
    </p>
</div>

@if(!empty($customVarKeys))
{{-- Custom Variables Input --}}
<div class="card mb-6">
    <div class="card-header">
        <h3 class="card-header-title">Custom Variables</h3>
    </div>
    <div class="card-body">
        <p class="text-sm text-gray-500 mb-4">This template contains custom variables that need to be filled in manually.</p>
        <form action="{{ route('letters.generate.preview') }}" method="POST">
            @csrf
            <input type="hidden" name="employee_id" value="{{ $employee->id }}">
            <input type="hidden" name="template_id" value="{{ $template->id }}">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                @foreach($customVarKeys as $key)
                <div>
                    <label class="form-label">{{ ucwords(str_replace(['custom.', '_'], ['', ' '], $key)) }}</label>
                    <input type="text" name="custom_{{ str_replace('.', '_', $key) }}" class="form-input"
                           value="{{ $customVars[$key] ?? '' }}" placeholder="Enter value for {{ $key }}">
                </div>
                @endforeach
            </div>
            <button type="submit" class="btn-secondary">Update Preview</button>
        </form>
    </div>
</div>
@endif

@if(!empty($unresolvedVars))
<div class="bg-warning-50 border border-warning-100 rounded-lg p-4 mb-4">
    <p class="text-sm text-warning-700">
        <strong>Note:</strong> Some variables remain unresolved: {{ implode(', ', $unresolvedVars) }}
    </p>
</div>
@endif

{{-- Letter Preview --}}
<div class="card mb-6">
    <div class="card-header">
        <h3 class="card-header-title">Letter Preview</h3>
    </div>
    <div class="card-body">
        <div class="prose prose-sm max-w-none text-gray-700 border border-gray-200 rounded-lg p-8 bg-white">
            {!! $renderedContent !!}
        </div>
    </div>
</div>

{{-- Actions --}}
<div class="flex items-center gap-3">
    <form action="{{ route('letters.generate.store') }}" method="POST">
        @csrf
        <input type="hidden" name="employee_id" value="{{ $employee->id }}">
        <input type="hidden" name="template_id" value="{{ $template->id }}">
        <input type="hidden" name="rendered_content" value="{{ $renderedContent }}">
        <button type="submit" class="btn-primary"
                onclick="return confirm('Generate PDF and save this letter?')">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Generate PDF
        </button>
    </form>
    <a href="{{ route('letters.generate.select') }}" class="btn-secondary">Back to Selection</a>
</div>
@endsection