@extends('layouts.squelette')
<!-- ************************************** -->
@section('css_header')
@endsection
<!-- ************************************** -->
@section('titre')
@endsection
<!-- ************************************** -->
@section('titre_header')
@endsection

@section('titre_page')
{{ __("Archivage des interventions") }}
@endsection
<!-- ************************************** -->
@section('panel_boutons')
@endsection
<!-- ************************************** -->
@section('contenu')

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        {{ session('success') }}
    </div>
@endif

<div class="row">
    {{-- Bloc gauche : Archiver --}}
    <div class="col-md-5">
        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title">{{ __('Archiver des interventions') }}</h3>
            </div>
            <div class="card-body">
                <form id="archivage_di" action="/archivage_intervention/archiver" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-sm-6">
                            @component('components.dates.select_simple',['label' => 'Date création du','value' => '','name' => 'createdDate'])
                            @endcomponent
                        </div>
                        <div class="col-sm-6">
                            @component('components.dates.select_simple',['label' => 'au','value' => '','name' => 'createdDate2'])
                            @endcomponent
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer text-center">
                <button type="submit" form="archivage_di" class="btn btn-success">
                    <i class="fas fa-archive"></i> {{ __('Archiver') }}
                </button>
                <button type="button" id="btn_etat_archives" class="btn btn-info ml-2">
                    <i class="fas fa-chart-bar"></i> {{ __('Etat des archives') }}
                </button>
                <button type="button" id="btn_messages_volumineux" class="btn btn-warning ml-2">
                    <i class="fas fa-weight-hanging"></i> {{ __('Messages volumineux') }}
                </button>
            </div>
        </div>
    </div>

    {{-- Bloc droite --}}
    <div class="col-md-7">

        {{-- Tableau état des archives (chargé en AJAX) --}}
        <div class="card card-info" id="card_etat_archives" style="display:none;">
            <div class="card-header">
                <h3 class="card-title">{{ __('DI archivées par année') }}</h3>
            </div>
            <div class="card-body p-0">
                <div id="loading_etat" class="text-center p-3" style="display:none;">
                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                    <p class="mt-2">{{ __('Chargement en cours...') }}</p>
                </div>
                <table class="table table-striped table-hover mb-0" id="table_etat_archives" style="display:none;">
                    <thead>
                        <tr>
                            <th>{{ __('Année') }}</th>
                            <th class="text-right">{{ __('Archivées') }}</th>
                            <th class="text-right">{{ __('Non archivées') }}</th>
                            <th class="text-right">{{ __('Total') }}</th>
                            <th class="text-right">{{ __('Volume restant (Mo)') }}</th>
                        </tr>
                    </thead>
                    <tbody id="tbody_etat_archives">
                    </tbody>
                    <tfoot id="tfoot_etat_archives">
                    </tfoot>
                </table>
            </div>
        </div>

        {{-- Tableau messages volumineux (chargé en AJAX) --}}
        <div class="card card-warning" id="card_messages_volumineux" style="display:none;">
            <div class="card-header">
                <h3 class="card-title">{{ __('Messages volumineux (> 2 Mo)') }}</h3>
            </div>
            <div class="card-body p-0">
                <div id="loading_messages" class="text-center p-3" style="display:none;">
                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                    <p class="mt-2">{{ __('Chargement en cours...') }}</p>
                </div>
                <table class="table table-striped table-hover mb-0" id="table_messages_volumineux" style="display:none;">
                    <thead>
                        <tr>
                            <th>{{ __('N° DI') }}</th>
                            <th>{{ __('Objet') }}</th>
                            <th class="text-right">{{ __('Taille (Mo)') }}</th>
                            <th>{{ __('Date') }}</th>
                            <th class="text-center">{{ __('Voir') }}</th>
                            <th class="text-center">{{ __('Suppr. images') }}</th>
                        </tr>
                    </thead>
                    <tbody id="tbody_messages_volumineux">
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

@endsection

@section('js_footer')
<script src="{{ asset('js/archivage.js')}}"></script>
@endsection

@section('modale')
{{-- Modale pour voir le contenu d'un message --}}
<div class="modal fade" id="Modale_Message" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h5 class="modal-title" id="modal_message_titre">{{ __('Contenu du message') }}</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body" id="modal_message_contenu" style="max-height:70vh; overflow-y:auto;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Fermer') }}</button>
            </div>
        </div>
    </div>
</div>
@endsection