@csrf

@isset($education)
    @method('PUT')
@endisset

<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <form method="POST" action="{{ route('admin.education.update', ['education' => $education->id]) }}" enctype="multipart/form-data">
    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">Название учебного заведения</span>
        <input name="name" id="name"
               class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
               placeholder="Название учебного заведения" value="{{ old('name') ?? $education->name ?? '' }}"
        />
        @error('name')
        <span class="text-xs text-red-600 dark:text-red-400">
                  {{ $message }}
            </span>
        @enderror
    </label><br>

    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">Текст</span>
        <textarea class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-textarea focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray ckeditor_" name="text" placeholder="Текст (html)" required
                  rows="10">{{ old('text') ?? $education->text ?? '' }}</textarea>
        @error('text')
        <span class="text-xs text-red-600 dark:text-red-400">
                  {{ $message }}
            </span>
        @enderror
    </label><br>

    <label class="block text-sm">
        <span class="text-gray-700 dark:text-gray-400">Картинка</span>
        <input type="file" class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700
                                  focus:border-purple-400 focus:outline-none focus:shadow-outline-purple
                                  dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
               id="image" name="image" accept="image/png, image/jpeg">
        @error('image')
        <span class="text-xs text-red-600 dark:text-red-400">
                  {{ $message }}
            </span>
        @enderror
        @isset($education->image)
            <img src="{{asset(Storage::url($education->image))}}" width="100px"/>
        @endisset
    </label><br>

    <hr>
    <h5 class="text-gray-700 dark:text-gray-400">Контакты: </h5>
        <label class="block text-sm">
            <span class="text-gray-700 dark:text-gray-400">Адрес</span>
            <input name="address" id="address"
                   class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                   placeholder="Адрес" value="{{ old('address') ?? $education->address ?? '' }}"
            />
            @error('address')
            <span class="text-xs text-red-600 dark:text-red-400">
                  {{ $message }}
            </span>
            @enderror
        </label><br>

        <label class="block text-sm">
            <span class="text-gray-700 dark:text-gray-400">Email</span>
            <input name="email" id="email"
                   class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                   placeholder="Email" value="{{ old('email') ?? $education->email ?? '' }}"
            />
            @error('email')
            <span class="text-xs text-red-600 dark:text-red-400">
                  {{ $message }}
            </span>
            @enderror
        </label><br>

        <label class="block text-sm">
            <span class="text-gray-700 dark:text-gray-400">Телефон</span>
            <input name="telephone" id="telephone"
                   class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                   placeholder="Телефон" value="{{ old('telephone') ?? $education->telephone ?? '' }}"
            />
            @error('telephone')
            <span class="text-xs text-red-600 dark:text-red-400">
                  {{ $message }}
            </span>
            @enderror
        </label><br>

    <div class="flex flex-col flex-wrap mb-4 space-y-4 md:flex-row md:items-end md:space-x-4">
        <div>
            <button type="submit" class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                Сохранить
            </button>
            <a href="{{ route('admin.education.index') }}"
               class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
               style="display: -webkit-inline-box; height: 30px!important;"
            >Назад</a>
        </div>
    </div>
    </form>

    @isset($education)
        <div class="tabs_ js_tabs px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
                Программы образования
            </h2>
            <form class="tabs__form js_tabs_form" method="GET" action="{{ route('admin.add-program-education') }}">
                <label class="tabs__label block mt-4 text-sm">
                    <div class="relative text-gray-500 focus-within:text-purple-600">
                        <input type="hidden" name="id" value="{{ $education->id }}"/>
                        <input name="level" class="tabs__input js_tabs_input block w-full pr-20 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input" placeholder="Введите название таба"/>
                        <!-- For disabled buttons ADD these classes: opacity-50 cursor-not-allowed
                        And REMOVE these classes: active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple -->
                        <button class="tabs__submit-btn js_tabs_submit_btn absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-r-md focus:outline-none opacity-50 cursor-not-allowed" disabled>+</button>
                        <!-- <button class="tabs__submit-btn js_tabs_submit_btn absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-r-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">+</button> -->
                    </div>
                </label>
            </form>
            <div class="tabs__buttons js_tabs_buttons flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4">
                @if ($program->count())
                    @php $bool = true;
                        $i = 1;
                        $level = "";
                    @endphp

                    @foreach ($program as $pro)
                        @if ((!empty($level)) && ($level <> $pro->level ))
                            @php $bool = true; $i++; @endphp
                        @endif
                        @if ($bool == true)
                            <div>
                                <button class="tabs__btn js_tabs_btn mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" data-btn="{{ $pro->level }}" data-id="{{$i}}">{{ $pro->level }}</button>
                            </div>
                            @php $bool = false;
                                     $level = $pro->level;
                            @endphp
                        @endif
                    @endforeach
                @endif
            </div>
            <div class="tabs__content js_tabs_content">
                @if ($program->count())
                    @php $bool = true;
                         $i = 1;
                         $level = "";
                    @endphp

                    @foreach ($program as $pro)
                        @php $name_tab = $pro->level; @endphp
                        @if ((!empty($level)) && ($level <> $pro->level))
                                </tbody>
                                </table>
                            </div>
                            @php $bool = true; $i++; @endphp
                        @endif

                        @if ($bool == true)
                            <div class="tabs__item js_tabs_item @php echo($i>1) ? 'hidden' : ''; @endphp" data-id="{{$i}}">
                                <form action="{{ route('admin.add-program-education') }}" method="GET" class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4">
                                    <div>
                                        <input type="hidden" name="id" value="{{ $education->id }}"/>
                                        <input type="hidden" name="level" value="{{$name_tab}}"/>
                                        <button type="submit" class="mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">Добавить</button>
                                    </div>
                                </form>
                                <table class="mb-4 w-full whitespace-no-wrap">
                                            <thead>
                                            <tr
                                                class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
                                            >
                                                <th class="px-4 py-3">Специализация</th>
                                                <th class="px-4 py-3">Описание</th>
                                                <th class="px-4 py-3">Редактирование</th>

                                            </tr>
                                            </thead>
                                            <tbody
                                                class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
                                            >
                            @php $bool = false;
                                $level = $pro->level;
                            @endphp
                        @endif
                            <tr class="text-gray-700 dark:text-gray-400">
                                <td class="px-4 py-3">
                                    <div class="flex items-center text-sm">
                                        <div>
                                            <p class="font-semibold">Специальность: </p>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">
                                                {{ mb_strimwidth($pro->name, 0, 50, "...") }}
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <span class="text-gray-700 dark:text-gray-400">Описание: {{ mb_strimwidth($pro->text, 0, 100, "...")}}</span>
                                </td>
                                <td class="px-4 py-3 text-xs">
                                    <a href="{{ route('admin.edit-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Изменить</a> |
                                    <a href="{{ route('admin.delete-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Удалить</a>
                                </td>
                            </tr>
                    @endforeach
                @endif
            </div>
        </div>
    @endisset
</div>

<!--<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>-->

<script src="{{ asset('./ckeditor/ckeditor.js') }}"></script>
<script>
    CKEDITOR.replace( 'text', {
        filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
        filebrowserImageUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
</script>
<script>
 window.addEventListener('DOMContentLoaded', () => {

 setTabs(3);

 function setTabs(qty) {

 const tabs = document.querySelector('.js_tabs');
 const tabsForm = tabs.querySelector('.js_tabs_form');
 const tabsInput = tabs.querySelector('.js_tabs_input');
 const tabsSubmitBtn = tabs.querySelector('.js_tabs_submit_btn');
 const tabsButtons = tabs.querySelector('.js_tabs_buttons');
 const tabsContent = tabs.querySelector('.js_tabs_content');

 tabsForm.addEventListener('submit', (e) => {

 //e.preventDefault();

 const tabsInputValue = tabsInput.value;
 const tabsBtns = tabsButtons.querySelectorAll('.js_tabs_btn');
 const id = Date.now();


 if (tabsBtns.length >= qty) {
     console.log('Ветка выполнена');
     e.preventDefault();
 }

 /*if (tabsInput.dataset.edit) {

     tabsBtns.forEach(btn => {
         if (tabsInput.dataset.edit === btn.dataset.id) {
             btn.textContent = tabsInputValue;
             btn.dataset.btn = tabsInputValue;
         }
     });
     console.log('Эта ветка выполнилась');
     tabsInput.removeAttribute('data-edit');

 } else {

     if (!tabsBtns.length) {
         tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);
         tabsContent.innerHTML += getTabsItemTemplate(id);
     }

 if (tabsBtns.length && tabsBtns.length < qty) {

     let isMatch = false;

     tabsBtns.forEach(btn => {
         if (tabsInputValue === btn.dataset.btn) {
            isMatch = true;
         }
     });

    console.log('Альтернативная ветка!');
    if (!isMatch) {
         tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);
         tabsContent.innerHTML += getTabsItemTemplate(id, 'hidden');
    }
 }
 }*/

 tabsInput.value = '';
 addDisabledBtnStatus(tabsSubmitBtn);

 });

 tabsInput.addEventListener('input', () => {
     if (tabsInput.value !== '') {
        removeDisabledBtnStatus(tabsSubmitBtn);
     } else {
        addDisabledBtnStatus(tabsSubmitBtn);
     }
 });

 tabsButtons.addEventListener('click', (e) => {

 const target = e.target.closest('.js_tabs_btn');

 if (target) {

     const tabsItems = tabs.querySelectorAll('.js_tabs_item');

     tabsItems.forEach(item => {

         item.classList.add('hidden');

         if (target.dataset.id === item.dataset.id) {
            item.classList.remove('hidden');
         }
     });
 }

 });

 tabsButtons.addEventListener('dblclick', (e) => {
     const target = e.target.closest('.js_tabs_btn');

     if (target) {
         tabsInput.value = target.dataset.btn;
         tabsInput.dataset.edit = target.dataset.id;
         removeDisabledBtnStatus(tabsSubmitBtn);
     }
 });

 function getTabsBtnTemplate(btnName, id) {
 return `
 <div>
     <button class="tabs__btn js_tabs_btn mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple" data-btn="${btnName}" data-id="${id}">${btnName}</button>
 </div>
 `;
 }

 function getTabsItemTemplate(id, className = '') {
 return `
 <div class="tabs__item js_tabs_item ${className}" data-id="${id}">
     <div class="mb-4">${id}</div>
     <table class="mb-4 w-full whitespace-no-wrap">
         <thead>
         <tr
             class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
         >
             <th class="px-4 py-3">Client</th>
             <th class="px-4 py-3">Amount</th>
             <th class="px-4 py-3">Status</th>
             <th class="px-4 py-3">Date</th>
         </tr>
         </thead>
         <tbody
             class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
         >
         <tr class="text-gray-700 dark:text-gray-400">
             <td class="px-4 py-3">
                 <div class="flex items-center text-sm">
                     <!-- Avatar with inset shadow -->
                     <div
                         class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
                     >
                         <img
                             class="object-cover w-full h-full rounded-full"
                             src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
                             alt=""
                             loading="lazy"
                         />
                         <div
                             class="absolute inset-0 rounded-full shadow-inner"
                             aria-hidden="true"
                         ></div>
                     </div>
                     <div>
                         <p class="font-semibold">Hans Burger</p>
                         <p class="text-xs text-gray-600 dark:text-gray-400">
                             10x Developer
                         </p>
                     </div>
                 </div>
             </td>
             <td class="px-4 py-3 text-sm">
                 $ 863.45
             </td>
             <td class="px-4 py-3 text-xs">
                    <span
                        class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
                    >
                    Approved
                    </span>
             </td>
             <td class="px-4 py-3 text-sm">
                 6/10/2020
             </td>
         </tr>

         <tr class="text-gray-700 dark:text-gray-400">
             <td class="px-4 py-3">
                 <div class="flex items-center text-sm">
                     <!-- Avatar with inset shadow -->
                     <div
                         class="relative hidden w-8 h-8 mr-3 rounded-full md:block"
                     >
                         <img
                             class="object-cover w-full h-full rounded-full"
                             src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&facepad=3&fit=facearea&s=707b9c33066bf8808c934c8ab394dff6"
                             alt=""
                             loading="lazy"
                         />
                         <div
                             class="absolute inset-0 rounded-full shadow-inner"
                             aria-hidden="true"
                         ></div>
                     </div>
                     <div>
                         <p class="font-semibold">Jolina Angelie</p>
                         <p class="text-xs text-gray-600 dark:text-gray-400">
                             Unemployed
                         </p>
                     </div>
                 </div>
             </td>
             <td class="px-4 py-3 text-sm">
                 $ 369.95
             </td>
             <td class="px-4 py-3 text-xs">
                    <span
                        class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600"
                    >
                    Pending
                    </span>
             </td>
             <td class="px-4 py-3 text-sm">
                 6/10/2020
             </td>
         </tr>
         </tbody>
     </table>

     <div class="flex flex-col flex-wrap mb-4 md:flex-row md:space-x-4">
         <div>
             <a href="#" class="mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">Редактировать</a>
         </div>
         <div>
             <a href="#" class="mt-4 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">Удалить</a>
         </div>
     </div>
 </div>
 `;
 }

 function addDisabledBtnStatus(btn) {
     btn.disabled = true;
     btn.classList.add('opacity-50', 'cursor-not-allowed');
     btn.classList.remove('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');
 }

 function removeDisabledBtnStatus(btn) {
     btn.disabled = false;
     btn.classList.remove('opacity-50', 'cursor-not-allowed');
     btn.classList.add('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');
 }

 }
 console.log('main.js init');

 });

</script>