@extends('layouts.base2')
@section('title', 'Interface de gestion des pièces')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
@endpush
@section('content')
    @section('titlePage')  <h1 class="m-0">Liste des pièces</h1> @stop
    <div class="container" style="padding-bottom: 2em; padding-top: 1em">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="card card-primary card-tabs">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home"
                                        role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Listes des pièces</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="custom-pieces-envoye-tab" data-toggle="pill" href="#custom-pieces-envoye"
                                        role="tab" aria-controls="custom-pieces-envoye" aria-selected="false">Pieces Envoyés</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="custom-pieces-recu-tab" data-toggle="pill" href="#custom-pieces-recu"
                                        role="tab" aria-controls="custom-pieces-recu" aria-selected="false">Pièces Reçu & Confirmer</a>
                                    </li>
                                    <!-- <li class="nav-item">
                                        <a class="nav-link" id="custom-pieces-traite-tab" data-toggle="pill" href="#custom-pieces-traite"
                                        role="tab" aria-controls="custom-pieces-traite" aria-selected="false">pièces Traité</a>
                                    </li> -->
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-one-tabContent">
                                    <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                        @livewire('back.pieces.pieces-list')
                                    </div>
                                    <div class="tab-pane fade" id="custom-pieces-envoye" role="tabpanel" aria-labelledby="custom-pieces-envoye-tab">
                                        @livewire('back.pieces.pieces-list-envoyer')
                                    </div>
                                    <div class="tab-pane fade" id="custom-pieces-recu" role="tabpanel" aria-labelledby="custom-pieces-recu-tab">
                                        @livewire('back.pieces.pieces-list-lu')
                                    </div>
                                    <!-- <div class="tab-pane fade" id="custom-pieces-traite" role="tabpanel" aria-labelledby="custom-pieces-traite-tab">
                                        pièces traités
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@stop
@section('footer')

    <script>

        $(document).ready(function(){
            //GESTION DES ERREURS
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 5000
            });

            $('.swalDefaultWarning').ready(function() {
                @if (session('warning'))
                    Toast.fire({
                        icon: 'warning',
                        title: '{{ session('warning') }}',
                        timer: 10000
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('status'))
                    Toast.fire({
                        icon: 'success',
                        title: '{{ session('status') }}'
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('error'))
                    Toast.fire({
                        icon: 'error',
                        title: "{{ session('error') }}",
                        timer: 10000
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('info'))
                    Toast.fire({
                        icon: 'info',
                        title: "{{ session('info') }}",
                        timer: 10000
                    })
                @endif
            });
            //Fin gestion des Erreur

            // $("#dateMask").inputmask("dd/mm/yyyy", {"placeholder": "dd-mm-yyyy"});
            if ($.fn.DataTable.isDataTable('#liste_pieces')) {
                $('#liste_pieces').DataTable().destroy();
            }
            var oTable = $('#liste_pieces').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('charger.liste.piece', $user_id) !!}",
                columns: [
                    { data: 'numero', name: 'numero' },
                    { data: 'img_pdf', name: 'img_pdf'},
                    { data: 'titre', name: 'titre', searchable: true },
                    { data: 'nomfichier', name: 'nomfichier', searchable: true },
                    { data: 'date_cloture', name: 'date_cloture'},
                    { data: 'destinataire', name: 'destinataire', searchable: true },
                    { data: 'etat', name: 'etat', searchable: true },
                    { data: 'action', name: 'action', searchable: false }
                ]
            });

            if ($.fn.DataTable.isDataTable('#liste_pieces_lu')) {
                $('#liste_pieces_lu').DataTable().destroy();
            }
            var oTable = $('#liste_pieces_lu').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('charger.liste.piece.lu', $user_id) !!}",
                columns: [
                    { data: 'numero', name: 'numero' },
                    { data: 'img_pdf', name: 'img_pdf'},
                    { data: 'titre', name: 'titre', searchable: true },
                    { data: 'nomfichier', name: 'nomfichier', searchable: true },
                    { data: 'date_cloture', name: 'date_cloture'},
                    { data: 'destinataire', name: 'destinataire', searchable: true },
                    { data: 'etat', name: 'etat', searchable: true },
                ]
            });

            if ($.fn.DataTable.isDataTable('#liste_pieces_envoyer')) {
                $('#liste_pieces_envoyer').DataTable().destroy();
            }
            var oTable = $('#liste_pieces_envoyer').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('charger.liste.piece.envoyer', $user_id) !!}",
                columns: [
                    { data: 'numero', name: 'numero' },
                    { data: 'img_pdf', name: 'img_pdf'},
                    { data: 'titre', name: 'titre', searchable: true },
                    { data: 'nomfichier', name: 'nomfichier', searchable: true },
                    { data: 'date_cloture', name: 'date_cloture'},
                    { data: 'destinataire', name: 'destinataire', searchable: true },
                    { data: 'etat', name: 'etat'},
                    { data: 'action', name: 'action'},
                ]
            });
            setInterval(function(){
                location.reload();
            }, 300000); //Tous les deux minutes

        });


        /**
         * Pour le chargement des actions de mise à jour et suppression
         */

    </script>

@stop