@extends('admin.partial.template-full') @section('section') </div> <div class="header bg-primary pb-3 mt-n4"> <div class="container-fluid"> <div class="header-body"> <div class="row align-items-center py-4"> <div class="col-lg-6 col-7"> <p class="display-1 text-white">Edit Page</p> <p class="lead text-white mt-n4 mb-0">{{$page->slug}}</p> </div> </div> </div> </div> </div> <div class="container-fluid mt-4"> <input type="hidden" id="slug" name="slug" value="{{$page->slug}}"> <input class="form-control form-control-lg" id="title" name="title" placeholder="Title"> <p class="small text-muted"> Page URL: <span class="page-url font-weight-bold">{{$page->url()}}</span> {{-- <span class="pl-1"><a href="#" class="font-weight-bold">Edit</a></span> --}} </p> <div id="editor" class="d-none" style="height: 400px"> {!!$page->content!!} </div> <div id="rawEditor" style="height: 400px"> <label class="font-weight-bold">Raw HTML</label> <textarea class="form-control" rows="8" id="rawText" v-pre>{{$page->content}}</textarea> </div> <div class="mt-3 d-flex justify-content-between"> <div> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="activeSwitch" {{$page->active?'checked="true"':''}}> <label class="custom-control-label font-weight-bold" for="activeSwitch">Active</label> </div> {{-- <a class="btn btn-light font-weight-bold py-0" href="#">Set Expire Date</a> --}} </div> <div> {{-- <a class="btn btn-light font-weight-bold py-0" href="#">Preview</a> --}} <a class="btn btn-outline-danger font-weight-bold py-0 btn-delete" href="#">Delete</a> <a class="btn btn-primary font-weight-bold py-0 btn-save" href="#">Save</a> </div> </div> </div> </div> @endsection @push('styles') <style type="text/css"> .ql-container { box-sizing: border-box; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size: 16px; height: 100%; margin: 0px; position: relative; } .custom-control { padding-left: 3.5rem; } </style> @endpush @push('scripts') <script> window.useRaw = true; $('.btn-save').on('click', function(e) { e.preventDefault(); let confirm = window.confirm('Are you sure you want to save this page?'); if(confirm !== true) { return; } let html = window.useRaw ? $('#rawText').val() : editor.root.innerHTML; let title = $('#title').val(); let active = $('#activeSwitch')[0].checked; axios.post(window.location.href, { slug: '{{$page->slug}}', title: title, content: html, active: active }).then((res) => { window.location.href = '{{$page->url()}}'; }).catch((err) => { console.log(err) }); }); $('.btn-delete').on('click', function(e) { e.preventDefault(); let confirm = window.confirm('Are you sure you want to delete this page?'); if(confirm == true) { axios.post('/i/admin/settings/pages/delete', { id: '{{$page->id}}' }).then(res => { window.location.href = '/i/admin/settings/pages'; }).catch(err => { swal('Error', 'An error occured!', 'error'); console.log(err); }); } }); $('#title').on('change input', function(e) { e.preventDefault(); let title = this.value.split(' ').join('-').toLowerCase(); }) </script> @endpush