@extends('backend.layouts.app')

@section('content')
    <div class="container">
        <h4 class="text-primary">Nouvelle publication ou rapport <i class="fa-4 fa fa-caret-right"></i></h4>

        <div class="card mt-3">
            <h5 class="card-header">Nouvelle publication ou rapport</h5>
            <div class="card-body">
                <form method="POST" action="{{ route('document_store')}}" enctype="multipart/form-data">
                    @csrf
                    <fieldset>
                        <div class="mb-3">
                            <label for="title_publication" class="form-label">Titre publication</label>
                            <input type="text" name="title_publication" id="title_publication" class="form-control" placeholder="Titre de la publication" required>
                        </div>
                        <div class="mb-3">
                            <label for="date_publication" class="form-label">Date publication</label>
                            <input type="date" name="date_publication" id="date_publication" class="form-control" placeholder="Date de la publication" required>
                        </div>

                        <div class="mb-3">
                            <label for="type_document" class="form-label">Type de document</label>
                            <select name="type_document" id="type_document" class="form-select" required>
                              <option value="1">Publication</option>
                              <option value="2">Rapport</option>
                              <option value="3">Memoire</option>
                            </select>
                        </div>
                        <div class="mb-3" id="review_publication">
                            <label for="date_publication" class="form-label">Nom de la revue</label>
                            <input type="text" name="review_name" id="review_name" class="form-control" placeholder="Nom de la revue">
                        </div>
                        <div class="row" id="keywords_publication">
                            <h6 class="text-center">Mots clés</h6>
                            <div class="mb-3 keywords_content">
                                <button type="button" class="btn btn-primary btn-sm add_keyword_field col-md-3 mb-3"><i class="fa fa-plus"></i> Ajouter un mot clé</button>
                                <div class="row">
                                    <div class="col-md-11 mb-3">
                                        <input type="text" name="keywords[]" class="form-control" placeholder="Ajouter un texte">
                                    </div>
                                    {{-- <a href="#" class="btn btn-danger btn-sm delete col-md-1 text-center" style="height: 38px"><i class="fa fa-trash"></i></a> --}}
                                </div>


                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="resume_document" class="form-label">Resumé du document</label>
                            <textarea name="resume_document" id="resume_document" class="form-control" placeholder="Resumé du document" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="file_upload" class="form-label">Charger le fichier</label>
                            <input type="file" name='file_upload' id="file_upload" class="form-control" required/>
                        </div>
                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary btn-sm">Sauvegarder</button>
                            <button type="reset" class="btn btn-info btn-sm mr-2">Réinitialiser</button>
                            <button type="button" class="btn btn-danger btn-sm mr-2">Annuler</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>

    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        var max_fields = 5;
        var wrapper = $(".keywords_content");
        var add_button = $(".add_keyword_field");

        var x = 1;
        $(add_button).click(function(e) {
            e.preventDefault();
            if (x < max_fields) {
                x++;
                $(wrapper).append('<div class="row new_keyword">'+
                '<div class="col-md-11 mb-3">'+
                    '<input type="text" name="keywords[]" class="form-control" placeholder="Ajouter un texte">'+
                '</div>'+
                    '<a href="#" class="btn btn-danger btn-sm delete col-md-1 text-center" style="height: 38px"><i class="fa fa-trash"></i></a>'+
                '</div>'); //add input box
            } else {
                alert('You Reached the limits')
            }
        });

        $(wrapper).on("click", ".delete", function(e) {
            e.preventDefault();
            // console.log('delete')
            $(this).parent('div').remove();
            x--;
        })

        $(document).on('change', '#type_document', function() {
            var value = this.value;
            // console.log(value)
            if (value != 1) {
                document.getElementById("review_publication").style.display = "none";
                document.getElementById("keywords_publication").style.display = "none";
            } else {
                document.getElementById("review_publication").style.display = "block";
                document.getElementById("keywords_publication").style.display = "block";
            }
        })
    });
</script>
@endsection