@extends('layout.main')

@section('content')
    <div class="container mx-auto px-6">
        <!-- Page Header -->
        <div class="flex items-center justify-between my-6">
            <div class="flex items-center space-x-4">
                <a href="{{ route('expenses.index') }}" 
                    class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                </a>
                <div>
                    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
                        Expense Details
                    </h2>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                        Expense ID: #{{ str_pad($expense->id, 6, '0', STR_PAD_LEFT) }}
                    </p>
                </div>
            </div>
            <div class="flex items-center space-x-3">
                @if (Auth::user()->can('expenses-edit'))
                    <a href="{{ route('expenses.edit', $expense) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-100 border border-transparent rounded-lg hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-200">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                        </svg>
                        Edit Expense
                    </a>
                @endif
                <a href="{{ route('expenses.pdf', $expense) }}" target="_blank"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-200">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    Export PDF
                </a>
            </div>
        </div>

        <!-- Expense Status Banner -->
        <div class="mb-6 bg-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-50 dark:bg-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-900/20 border border-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-200 dark:border-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-700 rounded-lg p-4">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-600 dark:text-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    @if($expense->expense_type_id == 3)
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                    @else
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                    @endif
                </svg>
                <div>
                    <h3 class="text-sm font-medium text-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-800 dark:text-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-200">
                        {{ $expense->expense_type_id == 3 ? 'Loan Disbursement Expense' : 'Business Expense' }}
                    </h3>
                    <div class="mt-1 text-sm text-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-700 dark:text-{{ $expense->expense_type_id == 3 ? 'purple' : 'blue' }}-300">
                        {{ $expense->expense_type_id == 3 ? 'This expense is related to loan disbursement operations.' : 'Regular business operational expense.' }}
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Expense Information -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Expense Overview Card -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Expense Overview</h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                                    Expense Type
                                </label>
                                <div class="flex items-center">
                                    <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full 
                                        {{ $expense->expense_type_id == 3 ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' }}">
                                        {{ $expense->expense_type->name ?? 'Unknown Type' }}
                                    </span>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                                    Category
                                </label>
                                <div class="text-sm text-gray-900 dark:text-white">
                                    {{ $expense->expense_category->name ?? 'Uncategorized' }}
                                    @if($expense->expense_category && $expense->expense_category->parent)
                                        <span class="text-gray-500 dark:text-gray-400">
                                            ({{ $expense->expense_category->parent->name }})
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                                    Amount
                                </label>
                                <div class="text-2xl font-bold text-red-600 dark:text-red-400">
                                    {{ formatAmount($expense->amount) }}
                                </div>
                                @if($expense->rate && $expense->rate > 0)
                                    <div class="text-sm text-gray-500 dark:text-gray-400">
                                        Applied Rate: {{ $expense->rate }}%
                                    </div>
                                @endif
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                                    Expense Date
                                </label>
                                <div class="text-sm text-gray-900 dark:text-white">
                                    {{ \Carbon\Carbon::parse($expense->date)->format('l, F j, Y') }}
                                </div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ \Carbon\Carbon::parse($expense->date)->diffForHumans() }}
                                </div>
                            </div>
                        </div>

                        @if($expense->description)
                            <div class="mt-6">
                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                                    Description
                                </label>
                                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                                    <p class="text-sm text-gray-900 dark:text-white leading-relaxed">
                                        {{ $expense->description }}
                                    </p>
                                </div>
                            </div>
                        @endif

                        @if($expense->expense_type_id == 3)
                            <div class="mt-6">
                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                                    Related Loan
                                </label>
                                <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4">
                                    <a href="{{ route('loans.show', $expense->expense) }}" 
                                        class="inline-flex items-center text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-medium">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-2M7 7l10 10M17 7v4m0 0v4m0-4h-4"></path>
                                        </svg>
                                        View Loan Details ({{ $expense->expense }})
                                    </a>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Side Information -->
            <div class="space-y-6">
                <!-- Administrative Details -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Administrative Details</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
                                Branch
                            </label>
                            <div class="text-sm text-gray-900 dark:text-white">
                                {{ $expense->branch->name ?? 'Main Branch' }}
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
                                Created By
                            </label>
                            <div class="text-sm text-gray-900 dark:text-white">
                                {{ $expense->created_by->name ?? 'System' }}
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                {{ $expense->created_at->format('M j, Y \a\t g:i A') }}
                            </div>
                        </div>

                        @if($expense->updated_by && $expense->updated_at != $expense->created_at)
                            <div>
                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
                                    Last Updated By
                                </label>
                                <div class="text-sm text-gray-900 dark:text-white">
                                    {{ $expense->updated_by->name ?? 'System' }}
                                </div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ $expense->updated_at->format('M j, Y \a\t g:i A') }}
                                </div>
                            </div>
                        @endif

                        @if($expense->slug)
                            <div>
                                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
                                    Slug
                                </label>
                                <div class="text-sm text-gray-900 dark:text-white font-mono">
                                    {{ $expense->slug }}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Quick Actions</h3>
                    </div>
                    <div class="p-6 space-y-3">
                        @if (Auth::user()->can('expenses-edit'))
                            <a href="{{ route('expenses.edit', $expense) }}"
                                class="w-full inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-100 border border-transparent rounded-lg hover:bg-indigo-200 transition-colors duration-200">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                </svg>
                                Edit Expense
                            </a>
                        @endif
                        
                        <a href="{{ route('expenses.pdf', $expense) }}" target="_blank"
                            class="w-full inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-red-600 bg-red-100 border border-transparent rounded-lg hover:bg-red-200 transition-colors duration-200">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                            </svg>
                            Download PDF
                        </a>

                        <a href="{{ route('expenses.create') }}"
                            class="w-full inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-purple-600 bg-purple-100 border border-transparent rounded-lg hover:bg-purple-200 transition-colors duration-200">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>
                            Add New Expense
                        </a>

                        @if (Auth::user()->can('expenses-delete'))
                            <div class="pt-3 border-t border-gray-200 dark:border-gray-600">
                                <x-delete-button route="{{ route('expenses.destroy', $expense) }}" 
                                    class="w-full inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-red-600 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors duration-200" 
                                    text="Delete Expense" />
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection