@extends('layouts.admin')

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

@section('page-title', 'Design & Finalize Invoice')

@section('content')
<div class="flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-8 bg-gray-50">
    <div class="w-full max-w-full flex flex-col gap-6 h-full min-w-0">
        <!-- Header & Progress -->
        <div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 tracking-tight">Design & Finalize Invoice</h1>
                <p class="text-gray-500 mt-1">
                    Invoice #{{ $data['invoice_number'] ?? 'INV-2024-001' }} • 
                    <span class="text-emerald-600 font-medium bg-emerald-50 px-2 py-0.5 rounded text-xs">Draft</span>
                </p>
            </div>
            <!-- ProgressBar Component -->
            <div class="flex items-center gap-2 min-w-[300px]">
                <div class="flex flex-col flex-1 gap-2">
                    <div class="flex justify-between text-xs font-medium">
                        <span class="text-emerald-600 flex items-center gap-1">
                            <span class="material-symbols-outlined text-[14px]">check_circle</span> Details
                        </span>
                        <span class="text-primary flex items-center gap-1">Design & Share</span>
                    </div>
                    <div class="h-2 w-full bg-gray-200 rounded-full overflow-hidden flex">
                        <div class="h-full bg-emerald-500 w-1/2"></div>
                        <div class="h-full bg-primary w-1/2 animate-pulse"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Invoice preview only -->
        <div class="w-full min-w-0">
                <div class="min-w-0 w-full bg-gray-200/50 rounded-xl border border-gray-200 p-4 md:p-8 overflow-x-auto overflow-y-auto flex justify-center items-start shadow-inner">
                <!-- Invoice paper scales with container (wider on laptop/desktop) -->
                <div class="bg-white w-full max-w-7xl min-h-[1000px] shadow-lg rounded-sm p-8 md:p-12 flex flex-col justify-between text-gray-800 transition-all duration-300 origin-top transform scale-[0.85] md:scale-100 lg:scale-90 xl:scale-95 2xl:scale-100">
                    @if(isset($templateView) && view()->exists($templateView))
                        @include($templateView, [
                            'invoice' => $invoice ?? null,
                            'invoiceData' => $data ?? [],
                            'customer' => $customer ?? null,
                            'companySettings' => $companySettings ?? null,
                            'currency' => $selectedCurrency ?? null,
                            'signature' => $signature ?? null,
                            'items' => $items ?? [],
                            'calculatedTotals' => [
                                'subtotal' => $subtotal ?? 0,
                                'tax_amount' => $taxAmount ?? 0,
                                'discount' => $discount ?? 0,
                                'total' => $total ?? 0,
                                'paid_amount' => $paidAmount ?? 0,
                                'balance_due' => $balanceDue ?? 0,
                            ],
                            'showWatermark' => false,
                        ])
                    @else
                    <!-- Invoice Header -->
                    <div class="flex justify-between items-start mb-12">
                        <div class="flex flex-col gap-4">
                            <!-- Logo Placeholder -->
                            @if($companySettings->company_logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_logo))
                                <img src="{{ \Illuminate\Support\Facades\Storage::url($companySettings->company_logo) }}" alt="Company Logo" class="h-12 w-auto">
                            @else
                                <div class="h-12 w-12 bg-primary rounded-lg flex items-center justify-center text-white font-bold text-xl">
                                    {{ strtoupper(substr($companySettings->company_name ?? 'FA', 0, 2)) }}
                                </div>
                            @endif
                            <div class="text-sm text-gray-500">
                                <p class="font-bold text-gray-800">{{ $companySettings->company_name ?? config('app.name', 'ProInvoice') }}</p>
                                @if($companySettings->company_address)
                                    <p>{{ $companySettings->company_address }}</p>
                                @endif
                                @if($companySettings->company_city || $companySettings->company_state || $companySettings->company_zip)
                                    <p>{{ trim(($companySettings->company_city ?? '') . ', ' . ($companySettings->company_state ?? '') . ' ' . ($companySettings->company_zip ?? ''), ', ') }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="text-right">
                            <h2 class="text-4xl font-light text-gray-900 tracking-tight mb-2">INVOICE</h2>
                            <p class="text-gray-500 font-medium text-lg">#{{ $data['invoice_number'] ?? 'INV-2024-001' }}</p>
                            <div class="mt-4 text-sm">
                                <div class="flex justify-end gap-4 mb-1">
                                    <span class="text-gray-400">Issue Date:</span>
                                    <span class="font-medium text-gray-700">{{ \Carbon\Carbon::parse($data['issue_date'] ?? now())->format('M d, Y') }}</span>
                                </div>
                                <div class="flex justify-end gap-4">
                                    <span class="text-gray-400">Due Date:</span>
                                    <span class="font-medium text-gray-700">{{ \Carbon\Carbon::parse($data['due_date'] ?? now()->addDays(30))->format('M d, Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Bill To Section -->
                    @if($customer)
                    <div class="mb-12">
                        <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Bill To</p>
                        <h3 class="text-xl font-bold text-gray-900">{{ $customer->name }}</h3>
                        @if($customer->email)
                            <p class="text-gray-600">{{ $customer->email }}</p>
                        @endif
                        @if($customer->phone)
                            <p class="text-gray-600">{{ $customer->phone }}</p>
                        @endif
                        @if($customer->address)
                            <p class="text-gray-600">{{ $customer->address }}</p>
                        @endif
                    </div>
                    @endif
                    <!-- Items Table -->
                    <div class="flex-1 mb-8">
                        <table class="w-full text-left border-collapse">
                            <thead>
                                <tr class="border-b-2 border-gray-100">
                                    <th class="py-3 text-xs font-bold text-gray-400 uppercase tracking-wider w-1/2">Description</th>
                                    <th class="py-3 text-xs font-bold text-gray-400 uppercase tracking-wider text-right">Qty</th>
                                    <th class="py-3 text-xs font-bold text-gray-400 uppercase tracking-wider text-right">Price</th>
                                    <th class="py-3 text-xs font-bold text-gray-400 uppercase tracking-wider text-right">Total</th>
                                </tr>
                            </thead>
                            <tbody class="text-sm">
                                @forelse($items as $item)
                                <tr class="border-b border-gray-50">
                                    <td class="py-4 pr-4">
                                        <p class="font-semibold text-gray-800">{{ $item['description'] }}</p>
                                        @if(!empty($item['notes']))
                                            <p class="text-gray-500 text-xs mt-1">{{ $item['notes'] }}</p>
                                        @endif
                                    </td>
                                    <td class="py-4 text-right text-gray-600">{{ number_format($item['quantity'], 2) }}</td>
                                    <td class="py-4 text-right text-gray-600">{{ $selectedCurrency->symbol ?? '$' }}{{ number_format($item['unit_price'], 2) }}</td>
                                    <td class="py-4 text-right font-medium text-gray-800">{{ $selectedCurrency->symbol ?? '$' }}{{ number_format($item['total'], 2) }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="py-8 text-center text-gray-500">No items added</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <!-- Totals -->
                    <div class="flex justify-end mb-16">
                        <div class="w-1/2 md:w-1/3 flex flex-col gap-3">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Subtotal</span>
                                <span class="font-medium text-gray-800">{{ $selectedCurrency->symbol ?? '$' }}{{ number_format($subtotal, 2) }}</span>
                            </div>
                            @if($taxAmount > 0)
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Tax</span>
                                <span class="font-medium text-gray-800">{{ $selectedCurrency->symbol ?? '$' }}{{ number_format($taxAmount, 2) }}</span>
                            </div>
                            @endif
                            @if($discount > 0)
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Discount</span>
                                <span class="font-medium text-gray-800">-{{ $selectedCurrency->symbol ?? '$' }}{{ number_format($discount, 2) }}</span>
                            </div>
                            @endif
                            <div class="h-px bg-gray-200 my-1"></div>
                            <div class="flex justify-between text-base">
                                <span class="font-bold text-gray-900">Total Due</span>
                                <span class="font-bold text-primary text-xl">{{ $selectedCurrency->symbol ?? '$' }}{{ number_format($balanceDue, 2) }}</span>
                            </div>
                        </div>
                    </div>
                    <!-- Footer / Signature - Left Aligned -->
                    <div class="flex flex-col items-start justify-center mt-auto mb-8">
                        <div class="w-full max-w-md">
                            @if(empty($data['signature_id']))
                            <div class="mb-3" id="signature-select-wrapper">
                                <select id="signature-select" name="signature_id" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                                    <option value="">No Signature</option>
                                    @if(isset($signatures))
                                        @foreach($signatures as $sig)
                                            <option value="{{ $sig->id }}">{{ $sig->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            @endif
                            <div id="signature-preview-container" class="mb-2 min-h-[36px]">
                                @if(!empty($data['signature_id']))
                                    @php
                                        $signature = isset($signatures) ? $signatures->where('id', $data['signature_id'])->first() : null;
                                    @endphp
                                    @if($signature && $signature->content && \Illuminate\Support\Facades\Storage::disk('public')->exists($signature->content))
                                        <img src="{{ \Illuminate\Support\Facades\Storage::url($signature->content) }}" alt="Signature" class="max-h-10 mb-2" style="width: 248px !important; max-width: 248px; height: auto; font-weight: 500;">
                                    @endif
                                @endif
                            </div>
                            <div class="h-px w-48 bg-gray-300 mb-2"></div>
                            <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">AUTHORIZED SIGNATURE</p>
                        </div>
                    </div>
                    <!-- Brand Strip at Bottom -->
                    <div class="mt-8 pt-4 border-t border-gray-100 flex justify-center">
                        <p class="text-gray-400 text-xs">Powered by {{ config('app.name', 'ProInvoice') }}</p>
                    </div>
                    @endif
                </div>
                </div>
        </div>
    </div>
</div>
<!-- Sticky Footer Actions -->
<div class="bg-white border-t border-gray-200 p-4 z-20 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
    <div class="w-full max-w-full px-4 md:px-8 flex justify-between items-center min-w-0">
        @if(isset($isExisting) && $isExisting)
            <a href="{{ route('admin.invoices.index') }}" class="px-6 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors flex items-center gap-2">
                <span class="material-symbols-outlined text-[18px]">arrow_back</span>
                Back to Invoices
            </a>
        @else
            <a href="{{ route('admin.invoices.create') }}" class="px-6 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors flex items-center gap-2">
                <span class="material-symbols-outlined text-[18px]">arrow_back</span>
                Back to Details
            </a>
        @endif
        <div class="flex gap-4">
            @if(!isset($isExisting) || !$isExisting)
            <form method="POST" action="{{ route('admin.invoices.store') }}" id="invoice-form">
                @csrf
                @foreach($data as $key => $value)
                    @continue(in_array($key, ['_token', '_method'], true))
                    @if(is_array($value))
                        @foreach($value as $subKey => $subValue)
                            @if(is_array($subValue))
                                @foreach($subValue as $itemKey => $itemValue)
                                    <input type="hidden" name="{{ $key }}[{{ $subKey }}][{{ $itemKey }}]" value="{{ $itemValue }}">
                                @endforeach
                            @else
                                <input type="hidden" name="{{ $key }}[{{ $subKey }}]" value="{{ $subValue }}">
                            @endif
                        @endforeach
                    @else
                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                    @endif
                @endforeach
                <input type="hidden" name="status" value="draft">
                <button type="button" onclick="document.getElementById('invoice-form').submit()" class="px-6 py-2.5 rounded-lg border border-gray-300 text-gray-700 text-sm font-bold hover:bg-gray-50 transition-colors">
                    Save as Draft
                </button>
            </form>
            <form method="POST" action="{{ route('admin.invoices.store') }}" id="invoice-form-final">
                @csrf
                @foreach($data as $key => $value)
                    @continue(in_array($key, ['_token', '_method'], true))
                    @if(is_array($value))
                        @foreach($value as $subKey => $subValue)
                            @if(is_array($subValue))
                                @foreach($subValue as $itemKey => $itemValue)
                                    <input type="hidden" name="{{ $key }}[{{ $subKey }}][{{ $itemKey }}]" value="{{ $itemValue }}">
                                @endforeach
                            @else
                                <input type="hidden" name="{{ $key }}[{{ $subKey }}]" value="{{ $subValue }}">
                            @endif
                        @endforeach
                    @else
                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                    @endif
                @endforeach
                <button type="submit" class="px-8 py-2.5 rounded-lg bg-primary text-white text-sm font-bold shadow-lg shadow-primary/30 hover:bg-blue-600 transition-all transform active:scale-95 flex items-center gap-2">
                    <span class="material-symbols-outlined text-[20px]">check</span>
                    Save & Finish
                </button>
            </form>
            @endif
        </div>
    </div>
</div>

<script>
// Signature Dropdown Handler
@if(isset($signatures))
const signatureData = {
    @foreach($signatures as $signature)
        {{ $signature->id }}: {
            name: '{{ addslashes($signature->name) }}',
            url: '{{ $signature->content && \Illuminate\Support\Facades\Storage::disk('public')->exists($signature->content) ? \Illuminate\Support\Facades\Storage::url($signature->content) : '' }}'
        },
    @endforeach
};

const signatureSelect = document.getElementById('signature-select');
const signaturePreview = document.getElementById('signature-preview-container');
const signatureSelectWrapper = document.getElementById('signature-select-wrapper');

if (signatureSelect && signaturePreview) {
    // Hide dropdown on page load if signature is already present
    if (signaturePreview.querySelector('img')) {
        if (signatureSelectWrapper) {
            signatureSelectWrapper.style.display = 'none';
        }
    }
    
    signatureSelect.addEventListener('change', function() {
        const signatureId = this.value;
        if (signatureId && signatureData[signatureId] && signatureData[signatureId].url) {
            signaturePreview.innerHTML = `<img src="${signatureData[signatureId].url}" alt="Signature" class="max-h-10 mb-2" style="width: 248px !important; max-width: 248px; height: auto; font-weight: 500;">`;
            // Hide the signature select dropdown after selection
            if (signatureSelectWrapper) {
                signatureSelectWrapper.style.display = 'none';
            }
        } else {
            signaturePreview.innerHTML = '';
            // Show the signature select dropdown if "No Signature" is selected
            if (signatureSelectWrapper) {
                signatureSelectWrapper.style.display = 'block';
            }
        }
    });
}
@endif

</script>
@endsection