@extends('admin.layout')

@section('title', __('Gestion des découpes'))

@section('content')

    <div class="pagetitle">
        <h1>@yield('title')</h1>
    </div><!-- End Page Title -->

    <section class="section contact">
        <div class="row gy-4">
            <div class="col-xl-12">
                <div class="card p-4">
                    {{-- Ajout et modification dans une fenetre (js/modale-saisie.js) :
                         un nom, un type, une image. --}}
                    @can('decoupes.create')
                        <div>
                            <button type="button" class="btn btn-primary" title="{{ __('Ajouter une découpe') }}"
                                data-bs-toggle="modal" data-bs-target="#modale-decoupe-catalogue"><i
                                    class="fa-solid fa-plus"></i></button>
                        </div>
                    @endcan

                    {{-- Les zones (data-zone) : ce que js/sur-place.js remplace apres un
                         geste, sans recharger la page — messages, compte, lignes,
                         pagination. --}}
                    <div data-zone="messages" class="mt-3">
                    @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>

                    {{-- Recherche côté serveur : elle porte sur tout le catalogue,
                         pas seulement sur la page affichée. --}}
                    <form method="GET" action="{{ route('decoupes.index') }}"
                        class="search-form d-flex align-items-center gap-2 pt-3 pb-3">
                        <input class="form-control" type="text" name="q" value="{{ $q ?? '' }}"
                            placeholder="{{ __('Rechercher (nom, type)') }}">
                        <button type="submit" class="btn btn-primary" title="{{ __('Rechercher') }}">
                            <i class="bi bi-search"></i>
                        </button>
                        @if (!empty($q))
                            <a href="{{ route('decoupes.index') }}" class="btn btn-secondary" title="{{ __('Réinitialiser') }}">
                                <i class="bi bi-x-lg"></i>
                            </a>
                        @endif
                    </form>

                    <span class="text-muted small mb-2" data-zone="compte">
                        {{ __(':n découpe(s)', ['n' => $decoupes->total()]) }}
                        @if ($decoupes->lastPage() > 1)
                            — {{ __('page :courante / :total', ['courante' => $decoupes->currentPage(), 'total' => $decoupes->lastPage()]) }}
                        @endif
                    </span>

                    <div class="table-responsive-sm">
                        <table class="table table-hover align-middle table-compacte">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col"></th>
                                    <th scope="col" style="width: 60%">{{ __('Nom') }}</th>
                                    <th scope="col" style="width: 40%">{{ __('Type') }}</th>
                                    <th scope="col">{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody data-zone="lignes">
                                @forelse ($decoupes as $decoupe)
                                    {{-- Une decoupe retiree du catalogue reste listee, grisee :
                                         c'est le seul ecran d'ou on peut la remettre. --}}
                                    @php $supprimee = $decoupe->trashed(); @endphp
                                    <tr class="{{ $supprimee ? 'table-secondary text-muted' : '' }}">
                                        <th scope="row">{{ $decoupe->id }}</th>
                                        <td>
                                            {{-- La decoupe en grand sans quitter la liste (js/visionneuse.js) ;
                                                 les fleches passent aux decoupes de la page. --}}
                                            @if ($decoupe->image)
                                                <a href="{{ asset('storage/' . $decoupe->image) }}" target="_blank" rel="noopener"
                                                    data-visionneuse="decoupes" data-fond="clair" data-legende="{{ $decoupe->nom }}"
                                                    title="{{ __('Voir en grand') }}"><img src="{{ asset('storage/' . $decoupe->image) }}"
                                                    alt="{{ $decoupe->nom }}"
                                                    style="height: 32px; max-width: 48px; object-fit: contain;"></a>
                                            @else
                                                —
                                            @endif
                                        </td>
                                        <td class="col-souple" title="{{ $decoupe->nom }}">
                                            {{ $decoupe->nom }}
                                            @if ($supprimee)
                                                <span class="badge bg-danger ms-1">{{ __('Supprimée') }}</span>
                                            @endif
                                        </td>
                                        <td class="col-souple">{{ \App\Helpers\CommandeHelper::decoupeType($decoupe->type) }}</td>
                                        <td class="col-actions">
                                            @if ($supprimee)
                                                @can('decoupes.restore')
                                                    <form action="{{ route('decoupes.restore', $decoupe->id) }}"
                                                        method="post" style="display: inline;"
                                                        onsubmit="return confirm(@js(__('Remettre cette découpe au catalogue ?')) + '\n\n' + @js($decoupe->nom . "\n" . \App\Helpers\CommandeHelper::decoupeType($decoupe->type)));">
                                                        @csrf
                                                        @method('PUT')
                                                        <button type="submit" class="btn btn-primary">
                                                            <i class="fa fa-undo"></i> {{ __('Restaurer') }}
                                                        </button>
                                                    </form>
                                                @endcan
                                            @else
                                                @can('decoupes.edit')
                                                    <button type="button" class="btn btn-success" title="{{ __('Modifier') }}"
                                                        data-bs-toggle="modal" data-bs-target="#modale-decoupe-catalogue"
                                                        data-id="{{ $decoupe->id }}" data-libelle="{{ $decoupe->nom }}"
                                                        data-nom="{{ $decoupe->nom }}" data-type="{{ $decoupe->type }}"
                                                        @if ($decoupe->image) data-apercu-actuel="{{ asset('storage/' . $decoupe->image) }}" @endif><i
                                                            class="fa fa-edit"></i></button>
                                                @endcan
                                                @can('decoupes.delete')
                                                    <form action="{{ route('decoupes.destroy', $decoupe->id) }}"
                                                        method="post" style="display: inline;"
                                                        onsubmit="return confirm(@js(__('Retirer cette découpe du catalogue ?')) + '\n\n' + @js($decoupe->nom . "\n" . \App\Helpers\CommandeHelper::decoupeType($decoupe->type)));">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-danger"
                                                            title="{{ __('Retirer du catalogue') }}">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </form>
                                                @endcan
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-4">
                                            {{ __('Aucune découpe ne correspond à cette recherche.') }}
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div data-zone="pagination">{{ $decoupes->links() }}</div>

                    {{-- Une seule fenetre pour l'ajout et la modification, remplie
                         par le bouton qui l'ouvre. Une saisie refusee (nom deja
                         pris, image trop lourde) revient ici avec ses erreurs :
                         `_edition` dit sur quelle decoupe on etait.

                         L'image est facultative, et en modification un champ vide
                         garde celle en place. --}}
                    @canany(['decoupes.create', 'decoupes.edit'])
                        @php $enEdition = old('_edition'); @endphp
                        <div class="modal fade" id="modale-decoupe-catalogue" tabindex="-1" aria-hidden="true" data-modale-saisie
                            @if ($errors->any()) data-rouvrir="1" @endif>
                            <div class="modal-dialog">
                                <form method="post" class="modal-content" enctype="multipart/form-data"
                                    action="{{ $enEdition ? route('decoupes.update', $enEdition) : route('decoupes.store') }}"
                                    data-store="{{ route('decoupes.store') }}"
                                    data-update="{{ route('decoupes.update', '__ID__') }}"
                                    data-titre-ajouter="{{ __('Ajouter une découpe') }}" data-titre-modifier="{{ __('Modifier la découpe') }}">
                                    @csrf
                                    <input type="hidden" name="_method" value="{{ $enEdition ? 'PUT' : 'POST' }}">
                                    <input type="hidden" name="_edition" value="{{ $enEdition }}">

                                    <div class="modal-header">
                                        <h5 class="modal-title" data-titre>{{ $enEdition ? __('Modifier la découpe') : __('Ajouter une découpe') }}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Fermer') }}"></button>
                                    </div>

                                    <div class="modal-body" data-zone="decoupe-catalogue-saisie">
                                        @if ($errors->any())
                                            <div class="alert alert-danger">
                                                <ul class="mb-0">
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif

                                        <div class="row g-3">
                                            <div class="col-7">
                                                <label class="form-label" for="decoupe-catalogue-nom">{{ __('Nom') }} <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control text-uppercase" name="nom" id="decoupe-catalogue-nom"
                                                    data-champ="nom" value="{{ old('nom') }}" maxlength="191" required
                                                    placeholder="{{ __('ex. RECT-06') }}">
                                            </div>

                                            <div class="col-5">
                                                <label class="form-label" for="decoupe-catalogue-type">{{ __('Type') }} <span class="text-danger">*</span></label>
                                                <select class="form-select" name="type" id="decoupe-catalogue-type" data-champ="type" required>
                                                    <option value="">{{ __('-- Choisir --') }}</option>
                                                    @foreach (config('commandes.decoupe_types', []) as $code => $meta)
                                                        <option value="{{ $code }}" @selected((string) old('type') === (string) $code)>{{ \App\Helpers\CommandeHelper::decoupeType($code) }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-12">
                                                <label class="form-label" for="decoupe-catalogue-image">{{ __('Image') }}</label>
                                                <input type="file" class="form-control" name="image" id="decoupe-catalogue-image"
                                                    data-champ="image" accept="image/*" data-apercu
                                                    data-apercu-legende="{{ __('Image actuelle') }}">
                                                <div class="form-text">{{ __('Facultative, 5 Mo maximum. Gardée telle quelle ; seule une image de plus de :n px est réduite, dans son format. En modification, laissez vide pour garder l’image actuelle.', ['n' => \App\Services\Documents\ImageCatalogue::COTE_MAX]) }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Annuler') }}</button>
                                        <button type="submit" class="btn btn-primary">{{ __('Enregistrer') }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @endcanany

                </div>
            </div>
        </div>
    </section>

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