@extends('layouts.app')

@section('content')
<div style="margin-top: 2rem;">
    <h1>Cheque Preview</h1>

    <div class="card" style="margin-top: 1rem; text-align: center; overflow: auto; background: #f3f4f6; padding: 3rem 1.5rem;">
        @if($cheque->bank->template_image_path)
            <div style="position: relative; display: inline-block; width: 800px; height: 320px; border-radius: 8px; overflow: hidden; background: white; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid #e5e7eb;">
                <img src="{{ asset('storage/' . $cheque->bank->template_image_path) }}" style="width: 100%; height: 100%; display: block; object-fit: fill;">
                
                @php
                    $coords = $cheque->bank->layout_coordinates ?? [];
                @endphp

                <!-- Date -->
                @if($cheque->cheque_date)
                <div style="position: absolute; left: {{ $coords['date']['x'] ?? 0 }}px; top: {{ $coords['date']['y'] ?? 0 }}px; white-space: nowrap; font-family: Arial, sans-serif; font-size: {{ $coords['date']['fontSize'] ?? 18 }}px;">
                    {{ $cheque->cheque_date->format('d-m-Y') }}
                </div>
                @endif

                <!-- Payee -->
                <div style="position: absolute; left: {{ $coords['payee']['x'] ?? 0 }}px; top: {{ $coords['payee']['y'] ?? 0 }}px; white-space: nowrap; font-family: Arial, sans-serif; font-size: {{ $coords['payee']['fontSize'] ?? 18 }}px;">
                    ***{{ $cheque->payee->name }}***
                </div>

                <!-- Amount Words -->
                @if($amountWords)
                <div style="position: absolute; left: {{ $coords['amount_words']['x'] ?? 0 }}px; top: {{ $coords['amount_words']['y'] ?? 0 }}px; white-space: normal; font-family: Arial, sans-serif; font-size: {{ $coords['amount_words']['fontSize'] ?? 18 }}px; width: 600px; line-height: {{ $coords['amount_words']['lineHeight'] ?? 2.2 }}; text-align: left;">
                    {!! $amountWords !!}
                </div>
                @endif

                <!-- Amount Figures -->
                @if($cheque->amount)
                <div style="position: absolute; left: {{ $coords['amount_figures']['x'] ?? 0 }}px; top: {{ $coords['amount_figures']['y'] ?? 0 }}px; white-space: nowrap; font-family: Arial, sans-serif; font-size: {{ $coords['amount_figures']['fontSize'] ?? 18 }}px;">
                    ***{{ number_format($cheque->amount, 2) }}***
                </div>
                @endif

                <!-- AC Payee -->
                @if($cheque->is_ac_payee)
                <div style="position: absolute; left: {{ $coords['ac_payee']['x'] ?? 50 }}px; top: {{ $coords['ac_payee']['y'] ?? 10 }}px; transform: rotate(-35deg); border-top: 2px solid black; border-bottom: 2px solid black; padding: 2px; font-family: Arial, sans-serif; font-weight: bold; font-size: {{ $coords['ac_payee']['fontSize'] ?? 16 }}px;">
                    A/C PAYEE ONLY
                </div>
                @endif
            </div>
        @else
            <div style="padding: 2rem; background: #e5e5e5;">
                <p>No template image configured for this bank.</p>
            </div>
        @endif

        <div style="margin-top: 2rem;">
            <a href="{{ route('cheques.print', $cheque->id) }}" class="btn" target="_blank" style="font-size: 1.25rem; padding: 0.75rem 1.5rem;">Download PDF / Print</a>
            <a href="{{ route('dashboard') }}" style="margin-left: 1rem; color: gray; text-decoration: none;">Back to Dashboard</a>
        </div>
    </div>
</div>
@endsection