@extends('web.layouts.base')

@section('titre')
Modification d'un article
@endsection

@section('styles')
<link href="{{ asset('assets/libs/select2@4.1.0-rc.0/dist/css/select2.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/libs/dropzone/dropzone.css') }}" rel="stylesheet" type="text/css">
@endsection

@section('content')
<div class="page-content">
    <div class="container-fluid">

        <!-- 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">Modification d'un article</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('accueil') }}">Acceuil</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Tableau de bord</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('articles.index') }}">Articles</a></li>
                            <li class="breadcrumb-item active">Modification d'un article</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <form id="createproduct-form" autocomplete="off" class="needs-validation" novalidate="" action="{{ route('articles.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label" for="title">Titre de l'article</label>
                                <div class="invalid-feedback">Please Enter a product title.</div>
                                <input type="text" id="title" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title') }}" required placeholder="Entrer le titre de l'article">
                                @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div>
                                <label>Contenu de l'article</label>
                                <textarea name="" class="form-control" id="ckeditor-classic" required></textarea>
                            </div>
                        </div>
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Article Gallerie</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <h5 class="fs-14 mb-1">Article Image</h5>
                                <p class="text-muted">Image mise en avant</p>
                                <div class="text-center">
                                    <div class="position-relative d-inline-block">
                                        <div class="position-absolute top-100 start-100 translate-middle">
                                            <label for="product-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
                                                <div class="avatar-xs">
                                                    <div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
                                                        <i class="ri-image-fill"></i>
                                                    </div>
                                                </div>
                                            </label>
                                            {{-- <input class="form-control d-none" value="" id="product-image-input" type="file" accept="image/png, image/gif, image/jpeg"> --}}
                                            <input type="file" class="form-control d-none @error('iamge') is-invalid @enderror" name="image" value="{{ old('image') }}" required accept="image/png, image/gif, image/jpeg">
                                            @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                        <div class="avatar-lg">
                                            <div class="avatar-title bg-light rounded">
                                                <img src="" id="product-img" class="avatar-md h-auto">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <h5 class="fs-14 mb-1">Autres images</h5>
                                <p class="text-muted">Ajouter des images de la galerie d'articles.</p>

                                <div class="dropzone">
                                    <div class="fallback">
                                        <input name="file" type="file" multiple="multiple">
                                    </div>
                                    <div class="dz-message needsclick">
                                        <div class="mb-3">
                                            <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                                        </div>

                                        <h5>Déposez les fichiers ici ou cliquez pour télécharger.</h5>
                                    </div>
                                </div>

                                <ul class="list-unstyled mb-0" id="dropzone-preview">
                                    <li class="mt-2" id="dropzone-preview-list">
                                        <!-- This is used as the file preview template -->
                                        <div class="border rounded">
                                            <div class="d-flex p-2">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="avatar-sm bg-light rounded">
                                                        <img data-dz-thumbnail="" class="img-fluid rounded d-block" src="#" alt="Article-Image">
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <div class="pt-1">
                                                        <h5 class="fs-14 mb-1" data-dz-name="">&nbsp;</h5>
                                                        <p class="fs-13 text-muted mb-0" data-dz-size=""></p>
                                                        <strong class="error text-danger" data-dz-errormessage=""></strong>
                                                    </div>
                                                </div>
                                                <div class="flex-shrink-0 ms-3">
                                                    <button data-dz-remove="" class="btn btn-sm btn-danger">Supprimer</button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <!-- end dropzon-preview -->
                            </div>
                        </div>
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs-custom card-header-tabs border-bottom-0" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#addproduct-metadata" role="tab">
                                        Réglages SEO (Meta)
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- end card header -->
                        <div class="card-body">
                            <div class="tab-content">
                                <div class="tab-pane active" id="addproduct-metadata" role="tabpanel">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="meta-title-input">Titre meta</label>
                                                <input type="text" class="form-control" placeholder="Entrer le titre meta" id="metaTitle" name="metaTitle" max="200">
                                            </div>
                                        </div>
                                        <!-- end col -->

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="meta-keywords-input">Mots clés meta</label>
                                                <input type="text" class="form-control" placeholder="Enter meta keywords" id="motCle" max="200">
                                            </div>
                                        </div>
                                        <!-- end col -->
                                    </div>
                                    <!-- end row -->

                                    <div>
                                        <label class="form-label" for="meta-description-input">Meta Description</label>
                                        <textarea class="form-control" id="meta-description-input" placeholder="Enter meta description" rows="3"></textarea>
                                    </div>
                                </div>
                                <!-- end tab pane -->
                            </div>
                            <!-- end tab content -->
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                    <div class="text-end mb-3">
                        <button type="submit" class="btn btn-primary w-sm">Publier</button>
                    </div>
                </div>
                <!-- end col -->

                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Publish</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="choices-publish-status-input" class="form-label">Statut</label>

                                <select class="form-select" id="choices-publish-status-input" data-choices="" data-choices-search-false="">
                                    <option value="Publié" selected="">Publié</option>
                                    <option value="En attente">En attente</option>
                                    <option value="Brouillon">Brouillon</option>
                                </select>
                            </div>

                            <div>
                                <label for="choices-publish-visibility-input" class="form-label">Visibilité</label>
                                <select class="form-select" id="choices-publish-visibility-input" data-choices="" data-choices-search-false="">
                                    <option value="Public" selected="">Public</option>
                                    <option value="Privé">Privé</option>
                                </select>
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Date de publicaion</h5>
                        </div>
                        <!-- end card body -->
                        <div class="card-body">
                            <div>
                                <label for="datepicker-publish-input" class="form-label">Date & Heure</label>
                                <input type="text" id="datepicker-publish-input" class="form-control" placeholder="Enter publish date" data-provider="flatpickr" data-date-format="d.m.y" data-enable-time="">
                            </div>
                        </div>
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Catégories</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-2"> <a href="{{ route('categories.index') }}" class="float-end text-decoration-underline">Ajouter</a>Selectionner une catégorie</p>
                            <select class="form-select" id="choices-category-inpuxt" name="choiceds-category-input" data-choices="" data-choices-search-false="">

                                @foreach($categories as $category)
                                @if (old('categorie_id') == $category->id)
                                <option value="{{ $category->id }}" selected>
                                    {{ $category->name }}</option>
                                @else
                                <option value="{{ $category->id }}">
                                    {{ $category->name }}</option>
                                @endif

                                @endforeach
                            </select>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Tags</h5>
                        </div>
                        <div class="card-body">
                            <div class="hstack gap-3 align-items-start">
                                <div class="flex-grow-1">
                                    <select class="js-example-disabled-multi" multiple="multiple" name="tags[]" id="tag" required>
                                        @foreach($tags as $tag)
                                        <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('tag')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Extrait de l'article (Facultatif)</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-2">Ajouter une courte description</p>
                            <textarea class="form-control" placeholder="Entrer au minnimun 100 caractères" rows="3"></textarea>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->

                </div>
                <!-- end col -->
            </div>
            <!-- end row -->

        </form>

    </div>
    <!-- container-fluid -->
</div>
<!-- End Page-content -->
@endsection

@section('scripts')
{{-- <script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script>
<script src="{{ asset('assets/libs/node-waves/waves.min.js') }}"></script>
<script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/plugins/lord-icon-2.1.0.js') }}"></script>
<script src="{{ asset('assets/js/plugins.js') }}"></script> --}}

<!-- ckeditor -->
<script src="{{ asset('assets/libs/%40ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>

<!-- dropzone js -->
<script src="{{ asset('assets/libs/dropzone/dropzone-min.js') }}"></script>

<script src="{{ asset('assets/js/pages/ecommerce-product-create.init.js') }}"></script>

<!--select2 cdn-->
<script src="{{ asset('assets/libs/select2@4.1.0-rc.0/dist/js/select2.min.js') }}"></script>

<script src="{{ asset('assets/js/pages/select2.init.js') }}"></script>
<!-- App js -->
<script src="{{ asset('assets/js/app.js') }}"></script>

<script>
    ClassicEditor
        .create( document.querySelector( 'textarea[name="editor"]' ) )
        .catch( error => {
            console.error( error );
        } );
</script>
@endsection