@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-8">
                        <h5 class="card-title mb-0">Edit Audit Log</h5>
                    </div>
                    <div class="col-4 text-end">
                        <a href="{{ route('audit-logs.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Logs
                        </a>
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Warning:</strong> Editing audit logs should be done with extreme caution. 
                    Audit logs are meant to be an accurate historical record. Only edit to correct errors.
                </div>

                <form action="{{ route('audit-logs.update', $auditLog) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="table_name" class="form-label">Table Name <span class="text-danger">*</span></label>
                            <input type="text" 
                                   class="form-control @error('table_name') is-invalid @enderror" 
                                   id="table_name" 
                                   name="table_name" 
                                   value="{{ old('table_name', $auditLog->table_name) }}"
                                   placeholder="e.g., products, users, orders"
                                   required>
                            @error('table_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="record_id" class="form-label">Record ID <span class="text-danger">*</span></label>
                            <input type="number" 
                                   class="form-control @error('record_id') is-invalid @enderror" 
                                   id="record_id" 
                                   name="record_id" 
                                   value="{{ old('record_id', $auditLog->record_id) }}"
                                   placeholder="e.g., 1, 2, 3"
                                   min="1"
                                   required>
                            @error('record_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="action" class="form-label">Action <span class="text-danger">*</span></label>
                            <select class="form-control @error('action') is-invalid @enderror" 
                                    id="action" 
                                    name="action"
                                    required>
                                <option value="">Select Action</option>
                                <option value="created" {{ old('action', $auditLog->action) == 'created' ? 'selected' : '' }}>Created</option>
                                <option value="updated" {{ old('action', $auditLog->action) == 'updated' ? 'selected' : '' }}>Updated</option>
                                <option value="deleted" {{ old('action', $auditLog->action) == 'deleted' ? 'selected' : '' }}>Deleted</option>
                                <option value="restored" {{ old('action', $auditLog->action) == 'restored' ? 'selected' : '' }}>Restored</option>
                                <option value="imported" {{ old('action', $auditLog->action) == 'imported' ? 'selected' : '' }}>Imported</option>
                                <option value="exported" {{ old('action', $auditLog->action) == 'exported' ? 'selected' : '' }}>Exported</option>
                                <option value="approved" {{ old('action', $auditLog->action) == 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="rejected" {{ old('action', $auditLog->action) == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                <option value="other" {{ old('action', $auditLog->action) == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('action')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="user_id" class="form-label">Performed By</label>
                            <select class="form-control @error('user_id') is-invalid @enderror" 
                                    id="user_id" 
                                    name="user_id">
                                <option value="">Select User (optional)</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('user_id', $auditLog->user_id) == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror>
                        </div>

                        <div class="col-12 mb-3">
                            <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="3"
                                      placeholder="Describe what happened"
                                      required>{{ old('description', $auditLog->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label for="changes" class="form-label">Changes (JSON Format)</label>
                            <textarea class="form-control @error('changes') is-invalid @enderror" 
                                      id="changes" 
                                      name="changes" 
                                      rows="5"
                                      placeholder='{
    "field_name": {
        "old": "old value",
        "new": "new value"
    }
}'>{{ old('changes', $auditLog->changes) }}</textarea>
                            @error('changes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3">
                            <div class="form-check">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="is_system" 
                                       name="is_system" 
                                       value="1"
                                       {{ old('is_system', $auditLog->is_system) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_system">
                                    Mark as System Action
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Update Audit Log
                        </button>
                        <button type="reset" class="btn btn-outline-secondary">
                            <i class="fas fa-undo me-2"></i>Reset Changes
                        </button>
                    </div>
                </form>

                <div class="mt-4">
                    <div class="card">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">Log Information</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <p class="mb-1"><strong>Log ID:</strong></p>
                                    <p>#{{ $auditLog->id }}</p>
                                </div>
                                <div class="col-md-4">
                                    <p class="mb-1"><strong>Created:</strong></p>
                                    <p>{{ $auditLog->created_at->format('M d, Y H:i:s A') }}</p>
                                </div>
                                <div class="col-md-4">
                                    <p class="mb-1"><strong>Last Updated:</strong></p>
                                    <p>{{ $auditLog->updated_at->format('M d, Y H:i:s A') }}</p>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Original User:</strong></p>
                                    <p>{{ $auditLog->user ? $auditLog->user->name : 'System' }}</p>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Action:</strong></p>
                                    <p>
                                        @php
                                            $actionColors = [
                                                'created' => 'success',
                                                'updated' => 'warning',
                                                'deleted' => 'danger'
                                            ];
                                        @endphp
                                        <span class="badge bg-{{ $actionColors[$auditLog->action] ?? 'info' }}">
                                            {{ ucfirst($auditLog->action) }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @section('scripts')
    <script>
        // JSON validation helper
        document.getElementById('changes').addEventListener('blur', function() {
            const jsonText = this.value.trim();
            if (jsonText) {
                try {
                    JSON.parse(jsonText);
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                } catch (e) {
                    this.classList.remove('is-valid');
                    this.classList.add('is-invalid');
                    
                    // Show error message
                    let errorDiv = this.nextElementSibling;
                    if (!errorDiv.classList.contains('invalid-feedback')) {
                        errorDiv = document.createElement('div');
                        errorDiv.className = 'invalid-feedback';
                        this.parentNode.insertBefore(errorDiv, this.nextSibling);
                    }
                    errorDiv.textContent = 'Invalid JSON format: ' + e.message;
                }
            } else {
                this.classList.remove('is-invalid', 'is-valid');
            }
        });
    </script>
    @endsection
@endsection