@extends('organizations.layouts.default')
@section('content')
    <div class="gap-7.5 p-2">
        <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
            <div class="border-b border-stroke p-2 px-7.5 dark:border-strokedark">
                <div class="text-xl font-semibold text-black dark:text-white flex justify-center">
                    AI-Enhanced Tools
                </div>
            </div>
            <div class="p-4 grid md:grid-cols-8 gap-4">
                <!-- Card 1: Procurement Documents using LLM AI -->
                <div class="col-span-4 flex">
                    <div
                        class="container bg-gradient-to-r from-green-500 to-blue-500 text-white p-8 rounded-lg shadow-lg w-full flex flex-col justify-between">
                        <div>
                            <div class="text-3xl font-bold mb-4">Create Procurement Documents with AI</div>
                            <div class="text-lg mb-4">Leverage advanced AI models to automate and enhance your procurement
                                document generation process.</div>
                            <ul class="list-disc pl-5">
                                <li><span class="font-semibold text-yellow-300">Time Efficiency:</span> AI can rapidly
                                    generate complex procurement documents.</li>
                                <li><span class="font-semibold text-yellow-300">Consistency:</span> Ensure standardization
                                    across all documents.</li>
                                <li><span class="font-semibold text-yellow-300">Cost-Effective:</span> Reduce the need for
                                    manual work and repetitive tasks.</li>
                                <li><span class="font-semibold text-yellow-300">Accurate:</span> Decrease human errors in
                                    document creation.</li>
                            </ul>
                        </div>
                        <div class="mt-6 text-center">
                            <a href="{{ route('organization.ai.tors.create') }}"
                                class="text-white bg-brandBlue hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900">
                                Generate TOR <i class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Card 2: General Chat AI -->
                <div class="col-span-4 flex">
                    <div
                        class="container bg-gradient-to-r from-purple-500 to-pink-500 text-white p-8 rounded-lg shadow-lg w-full flex flex-col justify-between">
                        <div>
                            <div class="text-3xl font-bold mb-4">General Chat AI</div>
                            <div class="text-lg mb-4">Interact with our AI-powered assistant for various tasks and queries.
                            </div>
                            <ul class="list-disc pl-5">
                                <li><span class="font-semibold text-yellow-300">Ask Anything:</span> Get answers to your
                                    queries in real-time.</li>
                                <li><span class="font-semibold text-yellow-300">Efficiency:</span> Quick responses to help
                                    you with routine or complex tasks.</li>
                                <li><span class="font-semibold text-yellow-300">24/7 Support:</span> AI is always available
                                    to assist you.</li>
                                <li><span class="font-semibold text-yellow-300">Personalized:</span> Tailored responses
                                    based on your input.</li>
                            </ul>
                        </div>
                        <div class="mt-6 text-center">
                            <a href="{{ route('organization.ai.general') }}"
                                class="text-white bg-pink-700 hover:bg-pink-800 focus:outline-none focus:ring-4 focus:ring-pink-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-900">
                                Use General Chat AI <i class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
            @if ($records->count())
                <div class="border-b border-stroke px-7.5 dark:border-strokedark">
                    <div class="text-xl font-semibold text-black dark:text-white flex justify-center">
                        AI Generated TOR
                    </div>
                </div>
                <div class="max-w-full overflow-x-auto">
                    <table class="w-full table-auto" id="tor-table">
                        <thead>
                            <tr class="bg-gray-2 text-left dark:bg-meta-4">
                                <th class="min-w-[100px] py-4 px-4 font-semibold text-black dark:text-white xl:pl-11">
                                    S.N
                                </th>
                                <th class="min-w-[200px] py-4 px-4 font-semibold text-black dark:text-white">
                                    Objective</th>
                                <th class="min-w-[200px] py-4 px-4 font-semibold text-black dark:text-white">
                                    Date</th>
                                <th class="py-4 px-4 font-semibold text-black dark:text-white">
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($records as $item)
                                <tr class="text-left">
                                    <td
                                        class="border-b border-[#eee] py-5 px-4 dark:border-strokedark min-w-[100px] font-semibold text-black dark:text-white xl:pl-11">
                                        {{ nepali_number(++$loop->index) }}.
                                    </td>

                                    <td class="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
                                        {{ $item->objective_of_assignment }}
                                    </td>
                                    <td class="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
                                        {{ $item->created_at?->format('Y-m-d') ?? '-' }}
                                    </td>
                                    <td class="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
                                        <div class="flex items-center space-x-3.5">
                                            <a href="{{ route('organization.ai.tors.show', $item->id) }}"
                                                data-tooltip="View">
                                                <i class="bi bi-eye-fill text-emerald-600"></i>
                                            </a>
                                            <form action="{{ route('organization.ai.tors.destroy', $item->id) }}"
                                                method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button data-tooltip="Delete" type="submit" data-toggle="tooltip"
                                                    class="text-danger bg-transparent border-0" data-placement="top"
                                                    onclick="javascript:return confirm('Are you sure you want to delete?');">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td> {{ __('table.no_data') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            @else
                <div class="mx-auto max-w-[490px]">
                    <div class="my-4 text-center">
                        <h2 class="mb-3 text-2xl font-bold text-black dark:text-white">
                            You haven't generated a TOR yet!
                        </h2>
                        <p class="font-medium text-gray-600 dark:text-gray-300">
                            It looks like you haven't created your Terms of Reference (TOR) yet.
                            Click the button below to create one now.
                        </p>
                        <a href="{{ route('organization.ai.tors.create') }}"
                            class="mt-7.5 inline-flex items-center gap-2 rounded-md bg-brandBlue px-6 py-3 font-medium text-white hover:bg-opacity-90">

                            <span>Create TOR</span> <i class="bi bi-arrow-right"></i>
                        </a>
                    </div>
                </div>
            @endif
        </div>
        <div class="mb-10">
            {{ $records->links('pagination::tailwind') }}
        </div>
    </div>
@endsection