@include('Admin.Includes.header')

@php
    use Illuminate\Support\Facades\Auth;
    $logged_in_user = Auth::user();
@endphp

<div class="page-content">
    <div class="container-fluid">
        <div class="card shadow-sm mb-4">
            <div class="card-body py-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <h4 class="mb-1">{{ __('Create FAQ') }}</h4>

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb bg-transparent p-0 m-0">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('Admin.Dashboard') }}" class="link-primary text-decoration-none">
                                        <i class="fa-solid fa-house me-1"></i> Dashboard
                                    </a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="{{ route('faqs.index') }}" class="link-primary text-decoration-none">
                                        FAQs
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    Create FAQ
                                </li>
                            </ol>
                        </nav>
                    </div>

                    <div class="d-flex gap-2">
                        <a href="{{ route('faqs.index') }}" class="btn btn-primary global-list-btn">
                            <i class="bi bi-list me-1"></i> FAQ List
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <form action="{{ route('faqs.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <!-- Main Content Column -->
                                <div class="col-lg-8">
                                    <!-- Basic Information -->
                                    <div class="card mb-4">
                                        <div class="card-header">
                                            <h6 class="card-title mb-0">
                                                <i class="bi bi-info-circle me-2"></i>Basic Information
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label class="form-label">Title <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="title"
                                                    value="{{ old('title') }}" placeholder="Enter FAQ page title"
                                                    required>
                                                @error('title')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label">Permalink <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="permalink"
                                                    name="permalink" value="{{ old('permalink') }}"
                                                    placeholder="faq-page-url" required>
                                                <div class="permalink_status mt-1"></div>
                                                <div class="permalink_error"></div>
                                                @error('permalink')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label">Page URL</label>
                                                <input type="url" class="form-control" name="page_url"
                                                    value="{{ old('page_url') }}"
                                                    placeholder="https://example.com/faq-page">
                                                @error('page_url')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label">Description</label>
                                                <textarea name="description" class="form-control" rows="3" placeholder="Brief description of this FAQ page">{{ old('description') }}</textarea>
                                                @error('description')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Questions & Answers -->
                                    <div class="card mb-4">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h6 class="card-title mb-0">
                                                <i class="bi bi-question-circle me-2"></i>Questions & Answers
                                            </h6>
                                           
                                        </div>
                                        <div class="card-body">
                                            <div id="qa-container">
                                                <!-- Q&A items will be added here dynamically -->
                                            </div>
                                            <div class="text-center mt-3">
                                                <button type="button" class="btn btn-success"
                                                    onclick="addNewQA()">
                                                    <i class="bi bi-plus-circle me-1"></i>Add Another Q&A
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Sidebar Column -->
                                <div class="col-lg-4">
                                    <!-- Status & Settings -->
                                    <div class="card mb-4">
                                        <div class="card-header">
                                            <h6 class="card-title mb-0">
                                                <i class="bi bi-gear me-2"></i>Settings
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label class="form-label">Status <span
                                                        class="text-danger">*</span></label>
                                                <select name="status" class="form-select" required>
                                                    <option value="1"
                                                        {{ old('status', '1') == '1' ? 'selected' : '' }}>Active
                                                    </option>
                                                    <option value="0"
                                                        {{ old('status') == '0' ? 'selected' : '' }}>Inactive</option>
                                                </select>
                                                @error('status')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label">Sort Order</label>
                                                <input type="number" class="form-control" name="sort_order"
                                                    value="{{ old('sort_order', 0) }}" min="0"
                                                    placeholder="0">
                                                @error('sort_order')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-grid gap-2">
                                                <button type="submit" class="btn btn-success">
                                                    <i class="bi bi-check-lg me-1"></i>Create FAQ
                                                </button>
                                                <button type="submit" name="stay_on_page" value="1"
                                                    class="btn btn-success">
                                                    <i class="bi bi-plus-circle me-1"></i>Create & Add Another
                                                </button>
                                                <a href="{{ route('faqs.index') }}" class="btn btn-secondary">
                                                    <i class="bi bi-x-lg me-1"></i>Cancel
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <script>
        let qaCounter = 0;

        $(document).ready(function() {
            // Add initial Q&A if none exist
            if ($('#qa-container').children().length === 0) {
                addNewQA();
            }

            // Auto-generate permalink from title with debounce
            $('input[name="title"]').on('input', function() {
                clearTimeout(this.permalinkTimeout);
                const self = this;
                this.permalinkTimeout = setTimeout(function() {
                    const title = $(self).val();
                    if (title) {
                        const permalink = generatePermalinkFromTitle(title);
                        $('#permalink').val(permalink);
                        checkPermalink();
                    }
                }, 300); // 300ms delay
            });
        });

        function addNewQA() {
            qaCounter++;
            const qaHtml = `
            <div class="qa-item border rounded p-3 mb-3" data-index="${qaCounter}">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="mb-0">Q&A #${qaCounter}</h6>
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeQA(${qaCounter})">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
                
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Question <span class="text-danger">*</span></label>
                                                    <textarea name="questions[${qaCounter}][question]" class="form-control" rows="2" 
                                                              placeholder="Enter question" required></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Sort Order</label>
                                                    <input type="number" name="questions[${qaCounter}][sort_order]" 
                                                           class="form-control" value="${qaCounter}" min="0">
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Answer <span class="text-danger">*</span></label>
                                            <textarea name="questions[${qaCounter}][answer]" class="form-control" rows="4" 
                                                      placeholder="Enter detailed answer" required></textarea>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <div class="form-check form-switch">
                                                <input type="hidden" name="questions[${qaCounter}][status]" value="0">
                                                <input class="form-check-input" type="checkbox" 
                                                       name="questions[${qaCounter}][status]" value="1" checked>
                                                <label class="form-check-label">Active</label>
                                            </div>
                                        </div>
            </div>
        `;

            $('#qa-container').append(qaHtml);
        }

        function removeQA(index) {
            $(`.qa-item[data-index="${index}"]`).remove();
            updateQANumbers();
        }

        function updateQANumbers() {
            $('.qa-item').each(function(index) {
                $(this).find('h6').text(`Q&A #${index + 1}`);
                $(this).attr('data-index', index + 1);

                // Update input names
                $(this).find('textarea[name*="[question]"]').attr('name', `questions[${index + 1}][question]`);
                $(this).find('textarea[name*="[answer]"]').attr('name', `questions[${index + 1}][answer]`);
                $(this).find('input[name*="[sort_order]"]').attr('name', `questions[${index + 1}][sort_order]`);
                $(this).find('input[name*="[status]"]').each(function() {
                    $(this).attr('name', `questions[${index + 1}][status]`);
                });
            });
        }

        function generatePermalinkFromTitle(title) {
            // Remove special characters and convert to lowercase
            let permalink = title.toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '') // Remove special characters except spaces and hyphens
                .replace(/\s+/g, '-') // Replace spaces with hyphens
                .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
                .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens

            return permalink;
        }

        function generatePermalink() {
            const title = $('input[name="title"]').val();
            if (!title) {
                $('#permalink').val('');
                return;
            }

            $.ajax({
                url: '{{ route('faqs.generate.permalink') }}',
                type: 'POST',
                data: {
                    title: title,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#permalink').val(response.permalink);
                    checkPermalink();
                }
            });
        }

        function checkPermalink() {
            const permalink = $('#permalink').val();

            if (!permalink) {
                $('.permalink_status').val('');
                $('.permalink_error').html('<small class="text-danger">Permalink is required.</small>');
                return;
            }

            $.ajax({
                url: '{{ route('faqs.check.permalink') }}',
                type: 'POST',
                data: {
                    permalink: permalink,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.available) {
                        $('.permalink_error').html(
                            '<small class="text-success">✓ Permalink is available.</small>');
                    } else {
                        $('.permalink_error').html('<small class="text-danger">✗ ' + response.message +
                            '</small>');
                    }
                }
            });
        }

        // Check permalink on input
        $('#permalink').on('input', function() {
            clearTimeout(this.checkTimeout);
            this.checkTimeout = setTimeout(checkPermalink, 500);
        });
    </script>