{% extends 'admin/base.html.twig' %}

{% block title %}Déplacer un rendez-vous{% endblock %}
{% block breadcrumb %}Rendez-vous{% endblock %}

{% block body %}
{% include 'admin/booking/_nav.html.twig' %}
<link rel="stylesheet" href="{{ versioned_asset('assets/css/booking-widget.css') }}">
<style>.mv .izb-booking { padding: 0; max-width: none; } .mv .izb-bk__card { box-shadow: none; }</style>

<div class="bk-head">
    <h1>Déplacer le rendez-vous de {{ booking.customerName }}</h1>
    <a class="bk-btn" href="{{ path('admin_booking_agenda', {siteId: site.id, rdv: booking.id}) }}">← Retour</a>
</div>
<p class="bk-muted">Actuellement : <strong>{{ when }}</strong> — {{ booking.serviceName }}{% if booking.resourceName %}, avec {{ booking.resourceName }}{% endif %}. Le client sera prévenu par e-mail du nouvel horaire.</p>

{% if error %}<div class="alert alert-danger" role="alert"><i class="fas fa-exclamation-triangle me-2" aria-hidden="true"></i>{{ error }}</div>{% endif %}

{% if client is null %}
    <div class="bk-card">Cette prestation n'existe plus : annulez ce rendez-vous puis saisissez-en un nouveau.</div>
{% else %}
<form method="post" class="mv bk-form" novalidate>
    <input type="hidden" name="_token" value="{{ csrf_token('booking-admin') }}">
    <input type="hidden" name="start" id="mv-start">
    <input type="hidden" name="resource" id="mv-resource">
    <input type="hidden" name="manual" id="mv-manual" value="0">

    <div class="bk-card">
        <section class="izb-booking" id="mv-picker" style="--izb-bk-accent: var(--brand-primary); --izb-bk-on-accent: #fff;" data-izb-booking="{{ client|json_encode|e('html_attr') }}">
            <div data-izb-booking-app><p class="izb-bk__loading">Chargement…</p></div>
        </section>
        <div class="bk-callout is-ok" id="mv-chosen" hidden role="status" aria-live="polite"><i class="fas fa-check" aria-hidden="true"></i><p id="mv-chosen-text"></p></div>
    </div>

    <details class="bk-card">
        <summary><strong>Saisir une heure à la main</strong> <span class="bk-muted">(hors horaires)</span></summary>
        <div class="bk-grid-2" style="margin-top:1rem">
            <div class="bk-field"><label for="mv-date">Date</label><input type="date" id="mv-date" name="manual_date"></div>
            <div class="bk-field"><label for="mv-time">Heure</label><input type="time" id="mv-time" name="manual_time" step="300"></div>
            {% if resources|length > 1 %}
            <div class="bk-field"><label for="mv-res">Avec</label>
                <select id="mv-res" name="manual_resource">{% for r in resources %}<option value="{{ r.id }}" {{ booking.resource and booking.resource.id == r.id ? 'selected' }}>{{ r.name }}</option>{% endfor %}</select>
            </div>
            {% endif %}
        </div>
        <button type="submit" class="bk-btn" style="margin-top:.75rem" onclick="document.getElementById('mv-manual').value='1'">Déplacer à cette heure</button>
    </details>

    <div class="bk-actions">
        <button type="submit" class="btn-gradient" id="mv-submit" disabled><i class="fas fa-check me-1" aria-hidden="true"></i> Déplacer au créneau choisi</button>
    </div>
</form>
<script src="{{ versioned_asset('assets/js/booking-widget.js') }}"></script>
<script>
    document.getElementById('mv-picker').addEventListener('izb-booking-pick', function (e) {
        document.getElementById('mv-start').value = e.detail.start;
        document.getElementById('mv-resource').value = e.detail.resource || '';
        document.getElementById('mv-manual').value = '0';
        document.getElementById('mv-chosen').hidden = false;
        document.getElementById('mv-chosen-text').textContent = 'Nouveau créneau : ' + e.detail.label;
        var submit = document.getElementById('mv-submit');
        submit.disabled = false;
        submit.focus();
    });
</script>
{% endif %}
{% endblock %}