@extends('admin.layout')

@section('title', 'Produits SAV')

@section('content')
@php
    $peutProposer = auth()->user()->can('produits.proposer');
    $filtres = array_filter(['fam' => $fam ?: null, 'q' => $q ?: null]);
@endphp
{{-- Les lignes rayées de .table-striped imposent leur couleur de texte :
     un simple text-muted sur le <tr> ne grise qu'une ligne sur deux. --}}
<style>
    tr.non-propose > td { color: var(--bs-gray-600) !important; }
</style>
<div class="container">

    <div class="d-flex flex-wrap align-items-baseline justify-content-between gap-2 mb-3">
        <h1 class="h3 mb-0">{{ __('Produits SAV') }}</h1>
        <span class="text-muted small">
            {{ __('Proposés sur la fiche d\'intervention') }} :
            <strong id="nb-proposes">{{ $nbProposes }}</strong>
        </span>
    </div>

    {{-- Le seul message qui arrive ici : « Accès refusé », quand
         CheckPermission renvoie a cette liste qui a tente de cocher un
         produit sans `produits.proposer`. sur-place.js le fait flotter. --}}
    <div data-messages>
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
    </div>
    @include('admin.gestan._stale_banner')

    @if(!empty($perdus))
        <div class="alert alert-warning">
            {{ __('Produits cochés introuvables dans les familles SAV de Gestan : ils ne sortent plus sur la fiche d\'intervention.') }}
            <div class="d-flex flex-wrap gap-2 mt-2">
                @foreach($perdus as $id)
                    <span class="badge text-bg-light border d-inline-flex align-items-center gap-2" data-perdu="{{ $id }}">
                        IDPRODUIT {{ $id }}
                        @if($peutProposer)
                            <button type="button" class="btn-close" style="font-size: .6rem"
                                    aria-label="{{ __('Retirer') }}" data-retirer="{{ $id }}"></button>
                        @endif
                    </span>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Filtres. Choisir une famille recharge aussitôt ; la recherche part
         avec Entrée (un seul champ texte : le navigateur soumet sans bouton). --}}
    <form method="GET" action="{{ route('produits.index') }}" class="row g-2 mb-4 align-items-end">
        @if($proposes && !$restreint)
            <input type="hidden" name="vue" value="proposes">
        @endif
        <div class="col-md-4">
            <label class="form-label">{{ __('Famille') }}</label>
            <select name="fam" class="form-select" onchange="this.form.submit()">
                <option value="0">{{ __('Toutes') }}</option>
                @foreach($allFamilies as $f)
                    <option value="{{ (int)($f['id'] ?? 0) }}" @selected((int)($f['id'] ?? 0) === (int)$fam)>
                        {{ $f['libelle'] ?? ('Famille ' . ($f['id'] ?? '')) }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="col-md-4">
            <label class="form-label">{{ __('Recherche') }}</label>
            <input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="{{ __('Ex: télécommande, capot, ON2E...') }}">
        </div>

        {{-- Un technicien ne voit que les produits proposés (ProduitController) :
             pas de « Tout » à lui offrir. --}}
        @unless($restreint)
            <div class="col-7 col-md-2">
                <div class="btn-group w-100" role="group">
                    <a href="{{ route('produits.index', $filtres) }}"
                       class="btn btn-outline-primary {{ $proposes ? '' : 'active' }}">{{ __('Tout') }}</a>
                    <a href="{{ route('produits.index', $filtres + ['vue' => 'proposes']) }}"
                       class="btn btn-outline-primary {{ $proposes ? 'active' : '' }}">{{ __('Proposés') }}</a>
                </div>
            </div>
        @endunless

        <div class="col-5 col-md-2">
            <a class="btn btn-outline-secondary w-100" href="{{ route('produits.index') }}">{{ __('Réinitialiser') }}</a>
        </div>
    </form>

    @if($peutProposer)
        <p class="text-muted small">
            {{ __('Cochez un produit pour le proposer au technicien sur la fiche d\'intervention. Chaque case s\'enregistre dès le clic.') }}
        </p>
    @endif

    <div id="proposer-erreur" class="alert alert-danger d-none"></div>

    {{-- Affichage --}}
    @forelse($families as $famille)
        @php
            $items = $famille['items'] ?? [];
        @endphp

        <div class="card mb-4">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <strong>{{ $famille['libelle'] ?? 'Famille' }}</strong>
                    <span class="text-muted">(#{{ $famille['id'] ?? '' }})</span>
                </div>
                <span class="badge bg-secondary">{{ count($items) }} {{ __('produit(s)') }}</span>
            </div>

            <div class="card-body p-0">
                @if(empty($items))
                    <div class="p-3 text-muted">{{ __('Aucun produit dans cette famille (avec les filtres actuels).') }}</div>
                @else
                    <div class="table-responsive">
                        <table class="table table-striped align-middle mb-0 table-compacte">
                            <thead>
                                <tr>
                                    {{-- L'interrupteur n'a de sens que là où il y a aussi
                                         des produits non proposés. --}}
                                    @unless($restreint)
                                        <th style="width: 70px;">{{ __('Fiche') }}</th>
                                    @endunless
                                    <th>{{ __('Nom du produit') }}</th>
                                    <th class="d-none d-md-table-cell" style="width: 180px;">{{ __('Code') }}</th>
                                    <th style="width: 120px;" class="text-end">{{ __('Prix HT') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($items as $p)
                                    <tr class="{{ $p['propose'] ? '' : 'non-propose' }}">
                                        @unless($restreint)
                                            <td>
                                                <div class="form-check form-switch mb-0">
                                                    <input class="form-check-input" type="checkbox" role="switch"
                                                           data-proposer="{{ $p['IDPRODUIT'] }}"
                                                           aria-label="{{ __('Proposer sur la fiche d\'intervention') }}"
                                                           @checked($p['propose']) @disabled(!$peutProposer)>
                                                </div>
                                            </td>
                                        @endunless
                                        <td class="col-souple" title="{{ $p['LIB_PRODUIT'] ?? '' }}">
                                            {{ $p['LIB_PRODUIT'] ?? '' }}
                                            @if($p['doublon'])
                                                <span class="badge text-bg-warning ms-1"
                                                      title="{{ __('Plusieurs produits Gestan portent ce libellé : le code les départage.') }}">
                                                    {{ __('même libellé') }}
                                                </span>
                                            @endif
                                            <div class="d-md-none small text-muted">{{ $p['CD_PRODUIT'] ?? '' }}</div>
                                        </td>
                                        <td class="d-none d-md-table-cell">{{ $p['CD_PRODUIT'] ?? '' }}</td>
                                        <td class="col-num">
                                            {{ $p['PU_VENTE_HT_FMT'] ?? ($p['PU_VENTE_HT'] ?? '') }} €
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>

    @empty
        <div class="alert alert-info">
            {{ __('Aucun produit trouvé.') }}
        </div>
    @endforelse

</div>
@endsection

@push('scripts')
<script>
    (function () {
        var url = @json(route('produits.proposer', ['produit' => '__ID__']));
        var jeton = @json(csrf_token());
        var compteur = document.getElementById('nb-proposes');
        var erreur = document.getElementById('proposer-erreur');

        function envoyer(id, propose) {
            return fetch(url.replace('__ID__', id), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': jeton,
                },
                body: JSON.stringify({ propose: propose }),
            }).then(function (reponse) {
                if (!reponse.ok) {
                    throw new Error(reponse.status);
                }
                return reponse.json();
            });
        }

        function signaler() {
            erreur.textContent = @json(__('Le choix n\'a pas été enregistré. Rechargez la page et réessayez.'));
            erreur.classList.remove('d-none');
        }

        document.querySelectorAll('[data-proposer]').forEach(function (caseACocher) {
            caseACocher.addEventListener('change', function () {
                var propose = caseACocher.checked;
                var ligne = caseACocher.closest('tr');
                caseACocher.disabled = true;

                envoyer(caseACocher.dataset.proposer, propose)
                    .then(function () {
                        ligne.classList.toggle('non-propose', !propose);
                        compteur.textContent = parseInt(compteur.textContent, 10) + (propose ? 1 : -1);
                        erreur.classList.add('d-none');
                    })
                    .catch(function () {
                        caseACocher.checked = !propose;
                        signaler();
                    })
                    .finally(function () {
                        caseACocher.disabled = false;
                    });
            });
        });

        document.querySelectorAll('[data-retirer]').forEach(function (bouton) {
            bouton.addEventListener('click', function () {
                envoyer(bouton.dataset.retirer, false)
                    .then(function () {
                        bouton.closest('[data-perdu]').remove();
                    })
                    .catch(signaler);
            });
        });
    })();
</script>
@endpush