@extends('layouts.admin')

@section('title', 'Expense ' . $expense->expense_number)

@section('page-title', 'Expense Details')

@section('breadcrumbs')
    <a href="{{ route('admin.expenses.index') }}" class="hover:text-primary">Expenses</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">{{ $expense->expense_number }}</span>
@endsection

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <!-- Header Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">{{ $expense->expense_number }}</h2>
                <p class="text-sm text-gray-500 mt-1">Created on {{ $expense->created_at->format('M d, Y') }}</p>
            </div>
            <div class="flex flex-wrap items-center gap-3" id="expense-status">
                @php
                    $currentStatus = $expense->status ?? 'draft';
                @endphp
                <form method="POST" action="{{ route('admin.expenses.update-status', $expense) }}" class="flex flex-wrap items-center gap-2">
                    @csrf
                    @method('PATCH')
                    <label for="expense-status-select" class="sr-only">Expense status</label>
                    <select id="expense-status-select" name="status" class="h-9 pl-3 pr-8 rounded-lg border border-gray-300 bg-white text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                        <option value="draft" {{ $currentStatus === 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="approved" {{ $currentStatus === 'approved' ? 'selected' : '' }}>Approved</option>
                        <option value="paid" {{ $currentStatus === 'paid' ? 'selected' : '' }}>Paid</option>
                        <option value="rejected" {{ $currentStatus === 'rejected' ? 'selected' : '' }}>Rejected</option>
                    </select>
                    <button type="submit" class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                        Update status
                    </button>
                </form>
                <a href="{{ route('admin.expenses.edit', $expense->id) }}" class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors flex items-center gap-2">
                    <span class="material-symbols-outlined text-base">edit</span>
                    Edit
                </a>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Account -->
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Account</p>
                    <p class="text-sm font-medium text-gray-900">
                        {{ $expense->account ? $expense->account->code . ' - ' . $expense->account->name : '-' }}
                    </p>
                </div>

                <!-- Category -->
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Category</p>
                    <p class="text-sm font-medium text-gray-900">{{ $expense->category ?? '-' }}</p>
                </div>

                <!-- Vendor -->
                @if($expense->vendor)
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Vendor</p>
                    <div class="flex items-center gap-2">
                        @if($expense->vendor->image && \Illuminate\Support\Facades\Storage::disk('public')->exists($expense->vendor->image))
                            <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($expense->vendor->image) }}" alt="{{ $expense->vendor->name }}" class="w-8 h-8 rounded-full object-cover">
                        @else
                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-bold text-xs">
                                {{ strtoupper(substr($expense->vendor->name ?? 'N', 0, 1)) }}
                            </div>
                        @endif
                        <p class="text-sm font-medium text-gray-900">{{ $expense->vendor->name }}</p>
                    </div>
                </div>
                @endif

                <!-- Expense Date -->
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Expense Date</p>
                    <p class="text-sm font-medium text-gray-900">
                        {{ $expense->expense_date ? $expense->expense_date->format('M d, Y') : '-' }}
                    </p>
                </div>

                <!-- Payment Method -->
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Payment Method</p>
                    <p class="text-sm font-medium text-gray-900">
                        {{ ucfirst(str_replace('_', ' ', $expense->payment_method ?? '-')) }}
                    </p>
                </div>

                <!-- Amount -->
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Amount</p>
                    <p class="text-2xl font-bold text-primary">
                        {{ \App\Models\Currency::formatAmount($expense->amount ?? 0, $expense->currency) }}
                    </p>
                    @if($expense->tax_amount > 0)
                        <p class="text-sm text-gray-500 mt-1">
                            Tax: {{ \App\Models\Currency::formatAmount($expense->tax_amount, $expense->currency) }}
                        </p>
                    @endif
                    <p class="text-sm font-medium text-gray-700 mt-1">
                        Total: {{ \App\Models\Currency::formatAmount($expense->total, $expense->currency) }}
                    </p>
                </div>

                <!-- Description -->
                @if($expense->description)
                <div class="md:col-span-2">
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Description</p>
                    <p class="text-sm text-gray-700 whitespace-pre-line">{{ $expense->description }}</p>
                </div>
                @endif

                <!-- Receipt -->
                @if($expense->receipt_path)
                <div class="md:col-span-2">
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Receipt</p>
                    <div class="mt-2">
                        <a href="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($expense->receipt_path) }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                            <span class="material-symbols-outlined text-base">receipt</span>
                            <span>View Receipt</span>
                        </a>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Actions Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Actions</h3>
                <p class="text-sm text-gray-500 mt-1">Manage this expense</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('admin.expenses.edit', $expense->id) }}" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors flex items-center gap-2">
                    <span class="material-symbols-outlined text-base">edit</span>
                    Edit Expense
                </a>
                <button onclick="openDeleteModal({{ $expense->id }}, '{{ $expense->expense_number }}')" class="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition-colors flex items-center gap-2">
                    <span class="material-symbols-outlined text-base">delete</span>
                    Delete Expense
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-expense-modal" data-admin-modal class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4" onclick="event.stopPropagation()">
        <div class="p-6">
            <div class="flex items-center gap-4 mb-4">
                <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                    <span class="material-symbols-outlined text-red-600 text-2xl">warning</span>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Delete Expense</h3>
                    <p class="text-sm text-gray-500">This action cannot be undone</p>
                </div>
            </div>
            <p class="text-sm text-gray-700 mb-6">
                Are you sure you want to delete expense <span id="delete-expense-number" class="font-semibold"></span>? This will permanently remove the expense and all associated data.
            </p>
            <form id="delete-expense-form" method="POST" class="flex items-center justify-end gap-3">
                @csrf
                @method('DELETE')
                <button type="button" onclick="closeDeleteModal()" class="px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
                    Delete Expense
                </button>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
function openDeleteModal(id, expenseNumber) {
    document.getElementById('delete-expense-number').textContent = expenseNumber;
    document.getElementById('delete-expense-form').action = '{{ route("admin.expenses.index") }}/' + id;
    document.getElementById('delete-expense-modal').classList.remove('hidden');
    document.getElementById('delete-expense-modal').classList.add('flex');
}

function closeDeleteModal() {
    document.getElementById('delete-expense-modal').classList.add('hidden');
    document.getElementById('delete-expense-modal').classList.remove('flex');
}

// Close modal when clicking outside
document.getElementById('delete-expense-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteModal();
    }
});
</script>
@endpush
@endsection