@inject('roster_service_helper', 'App\Helpers\RosterServiceHelper')
@inject('document_type_helper', 'App\Helpers\DocumentTypeHelper')

@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>
                @include('organizations.rosters.partials.nav')
                <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                    <div class="border-b border-stroke px-6.5 py-4 dark:border-strokedark">
                        <div class="grid md:grid-cols-3 gap-4">
                            <div>
                                <span class="font-medium text-black dark:text-white">
                                    Title:
                                </span>
                                {{ $model->roster_title }}
                            </div>
                            <div class="md:text-center">
                                <span class="font-medium text-black dark:text-white">
                                    Start Date:
                                </span>
                                {{ $model->start_date->format('Y-m-d') }}
                            </div>
                            <div class="md:text-end">
                                <span class="font-medium text-black dark:text-white">
                                    End Date:
                                </span>
                                {{ $model->end_date->format('Y-m-d') }}
                            </div>
                        </div>
                    </div>
                    <h3 class="text-center font-medium text-black dark:text-white my-3">Please click into below list to add
                        in required documents  list</h3>
                    <div class="p-4">
                        <script>
                            const arrayField = {!! $document_type_helper->rosterDocument($model->lang ?? 'en')['json'] !!}
                        </script>
                        {{ html()->modelForm($model, 'POST', route('organization.roster-document.store', $model->id))->id('form-validator')->acceptsFiles()->open() }}
                        <div x-data="{ fields: {{ $model->rosterDocuments->count() ? json_encode($model->rosterDocuments) : '[{ 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">
                                    @foreach ($document_type_helper->rosterDocument($model->lang ?? 'en')['collection'] as $key => $docs)
                                        <li class="flex items-center cursor-pointer bg-gray-100 hover:bg-sky-100"
                                            @click="fields.push(arrayField[{{ --$key }}])">
                                            <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>
                            <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
                                    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>
                        </div>
                    </div>

                    <div class="flex gap-3 mt-8 mx-5">

                        <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-full 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.Submit') }}
                        </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.roster-open.create', $model->id) }}">{{ __('form.Previous') }}</a>
                    </div>
                    {{ html()->closeModelForm() }}
                </div>
            </div>
        </div>
    </main>
    <!--  modal -->

    <!-- modal end -->
@endsection