@inject('document_type_helper', 'App\Helpers\DocumentTypeHelper')
<div class="bg-white pt-2">
    <div class="text-center font-medium text-black dark:text-white my-3">
        Please click into below list to add in required documents list</div>
    <div class="p-4">
        <script>
            const arrayField = {!! $document_type_helper->tenderDocument($model->lang ?? 'en')['json'] !!}
        </script>
        {{ html()->modelForm($model->documents, 'POST', route('organization.tender-documents.store'))->id('form-validator')->acceptsFiles()->open() }}
        <input type="hidden" name="tender_id" value="{{ $model->id }}">
        <div x-data="{ fields: {{ $model->documents->count() ? json_encode($model->documents) : '[{ document_title: "", is_require: "", remarks: "",id:0 }]' }} }" class="space-y-4 mb-4">
            <div class="max-h-40 pl-10 pr-10 overflow-auto">
                <ul class="grid grid-cols-1 md:grid-cols-1 gap-1">
                    @php
                        $d = 0;
                    @endphp
                    @foreach ($document_type_helper->tenderDocument($model->lang ?? 'en')['collection'] as $docs)
                        <li class="flex items-center cursor-pointer bg-gray-100 hover:bg-sky-100"
                            @click="fields.push(arrayField[{{ $d++ }}])">
                            <span class="flex-grow">{{ $loop->index + 1 }}. {{ $docs }}</span>
                            <i class="bi bi-plus bg-blue-600 text-white px-2 rounded"></i>
                        </li>
                    @endforeach
                </ul>
            </div>
            <div class="text-center font-bold ">Required Documents Types <button
                    class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                    @click.prevent="fields.push({ document_title: '', remarks: '', is_require: false })">+
                    Add field
                </button></div>
            <template x-for="(field, index) in fields" :key="index">
                <div class="grid md:grid-cols-4 gap-4 mb-3 items-center">
                    <div class="md:col-span-2">
                        <input type="text" name="document_title[]" x-model="fields[index].document_title"
                            class="w-full rounded border-[1.5px] bg-transparent py-1 px-2 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                            placeholder="Document Title *" required>
                        @error('document_title.*')
                            <div class="border-red-500 text-danger p-2">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="text-left">
                        <button x-show="fields.length > 1"
                            class="md:col-span-1 bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded focus:outline-none focus:shadow-outline"
                            @click.prevent="fields.splice(index, 1)"><i class="bi bi-trash"></i></button>
                    </div>
                </div>
            </template>

            <div class="mt-6 text-left">

                <button type="submit" name="submit" value="submit"
                    class="text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                    {{ __('form.Save') }}
                </button>
            </div>
        </div>
        {{ html()->closeModelForm() }}
    </div>
</div>