@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://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<div class="container">

    @include('backend.partials.features')
    <form action="{{url('categorie/'.$article->id)}}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="_method" value="PUT">
    @csrf
    <div class="card mt-4">
        <h5 class="card-header">Modifier</h5>
        <div class="card-body">
            <form action="{{url('categorie/'.$article->id)}}" method="post" enctype="multipart/form-data">
                <input type="hidden" name="_method" value="PUT">
                @csrf
                <div class="form-group">
                    <label for="exampleFormControlInput1"><strong>Nom de la catégorie : </strong></label>
                    <input type="text" class="form-control" name="nom" {{$article->nom== 'Logiciels' ? 'disabled' : '' }}  placeholder="" value="{{$article->nom}}" required>
                </div>
                <div class="form-group mt-4">

                <div class="input-group  control-group increment" >
                                 <input type="file" name="image" class="my-pond form-control " />

                            </div>
                        <img src="{{ asset('storage/image/'.$article->image) }} " style="width:200px" alt="description of myimage">

            </div>


        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            Réferencement
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="exampleFormControlInput1" class="mb-3"><strong>Titre(SEO)</strong></label>

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


            <div class="form-group mt-4">
                <label for="exampleFormControlInput1" class="mb-3"><strong>Mot clé (SEO)</strong></label>

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

        </div>
    </div>
    <div class="form-group  mt-4" style="text-align: end">
        <button type="submit" class="btn btn-success" style="margin-top:10px">Modifier</button>
    </div>
</form>
</div>



<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 = {{ config('app.IMG_WIDTH_CAT') }} ;
    var img_height = {{ config('app.IMG_HEIGHT_CAT') }};
    var img_quality = {{ config('app.IMG_QUALITY') }};
    var  img_ratio = {{ config('app.IMG_RATIO_CAT') }};
    var  max_files  = {{ config('app.MAX_FILES') }};
    var  max_file_size  = "{{ config('app.MAX_FILE_SIZE') }}B";
    var  instant_upload = {{ config('app.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,
       imageResizeUpscale: false,

       // 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-category',
                       revert: '/file-delete-category',

                       headers:{
                           'X-CSRF-TOKEN': '{{ csrf_token() }}'}

                   },
               });

   </script>


@endsection