@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">Create Manual 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>Note:</strong> This is for creating manual audit logs for system actions, imports, 
                    or other activities that aren't automatically tracked. Use this feature carefully.
                </div>

                <form action="{{ route('audit-logs.store') }}" method="POST">
                    @csrf

                    <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') }}"
                                   placeholder="e.g., products, users, orders"
                                   required>
                            @error('table_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Enter the database table name</div>
                        </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') }}"
                                   placeholder="e.g., 1, 2, 3"
                                   min="1"
                                   required>
                            @error('record_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Enter the ID of the affected record</div>
                        </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') == 'created' ? 'selected' : '' }}>Created</option>
                                <option value="updated" {{ old('action') == 'updated' ? 'selected' : '' }}>Updated</option>
                                <option value="deleted" {{ old('action') == 'deleted' ? 'selected' : '' }}>Deleted</option>
                                <option value="restored" {{ old('action') == 'restored' ? 'selected' : '' }}>Restored</option>
                                <option value="imported" {{ old('action') == 'imported' ? 'selected' : '' }}>Imported</option>
                                <option value="exported" {{ old('action') == 'exported' ? 'selected' : '' }}>Exported</option>
                                <option value="approved" {{ old('action') == 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="rejected" {{ old('action') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                <option value="other" {{ old('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') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Leave empty for system actions</div>
                        </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 (e.g., 'User account imported from CSV', 'Product price bulk update')"
                                      required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Provide a clear description of the action</div>
                        </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"
    },
    "another_field": {
        "old": "previous value",
        "new": "updated value"
    }
}'>{{ old('changes') }}</textarea>
                            @error('changes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                Enter changes in JSON format. Example above shows the structure.
                                Leave empty if no specific changes to record.
                            </div>
                        </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') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_system">
                                    Mark as System Action
                                </label>
                                <div class="form-text">Check this if this was an automated/system action</div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Create Audit Log
                        </button>
                        <button type="reset" class="btn btn-outline-secondary">
                            <i class="fas fa-undo me-2"></i>Reset
                        </button>
                    </div>
                </form>
            </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