@extends('organizations.layouts.default')
@section('content')
    <main>
        <div class="max-w-screen-2xl mx-auto p-2 md:p-2 2xl:p-4">
            <div class="text-title-xsm">
                <div class="flex justify-between m-0 p-0">
                    <!-- Breadcrumb Start -->
                    @include('organizations.layouts.partials.breadcrumb')
                </div>
                <hr class="text-white my-3">
                <div class="my-3">
                </div>
                @if ($model->form_type == 1)
                    @include('organizations.rosters.partials.nav')
                @endif
                <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                    <div class="p-6.5">
                        {{ html()->modelForm($model, getMethod($model), getMethod($model) == 'POST' ? route('organization.rosters.wizard2.store') : route('organization.rosters.update', $model->id))->id('form-validator')->acceptsFiles()->open() }}

                        <div class="grid grid-cols-1 mb-4">
                            {{ ym_input([
                                'label' => __('form.Notice Title'),
                                'type' => 'text',
                                'name' => 'roster_title',
                                'id' => 'roster_title',
                                'required' => true,
                                'value' => $model->roster_title,
                            ]) }}
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            {{ ym_date([
                                'label' => __('form.Start Date'),
                                'min' => now()->format('Y-m-d'),
                                'name' => 'start_date',
                                'required' => true,
                                'value' => $model->start_date,
                                'id'=>'sdate'
                            ]) }}

                            {{ ym_input([
                                'type' => 'datetime',
                                'label' => __('form.End Date'),
                                'min' => now()->format('Y-m-d'),
                                'name' => 'end_date',
                                'required' => true,
                                'value' => $model->end_date,
                                 'id'=>'edate'
                            ]) }}
 {{
    ym_select(['label'=>__('form.Language'),
        'name'=>'lang',
        'id'=>'notice_lang',
        'options'=>['en'=>'EN','np'=>'NP'],
        'placeholder'=> __('form.Select Language'),
        'value' => $model->lang ?? null,
    ]),

 }}
                        </div>

                        <div class="grid grid-cols-1 gap-4 mb-3">
                            <div class="sm:flex items-center space-x-8">
                                <label class="font-semibold text-black dark:text-white">Apply Method <span
                                        class="text-danger">*</span></label>
                                <div class="flex items-center">
                                    <input type="checkbox" checked="checked" @click.prevent name="apply_online" value="1" id="apply_online"
                                        class="rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('apply_online') ? ' border-red-500' : ' border-stroke' }}"
                                        {{ old('apply_online', $model->apply_online ?? '') ? 'checked' : '' }}>
                                    <label for="apply_online" class="ml-2 text-black dark:text-white">Online</label>
                                </div>

                                <div class="flex items-center">
                                    <input type="checkbox" name="apply_offline" value="1" id="apply_offline"
                                        class="rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('apply_offline') ? ' border-red-500' : ' border-stroke' }}"
                                        {{ old('apply_offline', $model->apply_offline ?? '') ? 'checked' : '' }}>
                                    <label for="apply_offline" class="ml-2 text-black dark:text-white">Submission in  Office</label>
                                </div>

                                <div class="flex items-center">
                                    <input type="checkbox" name="apply_email" value="1" id="apply_email"
                                        class="rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('apply_email') ? ' border-red-500' : ' border-stroke' }}"
                                        {{ old('apply_email', $model->apply_email ?? '') ? 'checked' : '' }}>
                                    <label for="apply_email" class="ml-2 text-black dark:text-white">Send via Email</label>
                                </div>
                            </div>
                            @error('apply_method')
                                <div class="border-red-500 text-danger p-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="grid md:grid-cols-2 gap-4 mb-3">
                            <div id="submission_address_field"
                                class="mt-3 {{ old('apply_offline', $model->apply_offline ?? '') ? '' : 'hidden' }}">
                                <label for="submission_address" class="font-semibold text-black dark:text-white">Office
                                    Address</label>
                                <input type="text" name="submission_address"  id="submission_address"
                                    class="w-full rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('submission_address') ? ' border-red-500' : ' border-stroke' }}"
                                    value="{{ old('submission_address', $model->submission_address ?? $org_address) }}">
                                @error('submission_address')
                                    <div class="border-red-500 text-danger p-2">{{ $message }}</div>
                                @enderror
                            </div>
                            <div id="submission_email_field"
                                class="mt-3 {{ old('apply_email', $model->apply_email ?? '') ? '' : 'hidden' }}">
                                <label for="submission_email" class="font-semibold text-black dark:text-white">Submission
                                    Email</label>
                                <input type="email" name="submission_email" id="submission_email"
                                    class="w-full rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-w dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary {{ $errors->has('submission_email') ? ' border-red-500' : ' border-stroke' }}"
                                    value="{{ old('submission_email', $model->submission_email ?? $org_email) }}">
                                @error('submission_email')
                                    <div class="border-red-500 text-danger p-2">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-0">
                            <div class="flex justify-end mt-8">
                                <a href="#" onclick="loadTemplate()" 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-brandBlue dark:focus:ring-blue-800">Load Template</a>
                                <a href="#" onclick="aiEnhancer()" class="flex relative 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 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-brandBlue dark:focus:ring-blue-800">
                                    <img src="{{ asset('images/icon/ai-nobg.png') }}" class="h-10 mr-2 absolute right-0 -top-6 animate-bounce hover:animate-pulse" alt="">
                                    Enhance  with AI
                                </a>
                                    <!-- Loader -->
                                <div id="loader" style="display:none;">Loading...</div>
                                <div id="aiResponseModal" x-data="{ modalOpen: false }">
                                    <!-- Hidden button to trigger modal -->
                                    <button id="openModalButton" @click.prevent="modalOpen = true" class="hidden"></button>
                                    <button id="closeModalButton" @click.prevent="modalOpen = false" class="hidden"></button>

                                    <div x-show="modalOpen" x-transition=""
                                        class="fixed left-0 top-0 z-999999 flex h-full min-h-screen w-full items-center justify-center bg-black/50 px-4 py-5"
                                        style="display: none;">
                                        <div @click.outside="modalOpen = false"
                                            class="w-full max-w-[80%] rounded-lg bg-white shadow-lg text-center dark:bg-boxdark md:px-17.5 md:py-15">
                                            <h3 class="pb-2 text-xl font-bold text-black dark:text-white sm:text-2xl">
                                                AI Enhanced Response
                                            </h3>
                                            <span class="mx-auto mb-6 inline-block h-1 w-22.5 rounded bg-primary"></span>

                                            <!-- Response content area with scrollable div -->
                                            <div id="responseContent" class="mb-10 font-medium text-justify h-[75vh] overflow-y-auto border p-4 rounded-lg bg-gray-50 dark:bg-gray-800">
                                                This is the content
                                            </div>

                                            <div class="-mx-3 flex flex-wrap gap-y-4">
                                                <div class="w-full px-3 2xsm:w-1/2">
                                                    <button id="copyButton" @click.prevent
                                                        class="block w-full rounded border border-primary bg-primary p-3 text-center font-medium text-white transition hover:bg-opacity-90">
                                                        Copy
                                                    </button>
                                                </div>
                                                <div class="w-full px-3 2xsm:w-1/2">
                                                    <button id="cancelButton" @click.prevent="modalOpen = false"
                                                        class="block w-full rounded border border-stroke bg-gray p-3 text-center font-medium text-black transition hover:border-meta-1 hover:bg-meta-1 hover:text-white dark:border-strokedark dark:bg-meta-4 dark:text-white dark:hover:border-meta-1 dark:hover:bg-meta-1">
                                                        Close
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            {{ ym_textarea([
                                'label' => __('form.Notice Details'),
                                'name' => 'roster_details',
                                'editor' => 'editor',
                                'value' => $model->roster_details,
                                'required' => true,
                                'enlarge' => true,
                                'id'=>'roster_details'
                            ]) }}
                        </div>
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <label class="font-semibold text-black dark:text-white">Related Document Files</label>
                                <div class="flex items-center space-x-6">
                                    <div class="shrink-0">
                                        @if($model->medias)
                                        @if(is_image($model->medias))
                                        <img id='preview_img' class="h-16 w-16 object-cover rounded-full"
                                            src="{{ asset($model->medias) }}"
                                            alt="Current file" />
                                            @else
                                            <iframe id="preview_pdf" style="width: 100%; height: 150px;" frameborder="0" src="{{ asset($model->medias) }}"></iframe>
                                            @endif
                                            @else
                                        <img id='preview_img' class="h-16 w-16 object-cover rounded-full"
                                        src="{{ asset('images/task/task-01.jpg') }}"
                                        alt="Current file" />
                                            <iframe id="preview_pdf" style="display:none; width: 100%; height: 150px;" frameborder="0"></iframe>
                                        @endif
                                    </div>

                                    <label class="block">
                                        <input type="file" name="medias" id="fileInput"
                                            class="block w-full text-sm text-slate-500
                            file:mr-4 file:py-2 file:px-4
                            file:rounded-full file:border-0
                            file:text-sm file:font-semibold
                            file:bg-violet-50 file:text-violet-700
                            hover:file:bg-violet-100" />
                                </div>
                                @error('medias')
                                <span class="text-danger text-sm">{{ $message }}</span>
                                @enderror
                            </div>
                            <div>
                                {{ ym_input([
                                    'label' => __('form.External Links'),
                                    'type' => 'text',
                                    'name' => 'external_links',
                                    'value' => $model->external_links,
                                ]) }}
                            </div>
                        </div>
                        <div class="flex gap-3 mt-8">
                            <button type="submit" name="submit" value="SUBMIT"
                                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-brandBlue dark:focus:ring-blue-800">
                                {{ __('form.Save') }}
                            </button>
                            <a type="button"
                                class="text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
                                href="{{ route('organization.rosters.index') }}">{{ __('form.Cancel') }}</a>
                        </div>
                        {{ html()->closeModelForm() }}
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>

        function loadTemplate(){
            const langId = getElementValue('notice_lang');
            console.log(langId)
            const id = (langId =='np')?1:2;
            const params =  new URLSearchParams({
                sdate : getElementValue('sdate'),
                edate : getElementValue('edate'),
                aponline : isChecked('apply_online'),
                apoffline : isChecked('apply_offline'),
                appemail : isChecked('apply_email'),
                oaddress : getElementValue('submission_address'),
                semail : getElementValue('submission_email')
           });
            const url = '{{url('organization/get-template/')}}/'+id+"?"+params.toString()
            ymGet(url)
                .then(data => {
                    if (data) {
                        CKEDITOR.instances.roster_details.setData(data.data.template_details);
                    } else {
                    console.log('No data returned');
                    }
                });
        }

        function aiEnhancer() {
    try {
        let userInput = CKEDITOR.instances.roster_details.getData();
        if (userInput.trim() === '') {
            toastr.error('Please enter some text to enhance.');
            return;
        }

        let prompt = "Write this in professional language but also preserve the html format. Do not give any texts except the response: " + userInput;

        // Show loader while waiting for the response
        document.getElementById('loader').style.display = 'block';

        // Call the API
        fetch(`{{ config('ai.url') }}test`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ question: prompt }),
        })
        .then(response => response.json())
        .then(data => {
            // Hide the loader
            document.getElementById('loader').style.display = 'none';

            // Trigger the hidden button to open the modal
            document.getElementById('openModalButton').click();

            // Set the response content with HTML format
            document.getElementById('responseContent').innerHTML = data.response;

            // Add copy functionality for rendered HTML content
            document.getElementById('copyButton').addEventListener('click', function() {
                let htmlContent = document.getElementById('responseContent').innerHTML;

                // Create a temporary container to hold the HTML
                let tempContainer = document.createElement('div');
                tempContainer.innerHTML = htmlContent;
                document.body.appendChild(tempContainer);

                // Use the Clipboard API to copy the content as HTML
                navigator.clipboard.write([
                    new ClipboardItem({ 'text/html': new Blob([tempContainer.innerHTML], { type: 'text/html' }) })
                ]).then(() => {
                    toastr.success('Copied to clipboard!');
                }).catch(() => {
                    toastr.error('Failed to copy text.');
                });

                // Remove the temporary container
                document.body.removeChild(tempContainer);
            });
        })
        .catch(error => {
            document.getElementById('loader').style.display = 'none';
            toastr.error('An error occurred while enhancing the text. Please try again.');
        });
    } catch (error) {
        toastr.error('An unexpected error occurred.');
    }
}


    </script>

@endsection