@extends('backend.layouts.app')

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

        <div class="card mt-3">
            <h5 class="card-header">Editer publication ou rapport</h5>
            <div class="card-body">
                <form method="POST" action="{{ route('update_document', $document->id)}}" 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" value="{{ $document->title_document }}" 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" value="{{$document->date_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>
                                @if ($document->type_document == 1)
                                    <option value="1" selected>Publication</option>
                                    <option value="2">Rapport</option>
                                    <option value="3">Memoire</option>
                                @elseif ($document->type_document == 2)
                                    <option value="1">Publication</option>
                                    <option value="2" selected>Rapport</option>
                                    <option value="3">Memoire</option>
                                @else
                                    <option value="1">Publication</option>
                                    <option value="2">Rapport</option>
                                    <option value="3" selected>Memoire</option>
                                @endif

                            </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" value="{{$document->review_name}}">
                        </div>
                        <div class="row" id="keywords_publication">
                            <h6 class="text-center">Mots clés</h6>
                            @if ($document->keywords->isEmpty())
                                <div class="mb-3">
                                    <div class="alert alert-danger text-center">Aucun mot clé enrégistré</div>
                                </div>
                            @else
                                <div class="mb-3">
                                    @foreach ($document->keywords as $keyword)
                                        <div class="form-check">
                                            <input class="form-check-input" name="checked_keyword[]" type="checkbox" value="{{ $keyword->id }}" id="flexCheckIndeterminate">
                                            <label class="form-check-label" for="flexCheckIndeterminate">
                                                {{ $keyword->keyword }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                            <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" style="height: 200px;" required>{{$document->resume_document}}</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" />
                        </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--;
        })

        var type_document = document.getElementById('type_document').value
        if (type_document != 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";
        }

        $(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