Андрей Ларионов / rekamore.su

1

@csrf

1

@csrf

2

3

@isset($education)

3

@method('PUT')

4

@method('PUT')

5

@endisset

6

7

4

8

<form method="POST" action="{{ route('admin.education.update', ['education' => $education->id]) }}" enctype="multipart/form-data">

5

<form method="POST" action="{{ route('admin.education.update', ['education' => $education->id]) }}" enctype="multipart/form-data">

9

6

10

<span class="text-gray-700 dark:text-gray-400">Название учебного заведения</span>

7

<span class="text-gray-700 dark:text-gray-400">Название учебного заведения</span>

11

<input name="name" id="name"

8

<input name="name" id="name"

12

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"

9

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"

13

placeholder="Название учебного заведения" value="{{ old('name') ?? $education->name ?? '' }}"

10

placeholder="Название учебного заведения" value="{{ old('name') ?? $education->name ?? '' }}"

14

/>

11

/>

15

@error('name')

12

@error('name')

16

13

17

14

18

</span>

15

</span>

19

@enderror

16

@enderror

20

</label><br>

17

</label><br>

21

18

22

19

23

<span class="text-gray-700 dark:text-gray-400">Текст</span>

20

<span class="text-gray-700 dark:text-gray-400">Текст</span>

24

<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

21

<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

25

rows="10">{{ old('text') ?? $education->text ?? '' }}</textarea>

22

rows="10">{{ old('text') ?? $education->text ?? '' }}</textarea>

26

@error('text')

23

@error('text')

27

24

28

25

29

</span>

26

</span>

30

@enderror

27

@enderror

31

</label><br>

28

</label><br>

32

29

33

30

34

<span class="text-gray-700 dark:text-gray-400">Картинка</span>

31

<span class="text-gray-700 dark:text-gray-400">Картинка</span>

35

<input type="file" class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700

32

<input type="file" class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700

36

focus:border-purple-400 focus:outline-none focus:shadow-outline-purple

33

focus:border-purple-400 focus:outline-none focus:shadow-outline-purple

37

dark:text-gray-300 dark:focus:shadow-outline-gray form-input"

34

dark:text-gray-300 dark:focus:shadow-outline-gray form-input"

38

id="image" name="image" accept="image/png, image/jpeg">

35

id="image" name="image" accept="image/png, image/jpeg">

39

@error('image')

36

@error('image')

40

37

41

38

42

</span>

39

</span>

43

@enderror

40

@enderror

44

@isset($education->image)

41

@isset($education->image)

45

<img src="{{asset(Storage::url($education->image))}}" width="100px"/>

42

<img src="{{asset(Storage::url($education->image))}}" width="100px"/>

46

@endisset

43

@endisset

47

</label><br>

44

</label><br>

48

45

49

<hr>

46

<hr>

50

<h5 class="text-gray-700 dark:text-gray-400">Контакты: </h5>

47

<h5 class="text-gray-700 dark:text-gray-400">Контакты: </h5>

51

48

52

<span class="text-gray-700 dark:text-gray-400">Адрес</span>

49

<span class="text-gray-700 dark:text-gray-400">Адрес</span>

53

<input name="address" id="address"

50

<input name="address" id="address"

54

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"

51

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"

55

placeholder="Адрес" value="{{ old('address') ?? $education->address ?? '' }}"

52

placeholder="Адрес" value="{{ old('address') ?? $education->address ?? '' }}"

56

/>

53

/>

57

@error('address')

54

@error('address')

58

55

59

56

60

</span>

57

</span>

61

@enderror

58

@enderror

62

</label><br>

59

</label><br>

63

60

64

61

65

<span class="text-gray-700 dark:text-gray-400">Email</span>

62

<span class="text-gray-700 dark:text-gray-400">Email</span>

66

<input name="email" id="email"

63

<input name="email" id="email"

67

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"

64

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"

68

placeholder="Email" value="{{ old('email') ?? $education->email ?? '' }}"

65

placeholder="Email" value="{{ old('email') ?? $education->email ?? '' }}"

69

/>

66

/>

70

@error('email')

67

@error('email')

71

68

72

69

73

</span>

70

</span>

74

@enderror

71

@enderror

75

</label><br>

72

</label><br>

76

73

77

74

78

<span class="text-gray-700 dark:text-gray-400">Телефон</span>

75

<span class="text-gray-700 dark:text-gray-400">Телефон</span>

79

<input name="telephone" id="telephone"

76

<input name="telephone" id="telephone"

80

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"

77

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"

81

placeholder="Телефон" value="{{ old('telephone') ?? $education->telephone ?? '' }}"

78

placeholder="Телефон" value="{{ old('telephone') ?? $education->telephone ?? '' }}"

82

/>

79

/>

83

@error('telephone')

80

@error('telephone')

84

81

85

82

86

</span>

83

</span>

87

@enderror

84

@enderror

88

</label><br>

85

</label><br>

89

86

90

87

91

<div>

88

<div>

92

89

93

Сохранить

90

Сохранить

94

</button>

91

</button>

95

<a href="{{ route('admin.education.index') }}"

92

<a href="{{ route('admin.education.index') }}"

96

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"

93

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"

97

style="display: -webkit-inline-box; height: 30px!important;"

94

style="display: -webkit-inline-box; height: 30px!important;"

98

>Назад</a>

95

>Назад</a>

99

</div>

96

</div>

100

</div>

97

</div>

101

</form>

98

</form>

102

99

103

@isset($education)

100

@isset($education)

104

101

105

102

106

Программы образования

103

Программы образования

107

</h2>

104

</h2>

108

105

109

106

110

107

111

108

112

109

113

<!-- For disabled buttons ADD these classes: opacity-50 cursor-not-allowed

110

<!-- For disabled buttons ADD these classes: opacity-50 cursor-not-allowed

114

And REMOVE these classes: active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple -->

111

And REMOVE these classes: active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple -->

115

112

116

113

117

</div>

114

</div>

118

</label>

115

</label>

119

</form>

116

</form>

120

117

121

@if ($program->count())

118

@if ($program->count())

122

@php $bool = true;

119

@php $bool = true;

123

$i = 1;

120

$i = 1;

124

$level = "";

121

$level = "";

125

@endphp

122

@endphp

126

123

127

@foreach ($program as $pro)

124

@foreach ($program as $pro)

128

@if ((!empty($level)) && ($level <> $pro->level ))

125

@if ((!empty($level)) && ($level <> $pro->level ))

129

@php $bool = true; $i++; @endphp

126

@php $bool = true; $i++; @endphp

130

@endif

127

@endif

131

@if ($bool == true)

128

@if ($bool == true)

132

<div>

129

<div>

133

<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>

130

<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>

134

</div>

131

</div>

135

@php $bool = false;

132

@php $bool = false;

136

$level = $pro->level;

133

$level = $pro->level;

137

@endphp

134

@endphp

138

@endif

135

@endif

139

@endforeach

136

@endforeach

140

@endif

137

@endif

141

</div>

138

</div>

142

139

143

@if ($program->count())

140

@if ($program->count())

144

@php $bool = true;

141

@php $bool = true;

145

$i = 1;

142

$i = 1;

146

$level = "";

143

$level = "";

147

@endphp

144

@endphp

148

145

149

@foreach ($program as $pro)

146

@foreach ($program as $pro)

150

@php $name_tab = $pro->level; @endphp

147

@php $name_tab = $pro->level; @endphp

151

@if ((!empty($level)) && ($level <> $pro->level))

148

@if ((!empty($level)) && ($level <> $pro->level))

152

</tbody>

149

</tbody>

153

</table>

150

</table>

154

</div>

151

</div>

155

@php $bool = true; $i++; @endphp

152

@php $bool = true; $i++; @endphp

156

@endif

153

@endif

157

154

158

@if ($bool == true)

155

@if ($bool == true)

159

<div class="tabs__item js_tabs_item @php echo($i>1) ? 'hidden' : ''; @endphp" data-id="{{$i}}">

156

<div class="tabs__item js_tabs_item @php echo($i>1) ? 'hidden' : ''; @endphp" data-id="{{$i}}">

160

157

161

<div>

158

<div>

162

159

163

160

164

<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>

161

<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>

165

</div>

162

</div>

166

</form>

163

</form>

167

164

168

<thead>

165

<thead>

169

<tr

166

<tr

170

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"

167

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"

171

>

168

>

172

<th class="px-4 py-3">Специализация</th>

169

<th class="px-4 py-3">Специализация</th>

173

<th class="px-4 py-3">Описание</th>

170

<th class="px-4 py-3">Описание</th>

174

<th class="px-4 py-3">Редактирование</th>

171

<th class="px-4 py-3">Редактирование</th>

175

172

176

</tr>

173

</tr>

177

</thead>

174

</thead>

178

<tbody

175

<tbody

179

class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"

176

class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"

180

>

177

>

181

@php $bool = false;

178

@php $bool = false;

182

$level = $pro->level;

179

$level = $pro->level;

183

@endphp

180

@endphp

184

@endif

181

@endif

185

182

186

183

187

184

188

<div>

185

<div>

189

<p class="font-semibold">Специальность: </p>

186

<p class="font-semibold">Специальность: </p>

190

187

191

188

192

</p>

189

</p>

193

</div>

190

</div>

194

</div>

191

</div>

195

</td>

192

</td>

196

193

197

<span class="text-gray-700 dark:text-gray-400">Описание: {{ mb_strimwidth($pro->text, 0, 100, "...")}}</span>

194

<span class="text-gray-700 dark:text-gray-400">Описание: {{ mb_strimwidth($pro->text, 0, 100, "...")}}</span>

198

</td>

195

</td>

199

196

200

<a href="{{ route('admin.edit-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Изменить</a> |

197

<a href="{{ route('admin.edit-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Изменить</a> |

201

<a href="{{ route('admin.delete-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Удалить</a>

198

<a href="{{ route('admin.delete-program-education', ['program' => $pro->id, 'education' => $education->id]) }}">Удалить</a>

202

</td>

199

</td>

203

</tr>

200

</tr>

204

@endforeach

201

@endforeach

205

@endif

202

@endif

206

</div>

203

</div>

207

</div>

204

</div>

208

@endisset

205

@endisset

209

</div>

206

</div>

210

207

211

208

212

209

213

210

214

211

215

CKEDITOR.replace( 'text', {

212

CKEDITOR.replace( 'text', {

216

filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",

213

filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",

217

filebrowserImageUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",

214

filebrowserImageUploadUrl: "{{ route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",

218

filebrowserUploadMethod: 'form'

215

filebrowserUploadMethod: 'form'

219

});

216

});

220

</script>

217

</script>

221

218

222

window.addEventListener('DOMContentLoaded', () => {

219

window.addEventListener('DOMContentLoaded', () => {

223

220

224

setTabs(3);

221

setTabs(3);

225

222

226

function setTabs(qty) {

223

function setTabs(qty) {

227

224

228

const tabs = document.querySelector('.js_tabs');

225

const tabs = document.querySelector('.js_tabs');

229

const tabsForm = tabs.querySelector('.js_tabs_form');

226

const tabsForm = tabs.querySelector('.js_tabs_form');

230

const tabsInput = tabs.querySelector('.js_tabs_input');

227

const tabsInput = tabs.querySelector('.js_tabs_input');

231

const tabsSubmitBtn = tabs.querySelector('.js_tabs_submit_btn');

228

const tabsSubmitBtn = tabs.querySelector('.js_tabs_submit_btn');

232

const tabsButtons = tabs.querySelector('.js_tabs_buttons');

229

const tabsButtons = tabs.querySelector('.js_tabs_buttons');

233

const tabsContent = tabs.querySelector('.js_tabs_content');

230

const tabsContent = tabs.querySelector('.js_tabs_content');

234

231

235

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

232

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

236

233

237

//e.preventDefault();

234

//e.preventDefault();

238

235

239

const tabsInputValue = tabsInput.value;

236

const tabsInputValue = tabsInput.value;

240

const tabsBtns = tabsButtons.querySelectorAll('.js_tabs_btn');

237

const tabsBtns = tabsButtons.querySelectorAll('.js_tabs_btn');

241

const id = Date.now();

238

const id = Date.now();

242

239

243

240

244

if (tabsBtns.length >= qty) {

241

if (tabsBtns.length >= qty) {

245

console.log('Ветка выполнена');

242

console.log('Ветка выполнена');

246

e.preventDefault();

243

e.preventDefault();

247

}

244

}

248

245

249

if (tabsInput.dataset.edit) {

246

if (tabsInput.dataset.edit) {

250

247

251

tabsBtns.forEach(btn => {

248

tabsBtns.forEach(btn => {

252

if (tabsInput.dataset.edit === btn.dataset.id) {

249

if (tabsInput.dataset.edit === btn.dataset.id) {

253

console.log('oldname: '+btn.textContent+' newname: '+tabsInputValue+' id_education: '+<?=$education->id?>+'');

250

console.log('oldname: '+btn.textContent+' newname: '+tabsInputValue+' id_education: '+<?=$education->id?>+'');

254

$.ajax({

251

$.ajax({

255

url: '{{ route('admin.rename-program-education') }}',

252

url: '{{ route('admin.rename-program-education') }}',

256

method: 'get', /* Метод запроса (post или get) */

253

method: 'get', /* Метод запроса (post или get) */

257

dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */

254

dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */

258

data: {oldname: btn.textContent, newname:tabsInputValue, id_education: <?=$education->id?>}, /* Данные передаваемые в массиве */

255

data: {oldname: btn.textContent, newname:tabsInputValue, id_education: <?=$education->id?>}, /* Данные передаваемые в массиве */

259

success: function(data){ /* функция которая будет выполнена после успешного запроса. */

256

success: function(data){ /* функция которая будет выполнена после успешного запроса. */

260

console.log(data); /* В переменной data содержится ответ от index.php. */

257

console.log(data); /* В переменной data содержится ответ от index.php. */

261

}

258

}

262

});

259

});

263

260

264

btn.textContent = tabsInputValue;

261

btn.textContent = tabsInputValue;

265

btn.dataset.btn = tabsInputValue;

262

btn.dataset.btn = tabsInputValue;

266

}

263

}

267

});

264

});

268

console.log('Эта ветка выполнилась');

265

console.log('Эта ветка выполнилась');

269

tabsInput.removeAttribute('data-edit');

266

tabsInput.removeAttribute('data-edit');

270

267

271

} else {

268

} else {

272

269

273

if (!tabsBtns.length) {

270

if (!tabsBtns.length) {

274

tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);

271

tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);

275

//tabsContent.innerHTML += getTabsItemTemplate(id);

272

//tabsContent.innerHTML += getTabsItemTemplate(id);

276

}

273

}

277

274

278

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

275

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

279

276

280

let isMatch = false;

277

let isMatch = false;

281

278

282

tabsBtns.forEach(btn => {

279

tabsBtns.forEach(btn => {

283

if (tabsInputValue === btn.dataset.btn) {

280

if (tabsInputValue === btn.dataset.btn) {

284

isMatch = true;

281

isMatch = true;

285

}

282

}

286

});

283

});

287

284

288

console.log('Альтернативная ветка!');

285

console.log('Альтернативная ветка!');

289

if (!isMatch) {

286

if (!isMatch) {

290

tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);

287

tabsButtons.innerHTML += getTabsBtnTemplate(tabsInputValue, id);

291

tabsContent.innerHTML += getTabsItemTemplate(id, 'hidden');

288

tabsContent.innerHTML += getTabsItemTemplate(id, 'hidden');

292

}

289

}

293

}

290

}

294

}

291

}

295

292

296

//tabsInput.value = '';

293

//tabsInput.value = '';

297

addDisabledBtnStatus(tabsSubmitBtn);

294

addDisabledBtnStatus(tabsSubmitBtn);

298

295

299

});

296

});

300

297

301

tabsInput.addEventListener('input', () => {

298

tabsInput.addEventListener('input', () => {

302

if (tabsInput.value !== '') {

299

if (tabsInput.value !== '') {

303

removeDisabledBtnStatus(tabsSubmitBtn);

300

removeDisabledBtnStatus(tabsSubmitBtn);

304

} else {

301

} else {

305

addDisabledBtnStatus(tabsSubmitBtn);

302

addDisabledBtnStatus(tabsSubmitBtn);

306

}

303

}

307

});

304

});

308

305

309

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

306

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

310

307

311

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

308

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

312

309

313

if (target) {

310

if (target) {

314

311

315

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

312

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

316

313

317

tabsItems.forEach(item => {

314

tabsItems.forEach(item => {

318

315

319

item.classList.add('hidden');

316

item.classList.add('hidden');

320

317

321

if (target.dataset.id === item.dataset.id) {

318

if (target.dataset.id === item.dataset.id) {

322

item.classList.remove('hidden');

319

item.classList.remove('hidden');

323

}

320

}

324

});

321

});

325

}

322

}

326

323

327

});

324

});

328

325

329

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

326

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

330

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

327

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

331

328

332

if (target) {

329

if (target) {

333

tabsInput.value = target.dataset.btn;

330

tabsInput.value = target.dataset.btn;

334

tabsInput.dataset.edit = target.dataset.id;

331

tabsInput.dataset.edit = target.dataset.id;

335

removeDisabledBtnStatus(tabsSubmitBtn);

332

removeDisabledBtnStatus(tabsSubmitBtn);

336

}

333

}

337

});

334

});

338

335

339

function getTabsBtnTemplate(btnName, id) {

336

function getTabsBtnTemplate(btnName, id) {

340

return `

337

return `

341

<div>

338

<div>

342

<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>

339

<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>

343

</div>

340

</div>

344

`;

341

`;

345

}

342

}

346

343

347

function getTabsItemTemplate(id, className = '') {

344

function getTabsItemTemplate(id, className = '') {

348

return `

345

return `

349

346

350

347

351

348

352

<thead>

349

<thead>

353

<tr

350

<tr

354

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"

351

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"

355

>

352

>

356

<th class="px-4 py-3">Client</th>

353

<th class="px-4 py-3">Client</th>

357

<th class="px-4 py-3">Amount</th>

354

<th class="px-4 py-3">Amount</th>

358

<th class="px-4 py-3">Status</th>

355

<th class="px-4 py-3">Status</th>

359

356

360

</tr>

357

</tr>

361

</thead>

358

</thead>

362

<tbody

359

<tbody

363

class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"

360

class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"

364

>

361

>

365

362

366

363

367

364

368

365

369

<div

366

<div

370

class="relative hidden w-8 h-8 mr-3 rounded-full md:block"

367

class="relative hidden w-8 h-8 mr-3 rounded-full md:block"

371

>

368

>

372

<img

369

<img

373

class="object-cover w-full h-full rounded-full"

370

class="object-cover w-full h-full rounded-full"

374

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"

371

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"

375

alt=""

372

alt=""

376

loading="lazy"

373

loading="lazy"

377

/>

374

/>

378

<div

375

<div

379

class="absolute inset-0 rounded-full shadow-inner"

376

class="absolute inset-0 rounded-full shadow-inner"

380

aria-hidden="true"

377

aria-hidden="true"

381

></div>

378

></div>

382

</div>

379

</div>

383

<div>

380

<div>

384

<p class="font-semibold">Hans Burger</p>

381

<p class="font-semibold">Hans Burger</p>

385

382

386

10x Developer

383

10x Developer

387

</p>

384

</p>

388

</div>

385

</div>

389

</div>

386

</div>

390

</td>

387

</td>

391

388

392

$ 863.45

389

$ 863.45

393

</td>

390

</td>

394

391

395

<span

392

<span

396

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"

393

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"

397

>

394

>

398

Approved

395

Approved

399

</span>

396

</span>

400

</td>

397

</td>

401

398

402

6/10/2020

399

6/10/2020

403

</td>

400

</td>

404

</tr>

401

</tr>

405

402

406

403

407

404

408

405

409

406

410

<div

407

<div

411

class="relative hidden w-8 h-8 mr-3 rounded-full md:block"

408

class="relative hidden w-8 h-8 mr-3 rounded-full md:block"

412

>

409

>

413

<img

410

<img

414

class="object-cover w-full h-full rounded-full"

411

class="object-cover w-full h-full rounded-full"

415

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"

412

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"

416

alt=""

413

alt=""

417

loading="lazy"

414

loading="lazy"

418

/>

415

/>

419

<div

416

<div

420

class="absolute inset-0 rounded-full shadow-inner"

417

class="absolute inset-0 rounded-full shadow-inner"

421

aria-hidden="true"

418

aria-hidden="true"

422

></div>

419

></div>

423

</div>

420

</div>

424

<div>

421

<div>

425

<p class="font-semibold">Jolina Angelie</p>

422

<p class="font-semibold">Jolina Angelie</p>

426

423

427

Unemployed

424

Unemployed

428

</p>

425

</p>

429

</div>

426

</div>

430

</div>

427

</div>

431

</td>

428

</td>

432

429

433

$ 369.95

430

$ 369.95

434

</td>

431

</td>

435

432

436

<span

433

<span

437

class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600"

434

class="px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:text-white dark:bg-orange-600"

438

>

435

>

439

Pending

436

Pending

440

</span>

437

</span>

441

</td>

438

</td>

442

439

443

6/10/2020

440

6/10/2020

444

</td>

441

</td>

445

</tr>

442

</tr>

446

</tbody>

443

</tbody>

447

</table>

444

</table>

448

445

449

446

450

<div>

447

<div>

451

<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>

448

<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>

452

</div>

449

</div>

453

<div>

450

<div>

454

<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>

451

<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>

455

</div>

452

</div>

456

</div>

453

</div>

457

</div>

454

</div>

458

`;

455

`;

459

}

456

}

460

457

461

function addDisabledBtnStatus(btn) {

458

function addDisabledBtnStatus(btn) {

462

btn.disabled = true;

459

btn.disabled = true;

463

btn.classList.add('opacity-50', 'cursor-not-allowed');

460

btn.classList.add('opacity-50', 'cursor-not-allowed');

464

btn.classList.remove('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');

461

btn.classList.remove('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');

465

}

462

}

466

463

467

function removeDisabledBtnStatus(btn) {

464

function removeDisabledBtnStatus(btn) {

468

btn.disabled = false;

465

btn.disabled = false;

469

btn.classList.remove('opacity-50', 'cursor-not-allowed');

466

btn.classList.remove('opacity-50', 'cursor-not-allowed');

470

btn.classList.add('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');

467

btn.classList.add('active:bg-purple-600', 'hover:bg-purple-700', 'focus:shadow-outline-purple');

471

}

468

}

472

469

473

}

470

}

474

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

471

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

475

472

476

});

473

});

477

474

478

</script>

475

</script>

479

476

480

477

GITLAB

Андрей Ларионов / rekamore.su

Фиксы для страниц редактирвоания образования

 @csrf
-@isset($education)
+@method('PUT')
-    @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) {
              console.log('oldname: '+btn.textContent+' newname: '+tabsInputValue+' id_education: '+<?=$education->id?>+'');
              $.ajax({
                  url: '{{ route('admin.rename-program-education') }}',
                  method: 'get',             /* Метод запроса (post или get) */
                  dataType: 'html',          /* Тип данных в ответе (xml, json, script, html). */
                  data: {oldname: btn.textContent, newname:tabsInputValue, id_education: <?=$education->id?>},     /* Данные передаваемые в массиве */
                  success: function(data){   /* функция которая будет выполнена после успешного запроса.  */
                      console.log(data); /* В переменной data содержится ответ от index.php. */
                  }
              });
              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>

 @extends('layout.admin', ['title' => 'Админка - Справочник образование'])
 @section('script')
     <script>
         const btns = document.querySelectorAll('.btn_del');
         btns.forEach(btn => {
             btn.addEventListener('click', (e) => {
                 console.log('click button');
                 let id = e.target.id;
                 let form = document.getElementById("form_modal_del");
-                form.action = "<?=$_SERVER['APP_URL']?>admin/education/"+e.target.getAttribute('data-education');
+                let action_template = form.getAttribute("data-action-template");
+                form.action = action_template + "/" + e.target.getAttribute('data-education');
                 //document.getElementById("title_modal").innerHTML = id;
                 console.log(e.target.getAttribute('data-education'));
             });
         });
     </script>
 @endsection
 @section('modal')
     @include('admin.education.modal')
 @endsection
 @section('search')
 @endsection
 @section('content')
     <a href="{{ route('admin.education.create') }}" style="width: 195px" 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">
         Добавить образование
     </a>
     <br>
     <div class="w-full overflow-hidden rounded-lg shadow-xs" id="ajax_block">
         <div class="w-full overflow-x-auto">
             <table class="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>
                     <th class="px-4 py-3">Дата создан/изменен</th>
                 </tr>
                 </thead>
                 <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                 @foreach($education as $cat)
                     <tr class="text-gray-700 dark:text-gray-400">
                         <td class="px-4 py-3 text-xs">
                             {{$cat->id}}
                         </td>
                         <td class="px-4 py-3 text-xs">
                             {{ mb_strimwidth($cat->name, 0, 50, "...") }}
                         </td>
                         <td class="px-4 py-3 text-sm_ text-xs">
                             @if ($cat->id)
                               <a href="{{ route('admin.education.edit', ['education' => $cat->id]) }}">Изменить</a>
                             | <a @click="openModal" style="cursor: pointer;" data-education="{{$cat->id}}" class="btn_del btn btn-danger">Удалить</a>
                             @endif
                         </td>
                          <td class="px-4 py-3 text-xs">
                              <div class="flex items-center text-sm">
                                  <div>
                                      <p class="font-semibold">{{ date('d.m.Y', strtotime($cat->created_at)) }}</p>
                                      <p class="text-xs text-gray-600 dark:text-gray-400">
                                          {{ date('d.m.Y', strtotime($cat->updated_at)) }}
                                      </p>
                                  </div>
                              </div>
                         </td>
                     </tr>
                 @endforeach
                 </tbody>
             </table>
         </div>
         <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
             <?=$education->appends($_GET)->links('admin.pagginate'); ?>
         </div>
     </div>
 @endsection

1	<!-- Modal backdrop. This what you want to place close to the closing body tag -->	1	<!-- Modal backdrop. This what you want to place close to the closing body tag -->
2	<div	2	<div
3	x-show="isModalOpen"	3	x-show="isModalOpen"
4	x-transition:enter="transition ease-out duration-150"	4	x-transition:enter="transition ease-out duration-150"
5	x-transition:enter-start="opacity-0"	5	x-transition:enter-start="opacity-0"
6	x-transition:enter-end="opacity-100"	6	x-transition:enter-end="opacity-100"
7	x-transition:leave="transition ease-in duration-150"	7	x-transition:leave="transition ease-in duration-150"
8	x-transition:leave-start="opacity-100"	8	x-transition:leave-start="opacity-100"
9	x-transition:leave-end="opacity-0"	9	x-transition:leave-end="opacity-0"
10	class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"	10	class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
11	>	11	>
12	<!-- Modal -->	12	<!-- Modal -->
13	<div	13	<div
14	x-show="isModalOpen"	14	x-show="isModalOpen"
15	x-transition:enter="transition ease-out duration-150"	15	x-transition:enter="transition ease-out duration-150"
16	x-transition:enter-start="opacity-0 transform translate-y-1/2"	16	x-transition:enter-start="opacity-0 transform translate-y-1/2"
17	x-transition:enter-end="opacity-100"	17	x-transition:enter-end="opacity-100"
18	x-transition:leave="transition ease-in duration-150"	18	x-transition:leave="transition ease-in duration-150"
19	x-transition:leave-start="opacity-100"	19	x-transition:leave-start="opacity-100"
20	x-transition:leave-end="opacity-0 transform translate-y-1/2"	20	x-transition:leave-end="opacity-0 transform translate-y-1/2"
21	@click.away="closeModal"	21	@click.away="closeModal"
22	@keydown.escape="closeModal"	22	@keydown.escape="closeModal"
23	class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl"	23	class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl"
24	role="dialog"	24	role="dialog"
25	id="modal"	25	id="modal"
26	>	26	>
27	<!-- Remove header if you don't want a close icon. Use modal body to place modal tile. -->	27	<!-- Remove header if you don't want a close icon. Use modal body to place modal tile. -->
28	<header class="flex justify-end">	28	<header class="flex justify-end">
29	<button	29	<button
30	class="inline-flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 rounded dark:hover:text-gray-200 hover: hover:text-gray-700"	30	class="inline-flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 rounded dark:hover:text-gray-200 hover: hover:text-gray-700"
31	aria-label="close"	31	aria-label="close"
32	@click="closeModal"	32	@click="closeModal"
33	>	33	>
34	<svg	34	<svg
35	class="w-4 h-4"	35	class="w-4 h-4"
36	fill="currentColor"	36	fill="currentColor"
37	viewBox="0 0 20 20"	37	viewBox="0 0 20 20"
38	role="img"	38	role="img"
39	aria-hidden="true"	39	aria-hidden="true"
40	>	40	>
41	<path	41	<path
42	d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"	42	d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
43	clip-rule="evenodd"	43	clip-rule="evenodd"
44	fill-rule="evenodd"	44	fill-rule="evenodd"
45	></path>	45	></path>
46	</svg>	46	</svg>
47	</button>	47	</button>
48	</header>	48	</header>
49	<!-- Modal body -->	49	<!-- Modal body -->
50	<div class="mt-4 mb-6">	50	<div class="mt-4 mb-6">
51	<!-- Modal title -->	51	<!-- Modal title -->
52	<p	52	<p
53	class="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300"	53	class="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300"
54	>	54	>
55	Вы действительно хотите удалить это учебное заведение?	55	Вы действительно хотите удалить это учебное заведение?
56	</p>	56	</p>
57	<!-- Modal description -->	57	<!-- Modal description -->
58	<p class="text-sm text-gray-700 dark:text-gray-400">	58	<p class="text-sm text-gray-700 dark:text-gray-400">
59	Это приведет к удалению всей информации об учебном учреждении	59	Это приведет к удалению всей информации об учебном учреждении
60	</p>	60	</p>
61	</div>	61	</div>
62	<footer	62	<footer
63	class="flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-50 dark:bg-gray-800"	63	class="flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-50 dark:bg-gray-800"
64	>	64	>
65	<button	65	<button
66	@click="closeModal"	66	@click="closeModal"
67	class="w-full px-5 py-3 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 sm:px-4 sm:py-2 sm:w-auto active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"	67	class="w-full px-5 py-3 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 sm:px-4 sm:py-2 sm:w-auto active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
68	>	68	>
69	Отмена	69	Отмена
70	</button>	70	</button>
71	<form id="form_modal_del" name="form_modal_del" action="admin/education/{education}" method="POST">	71	<form id="form_modal_del" name="form_modal_del" data-action-template="{{ route('admin.education.index') }}" action="" method="POST">
72	@csrf	72	@csrf
73	@method('DELETE')	73	@method('DELETE')
74	<button	74	<button
75	type="submit"	75	type="submit"
76	class="w-full px-5 py-3 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg sm:w-auto sm:px-4 sm:py-2 active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"	76	class="w-full px-5 py-3 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg sm:w-auto sm:px-4 sm:py-2 active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
77	>	77	>
78	Удалить	78	Удалить
79	</button>	79	</button>
80	</form>	80	</form>
81	</footer>	81	</footer>
82	</div>	82	</div>
83	</div>	83	</div>
84		84