@extends('organizations.layouts.default')

@section('content')
    <div class="container mx-auto p-8" x-data="rfpForm()">
        <div class="bg-white shadow-lg rounded-lg p-8 max-w-full mx-auto">
            <h1 class="text-4xl font-bold text-center mb-4 text-brandBlue">RFP Document Creator</h1>
            <p class="text-gray-600 mb-6 text-center text-lg">
                "Need an RFP that's crystal clear and easy for vendors to understand? Our AI-powered tool can help you
                create a comprehensive RFP in no time. By automating the process, you can focus on what matters most: your
                project goals."
            </p>
            <p class="text-center">
                Hover over the label of input for more information on the input field.
            </p>

            <!-- Loading and Response Div -->
            <div x-show="isLoading" class="fixed inset-0 flex items-center justify-center bg-graydark bg-opacity-80 z-50">
                <div class="flex items-center justify-center">
                    <svg class="animate-spin h-10 w-10 text-brandOrange mr-3" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24">
                        <circle class="opacity-100" cx="80" cy="80" r="80" stroke="currentColor"
                            stroke-width="4"></circle>
                        <path class="opacity-90" fill="currentColor" d="M4 12a8 8 0 1016 0A8 8 0 004 12z"></path>
                    </svg>
                    <p class="text-xl text-white">AI is generating your document within a minute.... Please wait....</p>
                </div>
            </div>

            <div x-show="response" class="my-4">
                <h2 class="text-2xl font-semibold mb-4">Generated RFP Document</h2>
                <pre class="whitespace-pre-wrap bg-gray-100 p-4 rounded-lg border border-gray-300" x-text="response"></pre>
            </div>

            <!-- Form Start -->
            <form id="rfpForm" @submit.prevent="submitForm">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    <!-- Left Column -->
                    <div>
                        <div class="mb-4">
                            <label for="goal" class="block text-gray-700 font-semibold mb-2"
                                title="What is the main goal of your project?">RFP Objective</label>
                            <input type="text" id="goal" name="goal"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: Improve vendor selection process" x-model="form.goal" required>
                        </div>
                        <div class="mb-4">
                            <label for="project" class="block text-gray-700 font-semibold mb-2"
                                title="Describe the project or service you need.">Project/Service Requested</label>
                            <input type="text" id="project" name="project"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: IT Service Provider Evaluation" x-model="form.project" required>
                        </div>
                        <div class="mb-4">
                            <label for="company_name" class="block text-gray-700 font-semibold mb-2"
                                title="Enter your company's name.">Company Name</label>
                            <input type="text" id="company_name" name="company_name"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: Tech Innovations Inc." x-model="form.company_name" required>
                        </div>
                        <div class="mb-4">
                            <label for="company_mission" class="block text-gray-700 font-semibold mb-2"
                                title="What is your company's mission?">Company Mission</label>
                            <input type="text" id="company_mission" name="company_mission"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: To lead in technology solutions." x-model="form.company_mission" required>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div>
                        <div class="mb-4">
                            <label for="scope" class="block text-gray-700 font-semibold mb-2"
                                title="Outline the scope of your project.">Project Scope</label>
                            <input type="text" id="scope" name="scope"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: Assessment of service quality, cost, and support." x-model="form.scope"
                                required>
                        </div>
                        <div class="mb-4">
                            <label for="deliverables" class="block text-gray-700 font-semibold mb-2"
                                title="List the deliverables expected from the vendor.">Expected Deliverables</label>
                            <input type="text" id="deliverables" name="deliverables"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: A detailed RFP document." x-model="form.deliverables" required>
                        </div>
                        <div class="mb-4">
                            <label for="timeline" class="block text-gray-700 font-semibold mb-2"
                                title="What is the estimated timeline for the project?">Project Timeline</label>
                            <input type="text" id="timeline" name="timeline"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: 4 weeks from start to completion." x-model="form.timeline" required>
                        </div>
                        <div class="mb-4">
                            <label for="budget" class="block text-gray-700 font-semibold mb-2"
                                title="Specify the budget allocated for the project.">Budget</label>
                            <input type="text" id="budget" name="budget"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: $5000" x-model="form.budget" required>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                    <div>
                        <div class="mb-4">
                            <label for="submission_guidelines" class="block text-gray-700 font-semibold mb-2"
                                title="What are the guidelines for submitting proposals?">Proposal Submission
                                Guidelines</label>
                            <input type="text" id="submission_guidelines" name="submission_guidelines"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: Proposals should be submitted via email."
                                x-model="form.submission_guidelines" required>
                        </div>
                    </div>
                    <div>
                        <div class="mb-4">
                            <label for="evaluation_criteria" class="block text-gray-700 font-semibold mb-2"
                                title="How will you evaluate the proposals?">Evaluation Criteria</label>
                            <input type="text" id="evaluation_criteria" name="evaluation_criteria"
                                class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                                placeholder="eg: Cost, experience, and service quality."
                                x-model="form.evaluation_criteria" required>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                    <div class="mb-4">
                        <label for="terms_conditions" class="block text-gray-700 font-semibold mb-2"
                            title="State the terms and conditions of the project.">Terms and Conditions</label>
                        <input type="text" id="terms_conditions" name="terms_conditions"
                            class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                            placeholder="eg: Standard terms apply." x-model="form.terms_conditions" required>
                    </div>
                    <div class="mb-4">
                        <label for="contact_info" class="block text-gray-700 font-semibold mb-2"
                            title="Provide a contact email for inquiries.">Contact Information</label>
                        <input type="email" id="contact_info" name="contact_info"
                            class="w-full border border-gray-300 rounded-lg p-3 focus:ring focus:ring-bratext-brandBlue transition duration-200"
                            placeholder="eg: contact@techinnovations.com" x-model="form.contact_info" required>
                    </div>
                </div>

                <!-- Navigation Buttons -->
                <div class="flex justify-between mt-8">
                    <button type="submit"
                        class="bg-brandOrange text-white px-6 py-2 rounded-lg transition duration-200 hover:bg-brandBlue focus:outline-none focus:ring-2 focus:ring-brandBlue">Submit</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function rfpForm() {
            return {
                form: {
                    goal: 'To enhance the training and development capabilities of the organization through an effective LMS.',
                    project: 'Implementation of a Learning Management System for employee training and development.',
                    company_name: 'Innovative Learning Solutions',
                    company_mission: 'To provide comprehensive learning solutions that empower organizations to foster continuous improvement and growth.',
                    scope: 'Development, implementation, and maintenance of an LMS to manage and deliver online courses, track employee progress, and generate reports.',
                    deliverables: 'A fully functional LMS platform, user training sessions, documentation, and ongoing support for six months post-implementation.',
                    timeline: '6 months from project kickoff to full implementation.',
                    budget: '$50,000',
                    submission_guidelines: 'Proposals should be submitted via the online form on our website by the specified deadline.',
                    evaluation_criteria: 'Cost, vendor experience, system functionality, user interface design, and support services.',
                    terms_conditions: 'Standard terms apply, including confidentiality and compliance with data protection regulations.',
                    contact_info: '{{ auth()->user()->email ?? '' }}' // Set default value here
                },
                isLoading: false,
                response: '',
                async submitForm() {
                    // Display loading message
                    this.isLoading = true;

                    // Simulate an API call to generate the RFP document
                    try {
                        const response = await fetch(`{{ config('ai.url') }}generate-rfp`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify(this.form)
                        });

                        if (!response.ok) throw new Error('Network response was not ok');

                        const data = await response.json();
                        this.response = data.response; // Assuming the API returns the generated document

                        // Store response in localStorage
                        localStorage.setItem('rfpResponse', this.response);

                        // Scroll to the response div
                        this.$nextTick(() => {
                            const responseDiv = document.querySelector('[x-show="response"]');
                            if (responseDiv) {
                                responseDiv.scrollIntoView({
                                    behavior: 'smooth'
                                });
                            }
                        });
                    } catch (error) {
                        console.error('Error:', error);
                        this.response = 'There was an error generating your document. Please try again.';
                    } finally {
                        this.isLoading = false; // Hide loading message
                    }
                }
            }
        }
    </script>
@endsection