{% set is_new = mileage|default(null) is null %}
{% set purposes = ['Réunion client', 'Formation', 'Prospection commerciale', 'Livraison', 'Intervention technique', 'Autre'] %}
{% if errors._global|default(null) %}<div class="alert alert-danger">{{ errors._global }}</div>{% endif %}
<form method="post" class="mileage-form" data-controller="mileage-form" data-action="input->mileage-form#refresh change->mileage-form#refresh">
    <input type="hidden" name="_token" value="{{ csrf_token(csrf_id) }}">
    <input type="hidden" name="mileage[status]" value="{{ data.status }}">
    <div class="mileage-form-layout">
        <main class="mileage-form-main">
            <section class="mileage-form-card">
                <div class="mileage-form-card-heading"><span class="is-blue"><i class="ti ti-car"></i></span><h2>Déplacement</h2><p>Informations sur le trajet effectué</p></div>
                <div class="mileage-form-card-body mileage-movement-grid">
                    <div class="mileage-field">
                        <label>Employé <b>*</b></label>
                        <select class="form-select {{ errors.employeeId|default(null) ? 'is-invalid' : '' }}" name="mileage[employeeId]" required data-controller="tom-select" data-tom-select-placeholder-value="Rechercher un employé…" data-mileage-form-target="employee" data-action="change->mileage-form#refresh">
                            <option value="">Rechercher un employé…</option>{% for employee in employees %}<option value="{{ employee.id }}" data-function="{{ employee.fonction|default('Collaborateur') }}" {{ data.employeeId == employee.id ? 'selected' : '' }}>{{ employee.prenom }} {{ employee.nom }}</option>{% endfor %}
                        </select>
                        {% if errors.employeeId|default(null) %}<div class="invalid-feedback">{{ errors.employeeId }}</div>{% endif %}
                        <div class="mileage-selected-employee"><span data-mileage-form-target="employeeInitial">?</span><strong data-mileage-form-target="employeePreview">Sélectionner un employé</strong><small data-mileage-form-target="employeeFunction">—</small></div>
                    </div>
                    <div class="mileage-field"><label>Date du déplacement <b>*</b></label><div class="mileage-input-icon"><i class="ti ti-calendar"></i><input class="form-control {{ errors.date|default(null) ? 'is-invalid' : '' }}" type="date" name="mileage[date]" value="{{ data.date }}" required data-mileage-form-target="date"></div>{% if errors.date|default(null) %}<div class="invalid-feedback d-block">{{ errors.date }}</div>{% endif %}</div>
                    <div class="mileage-field mileage-address-field"><label>Adresse / destination <b>*</b></label><div class="mileage-input-icon"><i class="ti ti-map-pin-filled"></i><input class="form-control {{ errors.address|default(null) ? 'is-invalid' : '' }}" name="mileage[address]" value="{{ data.address }}" placeholder="Saisir l'adresse de destination…" required data-mileage-form-target="address"><i class="ti ti-circle-check-filled mileage-address-check" data-mileage-form-target="addressCheck"></i></div>{% if errors.address|default(null) %}<div class="invalid-feedback d-block">{{ errors.address }}</div>{% endif %}<small class="mileage-address-valid" data-mileage-form-target="addressMessage"><i class="ti ti-circle-check-filled"></i>Adresse renseignée</small></div>
                    <div class="mileage-field"><label>Projet <em>(optionnel)</em></label><select class="form-select {{ errors.projectId|default(null) ? 'is-invalid' : '' }}" name="mileage[projectId]" data-controller="tom-select" data-tom-select-placeholder-value="Aucun projet" data-mileage-form-target="project" data-action="change->mileage-form#refresh"><option value="">— Aucun projet —</option>{% for project in projects %}{% set profitability = form_view.profitability[project.id]|default({margin_rate: 0, gains: 0}) %}<option value="{{ project.id }}" data-margin-rate="{{ profitability.margin_rate }}" data-gains="{{ profitability.gains }}" {{ data.projectId == project.id ? 'selected' : '' }}>{{ project.client ? project.client.nom ~ ' - ' : '' }}{{ project.titre }}</option>{% endfor %}</select>{% if errors.projectId|default(null) %}<div class="invalid-feedback">{{ errors.projectId }}</div>{% endif %}<small>Si renseigné, l'indemnité sera imputée au projet.</small></div>
                    <div class="mileage-field"><label>Commentaire</label><textarea class="form-control" rows="3" name="mileage[context]" placeholder="Précisez le contexte du déplacement…" data-mileage-form-target="context">{{ data.context }}</textarea></div>
                </div>
            </section>

            <section class="mileage-form-card">
                <div class="mileage-form-card-heading"><span class="is-green"><i class="ti ti-road"></i></span><h2>Kilométrage</h2></div>
                <div class="mileage-form-card-body">
                    <div class="mileage-values-grid">
                        <div class="mileage-field"><label>Kilomètres <b>*</b></label><div class="mileage-suffix"><input class="form-control {{ errors.kilometers|default(null) ? 'is-invalid' : '' }}" type="number" step="0.01" min="0" name="mileage[kilometers]" value="{{ data.kilometers }}" required data-mileage-form-target="kilometers"><span>km</span></div>{% if errors.kilometers|default(null) %}<div class="invalid-feedback d-block">{{ errors.kilometers }}</div>{% endif %}</div>
                        <div class="mileage-field"><label>Taux kilométrique</label><select class="form-select {{ errors.ratePerKm|default(null) ? 'is-invalid' : '' }}" name="mileage[ratePerKm]" required data-mileage-form-target="rate">{% for label, rate in form_view.rates %}<option value="{{ rate }}" {{ data.ratePerKm == rate ? 'selected' : '' }}>{{ rate|number_format(3, ',', ' ') }} €/km ({{ label }})</option>{% endfor %}</select>{% if errors.ratePerKm|default(null) %}<div class="invalid-feedback">{{ errors.ratePerKm }}</div>{% endif %}</div>
                        <div class="mileage-field"><label>Montant calculé <i class="ti ti-lock"></i></label><div class="mileage-calculated"><strong data-mileage-form-target="amountField">{{ (data.amount ?: 0)|number_format(2, ',', ' ') }} €</strong><i class="ti ti-lock"></i></div><input type="hidden" name="mileage[amount]" value="{{ data.amount }}" data-mileage-form-target="amount"></div>
                    </div>
                    <div class="mileage-status-grid"><div class="mileage-field"><label>Statut</label><select class="form-select" disabled><option>{{ data.status == 'submitted' ? 'Soumise' : 'Brouillon' }}</option></select></div><div class="mileage-server-notice"><i class="ti ti-info-circle-filled"></i>Le montant est recalculé côté serveur à l'enregistrement.</div></div>
                    <div class="mileage-amount-banner"><div><small>Distance</small><strong><span data-mileage-form-target="distanceBanner">0</span> <em>km</em></strong></div><div><small>Taux</small><strong><span data-mileage-form-target="rateBanner">0,000</span> <em>€/km</em></strong></div><div><small>Indemnité estimée</small><strong data-mileage-form-target="amountBanner">0,00 €</strong></div><span><i class="ti ti-calculator"></i></span></div>
                </div>
            </section>

            <section class="mileage-form-card">
                <div class="mileage-form-card-heading"><span class="is-purple"><i class="ti ti-adjustments-horizontal"></i></span><h2>Compléments</h2><p>Informations optionnelles</p></div>
                <div class="mileage-form-card-body mileage-complement-grid">
                    <div class="mileage-field"><label>Motif du déplacement</label><select class="form-select" name="mileage[purpose]" data-mileage-form-target="purpose"><option value="">Sélectionner un motif…</option>{% for purpose in purposes %}<option value="{{ purpose }}" {{ data.purpose == purpose ? 'selected' : '' }}>{{ purpose }}</option>{% endfor %}{% if data.purpose and data.purpose not in purposes %}<option value="{{ data.purpose }}" selected>{{ data.purpose }}</option>{% endif %}</select></div>
                    <label class="mileage-round-trip"><span><i class="ti ti-arrows-left-right"></i><span><strong>Aller-retour inclus</strong><small>Distance × 2</small></span></span><input class="form-check-input" type="checkbox" name="mileage[roundTrip]" value="1" {{ data.roundTrip ? 'checked' : '' }} data-mileage-form-target="roundTrip"></label>
                    <div class="mileage-field mileage-notes"><label>Notes internes</label><textarea class="form-control" rows="2" name="mileage[comment]" placeholder="Notes visibles uniquement par les administrateurs…">{{ data.comment }}</textarea></div>
                </div>
            </section>
        </main>

        <aside class="mileage-form-sidebar">
            <section class="mileage-side-card"><div class="mileage-side-heading"><i class="ti ti-list-check"></i><h2>Résumé</h2></div><div class="mileage-side-body mileage-summary-list">
                <div><i class="ti ti-user"></i><span><small>Employé</small><strong data-mileage-form-target="summaryEmployee">—</strong></span></div>
                <div><i class="ti ti-folder-filled"></i><span><small>Projet</small><strong data-mileage-form-target="summaryProject">Aucun projet</strong></span></div>
                <div><i class="ti ti-map-pin-filled"></i><span><small>Adresse</small><strong data-mileage-form-target="summaryAddress">—</strong></span></div>
                <div class="mileage-summary-numbers"><span><small>Distance</small><strong><b data-mileage-form-target="summaryDistance">0</b> km</strong></span><span><small>Taux</small><strong><b data-mileage-form-target="summaryRate">0,000</b> €</strong></span></div>
                <div class="mileage-summary-amount"><span><small>Montant estimé</small><strong data-mileage-form-target="summaryAmount">0,00 €</strong></span><i class="ti ti-currency-euro"></i></div>
            </div></section>
            <section class="mileage-side-card" data-mileage-form-target="profitabilityCard"><div class="mileage-side-heading"><i class="ti ti-chart-line"></i><h2>Impact rentabilité</h2></div><div class="mileage-side-body mileage-profitability"><span class="mileage-project-pill" data-mileage-form-target="profitabilityProject"><i class="ti ti-folder-filled"></i>Aucun projet</span><div><small>Rentabilité actuelle</small><strong data-mileage-form-target="currentMargin">—</strong></div><div class="progress"><div class="progress-bar" data-mileage-form-target="marginBar"></div></div><div><small>Impact dépense</small><strong class="text-warning" data-mileage-form-target="impactMargin">—</strong></div><div class="mileage-after-margin"><small>Rentabilité après</small><strong data-mileage-form-target="afterMargin">—</strong></div><p><i class="ti ti-info-circle-filled"></i><span data-mileage-form-target="impactMessage">Sélectionnez un projet pour estimer l'impact.</span></p></div></section>
            <section class="mileage-side-card"><div class="mileage-side-heading"><i class="ti ti-alert-circle-filled"></i><h2>Champs requis</h2></div><div class="mileage-side-body mileage-required-list"><p data-mileage-form-target="requiredEmployee"><i class="ti ti-circle-check-filled"></i>Employé</p><p data-mileage-form-target="requiredDate"><i class="ti ti-circle-check-filled"></i>Date du déplacement</p><p data-mileage-form-target="requiredAddress"><i class="ti ti-circle-check-filled"></i>Adresse / destination</p><p data-mileage-form-target="requiredKilometers"><i class="ti ti-circle-check-filled"></i>Kilomètres</p><strong data-mileage-form-target="requiredSummary"><i class="ti ti-circle-check-filled"></i>Tous les champs requis sont remplis</strong></div></section>
        </aside>
    </div>
    <footer class="mileage-action-bar"><div><a class="btn btn-outline-secondary" href="{{ mileage|default(null) ? path('commercial_mileage_show', {idtoken: mileage.idtoken}) : path('commercial_mileage_index') }}"><i class="ti ti-x"></i>Annuler</a><span><i class="ti ti-info-circle-filled"></i>{{ is_new ? 'Indemnité non encore enregistrée' : 'Modification de l’indemnité' }}</span></div><div><button class="btn btn-outline-secondary" type="submit" name="_intent" value="draft"><i class="ti ti-device-floppy"></i>Enregistrer en brouillon</button><button class="btn btn-primary" type="submit" name="_intent" value="submit"><i class="ti ti-plus"></i>{{ is_new ? 'Créer l’indemnité' : 'Enregistrer et soumettre' }}</button></div></footer>
</form>