From 22f5df84fd3819d2cc3d8146ed7de9cc81daf551 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9=20=20=D0=9B=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B8=D0=BE=D0=BD=D0=BE=D0=B2?= <alarionov@nologostudio.ru>
Date: Mon, 13 Nov 2023 21:47:12 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D1=80=D0=B0=D0=B7=D0=BE=D0=B2=D0=B0=D0?=
 =?UTF-8?q?=BD=D0=B8=D0=B5=20=D1=82=D0=B0=D0=B1=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Http/Controllers/Admin/EducationController.php |   10 +
 resources/views/admin/education/form.blade.php     |  394 +++++++++++++++++---
 .../views/admin/education/program-edit.blade.php   |   45 +++
 routes/web.php                                     |    4 +
 4 files changed, 404 insertions(+), 49 deletions(-)
 create mode 100644 resources/views/admin/education/program-edit.blade.php

diff --git a/app/Http/Controllers/Admin/EducationController.php b/app/Http/Controllers/Admin/EducationController.php
index 06d1243..56db14f 100644
--- a/app/Http/Controllers/Admin/EducationController.php
+++ b/app/Http/Controllers/Admin/EducationController.php
@@ -121,6 +121,16 @@ class EducationController extends Controller
         return redirect()->route('admin.education.edit', ['education' => $education]);
     }
 
+    public function edit_program(ProgramEducation $program, Education $education) {
+        $id_education = $education->id;
+        return view('admin.education.program-edit', compact('id_education',  'education', 'program'));
+    }
+
+    public function update_program(ProgramEducationRequest $request, ProgramEducation $program, Education $education) {
+        $program->update($request->all());
+        return redirect()->route('admin.education.edit', ['education' => $education]);
+    }
+
     public function delete_program(ProgramEducation $program, Education $education) {
         $education = $education->id;
         $program->delete();
diff --git a/resources/views/admin/education/form.blade.php b/resources/views/admin/education/form.blade.php
index e697afb..3f2a6ac 100644
--- a/resources/views/admin/education/form.blade.php
+++ b/resources/views/admin/education/form.blade.php
@@ -101,58 +101,106 @@
     </form>
 
     @isset($education)
-        <hr>
-        <h5 class="text-gray-700 dark:text-gray-400">Специалитеты и категории:</h5>
-        <form method="GET" action="{{ route('admin.add-program-education') }}">
-            <label class="block text-sm">
-                <span class="text-gray-700 dark:text-gray-400">Категория образования</span>
-                <input type="hidden" name="id" value="{{ $education->id }}"/>
-                <input name="level" id="level"
-                       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=""
-                /><br>
-                <button type="submit" id="btn_education" name="btn_education" 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>
-            </label><br>
-        </form>
-        <hr>
-        @if ($program->count())
-            @php $bool = true;
-                 $i = 1;
-                 $level = "";
-            @endphp
-
-            @foreach ($program as $pro)
-             @if ((!empty($level)) && ($level <> $pro->level ))
-                </div>
-                </div><br>
-                @php $bool = true; $i++; @endphp
-             @endif
-             @if ($bool == true)
-                <div class="tabs">
-                    <input type="radio" name="tab-btn" id="tab-btn-{{$i}}" value="" checked>
-                    <label for="tab-btn-{{$i}}">{{ $pro->level }}</label>
-                    <div id="content-{{$i}}">
-
-                @php $bool = false;
-                     $level = $pro->level;
-                @endphp
-             @endif
-                <label class="block text-sm">
-                    <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">Специальность: {{$pro->name}}</h4>
-                    <span class="text-gray-700 dark:text-gray-400">Описание: {{$pro->text}}</span>
-                    <a href="{{ route('admin.delete-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Удалить</a>
-                </label><br><hr>
-             @endforeach
+        <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>
-                </div><br>
-        @else
-             <span class="text-gray-700 dark:text-gray-400">Нет записей</span>
-        @endif
-    @endisset
+                </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)
+                        @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}}">
+                                        <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">
+                                                {{$pro->name}}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-3 text-sm">
+                                    <span class="text-gray-700 dark:text-gray-400">Описание: {{$pro->text}}</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>-->
@@ -163,3 +211,251 @@
         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 (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>
+
diff --git a/resources/views/admin/education/program-edit.blade.php b/resources/views/admin/education/program-edit.blade.php
new file mode 100644
index 0000000..0376d3c
--- /dev/null
+++ b/resources/views/admin/education/program-edit.blade.php
@@ -0,0 +1,45 @@
+@extends('layout.admin', ['title' => 'Админка - Образование - Редактирование программы обучения'])
+
+@section('content')
+    <form method="POST" action="{{ route('admin.update-program-education', ['program' => $program, 'education' => $education]) }}">
+        @csrf
+
+        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <input type="hidden" id="education_id" name="education_id" value="{{ $id_education }}"/>
+            <input type="hidden" id="level" name="level" value="{{ $program->name }}"/>
+
+            <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="Название специализации" required value="{{ old('name') ?? $program->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') ?? $program->text ?? '' }}</textarea>
+                @error('text')
+                <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>
+                </div>
+            </div>
+        </div>
+    </form>
+
+@endsection
diff --git a/routes/web.php b/routes/web.php
index b901f71..f3596f9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -228,6 +228,10 @@ Route::group([
 
     Route::get('program-education', [EducationController::class, 'add_program'])->name('add-program-education');
     Route::post('program-education', [EducationController::class, 'store_program'])->name('store-program-education');
+
+    Route::get('program-education/edit/{program}/{education}', [EducationController::class, 'edit_program'])->name('edit-program-education');
+    Route::post('program-education/edit/{program}/{education}', [EducationController::class, 'update_program'])->name('update-program-education');
+
     Route::get('program-education/delete/{program}/{education}', [EducationController::class, 'delete_program'])->name('delete-program-education');
 
     //Route::get('job-titles', [AdminController::class, 'index'])->name('job-titles');
-- 
1.7.10.4