@extends('admin.layout')

@section('title', __("Fiche d'intervention"))

@section('content')
    @php
        // Lignes à afficher : la saisie renvoyée après une erreur de
        // validation d'abord, sinon celles de la fiche.
        $lignes = old('lignes', $fiche->lignes->map(fn ($l) => [
            'produit_id'       => $l->produit_id,
            'code'             => $l->code,
            'libelle'          => $l->libelle,
            'prix_unitaire_ht' => (float) $l->prix_unitaire_ht,
            'quantite'         => $l->quantite,
        ])->all());
        $technicien = $fiche->user ?? auth()->user();
        $action = $fiche->exists
            ? route('fiche_interventions.update', $fiche)
            : route('fiche_interventions.store', $fiche->intervention_id);
    @endphp

    <style>
        .fiche-form { max-width: 720px; }
        .fiche-form .fiche-section { border-top: 1px solid var(--bs-border-color, #dee2e6); padding: 1rem 0; }
        .fiche-choix .btn-check + .btn { min-width: 5rem; }
        .fiche-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 6rem 2rem; gap: .5rem; align-items: center; padding: .5rem 0; border-bottom: 1px dashed var(--bs-border-color, #dee2e6); }
        .fiche-ligne .fiche-libelle { font-size: .9rem; line-height: 1.2; }
        .fiche-ligne .fiche-libelle small { display: block; }
        .fiche-ligne input { padding: .25rem .4rem; }
        .fiche-ligne .fiche-total { text-align: right; font-weight: 600; font-size: .9rem; }
        .fiche-ligne.libre { grid-template-columns: minmax(0, 1fr) 4.5rem 6rem 2rem; }
        .fiche-resultats { position: absolute; z-index: 20; left: 0; right: 0; max-height: 280px; overflow-y: auto; }
        .fiche-resultats .list-group-item { cursor: pointer; }
        .fiche-totaux div { display: flex; justify-content: space-between; }
        .fiche-signature { width: 100%; height: 180px; border: 1px dashed var(--bs-border-color, #ced4da); border-radius: .375rem; background: #fff; touch-action: none; cursor: crosshair; }
        html.dark-mode .fiche-resultats .list-group-item { background: #1e1e1e; color: #fff; border-color: #333; }
        html.dark-mode .fiche-form ::placeholder { color: #8a8a8a; }
        /* Au téléphone, la désignation prend toute la largeur : dans une
           colonne étroite, « TÉLÉCOMMANDE » se coupait au milieu. */
        @media (max-width: 575.98px) {
            .fiche-ligne, .fiche-ligne.libre { grid-template-columns: 4.5rem minmax(0, 1fr) 2rem; row-gap: .35rem; }
            .fiche-ligne .fiche-libelle { grid-column: 1 / -1; }
        }
    </style>

    <div class="pagetitle d-flex justify-content-between align-items-center flex-wrap gap-2">
        <h1 class="mb-0">@yield('title')</h1>
        <div class="d-flex flex-wrap gap-2">
            {{-- Le PDF de ce qui est enregistré, pas de la saisie en cours. --}}
            @if ($fiche->exists)
                <a href="{{ route('fiche_interventions.show', $fiche) }}" target="_blank" rel="noopener"
                    class="btn btn-outline-danger btn-sm">
                    <i class="bi bi-file-earmark-pdf"></i> {{ __('PDF') }}
                </a>
            @endif
            <a href="{{ route('interventions.show', $fiche->intervention_id) }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> {{ __('Intervention #:id', ['id' => $fiche->intervention_id]) }}
            </a>
        </div>
    </div>

    <section class="section">
        <div class="card p-3 p-md-4 fiche-form">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ $action }}" id="fiche-form" novalidate>
                @csrf
                @if ($fiche->exists)
                    @method('PUT')
                @endif
                <input type="hidden" name="distance_km" value="{{ old('distance_km', $fiche->distance_km) }}">

                {{-- Client : figé sur la fiche à sa création --}}
                <div class="p-2 px-3 mb-3 rounded border">
                    <div class="fw-semibold">{{ $fiche->client_nom ?? '—' }}</div>
                    <div class="small text-muted">
                        {{ $fiche->client_adresse }}<br>
                        {{ $fiche->client_code_postal }} {{ $fiche->client_ville }}
                    </div>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label for="fiche-date" class="form-label small mb-1">{{ __('Date') }}</label>
                        <input type="date" id="fiche-date" name="date_intervention" class="form-control" required
                            value="{{ old('date_intervention', $fiche->date_intervention?->format('Y-m-d')) }}">
                    </div>
                    <div class="col-6">
                        <span class="form-label small mb-1 d-block">{{ __('Technicien') }}</span>
                        <div class="py-2">{{ trim(($technicien->prenom ?? '') . ' ' . ($technicien->nom ?? '')) }}</div>
                    </div>
                </div>

                <div class="fiche-section">
                    <label for="fiche-observations" class="form-label small mb-1">{{ __('Observations') }}</label>
                    <textarea id="fiche-observations" name="observations" rows="3" class="form-control">{{ old('observations', $fiche->observations) }}</textarea>
                </div>

                {{-- Pièces --}}
                <div class="fiche-section">
                    <div class="d-flex justify-content-between small text-muted mb-1">
                        <span>{{ __('Pièces') }}</span>
                        <span>{{ __('Qté · PU HT · Total') }}</span>
                    </div>
                    <div id="fiche-lignes"></div>

                    <div class="position-relative mt-2">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="search" id="fiche-recherche" class="form-control" autocomplete="off"
                                placeholder="{{ __('Chercher une pièce : digicode, télécommande…') }}">
                        </div>
                        <div id="fiche-resultats" class="list-group fiche-resultats shadow-sm"></div>
                    </div>
                    <button type="button" id="fiche-libre" class="btn btn-link btn-sm px-0 mt-1">
                        <i class="bi bi-plus-circle"></i> {{ __('Pièce hors catalogue') }}
                    </button>
                </div>

                {{-- Main d'œuvre --}}
                <div class="fiche-section">
                    <label for="fiche-mo" class="form-label small mb-1">
                        {{ __("Main d'œuvre et déplacement") }}
                        @if ($fiche->distance_km)
                            <span class="text-muted">· {{ __(':km km depuis l\'atelier', ['km' => $fiche->distance_km]) }}</span>
                        @endif
                    </label>
                    <div class="d-flex flex-wrap gap-2 align-items-center fiche-choix">
                        @if ($calcul)
                            <button type="button" class="btn btn-outline-primary btn-sm" data-mo="{{ $calcul['forfait'] }}">
                                {{ __('Client') }} {{ number_format($calcul['forfait'], 2, ',', ' ') }} €
                            </button>
                            <button type="button" class="btn btn-outline-primary btn-sm" data-mo="{{ $calcul['non_client'] }}">
                                {{ __('Non client') }} {{ number_format($calcul['non_client'], 2, ',', ' ') }} €
                            </button>
                        @endif
                        <div class="input-group input-group-sm ms-auto" style="max-width: 9rem;">
                            <input type="number" id="fiche-mo" name="main_oeuvre" class="form-control text-end" step="0.01" min="0"
                                value="{{ old('main_oeuvre', (float) $fiche->main_oeuvre) }}">
                            <span class="input-group-text">€ HT</span>
                        </div>
                    </div>
                </div>

                {{-- TVA et totaux --}}
                <div class="fiche-section">
                    <span class="form-label small mb-1 d-block">{{ __('TVA') }}</span>
                    <div class="d-flex flex-wrap gap-2 fiche-choix">
                        @foreach ($tauxTva as $taux)
                            <input type="radio" class="btn-check" name="taux_tva" id="tva-{{ $taux }}" value="{{ $taux }}"
                                @checked((int) old('taux_tva', $fiche->taux_tva) === $taux)>
                            <label class="btn btn-outline-primary btn-sm" for="tva-{{ $taux }}">
                                {{ $taux }} %
                                @if ($taux === 20)
                                    <small class="opacity-75">{{ __('maison < 2 ans') }}</small>
                                @endif
                            </label>
                        @endforeach
                    </div>
                    <div class="fiche-totaux mt-3">
                        <div><span class="text-muted">{{ __('Total HT') }}</span><span id="total-ht"></span></div>
                        <div><span class="text-muted">{{ __('TVA') }} <span id="total-taux"></span> %</span><span id="total-tva"></span></div>
                        <div class="fs-5 fw-semibold"><span>{{ __('Total TTC') }}</span><span id="total-ttc"></span></div>
                    </div>
                </div>

                {{-- Règlement --}}
                <div class="fiche-section">
                    <span class="form-label small mb-1 d-block">{{ __('Mode de règlement') }}</span>
                    <div class="d-flex flex-wrap gap-2 fiche-choix">
                        @foreach ($modes as $code => $libelle)
                            <input type="radio" class="btn-check" name="mode_reglement" id="reglement-{{ $code }}" value="{{ $code }}"
                                @checked((int) old('mode_reglement', $fiche->mode_reglement) === $code)>
                            <label class="btn btn-outline-primary btn-sm" for="reglement-{{ $code }}">{{ __($libelle) }}</label>
                        @endforeach
                    </div>
                </div>

                {{-- Signature --}}
                <div class="fiche-section">
                    <span class="form-label small mb-1 d-block">
                        {{ __('Bon pour accord le :date · signature du client', ['date' => now()->format('d/m/Y')]) }}
                    </span>
                    @if ($fiche->signature)
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <a href="{{ asset('storage/' . $fiche->signature->url) }}" target="_blank" rel="noopener"
                                data-visionneuse="signature" data-fond="clair"
                                data-legende="{{ __('Signature du client') }}" title="{{ __('Voir en grand') }}"><img src="{{ asset('storage/' . $fiche->signature->url) }}" alt="" class="border rounded bg-white" style="height: 3.5rem"></a>
                            <span class="small">{{ __('Signée le :date. Signer à nouveau remplace cette signature.', ['date' => $fiche->signee_le?->format('d/m/Y')]) }}</span>
                        </div>
                    @endif
                    <canvas id="signature-canvas" class="fiche-signature"></canvas>
                    <input type="hidden" name="signature" id="signature-data">
                    <button type="button" class="btn btn-link btn-sm text-danger px-0" id="signature-effacer">
                        <i class="bi bi-eraser"></i> {{ __('Effacer la signature') }}
                    </button>
                </div>

                <div class="d-flex justify-content-end pt-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save"></i> {{ __('Enregistrer') }}
                    </button>
                </div>
            </form>

            @if ($fiche->exists)
                <form method="POST" action="{{ route('fiche_interventions.supprimer', $fiche) }}" class="mt-3 text-end"
                    onsubmit="return confirm(@js(__('Supprimer la fiche d\'intervention du :date ?', ['date' => $fiche->date_intervention?->format('d/m/Y')])))">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-link btn-sm text-danger px-0">
                        <i class="bi bi-trash"></i> {{ __('Supprimer la fiche') }}
                    </button>
                </form>
            @endif
        </div>
    </section>

    <script>
        window.FICHE_INTERVENTION = {
            catalogue: @json($catalogue),
            lignes: @json(array_values($lignes)),
            textes: {
                aucun: @json(__('Aucune pièce trouvée.')),
                libelle: @json(__('Désignation')),
                retirer: @json(__('Retirer')),
            },
        };
    </script>
    @push('scripts')
        <script src="@assetV('js/interventions/fiche.js')"></script>
    @endpush
@endsection