@extends('backend.layouts.app')

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

        <a href="{{ route('new_document') }}" class="btn btn-primary btn-sm">Nouveau document</a>

            @if($message = Session::get('success'))
                <div class="text-center alert alert-success alert-dismissible fade show" style="color: #000000; font-weight: bolder">
                    <strong>{{$message}}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if($message = Session::get('error'))
                <div class="text-center alert alert-danger alert-dismissible fade show" style="color: #000000; font-weight: bolder">
                    <strong>{{$message}}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

        <div class="card mt-3">
            <h5 class="card-header">Liste des documents enrégistrés</h5>
            <div class="card-body">
                <table class="table cell-border" id="documents_table">
                    <thead>
                        <th>Date de publication</th>
                        <th>Titre</th>
                        <th>Type de document</th>
                        <th>Nom de la revue</th>
                        <th>actions</th>
                    </thead>
                    <tbody>
                        @foreach ($documents as $document)
                            <tr data-status="{{$document->type_document}}" class="row_color">
                                <td>{{$document->date_publication}}</td>
                                <td>{{$document->title_document}}</td>
                                <td>
                                    @if ($document->type_document == 1)
                                        Publication
                                    @elseif ($document->type_document == 2)
                                        Rapport
                                    @else
                                        Mémoire
                                    @endif
                                </td>
                                <td>{{$document->review_name}}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ route('get_document', Crypt::encrypt($document->id)) }}" class="btn btn-primary" title="Modifier"><i class="fa fa-edit"></i></a>
                                        <a href="#" class="btn btn-info visualiser" id="{{ $document->id }}" title="Visualiser"><i class="fa fa-eye"></i></a>
                                        <a href="#" class="btn btn-danger delete" id="{{ $document->id }}" title="Supprimer"><i class="fa fa-trash"></i></a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <!-- Modal -->
    <div class="modal fade" id="details_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel" style="font-weight: bold;">Détails</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <tr>
                        <td style="font-weight: bold;">Date de publication:</td>
                        <td id="date_pub" class="text-center"></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold;">Titre:</td>
                        <td id="title_pub"></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold;">Nom de la revue:</td>
                        <td id="revue_nom"></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold;">Mots clés:</td>
                        <td id="keywords"></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold;">Resumé:</td>
                        <td id="resume_pub" style="text-align: justify;"></td>
                    </tr>
                </table>
                <div class="row">
                    <h6 class="text-center">Télécharger le fichier</h6>
                    <div id="documentPDF"></div>
                </div>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
        </div>
    </div>

    <div class="modal fade" id="delete_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title text-danger" id="exampleModalLabel" style="font-weight: bold;">Supprimer le document</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h5 class="text-center">Voulez-vous supprimer ce document?</h5>
            </div>
            <div class="modal-footer">
            {{-- <a href="#" class="btn btn-success">Valider</a> --}}
            {{-- <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button> --}}
            </div>
        </div>
        </div>
    </div>

    <div class="modal fade" id="conf_delete_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title text-danger" id="exampleModalLabel" style="font-weight: bold;">Document supprimé</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h5 class="text-center">Document supprimé avec success</h5>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Ok</button>
            </div>
        </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready( function () {
            $('#documents_table').DataTable({
                language: {
                    url: "{{ asset('assets/backend/datatables/i18n/fr-FR.json')}}"
                }
            });

            var options = { year: 'numeric', month: 'long', day: 'numeric' };

            $(document).on('click', '.visualiser', function(){
                console.log(this.id)
                var modal = $('#details_modal');
                $.ajax({
                    url: '{{ route("get_one_document") }}',
                    type: 'GET',
                    dataType: 'json',
                    data: {id:this.id},
                    success: function(data) {
                        // console.log(data)
                        var list_keywords = '';
                        $.each(data.keywords, function(key, value) {
                            list_keywords +=  value.keyword+', ';
                        });
                        var src = '{{ asset(":source")}}';
                        src = src.replace(':source', data.link_file);
                        var documentPDF = '<a href="'+src+'" download="fichier"><i class="fa fa-download"></i>Télécharger</a>';
                        documentPDF += '<embed src="'+src+'" width="100%" height="300px" />';
                        const date_pub = new Date(data.date_publication);
                        const formatted_date = date_pub.toLocaleDateString("fr-FR", options);
                        modal.find('.modal-body #date_pub').html(formatted_date);
                        modal.find('.modal-body #title_pub').html(data.title_document);
                        modal.find('.modal-body #revue_nom').html(data.review_name);
                        modal.find('.modal-body #keywords').html(list_keywords);
                        modal.find('.modal-body #resume_pub').html(data.resume_document.substring(0, 700)+'...');
                        modal.find('.modal-body #documentPDF').html(documentPDF);
                    }
                });
                modal.modal('show');
            })

            $(document).on('click', '.delete', function(){
                console.log(this.id)
                var modal = $('#delete_modal');
                modal.find('.modal-footer').html('<a href="#" id="'+this.id+'" class="btn btn-success conf_delete">Valider</a><button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>');
                modal.modal('show');
            })

            $(document).on('click', '.conf_delete', function(){
                // console.log(this.id)
                var modal1 = $('#delete_modal');
                modal1.modal('hide');
                var modal = $('#conf_delete_modal');
                modal.modal('show');
                $.ajax({
                    url: '{{ route("delete_document") }}',
                    type: 'GET',
                    dataType: 'json',
                    data: {id:this.id},
                    success: function(data) {
                        // console.log(data)
                        document.location.reload(true);
                    }
                });

            })
        } );


    </script>
@endsection