first commit

resources/views/crud/generated/quicklinks/create.blade.php

@@ -0,0 +1,108 @@
+@extends('backend.template')
+@section('content')
+    <!-- start page title -->
+    <div class="row">
+        <div class="col-12">
+            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
+                <h4 class="mb-sm-0">Add Quick Links </h4>
+
+
+                <div class="page-title-right">
+                    <ol class="breadcrumb m-0">
+                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboards</a></li>
+                        <li class="breadcrumb-item active">Add Quick Links </li>
+                    </ol>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <!-- end page title -->
+    <form action="{{ route('quicklinks.store') }}" id="storeCustomForm" method="POST">
+        @csrf
+        <div class="row">
+            <div class="col-md-8">
+                <div class='card'>
+                    <div class='card-body'>
+                        <div class="row">
+                            <div class="col-lg-12">
+                                {{ createText('title', 'title', 'Title', '') }}
+                            </div>
+
+
+                            <div class="col-lg-12">
+                                <label class="col-form-label">Thumbnail</label>
+                                {{ createImageInput('thumb', 'Thumb', '') }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-footer text-end">
+                        <button type="submit" class="btn btn-primary">Submit</button>
+                        <a href="{{ route('quicklinks.index') }}" class="btn btn-danger">Cancel</a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="card-title mb-0">Video</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-lg-12">
+                                <div class="input-group">
+                                    <span class="input-group-btn">
+                                        <a id="lfm" data-input="link_url" data-preview="linkholder"
+                                            class="btn btn-primary">
+                                            <i class="fa fa-picture-o"></i> Upload
+                                        </a>
+                                    </span>
+                                    <input id="link_url" class="form-control lfm" type="text" name="link">
+                                </div>
+                                <div class="d-flex flex-wrap mt-3 d-none" id="video-preview-row">
+                                    <iframe id="video-preview" width="100%" height="150" frameborder="0"></iframe>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+@endsection
+
+@push('js')
+    <script type="text/javascript">
+        $(document).ready(function() {
+
+            const route = "{{ config('app.url') }}/files";
+            $('#lfm').filemanager('file', {
+                prefix: route
+            });
+
+            $(document).on('change input paste', '#link_url', function() {
+
+                const url = $(this).val();
+
+                $('#video-preview-row').removeClass('d-none');
+
+                if (url.includes("https://www.youtube.com/watch")) {
+
+                    const videoId = url.substring(url.indexOf("v=") + 2);
+                    console.log(videoId);
+
+                    if ($('#video-preview').length) {
+                        $('#video-preview').attr('src', `https://www.youtube.com/embed/${videoId}`);
+                    }
+
+                } else {
+                    if ($('#video-preview').length) {
+                        $('#video-preview').attr('src', $(this).val());
+                    }
+
+                }
+            });
+
+        });
+    </script>
+@endpush