@extends('web.layouts.base')

@section('titre')
Création 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">Création d'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">
                                @if (isset($post))
                                Modification
                                @else
                                Création
                                @endif
                                article
                            </li>
                        </ol>
                    </div>

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

        @if (isset($post))
        <form method="POST" action="{{ route('articles.update', $post) }}" enctype="multipart/form-data">
            @method('PUT')
            @else
            <form method="POST" action="{{ route('articles.store') }}" enctype="multipart/form-data">
                @endif
                @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>
                                    <input type="text" id="title" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ isset($post->title) ? $post->title : 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="body" id="body" class="form-control @error('body') is-invalid @enderror">{{ isset($post->body) ? $post->body : old('body') }}</textarea>

                                    @error('body')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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="image" 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 type="file" class="form-control d-none @error('image') is-invalid @enderror" name="image" value="{{ old('image') }}" 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 value="{{ old('image1') }}" name="image1" 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="metaTitle">Titre meta</label>
                            <input type="text" class="form-control @error('metaTitle') is-invalid @enderror" placeholder="Entrer le titre meta" name="metaTitle" id="metaTitle" max="200" value="{{ isset($post->metaTitle) ? $post->metaTitle : old('metaTitle') }}" maxlength="100">
                            @error('metaTitle')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <!-- end col -->

                    <div class="col-lg-6">
                        <div class="mb-3">
                            <label class="form-label" for="metaKeywords">Mots clés meta</label>
                            <input type="text" class="form-control @error('metaKeywords') is-invalid @enderror" placeholder="Enter meta keywords" name="metaKeywords" id="motCle" max="200" value="{{ isset($post->metaKeywords) ? $post->metaKeywords : old('metaKeywords') }}" maxlength="100">
                            @error('metaKeywords')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->

                <div>
                    <label class="form-label" for="meta-description-input">Meta Description</label>
                    <textarea class="form-control @error('metaDescription') is-invalid @enderror" id="metaDescription" name="metaDescription" placeholder="Enter meta description" rows="3" maxlength="255">{{ isset($post->metaDescription) ? $post->metaDescription : old('metaDescription') }}</textarea>
                    @error('metaDescription')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </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">Image mise en avant</h5>
        </div>
        <div class="card-body">
            @if(isset($post->image))
            <div class="mb-3">
                <label for="statut" class="form-label">Image</label>
                {{-- <p><br />
                    <img src="" alt="image de couverture actuelle" style="max-height: 200px;">
                </p> --}}

                <div class="swiper-slide swiper-slide-active" role="group" aria-label="4 / 4" style="width: 300px; ">
                    <img src="{{ asset('storage/articles/'.$post->image) }}" alt="" class="img-fluid d-block">
                </div>

            </div>
            @endif

            <div>
                <label for="image" class="form-label">Téléverser une image</label>
                <input type="file" name="image" id="image" class="form-control @error('image') is-invalid @enderror">

                @error('image')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <!-- end card body -->
    </div>
    <!-- end card -->

    <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="statut" class="form-label">Statut</label>

                <select class="form-select @error('statut') is-invalid @enderror" id="statut" data-choices="" data-choices-search-false="" name="statut">
                    <option value="Publié" selected="">Publié</option>
                    <option value="En attente">En attente</option>
                    <option value="Brouillon">Brouillon</option>
                </select>
                @error('statut')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div>
                <label for="visibilite" class="form-label">Visibilité</label>
                <select class="form-select  @error('visibilite') is-invalid @enderror" id="visibilite" data-choices="" data-choices-search-false="">
                    <option value="Publique" selected="Publique"></option>
                    <option value="Privé">Privé</option>
                </select>
                @error('visibilite')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-check form-check-outline form-check-success mb-3">
                <p></p>
                @if (isset($post))
                <input type="checkbox" class="form-check-input" id="formCheck15" class="filled-in @error('status') is-invalid @enderror" name="status" value="1" {{ $post->status == true ? 'checked' : '' }}>
                @else
                <input class="form-check-input" type="checkbox" id="formCheck15" checked class="filled-in @error('status') is-invalid @enderror" name="status" value="1">

                @endif
                <label class="form-check-label" for="formCheck15">
                    Publié
                </label>


                @error('status')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
        </div>
        <!-- end card body -->
    </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>

            @if (isset($post))
            <select name="categories[]" id="category" data-choices="" data-choices-search-false="" class="form-select" data-live-search="true" multiple required>
                @foreach($categories as $category)
                <option @foreach($post->categories as $postCategory)
                    {{ $postCategory->id == $category->id ? 'selected' : '' }}
                    @endforeach
                    value="{{ $category->id }}">{{ $category->name }}</option>
                @endforeach
            </select>
            @else
            <select name="categories[]" id="categories" data-choices="" data-choices-search-false="" class="form-select" data-live-search="true" multiple required>
                @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>
            @endif

            @error('categories')
            <div class="invalid-feedback">
                {{ $message }}
            </div>
            @enderror
        </div>
        <!-- end card body -->
        <div class="card-body">
            <div class="hstack gap-3 align-items-start">
                <div class="flex-grow-1">
                    <p class="text-muted mb-2"> <a href="{{ route('tags.index') }}" class="float-end text-decoration-underline">Ajouter</a>Selectionner un tag</p>

                    @if (isset($post))
                    <select name="tags[]" id="tag" data-choices="" data-choices-search-false="" class="form-select" data-live-search="true" multiple required>
                        @foreach($tags as $tag)
                        <option @foreach($post->tags as $postTag)
                            {{ $postTag->id == $tag->id ? 'selected' :'' }}
                            @endforeach
                            value="{{ $tag->id }}">{{ $tag->name }}</option>
                        @endforeach
                    </select>
                    @else

                    <select name="tags[]" id="tag" data-choices="" data-choices-search-false="" class="form-select" data-live-search="true" multiple required>
                        @foreach($tags as $tag)
                        <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                        @endforeach
                    </select>
                    @endif
                    @error('tag')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror

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

    <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 @error('extrait') is-invalid @enderror" placeholder="Entrer au minnimun 100 caractères" rows="3" name="extrait" id="extrait" maxlength="100">{{ isset($post->extrait) ? $post->extrait : old('extrait') }}</textarea>

            @error('extrait')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        <!-- end card body -->
    </div>
    <!-- end card -->

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

</form>

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

@section('scripts')
<!-- JAVASCRIPT -->

<!-- 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>
    ClassicEditor
        .create(document.querySelector('textarea[name="body"]'))
        .catch(error => {
            console.error(error);
        });

</script>
@endsection