@extends('admin.layouts.app')

@section('title', $voucher->voucher_no . ' - Voucher Summary')

@section('content')
<style>
    .summary-container {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 20px;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    @media (max-width: 1024px) {
        .summary-container {
            grid-template-columns: 1fr;
        }
    }
    
    .summary-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 25px;
        border-radius: 8px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .summary-header h2 {
        margin: 0;
        font-size: 28px;
    }
    
    .voucher-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .card-title {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
    }
    
    .detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .detail-item {
        padding: 10px 0;
    }
    
    .detail-label {
        font-size: 12px;
        font-weight: 600;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }
    
    .detail-value {
        font-size: 15px;
        color: #333;
        font-weight: 500;
    }
    
    .status-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    
    .status-draft {
        background: #ffeaa7;
        color: #d63031;
    }
    
    .status-posted {
        background: #55efc4;
        color: #00b894;
    }
    
    .status-cancelled {
        background: #dfe6e9;
        color: #636e72;
    }
    
    .narration-box {
        background: #f8f9fa;
        border-left: 4px solid #667eea;
        padding: 12px;
        border-radius: 4px;
        font-size: 13px;
        line-height: 1.5;
        margin: 15px 0;
    }
    
    .transactions-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    
    .transactions-table th {
        background: #f8f9fa;
        padding: 12px;
        text-align: left;
        font-weight: 600;
        color: #333;
        border-bottom: 2px solid #ddd;
    }
    
    .transactions-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #eee;
    }
    
    .transactions-table tr:hover {
        background: #f9f9f9;
    }
    
    .transactions-table .text-end {
        text-align: right;
    }
    
    .transactions-table tfoot tr {
        background: #f8f9fa;
        font-weight: 600;
    }
    
    .summary-card-right {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 8px;
        padding: 20px;
        position: sticky;
        top: 20px;
    }
    
    .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        font-size: 14px;
    }
    
    .summary-item:last-child {
        border-bottom: none;
    }
    
    .summary-label {
        color: #666;
        font-weight: 500;
    }
    
    .summary-value {
        font-weight: 600;
        font-size: 16px;
    }
    
    .summary-value.debit {
        color: #e74c3c;
    }
    
    .summary-value.credit {
        color: #27ae60;
    }
    
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 20px;
    }
    
    .btn-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        transition: all 0.3s;
        text-decoration: none;
    }
    
    .btn-edit {
        background: #667eea;
        color: white;
    }
    
    .btn-edit:hover {
        background: #764ba2;
    }
    
    .btn-approve {
        background: #27ae60;
        color: white;
    }
    
    .btn-approve:hover {
        background: #229954;
    }
    
    .btn-cancel {
        background: #f39c12;
        color: white;
    }
    
    .btn-cancel:hover {
        background: #e67e22;
    }
    
    .btn-delete {
        background: #e74c3c;
        color: white;
    }
    
    .btn-delete:hover {
        background: #c0392b;
    }
    
    .btn-print {
        background: #34495e;
        color: white;
    }
    
    .btn-print:hover {
        background: #2c3e50;
    }
    
    .btn-back {
        background: #95a5a6;
        color: white;
    }
    
    .btn-back:hover {
        background: #7f8c8d;
    }
    
    .ledger-name {
        font-weight: 600;
        color: #333;
    }
    
    .ledger-code {
        font-size: 12px;
        color: #999;
    }
    
    @media print {
        .summary-card-right,
        .action-buttons,
        .summary-header > div:last-child {
            display: none !important;
        }
        
        .summary-header {
            margin-bottom: 30px;
        }
    }
</style>

<div style="padding: 20px;">
    <div class="summary-header">
        <div>
            <h2>
                @if($voucher->voucher_type == 'journal') 📝 Journal Voucher
                @elseif($voucher->voucher_type == 'receipt') 💰 Receipt Voucher
                @elseif($voucher->voucher_type == 'payment') 💸 Payment Voucher
                @elseif($voucher->voucher_type == 'contra') 🔄 Contra Voucher
                @endif
            </h2>
            <div style="margin-top: 8px; font-size: 18px;">{{ $voucher->voucher_no }}</div>
        </div>
        <div style="text-align: right;">
            @if($voucher->status == 'posted')
                <span class="status-badge status-posted">✓ Posted</span>
            @elseif($voucher->status == 'draft')
                <span class="status-badge status-draft">Draft</span>
            @else
                <span class="status-badge status-cancelled">Cancelled</span>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div style="background: #d4edda; border-left: 4px solid #28a745; padding: 12px; border-radius: 4px; margin-bottom: 15px; color: #155724;">
            ✓ {{ session('success') }}
        </div>
    @endif

    <div class="summary-container">
        <!-- Left Column -->
        <div>
            <!-- Voucher Details -->
            <div class="voucher-card">
                <div class="card-title">📋 Voucher Details</div>
                
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">Voucher No</div>
                        <div class="detail-value">{{ $voucher->voucher_no }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Date</div>
                        <div class="detail-value">{{ date('d M Y', strtotime($voucher->voucher_date)) }}</div>
                    </div>
                    @if($voucher->reference_no)
                    <div class="detail-item">
                        <div class="detail-label">Reference No</div>
                        <div class="detail-value">{{ $voucher->reference_no }}</div>
                    </div>
                    @endif
                    <div class="detail-item">
                        <div class="detail-label">Type</div>
                        <div class="detail-value">{{ ucfirst($voucher->voucher_type) }}</div>
                    </div>
                </div>
                
                @if($voucher->narration)
                <div class="narration-box">
                    <strong>📝 Narration:</strong><br>
                    {{ $voucher->narration }}
                </div>
                @endif
                
                <div class="detail-grid" style="margin-top: 15px;">
                    <div class="detail-item">
                        <div class="detail-label">Created By</div>
                        <div class="detail-value">{{ $voucher->creator->name ?? 'System' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Created At</div>
                        <div class="detail-value">{{ $voucher->created_at->format('d M Y, h:i A') }}</div>
                    </div>
                </div>
                
                @if($voucher->status == 'posted' && $voucher->approver)
                <div class="detail-grid" style="margin-top: 15px;">
                    <div class="detail-item">
                        <div class="detail-label">Approved By</div>
                        <div class="detail-value">{{ $voucher->approver->name }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Approved At</div>
                        <div class="detail-value">{{ $voucher->approved_at->format('d M Y, h:i A') }}</div>
                    </div>
                </div>
                @endif
            </div>

            <!-- Transactions -->
            <div class="voucher-card">
                <div class="card-title">📝 Transaction Entries</div>
                
                <div style="overflow-x: auto;">
                    <table class="transactions-table">
                        <thead>
                            <tr>
                                <th style="width: 5%;">#</th>
                                <th style="width: 35%;">Account Ledger</th>
                                <th style="width: 15%;" class="text-end">Debit</th>
                                <th style="width: 15%;" class="text-end">Credit</th>
                                <th style="width: 30%;">Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $totalDebit = 0; $totalCredit = 0; @endphp
                            @foreach($voucher->transactions as $index => $transaction)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>
                                    <div class="ledger-name">{{ $transaction->ledger->name }}</div>
                                    <div class="ledger-code">{{ $transaction->ledger->code ?? 'N/A' }}</div>
                                </td>
                                <td class="text-end">
                                    @if($transaction->transaction_type == 'debit')
                                        <strong style="color: #e74c3c;">Rs. {{ number_format($transaction->amount, 2) }}</strong>
                                        @php $totalDebit += $transaction->amount; @endphp
                                    @else
                                        <span style="color: #bbb;">-</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    @if($transaction->transaction_type == 'credit')
                                        <strong style="color: #27ae60;">Rs. {{ number_format($transaction->amount, 2) }}</strong>
                                        @php $totalCredit += $transaction->amount; @endphp
                                    @else
                                        <span style="color: #bbb;">-</span>
                                    @endif
                                </td>
                                <td>{{ $transaction->narration ?? '-' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2" class="text-end"><strong>Total:</strong></td>
                                <td class="text-end"><strong style="color: #e74c3c;">Rs. {{ number_format($totalDebit, 2) }}</strong></td>
                                <td class="text-end"><strong style="color: #27ae60;">Rs. {{ number_format($totalCredit, 2) }}</strong></td>
                                <td>
                                    @if($totalDebit == $totalCredit && $totalDebit > 0)
                                        <span style="background: #d4edda; color: #155724; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;">✓ Balanced</span>
                                    @else
                                        <span style="background: #f8d7da; color: #721c24; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;">⚠ Not Balanced</span>
                                    @endif
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Right Column - Summary -->
        <div>
            <div class="summary-card-right">
                <div class="card-title" style="border-bottom: 2px solid rgba(0,0,0,0.15);">📊 Summary</div>
                
                <div class="summary-item">
                    <span class="summary-label">Total Debit:</span>
                    <span class="summary-value debit">Rs. {{ number_format($totalDebit, 2) }}</span>
                </div>
                
                <div class="summary-item">
                    <span class="summary-label">Total Credit:</span>
                    <span class="summary-value credit">Rs. {{ number_format($totalCredit, 2) }}</span>
                </div>
                
                <div class="summary-item">
                    <span class="summary-label">Difference:</span>
                    <span class="summary-value" style="color: {{ $totalDebit == $totalCredit ? '#27ae60' : '#f39c12' }}">
                        Rs. {{ number_format(abs($totalDebit - $totalCredit), 2) }}
                    </span>
                </div>
                
                <div class="action-buttons">
                    @if($voucher->status == 'draft')
                        <a href="{{ route('admin.accounting.vouchers.edit', $voucher) }}" class="btn-action btn-edit">
                            ✎ Edit Voucher
                        </a>
                        <form action="{{ route('admin.accounting.vouchers.approve', $voucher) }}" method="POST" style="width: 100%;">
                            @csrf
                            <button type="submit" class="btn-action btn-approve" style="width: 100%;" 
                                    onclick="return confirm('Approve and post this voucher?')">
                                ✓ Approve & Post
                            </button>
                        </form>
                        <form action="{{ route('admin.accounting.vouchers.destroy', $voucher) }}" method="POST" style="width: 100%;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn-action btn-delete" style="width: 100%;" 
                                    onclick="return confirm('Delete this voucher permanently?')">
                                🗑 Delete
                            </button>
                        </form>
                    @elseif($voucher->status == 'posted')
                        <button type="button" class="btn-action btn-print" onclick="window.print()">
                            🖨 Print
                        </button>
                        <form action="{{ route('admin.accounting.vouchers.cancel', $voucher) }}" method="POST" style="width: 100%;">
                            @csrf
                            <button type="submit" class="btn-action btn-cancel" style="width: 100%;" 
                                    onclick="return confirm('Cancel this voucher?')">
                                ✕ Cancel
                            </button>
                        </form>
                    @endif
                    
                    <a href="{{ route('admin.accounting.vouchers.index') }}" class="btn-action btn-back">
                        ← Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection