@extends('admin.layouts.app')

@section('title', 'Vouchers - ' . ucfirst(request('type', 'All')))

@section('content')
<style>
    .vouchers-container {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .header-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        border-radius: 8px;
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .header-section h2 {
        margin: 0;
        font-size: 28px;
    }
    
    .new-voucher-dropdown {
        position: relative;
        display: inline-block;
    }
    
    .btn-new {
        background: white;
        color: #667eea;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .btn-new:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    
    .filters-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .filter-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        align-items: flex-end;
    }
    
    .filter-item label {
        font-size: 12px;
        font-weight: 600;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
        display: block;
    }
    
    .filter-item input,
    .filter-item select {
        border: 1px solid #ddd;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13px;
        width: 100%;
    }
    
    .filter-item input:focus,
    .filter-item select:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .filter-buttons {
        display: flex;
        gap: 8px;
    }
    
    .btn-filter {
        padding: 8px 16px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    .btn-filter:hover {
        background: #764ba2;
    }
    
    .btn-clear {
        padding: 8px 16px;
        background: #e0e0e0;
        color: #333;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
    }
    
    .btn-clear:hover {
        background: #d0d0d0;
    }
    
    .vouchers-table {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .table {
        margin: 0;
        font-size: 13px;
    }
    
    .table thead {
        background: #f8f9fa;
        border-bottom: 2px solid #ddd;
    }
    
    .table thead th {
        font-weight: 600;
        color: #333;
        padding: 12px;
        text-align: left;
    }
    
    .table tbody tr {
        border-bottom: 1px solid #eee;
        transition: background 0.2s;
    }
    
    .table tbody tr:hover {
        background: #f9f9f9;
    }
    
    .table tbody td {
        padding: 12px;
        vertical-align: middle;
    }
    
    .voucher-no {
        font-weight: 600;
        color: #333;
    }
    
    .voucher-type-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
    }
    
    .badge-journal {
        background: #dde5f4;
        color: #1e40af;
    }
    
    .badge-receipt {
        background: #dcfce7;
        color: #15803d;
    }
    
    .badge-payment {
        background: #fee2e2;
        color: #b91c1c;
    }
    
    .badge-contra {
        background: #cffafe;
        color: #0369a1;
    }
    
    .status-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 11px;
    }
    
    .status-draft {
        background: #fef08a;
        color: #92400e;
    }
    
    .status-posted {
        background: #bbf7d0;
        color: #166534;
    }
    
    .status-cancelled {
        background: #e5e7eb;
        color: #374151;
    }
    
    .action-buttons {
        display: flex;
        gap: 4px;
    }
    
    .btn-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid #ddd;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s;
        text-decoration: none;
    }
    
    .btn-view {
        color: #0369a1;
    }
    
    .btn-view:hover {
        background: #cffafe;
        border-color: #0369a1;
    }
    
    .btn-edit {
        color: #2563eb;
    }
    
    .btn-edit:hover {
        background: #dbeafe;
        border-color: #2563eb;
    }
    
    .btn-approve {
        color: #16a34a;
    }
    
    .btn-approve:hover {
        background: #dcfce7;
        border-color: #16a34a;
    }
    
    .btn-delete {
        color: #dc2626;
    }
    
    .btn-delete:hover {
        background: #fee2e2;
        border-color: #dc2626;
    }
    
    .empty-state {
        text-align: center;
        padding: 40px;
        color: #999;
    }
    
    .empty-state-icon {
        font-size: 48px;
        margin-bottom: 15px;
    }
    
    .pagination {
        justify-content: center;
        margin-top: 20px;
        gap: 5px;
    }
    
    .pagination a, .pagination span {
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-decoration: none;
        color: #667eea;
    }
    
    .pagination .active span {
        background: #667eea;
        color: white;
        border-color: #667eea;
    }
</style>

<div class="vouchers-container" style="padding: 20px;">
    <!-- Header -->
    <div class="header-section">
        <div>
            <h2>
                @if(request('type') == 'journal') 📝 Journal Vouchers
                @elseif(request('type') == 'receipt') 💰 Receipt Vouchers
                @elseif(request('type') == 'payment') 💸 Payment Vouchers
                @elseif(request('type') == 'contra') 🔄 Contra Vouchers
                @else 📊 All Vouchers
                @endif
            </h2>
        </div>
        <div>
            @if(request('type') == 'journal')
                <a href="{{ route('admin.accounting.vouchers.create', ['type' => 'journal']) }}" class="btn-new">
                    ➕ Add Journal Voucher
                </a>
            @elseif(request('type') == 'receipt')
                <a href="{{ route('admin.accounting.vouchers.create', ['type' => 'receipt']) }}" class="btn-new">
                    ➕ Add Receipt Voucher
                </a>
            @elseif(request('type') == 'payment')
                <a href="{{ route('admin.accounting.vouchers.create', ['type' => 'payment']) }}" class="btn-new">
                    ➕ Add Payment Voucher
                </a>
            @elseif(request('type') == 'contra')
                <a href="{{ route('admin.accounting.vouchers.create', ['type' => 'contra']) }}" class="btn-new">
                    ➕ Add Contra Voucher
                </a>
            @else
                <div class="new-voucher-dropdown">
                    <button class="btn-new" onclick="toggleNewVoucherMenu()">
                        ➕ New Voucher
                    </button>
                    <div id="newVoucherMenu" style="display: none; position: absolute; top: 45px; right: 0; background: white; border: 1px solid #ddd; border-radius: 6px; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10;">
                        <a href="{{ route('admin.accounting.vouchers.create', ['type' => 'journal']) }}" style="display: block; padding: 12px 16px; color: #333; text-decoration: none; border-bottom: 1px solid #eee;">
                            📝 Journal Voucher
                        </a>
                        <a href="{{ route('admin.accounting.vouchers.create', ['type' => 'receipt']) }}" style="display: block; padding: 12px 16px; color: #333; text-decoration: none; border-bottom: 1px solid #eee;">
                            💰 Receipt Voucher
                        </a>
                        <a href="{{ route('admin.accounting.vouchers.create', ['type' => 'payment']) }}" style="display: block; padding: 12px 16px; color: #333; text-decoration: none; border-bottom: 1px solid #eee;">
                            💸 Payment Voucher
                        </a>
                        <a href="{{ route('admin.accounting.vouchers.create', ['type' => 'contra']) }}" style="display: block; padding: 12px 16px; color: #333; text-decoration: none;">
                            🔄 Contra Voucher
                        </a>
                    </div>
                </div>
            @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

    <!-- Filters -->
    <div class="filters-card">
        <form method="GET" class="filter-group">
            @if(!request('type') || !in_array(request('type'), ['journal', 'receipt', 'payment', 'contra']))
            <div class="filter-item">
                <label>Voucher Type</label>
                <select name="type" onchange="this.form.submit()">
                    <option value="">All Types</option>
                    <option value="journal" {{ request('type') == 'journal' ? 'selected' : '' }}>Journal</option>
                    <option value="receipt" {{ request('type') == 'receipt' ? 'selected' : '' }}>Receipt</option>
                    <option value="payment" {{ request('type') == 'payment' ? 'selected' : '' }}>Payment</option>
                    <option value="contra" {{ request('type') == 'contra' ? 'selected' : '' }}>Contra</option>
                </select>
            </div>
            @else
            <input type="hidden" name="type" value="{{ request('type') }}">
            @endif
            <div class="filter-item">
                <label>Status</label>
                <select name="status" onchange="this.form.submit()">
                    <option value="">All Status</option>
                    <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                    <option value="posted" {{ request('status') == 'posted' ? 'selected' : '' }}>Posted</option>
                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>
            <div class="filter-item">
                <label>From Date</label>
                <input type="date" name="from_date" value="{{ request('from_date') }}">
            </div>
            <div class="filter-item">
                <label>To Date</label>
                <input type="date" name="to_date" value="{{ request('to_date') }}">
            </div>
            <div class="filter-item">
                <div class="filter-buttons">
                    <button type="submit" class="btn-filter">🔍 Filter</button>
                    <a href="{{ route('admin.accounting.vouchers.index', ['type' => request('type')]) }}" class="btn-clear">✕ Clear</a>
                </div>
            </div>
        </form>
    </div>

    <!-- Vouchers Table -->
    <div class="vouchers-table">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th style="width: 12%;">Voucher No</th>
                    <th style="width: 10%;">Date</th>
                    <th style="width: 10%;">Type</th>
                    <th style="width: 30%;">Narration</th>
                    <th style="width: 12%;">Amount</th>
                    <th style="width: 10%;">Status</th>
                    <th style="width: 12%;">Created By</th>
                    <th style="width: 14%;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($vouchers as $voucher)
                    <tr>
                        <td class="voucher-no">{{ $voucher->voucher_no }}</td>
                        <td>{{ date('d M Y', strtotime($voucher->voucher_date)) }}</td>
                        <td>
                            @if($voucher->voucher_type == 'journal')
                                <span class="voucher-type-badge badge-journal">Journal</span>
                            @elseif($voucher->voucher_type == 'receipt')
                                <span class="voucher-type-badge badge-receipt">Receipt</span>
                            @elseif($voucher->voucher_type == 'payment')
                                <span class="voucher-type-badge badge-payment">Payment</span>
                            @else
                                <span class="voucher-type-badge badge-contra">Contra</span>
                            @endif
                        </td>
                        <td>{{ Str::limit($voucher->narration, 50, '...') }}</td>
                        <td><strong>Rs. {{ number_format($voucher->total_amount ?? 0, 2) }}</strong></td>
                        <td>
                            @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
                        </td>
                        <td>{{ $voucher->creator->name ?? 'System' }}</td>
                        <td>
                            <div class="action-buttons">
                                <a href="{{ route('admin.accounting.vouchers.show', $voucher) }}" class="btn-action btn-view" title="View">👁</a>
                                
                                @if($voucher->status == 'draft')
                                    <a href="{{ route('admin.accounting.vouchers.edit', $voucher) }}" class="btn-action btn-edit" title="Edit">✎</a>
                                    <form action="{{ route('admin.accounting.vouchers.approve', $voucher) }}" method="POST" style="display: inline;">
                                        @csrf
                                        <button type="submit" class="btn-action btn-approve" title="Approve & Post" onclick="return confirm('Approve and post this voucher?')">✓</button>
                                    </form>
                                @endif
                                
                                @if($voucher->status != 'cancelled')
                                    <form action="{{ route('admin.accounting.vouchers.destroy', $voucher) }}" method="POST" style="display: inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-action btn-delete" title="Delete" onclick="return confirm('Are you sure?')">🗑</button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8">
                            <div class="empty-state">
                                <div class="empty-state-icon">📄</div>
                                <p style="margin: 10px 0;">No vouchers found</p>
                                <a href="{{ route('admin.accounting.vouchers.create', ['type' => 'journal']) }}" style="color: #667eea; text-decoration: none; font-weight: 600;">Create your first voucher →</a>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="pagination">
        {{ $vouchers->links('pagination::bootstrap-4') }}
    </div>
</div>

<script>
function toggleNewVoucherMenu() {
    const menu = document.getElementById('newVoucherMenu');
    menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
}

// Close menu when clicking outside
document.addEventListener('click', function(event) {
    const menu = document.getElementById('newVoucherMenu');
    const btn = event.target.closest('.btn-new');
    if (!btn && menu) {
        menu.style.display = 'none';
    }
});
</script>

@endsection