@extends('admin.layout')

@section('title', __("Prix de l'intervention"))

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
    <style>
        #tarif-carte {
            height: calc(100vh - 330px);
            min-height: 360px;
            border-radius: .5rem;
            z-index: 0; /* sous les menus déroulants du header */
        }
        .tarif-resultat .form-control {
            text-align: right;
            font-weight: 600;
            font-size: 1.1rem;
        }
        /* En sombre, le texte indicatif passerait pour une saisie. */
        html.dark-mode #tarif-form ::placeholder {
            color: #8a8a8a;
        }
        /* Les tuiles OSM restent claires : on ne fait qu'atténuer en sombre. */
        html.dark-mode #tarif-carte .leaflet-tile-pane {
            filter: brightness(.8) contrast(1.1);
        }
        html.dark-mode #tarif-carte .leaflet-control a,
        html.dark-mode #tarif-carte .leaflet-control-attribution {
            background: #1e1e1e;
            color: #fff;
        }
    </style>

    <div class="pagetitle d-flex justify-content-between align-items-center flex-wrap gap-2">
        <h1 class="mb-0">@yield('title')</h1>
        <a href="{{ route('interventions.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left"></i> {{ __('Interventions') }}
        </a>
    </div>

    <section class="section">
        <div class="card p-3 p-md-4">
            <div class="row g-3">
                {{-- Adresse du client --}}
                <form id="tarif-form" class="col-lg-7" novalidate>
                    @csrf
                    <div class="row g-2">
                        <div class="col-12">
                            <label for="tarif-adresse" class="form-label mb-1">{{ __('Adresse') }}</label>
                            <input type="text" id="tarif-adresse" name="adresse" class="form-control" value="{{ $prerempli['adresse'] }}"
                                autocomplete="off" placeholder="{{ __('N° et rue (facultatif)') }}">
                        </div>
                        <div class="col-sm-3">
                            <label for="tarif-cp" class="form-label mb-1">{{ __('Code postal') }}</label>
                            <input type="text" id="tarif-cp" name="code_postal" class="form-control" value="{{ $prerempli['code_postal'] }}"
                                inputmode="numeric" maxlength="5" autocomplete="off">
                        </div>
                        <div class="col-sm-6">
                            <label for="tarif-ville" class="form-label mb-1">{{ __('Ville') }}</label>
                            <input type="text" id="tarif-ville" name="ville" class="form-control" autocomplete="off"
                                value="{{ $prerempli['ville'] }}">
                        </div>
                        <div class="col-sm-3 d-flex align-items-end">
                            <button type="submit" id="tarif-calculer" class="btn btn-primary w-100">
                                <i class="bi bi-search"></i> {{ __('Calculer') }}
                            </button>
                        </div>
                    </div>
                    <div id="tarif-message" class="small mt-2" role="status" aria-live="polite"></div>
                </form>

                {{-- Résultat --}}
                <div class="col-lg-5 tarif-resultat">
                    <div class="row g-2">
                        <div class="col-4">
                            <label for="tarif-forfait" class="form-label mb-1">{{ __('Forfait') }}</label>
                            <input type="text" id="tarif-forfait" class="form-control" value="0,00 €" readonly>
                        </div>
                        <div class="col-4">
                            <label for="tarif-non-client" class="form-label mb-1">{{ __('Non client') }}</label>
                            <input type="text" id="tarif-non-client" class="form-control" value="0,00 €" readonly>
                        </div>
                        <div class="col-4">
                            <label for="tarif-distance" class="form-label mb-1">{{ __('Distance') }}</label>
                            <input type="text" id="tarif-distance" class="form-control" value="0 km" readonly>
                        </div>
                    </div>
                    <div class="small text-muted mt-2">
                        {{ __('Déplacement + main d\'œuvre, depuis :depart.', ['depart' => $depart['label']]) }}
                        <a class="text-reset" data-bs-toggle="collapse" href="#tarif-bareme" role="button"
                            aria-expanded="false" aria-controls="tarif-bareme">{{ __('Barème') }}</a>
                    </div>
                    <div class="collapse" id="tarif-bareme">
                        <ul class="small text-muted mb-0 mt-1 ps-3">
                            @php $min = 0; @endphp
                            @foreach ($paliers as $jusqua => $prix)
                                <li>{{ __(':min à :max km : :prix €', ['min' => $min, 'max' => $jusqua, 'prix' => $prix]) }}</li>
                                @php $min = $jusqua + 1; @endphp
                            @endforeach
                            <li>{{ __('au-delà de :km km : :prix € + :parKm € par km', [
                                'km' => array_key_last($paliers),
                                'prix' => end($paliers),
                                'parKm' => number_format($parKm, 2, ',', ' '),
                            ]) }}</li>
                            <li>{{ __('non client : forfait + :sup €', ['sup' => $supplementNonClient]) }}</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="tarif-carte" class="mt-3"></div>
        </div>
    </section>

    @push('scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
        <script>
            (function () {
                var depart = @json($depart);
                var urlCalcul = @json(route('interventions.tarifs.calculer'));
                var textes = {
                    calcul: @json(__('Calcul de l\'itinéraire…')),
                    retenue: @json(__('Adresse retenue :')),
                    erreur: @json(__('Le calcul a échoué, réessayez dans un instant.')),
                };

                var carte = L.map('tarif-carte').setView([depart.lat, depart.lon], 10);
                L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                }).addTo(carte);
                L.marker([depart.lat, depart.lon], { title: depart.label }).addTo(carte).bindPopup('ACPORTAIL — ' + depart.label);

                var calque = L.layerGroup().addTo(carte);

                var form = document.getElementById('tarif-form');
                var bouton = document.getElementById('tarif-calculer');
                var message = document.getElementById('tarif-message');
                var euros = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });

                function afficher(texte, classe) {
                    message.className = 'small mt-2 ' + (classe || '');
                    message.textContent = texte;
                }

                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    bouton.disabled = true;
                    afficher(textes.calcul, 'text-muted');

                    fetch(urlCalcul, {
                        method: 'POST',
                        headers: { 'Accept': 'application/json' },
                        body: new FormData(form),
                    })
                        .then(function (r) {
                            return r.json().then(function (data) { return { ok: r.ok, data: data }; });
                        })
                        .then(function (res) {
                            if (!res.ok) {
                                afficher(res.data.message || textes.erreur, 'text-danger');
                                return;
                            }
                            var d = res.data;
                            document.getElementById('tarif-forfait').value = euros.format(d.forfait);
                            document.getElementById('tarif-non-client').value = euros.format(d.non_client);
                            document.getElementById('tarif-distance').value = d.distance + ' km';
                            afficher(textes.retenue + ' ' + d.adresse, 'text-success');

                            calque.clearLayers();
                            var trace = L.polyline(d.trace, { color: '#4f46e5', weight: 5, opacity: .75 }).addTo(calque);
                            L.marker([d.arrivee.lat, d.arrivee.lon], { title: d.adresse }).addTo(calque).bindPopup(d.adresse);
                            carte.fitBounds(trace.getBounds(), { padding: [30, 30] });
                        })
                        .catch(function () {
                            afficher(textes.erreur, 'text-danger');
                        })
                        .finally(function () {
                            bouton.disabled = false;
                        });
                });

                if (@json($prerempli['ville'] !== '' || $prerempli['code_postal'] !== '')) {
                    form.requestSubmit();
                }
            })();
        </script>
    @endpush
@endsection