editPack.blade.php 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. @extends('layouts.idara.panel')
  2. @section('content')
  3. <link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
  4. <link href="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.css" rel="stylesheet" type="text/css" />
  5. <link href="{{asset('pintura/pintura.scss')}}" rel="stylesheet" />
  6. <!-- Custom css -->
  7. <link href="{{asset('css/custom.css')}}" rel="stylesheet" />
  8. <link
  9. rel="stylesheet"
  10. href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"
  11. integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ=="
  12. crossorigin="anonymous"
  13. referrerpolicy="no-referrer"
  14. />
  15. @include('backend.partials.import')
  16. @include('backend.partials.features')
  17. <div class="card mt-4">
  18. <div class="card-header">
  19. Vous pouvez modifier
  20. </div>
  21. <div class="card-body">
  22. <div class="container">
  23. @if(session('success'))
  24. <div class="alert alert-success">
  25. {{ session('success') }}
  26. </div>
  27. @endif
  28. @if (count($errors) > 0)
  29. <div class="alert alert-danger">
  30. <strong>Whoops!</strong> Some problems with your input.<br><br>
  31. <ul>
  32. @foreach ($errors->all() as $error)
  33. <li>{{ $error }}</li>
  34. @endforeach
  35. </ul>
  36. </div>
  37. @endif
  38. <form action="{{url('promotion/pack/'.$article->id)}}" method="post" enctype="multipart/form-data">
  39. <input type="hidden" name="_method" value="PUT">
  40. @csrf
  41. <div class="row">
  42. <div class="form-group mt-4">
  43. <label for="exampleFormControlTextarea1"><strong>Titre de la promotion :</strong></label>
  44. <input type="text" class="form-control" id="" name="titre" placeholder="titre" value="{{$article->titre}}" required>
  45. </div>
  46. </div>
  47. <div class="form-group mt-4">
  48. <label for="exampleFormControlTextarea1"><strong>Remise :</strong></label>
  49. <input type="text" class="form-control" id="" name="remise" placeholder="la remise" value="{{$article->remise}}" required>
  50. </div>
  51. <div class="row">
  52. <div class="form-group mt-4 col-6">
  53. <label for="exampleFormControlTextarea1"><strong>Début de la promotion :</strong></label>
  54. <input class="form-control" type="datetime-local" id="debut" name="debut" value="{{$article->debut}}">
  55. </div>
  56. <div class="form-group mt-4 col-6">
  57. <label for="exampleFormControlTextarea1"><strong>Fin de la promotion :</strong></label>
  58. <input class="form-control" type="datetime-local" id="fin" name="fin" value="{{$article->fin}}">
  59. </div>
  60. </div>
  61. <div class="form-group mt-4">
  62. <label for="exampleFormControlTextarea1"><strong>description :</strong></label>
  63. <textarea class="form-control" id="presentation" name="description" rows="6">{{$article->description}}</textarea>
  64. </div>
  65. <div class="input-group mt-4 control-group increment" >
  66. <input type="file" name="image" class="my-pond form-control" />
  67. </div>
  68. <img src="{{ asset('storage/image/'.$article->image) }} " style="width:200px" alt="description of myimage">
  69. </div>
  70. <div class="form-group col-md-4 mt-4">
  71. <button type="submit" class="btn btn-success" style="margin-top:10px">Confirmer</button>
  72. </div>
  73. </form>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. @include('backend.partials.scriptIndex')
  79. <style>
  80. .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
  81. border-color: var(--ck-color-base-border);
  82. height: 300px;
  83. }
  84. </style>
  85. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  86. <script
  87. src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
  88. integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
  89. crossorigin="anonymous"
  90. referrerpolicy="no-referrer"
  91. ></script>
  92. <script>
  93. $(function () {
  94. $("#produits").selectize({
  95. plugins: ["auto_select_on_type"],
  96. });
  97. });
  98. </script>
  99. <script src="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
  100. <script src="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.js"></script>
  101. <script src="https://unpkg.com/filepond-plugin-file-validate-type@1.2.8/dist/filepond-plugin-file-validate-type.min.js"></script>
  102. <script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
  103. <script src="https://unpkg.com/filepond-plugin-image-exif-orientation@1.0.11/dist/filepond-plugin-image-exif-orientation.min.js"></script>
  104. <script type="module">
  105. var img_width = {{ config('app.IMG_HEIGHT') }} ;
  106. var img_height = {{ config('app.IMG_HEIGHT') }};
  107. var img_quality = {{ config('app.IMG_QUALITY') }};
  108. var img_ratio = {{ config('app.IMG_RATIO') }};
  109. var max_files = {{ config('app.MAX_FILES') }};
  110. var max_file_size = "{{ config('app.MAX_FILE_SIZE') }}B";
  111. var instant_upload = {{ config('app.INSTANT_UPLOAD') }};
  112. var pond_selector = '.my-pond';
  113. import {
  114. FilePondPluginImageEditor,
  115. } from '/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.js';
  116. // import Pintura Image Editor modules
  117. import {
  118. // Image editor
  119. openEditor,
  120. processImage,
  121. createDefaultImageReader,
  122. createDefaultImageWriter,
  123. createDefaultImageOrienter,
  124. // Only needed if loading legacy image editor data
  125. legacyDataToImageState,
  126. // Import the editor default configuration
  127. getEditorDefaults,
  128. } from '/pintura/pintura.js';
  129. // French
  130. import fr_FR from '/filepond/locale/fr-fr.js';
  131. FilePond.setOptions(fr_FR);
  132. // Register plugins
  133. FilePond.registerPlugin(
  134. FilePondPluginImageEditor,
  135. FilePondPluginFilePoster,
  136. FilePondPluginImageExifOrientation,
  137. FilePondPluginFileValidateType,
  138. FilePondPluginFileValidateSize,
  139. );
  140. FilePond.create(document.querySelector(pond_selector), {
  141. // Attributes
  142. name: 'image',
  143. maxFiles: max_files,
  144. allowFileSizeValidation: true,
  145. maxFileSize: max_file_size,
  146. allowBrowse: true,
  147. acceptedFileTypes: ['image/*'],
  148. dropOnPage: true,
  149. dropOnElement: true,
  150. instantUpload: instant_upload,
  151. // FilePond Image Editor plugin properties
  152. imageEditor: {
  153. // Maps legacy data objects to new imageState objects (optional)
  154. legacyDataToImageState: legacyDataToImageState,
  155. // Used to create the editor (required)
  156. createEditor: openEditor,
  157. // Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
  158. imageReader: [
  159. createDefaultImageReader,
  160. {
  161. // createDefaultImageReader options here
  162. },
  163. ],
  164. // Required when generating a preview thumbnail and/or output image
  165. imageWriter: [
  166. createDefaultImageWriter,
  167. {
  168. // We'll resize images to fit a 512 × 512 square
  169. targetSize: {
  170. width: img_width,
  171. height: img_height,
  172. },
  173. quality: img_quality,
  174. },
  175. ],
  176. // Used to create poster and output images, runs an invisible "headless" editor instance
  177. imageProcessor: processImage,
  178. // Pintura Image Editor options
  179. editorOptions: {
  180. // Pass the editor default configuration options
  181. ...getEditorDefaults(),
  182. // This will set a square crop aspect ratio
  183. imageCropAspectRatio: img_ratio,
  184. }
  185. }
  186. });
  187. FilePond.setOptions({
  188. server: {
  189. process: '/file-upload-promotion',
  190. revert: '/file-delete-promotion',
  191. headers:{
  192. 'X-CSRF-TOKEN': '{{ csrf_token() }}'}
  193. },
  194. });
  195. </script>
  196. @endsection