@extends('organizations.layouts.default')
@section('content')
    <main class="overflow-y-scroll no-scrollbar mb-10">
        <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10 ">
            {!! htmlScriptTagJsApi() !!}
            @include('organizations.layouts.partials.breadcrumb')
            <div class="rounded-md border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark mt-3">
                <div class="p-6.5">
                    {{ html()->modelForm($model, getMethod($model), getMethod($model) == 'POST' ? route('organization.' . $route . '.store') : route('organization.' . $route . '.update', $model->id))->id('form-validator')->acceptsFiles()->open() }}
                    @if ($model->translatable)
                        <div x-data=" { openTab: 2, activeClasses: 'bg-blue-400 text-white', inactiveClasses: 'bg-gray dark:bg-meta-4 text-black dark:text-white' }" class="mb-14 w-full">
                            <div class="mb-7.5 flex flex-wrap gap-3 border-b border-stroke pb-5 dark:border-strokedark">
                                <a href="#" @click.prevent="openTab = 2"
                                    :class="openTab === 2 ? activeClasses : inactiveClasses"
                                    class="rounded-full px-4 py-3  text-sm font-medium hover:bg-blue-700 hover:text-white dark:hover:bg-blue-700 lg:px-6 dark:bg-meta-4 text-black dark:text-white">
                                    English
                                </a>
                                <a href="#" @click.prevent="openTab = 3"
                                    :class="openTab === 3 ? activeClasses : inactiveClasses"
                                    class="rounded-full px-4 py-3 text-sm font-medium hover:bg-blue-700 hover:text-white dark:hover:bg-blue-700 lg:px-6 dark:bg-meta-4 text-black dark:text-white">
                                    नेपाली
                                </a>
                            </div>

                            <div>

                                <div x-show="openTab === 2" class="font-medium leading-relaxed" style="display: none;">
                                    <div class="row g-3">
                                        @yield('form')
                                    </div>
                                </div>
                                <div x-show="openTab === 3" class="font-medium leading-relaxed" style="display: none">
                                    @yield('nepali_fields')
                                </div>

                            </div>
                        </div>
                    @else
                        <div class="row g-3">
                            @yield('form')
                        </div>
                    @endif

                    <div class="flex gap-3">
                        <button type="submit" name="submit" value="SUBMIT"
                            class="text-white bg-brandBlue hover:bg-brandBlue focus:outline-none focus:ring-4 focus:ring-blue-800 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-brandBlue dark:hover:bg-brandBlue dark:focus:ring-blue-800">
                            {{ __('organizations.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="{{ url()->previous() }}">{{ __('organizations.Cancel') }}</a>
                    </div>
                    {{ html()->closeModelForm() }}
                </div>
            </div>
        </div>
    </main>
@endsection