@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <!-- Main Edit Form Card -->
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0 text-white">
                        <i class="fas fa-edit"></i> Edit General Expense
                    </h4>
                    <div>
                        @if($general_expense->status == 'Pending')
                            <span class="badge bg-warning text-dark">
                                <i class="fas fa-clock"></i> Pending
                            </span>
                        @elseif($general_expense->status == 'Approved')
                            <span class="badge bg-success">
                                <i class="fas fa-check-circle"></i> Approved
                            </span>
                        @else
                            <span class="badge bg-secondary">{{ $general_expense->status }}</span>
                        @endif
                    </div>
                </div>
                
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <h5 class="alert-heading">
                                <i class="fas fa-exclamation-triangle"></i> Please fix the following errors:
                            </h5>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('general_expenses.update', $general_expense->id) }}" method="POST" id="editForm">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <!-- Left Column -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-calendar-alt text-primary"></i> Expense Date <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" 
                                           name="expense_date" 
                                           class="form-control" 
                                           value="{{ old('expense_date', $general_expense->expense_date->format('Y-m-d')) }}" 
                                           required>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-hashtag text-primary"></i> Reference
                                    </label>
                                    <input type="text" 
                                           name="reference" 
                                           class="form-control" 
                                           value="{{ old('reference', $general_expense->reference) }}">
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-truck text-primary"></i> Supplier <span class="text-danger">*</span>
                                    </label>
                                    <select name="supplier_id" id="supplier_id" class="form-control select2" required>
                                        <option value="">Select Supplier</option>
                                        @foreach($suppliers as $supplier)
                                            <option value="{{ $supplier->id }}" 
                                                {{ old('supplier_id', $general_expense->supplier_id) == $supplier->id ? 'selected' : '' }}>
                                                {{ $supplier->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Right Column -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-tags text-primary"></i> Expense Item <span class="text-danger">*</span>
                                    </label>
                                    <select name="expense_item_id" id="expense_item_id" class="form-control select2" required>
                                        <option value="">Select Expense Item</option>
                                        @foreach($items as $item)
                                            <option value="{{ $item->id }}" 
                                                {{ old('expense_item_id', $general_expense->expense_item_id) == $item->id ? 'selected' : '' }}>
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-credit-card text-primary"></i> Payment Method <span class="text-danger">*</span>
                                    </label>
                                    <select name="payment_method_id" id="payment_method_id" class="form-control select2" required>
                                        <option value="">Select Payment Method</option>
                                        @foreach($methods as $method)
                                            <option value="{{ $method->id }}" 
                                                {{ old('payment_method_id', $general_expense->payment_method_id) == $method->id ? 'selected' : '' }}>
                                                {{ $method->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-money-bill-wave text-primary"></i> Amount <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">UGX</span>
                                        <input type="text" 
                                               name="amount_display" 
                                               id="amount_display" 
                                               class="form-control" 
                                               value="{{ old('amount', number_format($general_expense->amount, 2)) }}" 
                                               required>
                                        <input type="hidden" name="amount" id="amount" value="{{ old('amount', $general_expense->amount) }}">
                                    </div>
                                    <small class="text-muted">Amount with automatic comma formatting</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-comment-alt text-primary"></i> Narration
                                    </label>
                                    <textarea name="narration" class="form-control" rows="3">{{ old('narration', $general_expense->narration) }}</textarea>
                                    <small class="text-muted">Provide additional details about this expense</small>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-sticky-note text-primary"></i> Update Remarks (Optional)
                                    </label>
                                    <textarea name="remarks" class="form-control" rows="2" 
                                              placeholder="Add any notes about this update...">{{ old('remarks') }}</textarea>
                                    <small class="text-muted">This will be saved in the audit trail</small>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Info -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card bg-light mb-3">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="fas fa-info-circle text-info"></i> Expense Information
                                        </h6>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <small class="text-muted">Created By:</small>
                                                <p class="mb-1">{{ $general_expense->user->name ?? 'N/A' }}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <small class="text-muted">Created At:</small>
                                                <p class="mb-1">{{ $general_expense->created_at->format('d-M-Y H:i:s') }}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <small class="text-muted">Last Updated:</small>
                                                <p class="mb-1">{{ $general_expense->updated_at->format('d-M-Y H:i:s') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="form-group">
                            <div class="d-flex justify-content-between align-items-center">
                                @if($general_expense->status == 'Pending')
                                    <button type="button" class="btn btn-danger" onclick="confirmDelete()">
                                        <i class="fas fa-trash-alt"></i> Delete
                                    </button>
                                @endif

                                <div class="">
                                    <a href="{{ route('general_expenses.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-times"></i> Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Update Expense
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Audit Trail Card -->
            @if(isset($audits) && $audits->count() > 0)
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-history"></i> Audit Trail
                        <span class="badge bg-white text-info">{{ $audits->count() }}</span>
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-hover table-striped mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width: 15%;">Date/Time</th>
                                    <th style="width: 15%;">User</th>
                                    <th style="width: 10%;">Action</th>
                                    <th style="width: 40%;">Changes</th>
                                    <th style="width: 20%;">Remarks</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($audits as $audit)
                                <tr>
                                    <td>
                                        <small>
                                            <i class="fas fa-clock text-muted"></i>
                                            {{ $audit->created_at->format('d-M-Y') }}<br>
                                            {{ $audit->created_at->format('H:i:s') }}
                                        </small>
                                    </td>
                                    <td>
                                        <i class="fas fa-user text-muted"></i>
                                        {{ $audit->user->name ?? 'System' }}
                                    </td>
                                    <td>
                                        @php
                                            $badgeClass = 'secondary';
                                            $icon = 'circle';
                                            switch($audit->action) {
                                                case 'created':
                                                    $badgeClass = 'success';
                                                    $icon = 'plus-circle';
                                                    break;
                                                case 'updated':
                                                    $badgeClass = 'info';
                                                    $icon = 'edit';
                                                    break;
                                                case 'deleted':
                                                    $badgeClass = 'danger';
                                                    $icon = 'trash-alt';
                                                    break;
                                                case 'approved':
                                                    $badgeClass = 'primary';
                                                    $icon = 'check-circle';
                                                    break;
                                            }
                                        @endphp
                                        <span class="badge bg-{{ $badgeClass }}">
                                            <i class="fas fa-{{ $icon }}"></i>
                                            {{ ucfirst($audit->action) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($audit->action == 'updated' && $audit->old_values && $audit->new_values)
                                            <small>
                                                @php
                                                    $changes = [];
                                                    foreach($audit->new_values as $key => $newValue) {
                                                        $oldValue = $audit->old_values[$key] ?? null;
                                                        if($oldValue != $newValue) {
                                                            $changes[$key] = ['old' => $oldValue, 'new' => $newValue];
                                                        }
                                                    }
                                                @endphp
                                                
                                                @foreach($changes as $field => $change)
                                                    <div class="mb-2">
                                                        <strong class="d-block">{{ ucfirst(str_replace('_', ' ', $field)) }}:</strong>
                                                        <div class="ms-2">
                                                            <span class="text-danger d-block">
                                                                <i class="fas fa-minus-circle"></i>
                                                                @if(in_array($field, ['amount', 'paid_amount', 'balance']))
                                                                    UGX {{ number_format($change['old'], 2) }}
                                                                @elseif($field == 'supplier_id')
                                                                    @php $oldSupplier = \App\Models\Supplier::find($change['old']); @endphp
                                                                    {{ $oldSupplier ? $oldSupplier->name : 'Supplier ID: ' . $change['old'] }}
                                                                @elseif($field == 'expense_item_id')
                                                                    @php $oldItem = \App\Models\ExpenseItem::find($change['old']); @endphp
                                                                    {{ $oldItem ? $oldItem->name : 'Item ID: ' . $change['old'] }}
                                                                @elseif($field == 'payment_method_id')
                                                                    @php $oldMethod = \App\Models\PaymentMethod::find($change['old']); @endphp
                                                                    {{ $oldMethod ? $oldMethod->name : 'Method ID: ' . $change['old'] }}
                                                                @else
                                                                    {{ $change['old'] }}
                                                                @endif
                                                            </span>
                                                            <span class="text-success d-block">
                                                                <i class="fas fa-plus-circle"></i>
                                                                @if(in_array($field, ['amount', 'paid_amount', 'balance']))
                                                                    UGX {{ number_format($change['new'], 2) }}
                                                                @elseif($field == 'supplier_id')
                                                                    @php $newSupplier = \App\Models\Supplier::find($change['new']); @endphp
                                                                    {{ $newSupplier ? $newSupplier->name : 'Supplier ID: ' . $change['new'] }}
                                                                @elseif($field == 'expense_item_id')
                                                                    @php $newItem = \App\Models\ExpenseItem::find($change['new']); @endphp
                                                                    {{ $newItem ? $newItem->name : 'Item ID: ' . $change['new'] }}
                                                                @elseif($field == 'payment_method_id')
                                                                    @php $newMethod = \App\Models\PaymentMethod::find($change['new']); @endphp
                                                                    {{ $newMethod ? $newMethod->name : 'Method ID: ' . $change['new'] }}
                                                                @else
                                                                    {{ $change['new'] }}
                                                                @endif
                                                            </span>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </small>
                                        @elseif($audit->action == 'created' && $audit->new_values)
                                            <small>
                                                <i class="fas fa-plus-circle text-success"></i>
                                                Initial amount: <strong>UGX {{ number_format($audit->new_values['amount'] ?? 0, 2) }}</strong>
                                            </small>
                                        @elseif($audit->action == 'deleted' && $audit->old_values)
                                            <small>
                                                <i class="fas fa-trash-alt text-danger"></i>
                                                Deleted amount: <strong>UGX {{ number_format($audit->old_values['amount'] ?? 0, 2) }}</strong>
                                            </small>
                                        @else
                                            <small class="text-muted">No changes recorded</small>
                                        @endif
                                    </td>
                                    <td>
                                        <small>{{ $audit->remarks ?? '-' }}</small>
                                        @if($audit->ip_address)
                                            <br>
                                            <small class="text-muted">
                                                <i class="fas fa-globe"></i> {{ $audit->ip_address }}
                                            </small>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Delete Confirmation Form -->
<form id="delete-form" action="{{ route('general_expenses.destroy', $general_expense->id) }}" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>
@endsection

@section('customcss')
<style>
    .card {
        border-radius: 8px;
        border: none;
    }
    
    .card-header {
        border-radius: 8px 8px 0 0 !important;
    }
    
    .form-label {
        margin-bottom: 0.5rem;
    }
    
    .form-control:focus,
    .form-select:focus {
        border-color: #4e73df;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }
    
    .table-responsive {
        max-height: 500px;
        overflow-y: auto;
    }
    
    .table-hover tbody tr:hover {
        background-color: #f8f9fc;
    }
    
    .badge {
        padding: 0.5em 0.75em;
        font-size: 0.875rem;
    }

    .select2-container--default .select2-selection--single {
        height: 38px;
        padding: 0.375rem 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 24px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }

    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #f8f9fa;
    }
</style>
@endsection

@section('customjs')
<script>
    $(document).ready(function() {

        // Initialize real-time amount formatting
        initializeAmountFormatting();
    });

    function initializeAmountFormatting() {
        const displayInput = document.getElementById('amount_display');
        const hiddenInput = document.getElementById('amount');
        
        // Real-time formatting on input
        displayInput.addEventListener('input', function(e) {
            let cursorPosition = e.target.selectionStart;
            let value = e.target.value;
            
            let commasBefore = (value.substring(0, cursorPosition).match(/,/g) || []).length;
            
            let cleanValue = value.replace(/[^\d.]/g, '');
            
            let parts = cleanValue.split('.');
            if (parts.length > 2) {
                cleanValue = parts[0] + '.' + parts.slice(1).join('');
            }
            
            if (parts[1] && parts[1].length > 2) {
                cleanValue = parts[0] + '.' + parts[1].substring(0, 2);
            }
            
            hiddenInput.value = cleanValue;
            
            let formattedValue = formatNumberWithCommas(cleanValue);
            
            e.target.value = formattedValue;
            
            let commasAfter = (formattedValue.substring(0, cursorPosition).match(/,/g) || []).length;
            let newPosition = cursorPosition + (commasAfter - commasBefore);
            
            e.target.setSelectionRange(newPosition, newPosition);
        });

        displayInput.addEventListener('blur', function(e) {
            let cleanValue = hiddenInput.value;
            
            if (cleanValue && !isNaN(cleanValue)) {
                let numValue = parseFloat(cleanValue);
                let formattedValue = numValue.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                e.target.value = formattedValue;
                hiddenInput.value = numValue.toFixed(2);
            }
        });
    }

    function formatNumberWithCommas(value) {
        if (!value) return '';
        
        let parts = value.split('.');
        let integerPart = parts[0];
        let decimalPart = parts[1] !== undefined ? '.' + parts[1] : '';
        
        integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        
        return integerPart + decimalPart;
    }

    function confirmDelete() {
        if (confirm('Are you sure you want to delete this expense?\n\nThis action cannot be undone and will:\n- Remove the expense record\n- Reverse supplier ledger entries\n- Create an audit trail entry')) {
            document.getElementById('delete-form').submit();
        }
    }

    document.getElementById('editForm').addEventListener('submit', function(e) {
        const hiddenAmount = document.getElementById('amount');
        let amount = hiddenAmount.value;
        
        if (!amount || isNaN(amount) || parseFloat(amount) <= 0) {
            e.preventDefault();
            alert('Please enter a valid amount greater than 0');
            document.getElementById('amount_display').focus();
            return false;
        }
        
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
        submitBtn.disabled = true;
    });
</script>
@endsection