@extends('layouts.idara.panel')


@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"" />
    <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">

    <form action="{{ url('produit/' . $article->id) }}" method="post" enctype="multipart/form-data">
         <input type="hidden" name="_method" value="PUT">
                    @csrf
        <div class="container">
            @include('backend.partials.features')
            <div class="card mt-4">
                <h5 class="card-header">Modifier</h5>
                <div class="card-body">


                    <div class="form-group">
                        <label for="exampleFormControlInput1"><strong>Nom : </strong></label>
                        <input type="text" class="form-control" name="nom" placeholder="" value="{{ $article->nom }}"
                            required>
                    </div>


                    <div class="form-group mt-4">
                        <label for="exampleFormControlInput1"><strong>Categorie : </strong></label>
                        <select multiple onchange="optionCheck()" class="form-control" name="categories[]" id="categories"
                            class="categorie" aria-describedby="validationServer04Feedback" style=" margin-bottom: 40px;"
                            required>

                            @foreach ($article->categories as $singleTag)
                                <option value="" selected> {{ $singleTag->nom }}</option>
                            @endforeach





                            @foreach ($categories as $categorie)
                                @if ($article->categories->contains($categorie->id))
                                    <option value="{{ $categorie->id }}" selected> {{ $categorie->nom }}</option>
                                @else
                                    <option value="{{ $categorie->id }}"
                                        {{ old('categorie') == $categorie->id ? 'selected' : '' }}>{{ $categorie->nom }}
                                    </option>
                                @endif
                            @endforeach


                        </select>
                    </div>

                    <div class="form-group  mt-4">

                        <label for="exampleFormControlTextarea1"><strong>description : </strong></label>
                        <textarea class="form-control" id="presentation" name="description" rows="3">{!! html_entity_decode($article->description) !!}</textarea>

                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group mt-4">
                        <label for="exampleFormControlTextarea1"><strong>Prix :</strong></label>

                        <input type="text" class="form-control" id="" name="prix" placeholder="Prix"
                            value="{{$article->prix}}">
                       </div>
                        </div>
                        <div class="col-6" style="margin-top:55px">
                            <input type="checkbox"  id="" name="prix_etat" value="1">

                            <label for="exampleFormControlTextarea1"><strong>Afficher le prix </strong></label>

                        </div>
                    </div>
                    <div class="form-group  mt-4">
                        <label for="exampleFormControlInput1"><strong> image : </strong></label>

                        <div class="input-group mt-4 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>Description(SEO)</strong></label>

                        <textarea name="resume_seo" id="" style="width: 100%" rows="10" value="">{!!$article->resume_seo!!}</textarea>

                    </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 add mt-4" style="text-align:end">
                <button type="submit" class="btn btn-danger" value="">Modifier</button>

            </div>

        </div>


    </form>



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

    @include('backend.partials.scriptIndex')

    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></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>
        $(function() {
            $("#categories").selectize({
                plugins: ["remove_button"],
                delimiter: ",",
                persist: false,
                create: function(input) {
                    return {
                        value: input,
                        text: input,
                    };
                },
            });
        });
    </script>
    <script  type="module">
var  img_width = {{ config('app.IMG_HEIGHT') }} ;
    var img_height = {{ config('app.IMG_HEIGHT') }};
    var img_quality = {{ config('app.IMG_QUALITY') }};
    var  img_ratio = {{ config('app.IMG_RATIO') }};
    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,

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

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

                },
            });

</script>
@endsection