@extends('admin.layout')

@section('title', __('Notices'))

@push('head')
<link rel="stylesheet" href="@assetV('css/notices.css')">
@endpush

@section('content')
<div class="container">

    <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
        <h1 class="h3 mb-0">{{ __('Notices') }}</h1>
        <span class="small" data-zone="notices-total">{{ trans_choice(':n notice|:n notices', $total, ['n' => $total]) }}</span>
        <div class="ms-md-auto d-flex gap-2 notices-recherche">
            <input type="search" id="notices-recherche" class="form-control" autocomplete="off"
                   placeholder="{{ __('Chercher une notice : ROBUS, A60, cellule…') }}"
                   aria-label="{{ __('Chercher une notice') }}">
            @can('notices.create')
                <button type="button" class="btn btn-primary text-nowrap" data-bs-toggle="modal" data-bs-target="#modale-notice"
                        title="{{ __('Ajouter une notice') }}">
                    <i class="bi bi-plus-lg"></i><span class="d-none d-sm-inline"> {{ __('Ajouter') }}</span>
                </button>
            @endcan
        </div>
    </div>

    {{-- Les zones (data-zone) : ce que js/sur-place.js remplace apres un
         ajout, une modification ou un retrait, sans recharger la page. --}}
    <div data-zone="messages">
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
    </div>

    <div data-zone="notices">
    {{-- Apres un ajout ou un deplacement : le dossier de la notice, ou la
         liste se place (js/notices.js). Dans la zone, pas sur elle :
         sur-place.js en remplace le contenu, pas les attributs. --}}
    <div hidden data-notices-choisir="{{ session('notices_choisir') }}"></div>
    @if(!$arbre)
        <div class="alert alert-info">
            {{ __('Aucune notice pour l’instant : elles arrivent du dossier des fournisseurs, par l’import, ou par « Ajouter ».') }}
        </div>
    @else
        <div class="card">
            <div class="card-body p-0">
                <div class="row g-0">

                    {{-- L'arborescence. Sur téléphone, repliée au-dessus de la
                         liste : le bouton dit le dossier choisi. --}}
                    <div class="col-lg-4 col-xl-3 notices-gauche">
                        <button class="btn btn-outline-secondary w-100 d-lg-none text-start d-flex align-items-center gap-2"
                                type="button" data-bs-toggle="collapse" data-bs-target="#notices-arbre"
                                aria-expanded="false" aria-controls="notices-arbre">
                            <i class="bi bi-folder2-open"></i>
                            <span id="notices-choisi" class="text-truncate">{{ __('Toutes les notices') }}</span>
                            <i class="bi bi-chevron-down ms-auto"></i>
                        </button>

                        <div class="collapse d-lg-block" id="notices-arbre">
                            <ul class="notices-arbre list-unstyled mb-0">
                                <li>
                                    <div class="notices-noeud" data-cle="">
                                        <span class="notices-pli"></span>
                                        <i class="bi bi-collection"></i>
                                        <span class="notices-nom">{{ __('Toutes les notices') }}</span>
                                        <span class="notices-compte">{{ $total }}</span>
                                    </div>
                                </li>
                                @foreach($arbre as $noeud)
                                    @include('admin.notices._noeud', ['noeud' => $noeud, 'niveau' => 0])
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-8 col-xl-9 notices-droite">
                        @foreach($groupes as $groupe)
                            <section class="notices-groupe" data-cle="{{ $groupe['cle'] }}">
                                <div class="notices-fil">{{ $groupe['chemin'] }}</div>
                                <ul class="list-unstyled mb-0">
                                    @foreach($groupe['lignes'] as $ligne)
                                        @php $notice = $ligne['notice']; @endphp
                                        <li class="notices-ligne d-flex align-items-center" data-ligne="notice-{{ $notice->id }}"
                                            @can('notices.edit')
                                                draggable="true" data-glisser="{{ implode(',', array_merge([$notice->id], array_column($ligne['aussi'], 'id'))) }}"
                                                data-titre-glisse="{{ $notice->titre }}"
                                            @endcan
                                            data-texte="{{ implode(' ', array_merge([$notice->titre], array_column($ligne['aussi'], 'titre'), [$groupe['chemin']])) }}">
                                            <a href="{{ route('notices.show', $notice) }}" target="_blank" rel="noopener"
                                               class="d-flex align-items-center gap-2 flex-grow-1"
                                               title="{{ __('Ouvrir la notice dans un nouvel onglet') }}">
                                                <i class="bi bi-file-earmark-pdf notices-pdf"></i>
                                                <span class="notices-titre">{{ $notice->titre }}</span>
                                                <i class="bi bi-box-arrow-up-right small"></i>
                                            </a>
                                            {{-- Le meme PDF sous un autre nom : sa croix retire ce nom-la. --}}
                                            @foreach($ligne['aussi'] as $autre)
                                                <span class="badge rounded-pill notices-aussi d-none d-sm-inline-flex align-items-center gap-1">
                                                    {{ __('aussi : :titre', ['titre' => $autre['titre']]) }}
                                                    @can('notices.delete')
                                                        <form method="post" action="{{ route('notices.destroy', $autre['id']) }}" class="d-inline"
                                                              onsubmit="return confirm(@js(__('Retirer la notice « :titre » ?', ['titre' => $autre['titre']]) . "\n\n" . $groupe['chemin'] . "\n\n" . __('« :garde » garde le même PDF.', ['garde' => $notice->titre])));">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn-close notices-aussi-retirer"
                                                                    aria-label="{{ __('Retirer « :titre »', ['titre' => $autre['titre']]) }}"
                                                                    title="{{ __('Retirer « :titre »', ['titre' => $autre['titre']]) }}"></button>
                                                        </form>
                                                    @endcan
                                                </span>
                                            @endforeach
                                            <span class="small text-nowrap notices-taille">{{ $notice->tailleLisible() }}</span>
                                            @canany(['notices.edit', 'notices.delete'])
                                                <div class="notices-gestes d-flex">
                                                    @can('notices.edit')
                                                        <button type="button" class="btn btn-sm btn-link" title="{{ __('Modifier ou déplacer « :titre »', ['titre' => $notice->titre]) }}"
                                                                @include('admin.notices._modale_ouvre', ['notice' => $notice])>
                                                            <i class="bi bi-pencil"></i>
                                                        </button>
                                                    @endcan
                                                    @can('notices.delete')
                                                        <form method="post" action="{{ route('notices.destroy', $notice) }}"
                                                              onsubmit="return confirm(@js(__('Retirer la notice « :titre » ?', ['titre' => $notice->titre]) . "\n\n" . $groupe['chemin']));">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-link text-danger"
                                                                    title="{{ __('Retirer « :titre »', ['titre' => $notice->titre]) }}">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </form>
                                                    @endcan
                                                </div>
                                            @endcanany
                                        </li>
                                    @endforeach
                                </ul>
                            </section>
                        @endforeach

                        <div id="notices-aucune" class="p-4 text-center d-none"
                             data-recherche="{{ __('Aucune notice ne correspond à cette recherche.') }}"
                             data-vide="{{ auth()->user()->can('notices.create') ? __('Ce dossier est vide : « Ajouter » y range une notice, ou glissez-en une depuis un autre dossier.') : __('Ce dossier est vide.') }}"></div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    </div>

    @include('admin.notices._modale')

    {{-- Le glisser-deposer d'une ligne sur un dossier de l'arbre
         (js/notices.js) : un formulaire ordinaire, que js/sur-place.js
         envoie comme les autres — message, toast « Annuler », liste a jour. --}}
    @can('notices.edit')
        <form method="post" action="{{ route('notices.deplacer') }}" id="notices-deplacer" hidden>
            @csrf
            <input type="hidden" name="cle">
        </form>
        <form method="post" action="{{ route('notices.dossiers.deplacer') }}" id="notices-deplacer-dossier" hidden>
            @csrf
            <input type="hidden" name="dossier_id">
            <input type="hidden" name="cle">
        </form>
    @endcan

    @include('admin.notices._modale_dossier')
</div>

<script src="@assetV('js/modale-saisie.js')"></script>
<script src="@assetV('js/ajout-sur-place.js')"></script>
@endsection

@push('scripts')
<script src="@assetV('js/notices.js')" data-dossier="{{ $dossier }}" data-toutes="{{ __('Toutes les notices') }}"></script>
@endpush