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

@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="text-black dark:text-white">
                                    Title:
                                </span>
                                {{ $model->roster_title }}
                            </div>
                            <div class="md:text-center">
                                <span class="text-black dark:text-white">
                                    Start Date:
                                </span>
                                {{ $model->start_date->format('Y-m-d') }}
                            </div>
                            <div class="md:text-end">
                                <span class="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-1">Please select services for this roster</h3>
                    <div class="p-6.5">
                        {{ html()->modelForm($model, 'POST', route('organization.roster-open.store', $model->id))->id('form-validator')->acceptsFiles()->open() }}
                        @php
                            $noticeLang = $model->lang??'en'
                        @endphp
                        @foreach (config('dropdown.roster_service_category') as $categoryId => $categoryLabel)
                            <div x-data="{ accordionOpen: false }" @click.outside="accordionOpen = false"
                                class="rounded-md border border-stroke p-4 shadow-9 dark:border-strokedark dark:shadow-none sm:p-6 mb-4">
                                <button type="button" @click.prevent="accordionOpen = !accordionOpen"
                                    class="flex w-full items-center gap-1.5 sm:gap-3 xl:gap-6">
                                    <div
                                        class="flex h-10.5 w-full max-w-10.5 items-center justify-center rounded-md bg-[#F3F5FC] dark:bg-meta-4">
                                        <svg :class="accordionOpen && 'rotate-180'"
                                            class="fill-primary stroke-primary duration-200 ease-in-out dark:fill-white dark:stroke-white"
                                            width="18" height="10" viewBox="0 0 18 10" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M8.28882 8.43257L8.28874 8.43265L8.29692 8.43985C8.62771 8.73124 9.02659 8.86001 9.41667 8.86001C9.83287 8.86001 10.2257 8.69083 10.5364 8.41713L10.5365 8.41721L10.5438 8.41052L16.765 2.70784L16.771 2.70231L16.7769 2.69659C17.1001 2.38028 17.2005 1.80579 16.8001 1.41393C16.4822 1.1028 15.9186 1.00854 15.5268 1.38489L9.41667 7.00806L3.3019 1.38063L3.29346 1.37286L3.28467 1.36548C2.93287 1.07036 2.38665 1.06804 2.03324 1.41393L2.0195 1.42738L2.00683 1.44184C1.69882 1.79355 1.69773 2.34549 2.05646 2.69659L2.06195 2.70196L2.0676 2.70717L8.28882 8.43257Z"
                                                fill="" stroke=""></path>
                                        </svg>
                                    </div>

                                    <div>
                                        <h4 class="text-left text-title-xsm font-medium text-black dark:text-white">
                                            {{ $categoryLabel }}
                                        </h4>
                                    </div>
                                </button>

                                <div x-show="accordionOpen" class="ml-14 mt-2 duration-200 ease-in-out"
                                    style="display: none;">
                                    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-0">
                                        @forelse ($roster_service_helper->get()->where('category', $categoryId) as $service)
                                            <div class="flex items-center  rounded-lg ">
                                                <input id="checkbox-{{ $service->id }}" type="checkbox"
                                                    value="{{ $service->id }}"
                                                    {{ $model->rosterOpens->where('roster_service_id', $service->id)->count() ? 'checked' : '' }}
                                                    name="services[{{ $categoryId }}][]"
                                                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 mr-2">
                                                <label for="checkbox-{{ $service->id }}"
                                                    class="font-medium text-black dark:text-white">{{ $noticeLang == 'en'?$service->service_title:$service->service_title_np }}</label>
                                            </div>
                                        @empty
                                            <div class="col-span-full text-black dark:text-white">
                                                {{ __('table.no_data') }}
                                            </div>
                                        @endforelse
                                    </div>
                                    <div class="mt-4">
                                        <div x-data="tagInput('{{ json_encode($model->rosterOpens->where('roster_service_id', null)->where('category_id', $categoryId)->pluck('other_service')) }}', {{ $categoryId }})" class="bg-white dark:bg-boxdark p-4 rounded shadow-md">
                                            <div class="gap-2">
                                                <div class="flex flex-wrap gap-2 mb-2">
                                                    <template x-for="(tag, index) in tags" :key="index">
                                                        <div
                                                            class="flex items-center bg-blue-500 text-white text-sm rounded px-2 py-1">
                                                            <span x-text="tag"></span>
                                                            <button @click.prevent="removeTag(index)"
                                                                class="ml-2 text-white focus:outline-none">&times;</button>
                                                        </div>
                                                    </template>
                                                </div>
                                                <input x-model="newTag" @keydown.enter.prevent="addTag()" type="text"
                                                    placeholder="Add Other Services"
                                                    class="flex-grow p-2 text-sm border dark:bg-boxdark rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            </div>
                                            <input type="hidden" name="other_service[{{ $categoryId }}]"
                                                x-model="otherService">
                                            @error('other_service.' . $categoryId)
                                                <div class="border-red-500 text-danger p-2">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <div class="flex gap-3 mt-8">
                            <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 dark:bg-blue-600 dark:hover:bg-blue-700 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 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
                                href="{{ route('organization.rosters.edit', $model->id) }}">{{ __('form.Previous') }}</a>
                        </div>
                        {{ html()->closeModelForm() }}
                    </div>
                </div>
            </div>
            <script>
                function tagInput(initialTags, categoryId) {
                    return {
                        tags: initialTags ? JSON.parse(initialTags) : [],
                        newTag: '',
                        otherService: initialTags || '[]',
                        addTag() {
                            if (this.newTag.trim() !== '') {
                                this.tags.push(this.newTag.trim());
                                this.newTag = '';
                                this.updateOtherService();
                            }
                        },
                        removeTag(index) {
                            this.tags.splice(index, 1);
                            this.updateOtherService();
                        },
                        updateOtherService() {
                            this.otherService = JSON.stringify(this.tags);
                        }
                    }
                }

                document.addEventListener('DOMContentLoaded', function() {
                    const form = document.getElementById('form-validator');
                    form.addEventListener('keydown', function(event) {
                        if (event.key === 'Enter') {
                            event.preventDefault();
                        }
                    });
                });
            </script>
    </main>
@endsection