tifawt/resources/views/backend/promotion/editPack.blade.php

@extends('layouts.idara.panel')


@section('content')

<link href="https://unpkg.com/filepond@4.30.4/dist/filepond.min.css" rel="stylesheet" type="text/css" />
<link href="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.css" rel="stylesheet" type="text/css" />

<link href="{{asset('pintura/pintura.scss')}}" rel="stylesheet" />

<!-- Custom css -->
<link href="{{asset('css/custom.css')}}" rel="stylesheet" />
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"
  integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>
@include('backend.partials.import')

@include('backend.partials.features')



    <div class="card mt-4">
        <div class="card-header">
        Vous pouvez ajouter une image ou la modifie
        </div>
        <div class="card-body">
            

            <div class="container">
                @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
                @endif
                @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> Some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form action="{{url('promotion/pack/'.$article->id)}}" method="post" enctype="multipart/form-data">
                <input type="hidden" name="_method" value="PUT">
                @csrf
                    <div class="row">
                      
                    <div class="form-group mt-4">
                    <label for="exampleFormControlTextarea1"><strong>Titre de la promotion :</strong></label>

                        <input type="text" class="form-control" id="" name="titre" placeholder="titre" value="{{$article->titre}}" required>
                    </div>



                    </div>
                    <div class="form-group mt-4">
                    <label for="exampleFormControlTextarea1"><strong>Remise :</strong></label>
  
                            <input type="text" class="form-control" id="" name="remise" placeholder="la remise" value="{{$article->remise}}" required>
                      </div>
                      <div class="row">
                            <div class="form-group mt-4 col-6">
                            <label for="exampleFormControlTextarea1"><strong>Début de la promotion :</strong></label>

                            <input  class="form-control" type="datetime-local" id="debut" name="debut" value="{{$article->debut}}">
                            </div>

                            <div class="form-group mt-4 col-6">
                            <label for="exampleFormControlTextarea1"><strong>Fin de la promotion :</strong></label>

                            <input  class="form-control" type="datetime-local" id="fin" name="fin" value="{{$article->fin}}">
                            </div>
                      </div>

                    <div class="form-group mt-4">
                        <label for="exampleFormControlTextarea1"><strong>description :</strong></label>
                        <textarea class="form-control" id="presentation" name="description" rows="6">{{$article->description}}</textarea>
                    </div>
                    <div class="input-group mt-4 control-group increment" >
                        <input type="file" name="image" class="my-pond form-control"  />
           
                   </div>
           </div>
                    <div class="form-group col-md-4 mt-4">
                            <button type="submit" class="btn btn-success" style="margin-top:10px">Confirmer</button>
                        </div>
                    

                </form>
            </div>
        </div>
    </div>

</div>

@include('backend.partials.scriptIndex')

<style>
    .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
        border-color: var(--ck-color-base-border);
        height: 300px;
    }

</style>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
  integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script>
  $(function () {
    $("#produits").selectize({
  plugins: ["auto_select_on_type"],
});
  });
 
</script>



<script src="https://unpkg.com/filepond@4.30.4/dist/filepond.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-poster@2.5.1/dist/filepond-plugin-file-poster.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type@1.2.8/dist/filepond-plugin-file-validate-type.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size@2.2.8/dist/filepond-plugin-file-validate-size.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation@1.0.11/dist/filepond-plugin-image-exif-orientation.min.js"></script>





<script  type="module">
    var  img_width = 1080 ;
    var img_height = {{ env('IMG_HEIGHT') }};
    var img_quality = {{ env('IMG_QUALITY') }};
    var  img_ratio = {{ env('IMG_RATIO') }};
    var  max_files  = {{ env('MAX_FILES') }};
    var  max_file_size  = "{{ env('MAX_FILE_SIZE') }}B";
    var  instant_upload = {{ env('INSTANT_UPLOAD') }};
    var   pond_selector = '.my-pond';
import {
        FilePondPluginImageEditor,
    } from '/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.js';
	
// import Pintura Image Editor modules
import {
    // Image editor
    openEditor,
    processImage,
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,

    // Only needed if loading legacy image editor data
    legacyDataToImageState,

    // Import the editor default configuration
    getEditorDefaults,
} from '/pintura/pintura.js';

// French
import fr_FR from '/filepond/locale/fr-fr.js';

  

    
FilePond.setOptions(fr_FR);

// Register plugins
FilePond.registerPlugin(
    FilePondPluginImageEditor,
    FilePondPluginFilePoster,
    FilePondPluginImageExifOrientation,
    FilePondPluginFileValidateType,
    FilePondPluginFileValidateSize,
);



FilePond.create(document.querySelector(pond_selector), {
    // Attributes
    name: 'image',
    maxFiles: max_files,
    allowFileSizeValidation: true,
    maxFileSize: max_file_size,
    allowBrowse: true,
    acceptedFileTypes: ['image/*'],
    dropOnPage: true,
    dropOnElement: true,
    instantUpload: instant_upload,
    
    // FilePond Image Editor plugin properties
    imageEditor: {
        // Maps legacy data objects to new imageState objects (optional)
        legacyDataToImageState: legacyDataToImageState,

        // Used to create the editor (required)
        createEditor: openEditor,

        // Used for reading the image data. See JavaScript installation for details on the `imageReader` property (required)
        imageReader: [
            createDefaultImageReader,
            {
                // createDefaultImageReader options here
            },
        ],

        // Required when generating a preview thumbnail and/or output image
        imageWriter: [
            createDefaultImageWriter,
            {
                // We'll resize images to fit a 512 × 512 square
                targetSize: {
                    width: img_width,
                    height: img_height,
                },
                quality: img_quality,
            },
        ],

        // Used to create poster and output images, runs an invisible "headless" editor instance
        imageProcessor: processImage,

        // Pintura Image Editor options
        editorOptions: {
            // Pass the editor default configuration options
            ...getEditorDefaults(),

            // This will set a square crop aspect ratio
            imageCropAspectRatio: img_ratio,
        }
    }
});
            FilePond.setOptions({
            server: {
                    process: '/file-upload-promotion',
                    revert: '/file-delete-promotion',
                
                    headers:{
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'}
                    
                },
            });

</script>

@endsection