@inject('doc_type_helper', 'App\Helpers\DocumentTypeHelper')
{{ 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>Please speicify the list of documents need to submitted along with the proposal. </div>
<div class="grid grid-cols-2 items-start bg-white dark:bg-strokedark p-6">
    {{ ym_input([
        'label' => __('form.Document Title'),
        'type' => 'text',
        'name' => 'document_title[]',
        'required' => true,
        'value' => $model->document_title,
    ]) }}
    <button type="submit" name="submit" value="SUBMIT"
        class="m-auto text-white bg-blue-700 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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        {{ __('form.Save') }}
    </button>
</div>


    <div class="p-6 bg-stroke" x-show="totalFieldsAdded > 0">
        <template x-for="(field, index) in fields" :key="index">
            <div class="flex justify-between items-center py-2 gap-4">
                <div class="w-full grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4">
                    <input x-model="field.txt1" type="text" name="document_title[]" placeholder="Document Title"
                        required class="rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none mt-2.5 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">

                    <input x-model="field.txt2" type="text" name="remarks[]" placeholder="Remarks" class="rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none mt-2.5 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">

                    <select x-model="field.select1" name="is_require[]" class=" rounded border-[1.5px] bg-transparent py-3 px-5 font-medium outline-none mt-2.5 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">
                        <option value="1">Yes</option>
                        <option value="0">No</option>
                    </select>
                </div>
                <div class="pt-3 w-20">
                    <button type="button"
                        class="m-auto 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"
                        @click="removeField(index)">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>

            </div>
        </template>
        <div class="mt-2" x-show="totalFieldsAdded > 0">
            <button type="submit" name="submit" value="SUBMIT"
                class="text-white bg-blue-700 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-800">
                {{ __('form.Save') }}
            </button>
        </div>
    </div>
</div>
{{ html()->closeModelForm() }}

<div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark p-6">
    <div class="max-w-full overflow-auto">
        <table class="w-full table-auto">
            <thead class="bg-meta-4 text-white">
                <tr class="text-center">
                    <th class="min-w-[100px] p-2 font-semibold"> {{ __('table.sn') }} </th>
                    <th class="p-2 font-semibold"> Document Title</th>
                    {{-- <th class="p-2 font-semibold"> Remarks</th> --}}
                    <th class="p-2 font-semibold"> Is Required ?</th>
                    <th class="p-2 font-semibold">{{ __('table.action') }} </th>
                </tr>
            </thead>
            <tbody>
                @forelse ($model->documents as $doc)
                    <tr class="text-center">
                        <td
                            class="border-b border-[#eee] py-4 px-2 dark:border-strokedark min-w-[100px] font-semibold text-black dark:text-white">
                            {{ $loop->index + 1 }}.
                        </td>
                        <td class="border-b border-[#eee] py-4 px-2 dark:border-strokedark">
                            {{ $doc->document_title }}
                        </td>
                        {{-- <td class="border-b border-[#eee] py-4 px-2 dark:border-strokedark">
                            {{ $doc->remarks ?? '-' }}
                        </td> --}}
                        <td class="border-b border-[#eee] py-4 px-2 dark:border-strokedark">
                            {{ config('dropdown.yes_no.' . $doc->is_require) }}
                        </td>
                        <td class="border-b border-[#eee] py-4 px-2 dark:border-strokedark">
                            <form action="{{ route('organization.tender-documents.destroy', $doc->id) }}"
                                method="POST">
                                @csrf
                                @method('DELETE')
                                <button data-tooltip="{{ $action['placeholder'] ?? '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>

                        </td>

                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="text-center py-3">
                            {{ __('table.no_data') }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>



<script>
    function handler() {
        return {
            fields: [],
            totalFieldsAdded: 0,
            addNewField() {
                this.fields.push({
                    txt1: '',
                    txt2: '',
                    select1: ''
                });
                this.totalFieldsAdded++;
            },
            removeField(index) {
                this.fields.splice(index, 1);
            }
        }
    }
</script>