@extends('layouts.app')
@section('title', 'طباعة السند')
@section('content')
<div class="content mt-4">
    <!-- Action Buttons (Hidden on Print) -->
    <div class="no-print text-center mb-4">
        <button class="btn btn-primary px-4 shadow-sm" onclick="window.print()">
            <i class="fas fa-print mr-2"></i> طباعة السند
        </button>
        <a href="{{ route('receipts.index') }}" class="btn btn-light px-4 border shadow-sm ml-2">
            <i class="fas fa-arrow-right mr-2"></i> العودة للسجل
        </a>
    </div>
    <!-- Voucher Design -->
    <div class="voucher-wrapper">
        <!-- Header -->
        <div class="voucher-header d-flex justify-content-between align-items-center">
            <div>
                <h2 class="font-weight-bold mb-1">Turista <span style="font-weight: 300;">App</span></h2>
                <p class="text-muted mb-0 small">بوابة الإدارة المالية</p>
            </div>
            <div class="text-center">
                @if($type === 'deposit')
                    <h3 class="voucher-title text-deposit mb-0">سند إيداع نقدي</h3>
                    <span class="badge badge-success px-3 py-1 mt-1">Receipt Voucher</span>
                @else
                    <h3 class="voucher-title text-withdraw mb-0">سند صرف نقدي</h3>
                    <span class="badge badge-danger px-3 py-1 mt-1">Payment Voucher</span>
                @endif
            </div>
            <div class="text-left" dir="ltr">
                <p class="mb-1"><strong>No:</strong> <span style="font-size: 18px; color:#dc3545;">#{{ str_pad(request()->route('id'), 5, '0', STR_PAD_LEFT) }}</span></p>
                <p class="mb-0 small text-muted"><strong>Date:</strong> {{ date('Y-m-d', strtotime($date)) }}</p>
            </div>
        </div>
        <!-- Body -->
        <div class="row align-items-center mb-4">
            <div class="col-md-8">
                <table class="info-table">
                    <tr>
                        <td class="info-label">{{ $type === 'deposit' ? 'استلمنا من السيد/ة' : 'يُصرف إلى السيد/ة' }} :</td>
                        <td class="info-value">{{ $user->full_name ?? 'غير متوفر' }}</td>
                    </tr>
                    <tr>
                        <td class="info-label">المحفظة المستهدفة :</td>
                        <td class="info-value">محفظة رقم #{{ $wallet->id }} ({{ $wallet->name ?? 'غير متوفر' }})</td>
                    </tr>
                    <tr>
                        <td class="info-label">وذلك عبارة عن :</td>
                        <td class="info-value">{{ $note ?? 'لا توجد ملاحظات إضافية' }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-4 text-center">
                <div class="amount-box">
                    <span class="d-block text-muted small font-weight-bold mb-1">المبلغ (Amount)</span>
                    <h3 class="{{ $type === 'deposit' ? 'text-deposit' : 'text-withdraw' }}">
                        {{ number_format($amount, 2) }} 
                        <small style="font-size: 14px; color:#555;">{{ $wallet->currency && $wallet->currency !== 'DEFAULT' ? $wallet->currency : 'د.ل' }}</small>
                    </h3>
                </div>
            </div>
        </div>
        <!-- Signatures Footer -->
        <div class="signatures-box row text-center justify-content-around">
            <div class="col-5">
                <p class="font-weight-bold mb-5">توقيع المستلم<br><small class="text-muted">Receiver Signature</small></p>
                <div class="signature-line w-75"></div>
            </div>
            <div class="col-5">
                <p class="font-weight-bold mb-5">توقيع الموظف<br><small class="text-muted">Employee Signature</small></p>
                <div class="signature-line w-75"></div>
                <p class="small text-muted mt-2">{{ auth()->user()->full_name ?? 'النظام' }}</p>
            </div>
        </div>
        <div class="text-center mt-4">
            <p class="small text-muted mb-0" dir="ltr">Printed on: {{ now()->format('Y-m-d H:i:s') }} | System Gen.</p>
        </div>
    </div>
</div>
@endsection