{# =========================
   _formManageBlockModal.html.twig
   ========================= #}

{# =========================
   CSS compact
   ========================= #}
<style>
  .section-title { line-height: 1.2; }

  /* Heures plus compactes */
  .time-sm {
    width: 86px;
    padding: .15rem .35rem;
    height: calc(1.3em + .5rem + 2px);
    font-size: .85rem;
    line-height: 1.2;
  }

  /* Ligne d’un jour : compacte */
  .day-row {
    padding: .35rem .5rem !important;
    margin-bottom: .15rem;
    border-bottom: 1px dashed #eee;
  }

  /* Zone "Jour" plus étroite */
  .day-label { min-width: 120px; }

  /* Petits espacements horizontaux */
  .gap-x-sm > * + * { margin-left: .35rem; }

  /* Icône "vider" cliquable */
  .clear-icon i { font-size: .95rem; }

  .section-title {
    line-height: 1.4;
    margin-top: 1.5rem;   /* espace au-dessus */
    margin-bottom: .75rem; /* espace en dessous */
    padding-top: .4rem;
    padding-bottom: .4rem;
  }

</style>

{{ form_start(form, {
  'action': path('modal_manage_block', { 'id' : user.id }),
  'method': 'POST',
  'attr': {
    'class': 'm-form m-form--fit m-form--label-align-right',
    'name': 'manage_block_form',
    'id': 'manage_block_form'
  }
}) }}

<div class="modal-header text-white">
  <h5 class="modal-title d-flex align-items-center mb-0">
    <i class="fa fa-user-lock me-2"></i>
    Gérer le blocage de {{ user.username }}
  </h5>
  <button type="button" class="close text-white" data-bs-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

{# JSON des blocages quotidiens, ex: {"monday":[],"saturday":[{"start":"08:00","end":"15:00"}]} #}
<input type="hidden" id="prefilled_daily_json" data-daily-json="{{ dailyJson|default('{}', true)|e('html_attr') }}">


<div class="modal-body">

  {# --- Blocage permanent --- #}
  <div class="mb-3">
      <div class="section-title bg-light d-flex align-items-center px-2 py-1 rounded">
          <i class="fa fa-ban me-2 text-danger"></i>
          <strong>Blocage permanent</strong>
      </div>

      <div class="mb-3 row align-items-center mt-2 mb-0">
        <div class="col-lg-9">
          <div class="form-check">
            {{ form_widget(form.isBlocked, {'attr': {'class': 'form-check-input', 'id': 'manage_block_isBlocked'}}) }}
            <label class="form-check-label" for="manage_block_isBlocked">
              Si activé, l’utilisateur est bloqué sans limite de durée.
            </label>
          </div>
          {{ form_errors(form.isBlocked) }}
        </div>
      </div>
  </div>

  {# --- Blocage entre deux dates --- #}
  <div class="mb-3">
      <div class="section-title bg-light d-flex align-items-center px-2 py-1 rounded">
          <i class="fa fa-calendar-alt me-2 text-primary"></i>
          <strong>Blocage entre deux dates</strong>
      </div>

      <div class="mb-3 mt-2">
          <div class="row">
              <div class="col-lg-5 mb-2">
                <label class="small text-muted d-block mb-1">Début</label>
                {{ form_widget(form.blockedAt, {'attr': {'class':'form-control m-input', 'data-role':'range-start'}}) }}
                {{ form_errors(form.blockedAt) }}
              </div>

              <div class="col-lg-5 mb-2 d-flex align-items-center">
                  <label class="small text-muted d-block mb-1">Fin</label>
                  {{ form_widget(form.unblockedAt, {'attr': {'class':'form-control m-input', 'data-role':'range-end'}}) }}
                  {{ form_errors(form.unblockedAt) }}
              </div>
               <div class="col-lg-2 mb-2">
                  <button type="button"  class="btn btn-link ms-2 p-0 clear-icon" data-clear-pair="[data-role='range-start'],[data-role='range-end']" title="Vider début + fin" aria-label="Vider début + fin">
                      <i class="fa fa-eraser"></i>
                  </button>
              </div>
          </div>
      </div>

  </div>

  {# --- Blocage quotidien (max. 2 plages par jour) --- #}
  <div class="mb-2">
      <div class="section-title bg-light d-flex align-items-center px-2 py-1 rounded">
          <i class="fa fa-clock me-2 text-info"></i>
          <strong>Blocage quotidien (max. 2 plages par jour)</strong>
      </div>

    {# Aide affichée une seule fois #}
    <div class="mt-2 mb-2">
      <i class="fa fa-info-circle text-muted"></i>
      <small class="text-muted">
        Laisse une plage vide si tu n’en as besoin que d’une seule.
      </small>
    </div>

    {% set days = [
      {'key':'mon', 'label':'Lundi'},
      {'key':'tue', 'label':'Mardi'},
      {'key':'wed', 'label':'Mercredi'},
      {'key':'thu', 'label':'Jeudi'},
      {'key':'fri', 'label':'Vendredi'},
      {'key':'sat', 'label':'Samedi'},
      {'key':'sun', 'label':'Dimanche'}
    ] %}

    <div id="daily-block-rows">
      {% for d in days %}
        <div class="day-row d-flex align-items-center flex-wrap py-2 border-bottom" data-day="{{ d.key }}">
          {# Jour + checkbox #}
         <div class="me-2 mb-1 d-flex align-items-center day-label">
            <div class="form-check">
                <input type="checkbox"
                      class="form-check-input day-enabled"
                      id="daily_{{ d.key }}_enabled"
                      name="daily[{{ d.key }}][enabled]"
                      value="1">
                <label class="form-check-label fw-bold mb-0" for="daily_{{ d.key }}_enabled">
                    {{ d.label }}
                </label>
            </div>
        </div>


          {# Plage 1: label + start1 → end1 + icône vider #}
          <div class="d-flex align-items-center mb-1 me-3 gap-x-sm">
            <span class="badge badge-light badge-pill me-2">Plage 1</span>
            <input type="time" class="form-control time-sm day-time"
                   name="daily[{{ d.key }}][start1]" data-role="start1" placeholder="HH:MM">
            <span>→</span>
            <div class="d-flex align-items-center gap-x-sm">
              <input type="time" class="form-control time-sm day-time"
                     name="daily[{{ d.key }}][end1]" data-role="end1" placeholder="HH:MM">
              <button type="button"
                    class="btn btn-link p-0 clear-icon"
                    data-clear-pair="[name='daily[{{ d.key }}][start1]'],[name='daily[{{ d.key }}][end1]']"
                    title="Vider plage 1 (début + fin)" aria-label="Vider plage 1">
              <i class="fa fa-eraser"></i>
            </button>

            </div>
          </div>

          {# Plage 2: label + start2 → end2 + icône vider #}
          <div class="d-flex align-items-center mb-1 gap-x-sm">
            <span class="badge badge-light badge-pill me-2">Plage 2</span>
            <input type="time" class="form-control time-sm day-time"
                   name="daily[{{ d.key }}][start2]" data-role="start2" placeholder="HH:MM">
            <span>→</span>
            <div class="d-flex align-items-center gap-x-sm">
              <input type="time" class="form-control time-sm day-time"
                     name="daily[{{ d.key }}][end2]" data-role="end2" placeholder="HH:MM">
              <button type="button"
                      class="btn btn-link p-0 clear-icon"
                      data-clear-pair="[name='daily[{{ d.key }}][start2]'],[name='daily[{{ d.key }}][end2]']"
                      title="Vider plage 2 (début + fin)" aria-label="Vider plage 2">
                <i class="fa fa-eraser"></i>
              </button>

            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

</div>

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
  {{ form_widget(form.save, {'attr': {'class': 'btn btn-primary'}, 'label': 'Enregistrer'}) }}
</div>

{{ form_row(form._token) }}

{# IMPORTANT: empêcher le rendu automatique des champs restants (dayOfWeek + blockedHour*) #}
{{ form_end(form, {'render_rest': false}) }}




{# =========================
   JS (scope global + init fiable)
   ========================= #}
<script>
(function($){

  // Map des clés entrantes -> nos clés de lignes .day-row[data-day=...]
var __DAY_MAP__ = {
  monday: 'mon', tuesday: 'tue', wednesday: 'wed', thursday: 'thu',
  friday: 'fri', saturday: 'sat', sunday: 'sun',
  mon: 'mon', tue: 'tue', wed: 'wed', thu: 'thu', fri: 'fri', sat: 'sat', sun: 'sun'
};

function applyPreFilledDaily($modal) {
  // 1) Récup JSON depuis le champ caché OU depuis data() de la modale
  var raw = $modal.find('#prefilled_daily_json').data('daily-json');
  if (!raw && $modal.data('daily')) raw = $modal.data('daily');

  var data = null;
  try {
    data = (typeof raw === 'string') ? JSON.parse(raw) : (raw || null);
  } catch(e) { data = null; }

  if (!data || typeof data !== 'object') return;

  Object.keys(data).forEach((k) => {
    var key = (__DAY_MAP__[String(k).toLowerCase()] || '').trim();
    if (!key) return;

    var ranges = data[k] || data[key] || [];
    var $row = $modal.find(`.day-row[data-day="${key}"]`);
    if (!$row.length) return;

    // Activer le jour
    var $cb = $row.find('.day-enabled');
    $cb.prop('checked', (ranges && ranges.length > 0)).trigger('change');


    // Plage 1
    if (ranges[0]) {
      if (ranges[0].start != null)
        $row.find(`[name="daily[${key}][start1]"]`).val(ranges[0].start).trigger('change');
      if (ranges[0].end != null)
        $row.find(`[name="daily[${key}][end1]"]`).val(ranges[0].end).trigger('change');
    }
    // Plage 2
    if (ranges[1]) {
      if (ranges[1].start != null)
        $row.find(`[name="daily[${key}][start2]"]`).val(ranges[1].start).trigger('change');
      if (ranges[1].end != null)
        $row.find(`[name="daily[${key}][end2]"]`).val(ranges[1].end).trigger('change');
    }
  });
}


  // exposé en global pour être appelable depuis user-functions.js si besoin
  window.setupManageBlockModal = function ($modal) {
    var $isBlocked   = $modal.find("input[id$='_isBlocked']");
    var $rangeStart  = $modal.find("[data-role='range-start']");
    var $rangeEnd    = $modal.find("[data-role='range-end']");
    var $dayRows     = $modal.find("#daily-block-rows .day-row");

    function clearTarget(selector, scope) {
      var $t = scope ? $(scope).find(selector) : $(selector);
      $t.val('').trigger('change');            // vide + notifie les widgets
    }

    function setDayEnabled($row, enabled, clearWhenDisable) {
      var $inputs = $row.find("input.day-time");
      $inputs.prop('disabled', !enabled);
      if (!enabled && clearWhenDisable) {
        $inputs.val('').trigger('change');     // vide quand on décoche le jour
      }
    }

    function refreshPermanentState() {
      var isPermanent = $isBlocked.is(':checked');
      $rangeStart.prop('disabled', isPermanent);
      $rangeEnd.prop('disabled', isPermanent);

      $dayRows.each(function () {
        var $row = $(this);
        var $cb  = $row.find(".day-enabled");
        if (isPermanent) {
          setDayEnabled($row, false, false);
          $cb.prop('disabled', true);
        } else {
          $cb.prop('disabled', false);
          setDayEnabled($row, $cb.is(':checked'), false);
        }
      });
    }

   // Icônes "Vider" : gère soit un target unique, soit une paire
    $modal.off('click.clearFields').on('click.clearFields', ".clear-icon", function () {
      var $btn = $(this);

      // 1- Nouveau: vider deux champs (paire début+fin)
      var pair = $btn.data('clear-pair'); // ex: "#start,#end" ou "[name='...'],[name='...']"
      if (pair) {
        // supporte "sel1,sel2" (avec virgule)
        pair.toString().split(',').forEach(sel => {
          var s = sel.trim();
          if (s) {
            var $t = $modal.find(s);
            $t.val('').trigger('change');
          }
        });
        return;
      }

      // 2- Rétro-compat: un seul target
      var target = $btn.data('clear-target');
      if (target) {
        var $t = $modal.find(target.toString());
        $t.val('').trigger('change');
      }
    });


    // Toggle d’un jour → désactiver ET vider les heures si décoché
    $modal.off('change.dayToggle').on('change.dayToggle', ".day-enabled", function () {
      var $row = $(this).closest(".day-row");
      var enabled = $(this).is(':checked');
      setDayEnabled($row, enabled, !enabled);
    });

    // Blocage permanent
    $isBlocked.off('change.permanent').on('change.permanent', refreshPermanentState);

    // Init
    $dayRows.each(function () {
      var $row = $(this);
      var checked = $row.find(".day-enabled").is(':checked');
      setDayEnabled($row, checked, false);
    });
    refreshPermanentState();
      applyPreFilledDaily($modal);
       refreshPermanentState();

  };

  // Auto-init quand la modale est visible (même si tu n’appelles rien depuis success)
  $(document).off('shown.bs.modal.manageBlockInit')
    .on('shown.bs.modal.manageBlockInit', '#m_modal_manage_block', function(){
      window.setupManageBlockModal($(this));
    });
})(jQuery);

</script>