@extends('app')
@section('content')
<div class="container">
    <h3 class="mb-4">Create Knowledge Base Article</h3>
    <hr style="border: 1px solid orange; width: 100%;">

    {{-- Success/Error messages --}}
    <div id="alert-message"></div>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Form --}}
    <form id="articleForm" action="{{ url('knowledge_base/store') }}" method="POST">
        <input type="hidden" name="_token" value="{{ csrf_token() }}" />
        
        <div class="form-group mb-3">
            <label for="problem_statement">Problem Statement</label>
            <textarea name="problem_statement" id="problem_statement" class="form-control" style="height:30px;" required>{{ old('problem_statement') }}</textarea>
        </div>

        <div class="form-group mb-3">
            <label for="solution">Solution</label>
            <textarea name="solution" id="solution" class="form-control" rows="5" required>{{ old('solution') }}</textarea>
        </div>

        <button type="submit" class="btn btn-primary">Save Article</button>
    </form>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
    // Attach CSRF token to all AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#articleForm').on('submit', function (e) {
        e.preventDefault();

        let form = $(this);

        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function (response) {
                $('#alert-message').html(
                    '<div class="alert alert-success">Article saved successfully!</div>'
                );
                form[0].reset();
            },
            error: function (xhr) {
                let errorHtml = '<div class="alert alert-danger"><ul>';
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    $.each(xhr.responseJSON.errors, function (key, value) {
                        errorHtml += '<li>' + value[0] + '</li>';
                    });
                } else {
                    errorHtml += '<li>Something went wrong. Please try again.</li>';
                }
                errorHtml += '</ul></div>';
                $('#alert-message').html(errorHtml);
            }
        });
    });
});
</script>

@endsection