@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 Disbursement
                    </h4>
                    <div class="text-white">
                        @if($disbursement->status == 'Pending')
                            <span class="badge bg-warning text-dark">
                                <i class="fas fa-clock"></i> Pending
                            </span>
                        @elseif($disbursement->status == 'Approved')
                            <span class="badge bg-success">
                                <i class="fas fa-check-circle"></i> Approved
                            </span>
                        @else
                            <span class="badge bg-secondary">{{ $disbursement->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" aria-label="Close"></button>
                        </div>
                    @endif

                    <form action="{{ route('disbursements.update', $disbursement->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> Date
                                    </label>
                                    <input type="text" class="form-control" value="{{ date('d-M-Y', strtotime($disbursement->date)) }}" readonly>
                                    <small class="text-muted">Disbursement date cannot be changed</small>
                                </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 form-select select2" required>
                                        <option value="">Select Supplier</option>
                                        @foreach($suppliers as $supplier)
                                            <option value="{{ $supplier->id }}" 
                                                {{ old('supplier_id', $disbursement->supplier_id) == $supplier->id ? 'selected' : '' }}>
                                                {{ $supplier->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-user text-primary"></i> Personnel <span class="text-danger">*</span>
                                    </label>
                                    <select name="personel_id" id="personel_id" class="form-control form-select select2" required>
                                        <option value="">Select Personnel</option>
                                        @foreach($personels as $personel)
                                            <option value="{{ $personel->id }}" 
                                                {{ old('personel_id', $disbursement->personel_id) == $personel->id ? 'selected' : '' }}>
                                                {{ $personel->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-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($disbursement->amount, 2)) }}" 
                                               required>
                                        <input type="hidden" name="amount" id="amount" value="{{ old('amount', $disbursement->amount) }}">
                                    </div>
                                    <small class="text-muted">Amount with automatic comma formatting</small>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-balance-scale text-primary"></i> Current Balance
                                    </label>
                                    <input type="text" class="form-control bg-light" 
                                           value="UGX {{ number_format($disbursement->balance, 2) }}" readonly>
                                    <small class="text-muted">Balance after this disbursement</small>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-hashtag text-primary"></i> Order Number
                                    </label>
                                    <input type="text" class="form-control bg-light" 
                                           value="{{ $disbursement->orderNo }}" readonly>
                                </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> Reason <span class="text-danger">*</span>
                                    </label>
                                    <textarea name="reason" class="form-control" rows="3" required>{{ old('reason', $disbursement->reason) }}</textarea>
                                    <small class="text-muted">Provide a detailed reason for this disbursement</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> Disbursement Information
                                        </h6>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <small class="text-muted">Created By:</small>
                                                <p class="mb-1">{{ $disbursement->user->name ?? 'N/A' }}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <small class="text-muted">Created At:</small>
                                                <p class="mb-1">{{ $disbursement->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">{{ $disbursement->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($disbursement->status == 'Pending')
                                    <button type="button" class="btn btn-danger" onclick="confirmDelete()">
                                        <i class="fas fa-trash-alt"></i> Delete
                                    </button>
                                @endif
                                <div>
                                    <a href="{{ route('disbursements.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 Disbursement
                                    </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
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 15%;">Date/Time</th>
                                    <th style="width: 15%;">User</th>
                                    <th style="width: 10%;">Action</th>
                                    <th style="width: 35%;">Changes</th>
                                    <th style="width: 25%;">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-1">
                                                        <strong>{{ ucfirst(str_replace('_', ' ', $field)) }}:</strong>
                                                        <br>
                                                        <span class="text-danger">
                                                            <i class="fas fa-minus"></i>
                                                            @if($field == 'amount')
                                                                {{ 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 == 'personel_id')
                                                                @php
                                                                    $oldPersonel = \App\Models\Personel::find($change['old']);
                                                                @endphp
                                                                {{ $oldPersonel ? $oldPersonel->name : 'Personnel ID: ' . $change['old'] }}
                                                            @else
                                                                {{ $change['old'] }}
                                                            @endif
                                                        </span>
                                                        <br>
                                                        <span class="text-success">
                                                            <i class="fas fa-plus"></i>
                                                            @if($field == 'amount')
                                                                {{ 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 == 'personel_id')
                                                                @php
                                                                    $newPersonel = \App\Models\Personel::find($change['new']);
                                                                @endphp
                                                                {{ $newPersonel ? $newPersonel->name : 'Personnel ID: ' . $change['new'] }}
                                                            @else
                                                                {{ $change['new'] }}
                                                            @endif
                                                        </span>
                                                    </div>
                                                @endforeach
                                            </small>
                                        @elseif($audit->action == 'created' && $audit->new_values)
                                            <small>
                                                <i class="fas fa-plus-circle text-success"></i>
                                                Initial amount: <strong>{{ 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>{{ 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>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Delete Confirmation Form -->
<form id="delete-form" action="{{ route('disbursements.destroy', $disbursement->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 custom styling */
    .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;
    }

    .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: #4e73df;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }
</style>
@endsection

@section('customjs')
<script>
    $(document).ready(function() {
        // Initialize Select2
        $('.select2').select2({
            theme: 'bootstrap-5',
            placeholder: function() {
                return $(this).find('option:first').text();
            },
            allowClear: false,
            width: '100%'
        });

        // 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) {
            // Get cursor position
            let cursorPosition = e.target.selectionStart;
            let value = e.target.value;
            
            // Count commas before cursor
            let commasBefore = (value.substring(0, cursorPosition).match(/,/g) || []).length;
            
            // Remove all non-numeric characters except decimal point
            let cleanValue = value.replace(/[^\d.]/g, '');
            
            // Ensure only one decimal point
            let parts = cleanValue.split('.');
            if (parts.length > 2) {
                cleanValue = parts[0] + '.' + parts.slice(1).join('');
            }
            
            // Limit to 2 decimal places
            if (parts[1] && parts[1].length > 2) {
                cleanValue = parts[0] + '.' + parts[1].substring(0, 2);
            }
            
            // Store clean value in hidden field
            hiddenInput.value = cleanValue;
            
            // Format with commas
            let formattedValue = formatNumberWithCommas(cleanValue);
            
            // Update display input
            e.target.value = formattedValue;
            
            // Adjust cursor position
            let commasAfter = (formattedValue.substring(0, cursorPosition).match(/,/g) || []).length;
            let newPosition = cursorPosition + (commasAfter - commasBefore);
            
            // Set cursor position
            e.target.setSelectionRange(newPosition, newPosition);
        });

        // Format on blur to ensure proper decimal places
        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] : '';
        
        // Add commas to integer part
        integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        
        return integerPart + decimalPart;
    }

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

    // Validate form before submission
    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;
        }
        
        // Show loading state
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
        submitBtn.disabled = true;
    });
</script>
@endsection