{{ html()->modelForm($model->documents, 'POST', route('organization.tender-evaluation-criterias.store'))->id('evaluation-form-validator')->acceptsFiles()->open() }}
<input type="hidden" name="tender_id" value="{{ $model->id }}">
<div class="row w-full mx-auto" x-data="handler()">
    <div class="text-right">
        <button type="button"
            class="text-white bg-emerald-600 hover:bg-emerald-900 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-emerald-600 dark:hover:bg-emerald-300 dark:focus:ring-blue-900"
            @click="addNewField()">
            + Add
        </button>
        <button type="button"
        class="text-white bg-emerald-600 hover:bg-emerald-900 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-emerald-600 dark:hover:bg-emerald-300 dark:focus:ring-blue-900"
        @click="loadFromTemplate()">
        + Load From Template
    </button>
    </div>
    <div class="p-6 " 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="criteria[]" placeholder="Criteria 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.txt3" type="number" name="marks[]" placeholder="Marks" required
                        min="0"
                        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-number-evaluation">

                    <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">

                </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 id="evaluation-error-message" style="display: none">
        <div  class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
            <strong class="font-bold">Validation Error:</strong>
            <span class="block sm:inline" id="evaluation-error-text"></span>
        </div>
    </div>
        <div class="mt-2" x-show="totalFieldsAdded > 0">
            <button onclick="sumValues()" type="button" name="submit_values" 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>
    </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"> Criteria Title</th>
                    <th class="p-2 font-semibold"> Marks</th>
                    <th class="p-2 font-semibold"> Remarks</th>
                    <th class="p-2 font-semibold">{{ __('table.action') }} </th>
                </tr>
            </thead>
            <tbody>
                @php
                    $total = 0;
                @endphp
                @forelse ($model->evaluationCriterias as $criteria)
                @php
                    $total +=$criteria->marks;
                @endphp
                    <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 text-left">
                            {{ $criteria->criteria }}
                        </td>
                        <td class="border-b border-[#eee] py-4 px-2 dark:border-strokedark">
                            {{ $criteria->marks }}
                        </td>
                        <td class="border-b border-[#eee] py-4 px-2 dark:border-strokedark">
                            {{ $criteria->remarks ?? '-' }}
                        </td>

                        <td class="border-b border-[#eee] py-4 px-2 dark:border-strokedark">
                            <form
                                action="{{ route('organization.tender-evaluation-criterias.destroy', $criteria->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>
            <tfoot>
                <tr class="text-center font-bold p-2">
                    <td></td>
                    <td>Total</td>
                    <td>{{$total}}</td>
                    <td></td>
                    <td></td>
                </tr>
                <input id="total_existing" type="hidden" value="{{$total}}" />
            </tfoot>
        </table>
        @if($total>100)
        <div  class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
            <strong class="font-bold">Validation Error:</strong>
            <span class="block sm:inline">Total marks exceeds than 100. Please update the marks before publishing the notice</span>
        </div>
        @endif
</div>



<script>
    function handler() {
        var templateFields = null;
        return {
            fields: [],
            totalFieldsAdded: 0,
            addNewField() {
                this.fields.push({
                    txt1: '',
                    txt2: '',
                    txt3: ''
                });
                this.totalFieldsAdded++;
            },
            removeField(index) {
                this.fields.splice(index, 1);
            },
            loadFromTemplate(){
                templateFields.forEach(element => {
                    this.fields.push({
                    txt1: element.title,
                    txt3: element.marks,
                    txt2: ''
                });
                });

                this.totalFieldsAdded++;
            }
        }
    }
    function sumValues() {
      const inputs = document.querySelectorAll('.input-number-evaluation');
      let sum = 0;
      let total_existing = Number(document.getElementById('total_existing').value);
      let isNegetive = false;
      inputs.forEach(input => {
        sum += Number(input.value);
        if(Number(input.value)<=0){
            isNegetive = true;
        }
      });
      total = sum + total_existing
      if(isNegetive){
        document.getElementById('evaluation-error-message').style.display = 'block';
        document.getElementById('evaluation-error-text').innerText = 'Please put evaluation mark more than 0.';
      }
     else if(sum>100){
        document.getElementById('evaluation-error-message').style.display = 'block';
        document.getElementById('evaluation-error-text').innerText = 'Total evaluation marks exceed than 100.';
     }else if(total>100){

        document.getElementById('evaluation-error-message').style.display = 'block';
        document.getElementById('evaluation-error-text').innerText = `You have already added ${total_existing} mark. Please make total evaluation marks 100.`;
     }else{
        document.getElementById('evaluation-error-message').style.display = 'none';
        document.getElementById('evaluation-form-validator').submit();
     }
    }
</script>