@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_edit.css') }}">
<style>
   /* Bouton Précédent - masqué par défaut */
    /* Utiliser un sélecteur très spécifique pour surpasser .salle-sport-edit button */
    .salle-sport-edit button.btn-hidden,
    .salle-sport-edit button#prevBtn.btn-hidden,
    button.btn.btn-hidden,
    button#prevBtn.btn-hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .salle-sport-edit button.btn-visible,
    .salle-sport-edit button#prevBtn.btn-visible,
    .salle-sport-edit button#nextBtn.btn-visible,
    button.btn.btn-visible,
    button#prevBtn.btn-visible,
    button#nextBtn.btn-visible {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
	
	    .text-danger2 {
    color: #dc3545;
    font-size: 15px;
    margin-top: 4px;
    display: block;
    font-weight: 600;
}

.is-invalid {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
}

.is-invalid:hover {
    border-color: #ff0000 !important;
    background-color: #ffe8e8 !important;
}
</style>
@endsection



@section('content')

<script>
    // Translations exposed to the in-page JS (Blade will render the localized strings)
    const __finTrans = {
        next: @json(__('site.financement.form.next')),
        prev: @json(__('site.financement.form.prev')),
        doc_available: @json(__('site.financement.form.step3.doc_available')),
        need_complete_step1: @json(__('site.financement.form.step3.need_complete_step1')),
        need_complete_step2: @json(__('site.financement.form.step3.need_complete_step2')),
        save: @json(__('site.financement.actions.save')),
        save_draft: @json(__('site.financement.actions.save_draft')),
        global_block_missing: @json(__('site.financement.form.global_block_missing_docs'))
    };
</script>

<!--
<script>

  let currentStep = 1;
  const totalSteps = 3;

  function showStep(step) {
    document.querySelectorAll('.step-content').forEach(c => c.classList.remove('active'));
    const stepEl = document.querySelector(`#step${step}`);
    if (stepEl) stepEl.classList.add('active');

    document.querySelectorAll('.step-indicator span').forEach(ind => ind.classList.remove('active'));
    const ind = document.getElementById(`step${step}-indicator`);
    if (ind) ind.classList.add('active');

    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    if (prevBtn) {
      if (step === 1) prevBtn.classList.remove('btn-visible'), prevBtn.classList.add('btn-hidden');
      else prevBtn.classList.remove('btn-hidden'), prevBtn.classList.add('btn-visible');
    }
    if (nextBtn) {
      if (step === totalSteps) nextBtn.classList.remove('btn-visible'), nextBtn.classList.add('btn-hidden');
      else nextBtn.classList.remove('btn-hidden'), nextBtn.classList.add('btn-visible');
    }
  }

  // Utility: is an element visible (skip hidden or display:none or not in layout)
  function isVisible(el) {
    if (!el) return false;
    if (el.disabled) return false;
    if (el.type && el.type.toLowerCase() === 'hidden') return false;
    // offsetParent null means display:none or not in layout (but could be for fixed positioned elements)
    // we also check bounding rect as fallback
    if (el.offsetParent === null && el.getClientRects().length === 0) return false;
    return true;
  }

  // Single-pass validation in DOM order. Returns { valid, firstEl }
  function validateStep(step) {
    const container = document.getElementById(`step${step}`);
    if (!container) return { valid: true, firstEl: null };

    // Helper to decide whether a control is considered "required" for this step
    const isFieldRequired = (el) => {
      if (!el) return false;
      if (el.hasAttribute('required')) return true;
      if (el.classList && el.classList.contains(`step${step}-field`)) return true;
      return false;
    };

    // We'll iterate the controls in DOM order
    const controls = Array.from(container.querySelectorAll('input, textarea, select'));

    // Keep track of processed checkbox/radio group names to avoid double-checking
    const processedGroups = new Set();

    for (const control of controls) {
      if (!isVisible(control)) continue; // ignore hidden/disabled

      const type = (control.type || '').toLowerCase();
      const tag  = control.tagName ? control.tagName.toLowerCase() : '';

      // Handle checkbox/radio groups when encountering the first member in DOM order
      if (type === 'checkbox' || type === 'radio') {
        const name = control.name || (`__no_name__${Math.random()}`);

        if (processedGroups.has(name)) continue; // already validated this group

        processedGroups.add(name);

        // Determine if group is required (any member required or flagged via class)
        // Select all group members that are in the same container (DOM scope)
        const groupMembers = Array.from(container.querySelectorAll(`input[name="${CSS.escape(name)}"]`))
                                  .filter(isVisible);

        // If no visible members, skip
        if (groupMembers.length === 0) continue;

        const groupRequired = groupMembers.some(isFieldRequired);
        if (!groupRequired) continue;

        const anyChecked = groupMembers.some(m => m.checked);
        if (!anyChecked) {
          // return first member of the group (which is the first visible one in DOM order)
          return { valid: false, firstEl: groupMembers[0] };
        }

        // group OK -> continue scanning
        continue;
      }

      // Non-grouped controls
      const required = isFieldRequired(control);
      if (!required) continue;

      // Validate by input type / tag
      if (type === 'file') {
        if (!control.files || control.files.length === 0) return { valid: false, firstEl: control };
      } else if (tag === 'select') {
        // treat empty value or first placeholder as empty
        if (!control.value || control.value === '' || control.selectedIndex === 0) return { valid: false, firstEl: control };
      } else {
        const v = (control.value || '').toString().trim();
        if (v === '') return { valid: false, firstEl: control };

        if (type === 'email' && v !== '') {
          const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (!re.test(v)) return { valid: false, firstEl: control };
        }
      }
    }

    return { valid: true, firstEl: null };
  }

  function scrollToAndFocus(el) {
    if (!el) return;
    // prefer associated label for clarity
    const label = document.querySelector(`label[for="${el.id}"]`) || el.closest('label');
    const target = label || el;
    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
    try {
      if (el.focus) el.focus({ preventScroll: true });
    } catch (e) {
      try { el.focus(); } catch (err) { /* ignore */ }
    }
  }

  window.nextStep = function() {
    const { valid, firstEl } = validateStep(currentStep);
    if (!valid) {
    
      scrollToAndFocus(firstEl);
      return;
    }

    if (currentStep < totalSteps) {
      currentStep++;
      showStep(currentStep);
      if (typeof updateDocMessages === 'function') updateDocMessages();
    } else {
      const theForm = document.getElementById('financementForm') || document.querySelector('form');
      if (theForm) theForm.submit();
    }
  };

  window.prevStep = function() {
    if (currentStep > 1) {
      currentStep--;
      showStep(currentStep);
    }
  };

  function initStepper() {
    showStep(1);

    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');

    if (nextBtn) {
      nextBtn.addEventListener('click', function(e) {
        e.preventDefault();
        window.nextStep();
      });
    }
    if (prevBtn) {
      prevBtn.addEventListener('click', function(e) {
        e.preventDefault();
        window.prevStep();
      });
    }

    const theForm = document.getElementById('financementForm') || document.querySelector('form');
    theForm?.addEventListener('keydown', function(ev) {
      if (ev.key === 'Enter') {
        if (ev.target && ev.target.tagName && ev.target.tagName.toLowerCase() === 'textarea') return;
        ev.preventDefault();
        if (currentStep < totalSteps) window.nextStep();
        else {
          if (theForm.requestSubmit) theForm.requestSubmit();
          else theForm.submit();
        }
      }
    }, { capture: true });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initStepper);
  } else {
    initStepper();
  }

</script> -->

<script>

  // state
  let currentStep = 1;
  const totalSteps = 3;
  let isMoving = false; // protège contre double-invocation rapide

  // helper to toggle classes
  function addClass(el, cls) { if (el && !el.classList.contains(cls)) el.classList.add(cls); }
  function removeClass(el, cls) { if (el && el.classList.contains(cls)) el.classList.remove(cls); }

  // show step and keep state in sync
  function showStep(step) {
    if (typeof step !== 'number' || step < 1 || step > totalSteps) return;
    // sync state
    currentStep = step;

    // content
    document.querySelectorAll('.step-content').forEach(c => removeClass(c, 'active'));
    const stepEl = document.querySelector(`#step${step}`);
    if (stepEl) addClass(stepEl, 'active');

    // indicators
    document.querySelectorAll('.step-indicator span').forEach(ind => removeClass(ind, 'active'));
    const ind = document.getElementById(`step${step}-indicator`);
    if (ind) addClass(ind, 'active');

    // buttons visibility
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    if (prevBtn) {
      if (step === 1) { removeClass(prevBtn, 'btn-visible'); addClass(prevBtn, 'btn-hidden'); }
      else { removeClass(prevBtn, 'btn-hidden'); addClass(prevBtn, 'btn-visible'); }
    }
    if (nextBtn) {
      if (step === totalSteps) { removeClass(nextBtn, 'btn-visible'); addClass(nextBtn, 'btn-hidden'); }
      else { removeClass(nextBtn, 'btn-hidden'); addClass(nextBtn, 'btn-visible'); }
    }
  }

  // visibility check (skip disabled/hidden)
  function isVisible(el) {
    if (!el) return false;
    if (el.disabled) return false;
    if (el.type && el.type.toLowerCase() === 'hidden') return false;
    // if element or any ancestor has display:none or visibility:hidden
    if (el.offsetParent === null && el.getClientRects().length === 0) return false;
    return true;
  }

  // validate step (single-pass in DOM order)
  function validateStep(step) {
    const container = document.getElementById(`step${step}`);
    if (!container) return { valid: true, firstEl: null };

    const isFieldRequired = (el) => {
      if (!el) return false;
      if (el.hasAttribute('required')) return true;
      // allow using classes like "step2-field" to mark required fields for a specific step
      if (el.classList && Array.from(el.classList).some(c => c === `step${step}-field`)) return true;
      return false;
    };

    const controls = Array.from(container.querySelectorAll('input, textarea, select'));

    const processedGroups = new Set();

    for (const control of controls) {
      if (!isVisible(control)) continue;

      const type = (control.type || '').toLowerCase();
      const tag  = control.tagName ? control.tagName.toLowerCase() : '';

      if (type === 'checkbox' || type === 'radio') {
        const name = control.name || (`__no_name__${Math.random()}`);
        if (processedGroups.has(name)) continue;
        processedGroups.add(name);

        const groupMembers = Array.from(container.querySelectorAll(`input[name="${CSS.escape(name)}"]`)).filter(isVisible);
        if (groupMembers.length === 0) continue;

        const groupRequired = groupMembers.some(isFieldRequired);
        if (!groupRequired) continue;

        const anyChecked = groupMembers.some(m => m.checked);
        if (!anyChecked) {
          return { valid: false, firstEl: groupMembers[0] };
        }
        continue;
      }

      const required = isFieldRequired(control);
      if (!required) continue;

      if (type === 'file') {
        if (!control.files || control.files.length === 0) return { valid: false, firstEl: control };
      } else if (tag === 'select') {
        if (!control.value || control.value === '' || control.selectedIndex === 0) return { valid: false, firstEl: control };
      } else {
        const v = (control.value || '').toString().trim();
        if (v === '') return { valid: false, firstEl: control };
        if (type === 'email' && v !== '') {
          const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (!re.test(v)) return { valid: false, firstEl: control };
        }
      }
    }
    return { valid: true, firstEl: null };
  }

  // scroll and focus helper
  function scrollToAndFocus(el) {
    if (!el) return;
    const label = document.querySelector(`label[for="${el.id}"]`) || el.closest('label');
    const target = label || el;
    try {
      target.scrollIntoView({ behavior: 'smooth', block: 'center' });
    } catch (e) {
      target.scrollIntoView();
    }
    try {
      if (el.focus) el.focus({ preventScroll: true });
    } catch (err) {
      try { el.focus(); } catch (err2) { /* ignore */ }
    }
  }

  // guard wrapper to prevent re-entrance / doubles
  function withMoveGuard(fn) {
    return function(...args) {
      if (isMoving) return;
      isMoving = true;
      try {
        fn.apply(this, args);
      } finally {
        // small delay so UI updates finish; prevents accidental double invocations
        setTimeout(() => { isMoving = false; }, 250);
      }
    };
  }

  // navigation functions
  window.nextStep = withMoveGuard(function() {
    // validate current step before moving forward
    const { valid, firstEl } = validateStep(currentStep);
    if (!valid) {
      scrollToAndFocus(firstEl);
      return;
    }

    if (currentStep < totalSteps) {
      currentStep++;
      showStep(currentStep);
      if (typeof updateDocMessages === 'function') updateDocMessages();
    } else {
      const theForm = document.getElementById('financementForm') || document.querySelector('form');
      if (theForm) {
        // prefer requestSubmit if available (triggers validation correctly)
        if (theForm.requestSubmit) theForm.requestSubmit();
        else theForm.submit();
      }
    }
  });

  window.prevStep = withMoveGuard(function() {
    if (currentStep > 1) {
      currentStep--;
      showStep(currentStep);
    }
  });

  // allow direct jump (keeps currentStep in sync)
  window.goToStep = function(step) {
    step = Number(step) || 1;
    if (step < 1) step = 1;
    if (step > totalSteps) step = totalSteps;
    showStep(step);
  };

  // init: attach handlers safely
  function initStepper() {
    showStep(1);

    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');

    // Named handlers so they won't be attached multiple times accidentally
    function onNextClick(e) {
      // if click comes from a <button type="submit"> we still prevent default here
      if (e && e.preventDefault) e.preventDefault();
      window.nextStep();
    }
    function onPrevClick(e) {
      if (e && e.preventDefault) e.preventDefault();
      window.prevStep();
    }

    if (nextBtn) {
      // ensure button is not added multiple listeners by removing any existing inline handler
      nextBtn.removeAttribute('onclick');
      nextBtn.addEventListener('click', onNextClick);
    }
    if (prevBtn) {
      prevBtn.removeAttribute('onclick');
      prevBtn.addEventListener('click', onPrevClick);
    }

    // If there are step indicator spans, let them jump to their step safely
    document.querySelectorAll('.step-indicator span[id^="step"]').forEach(span => {
      span.addEventListener('click', function(e) {
        const id = this.id || '';
        const m = id.match(/^step(\d+)-indicator$/);
        if (m) {
          const step = parseInt(m[1], 10);
          goToStep(step);
        }
      });
    });

    // form Enter key handling: be conservative and avoid interfering with buttons or multi-line textarea
    const theForm = document.getElementById('financementForm') || document.querySelector('form');
    if (theForm) {
      theForm.addEventListener('keydown', function(ev) {
        // ignore if user is typing in a textarea
        const tag = ev.target && ev.target.tagName ? ev.target.tagName.toLowerCase() : '';
        if (tag === 'textarea') return;
        // ignore if the focused element is a button or anchor or has role button
        const role = ev.target && ev.target.getAttribute ? ev.target.getAttribute('role') : null;
        if (ev.target && (ev.target.tagName === 'BUTTON' || ev.target.tagName === 'A' || role === 'button')) return;

        if (ev.key === 'Enter') {
          // prevent accidental multiple triggers
          ev.preventDefault();
          if (currentStep < totalSteps) window.nextStep();
          else {
            if (theForm.requestSubmit) theForm.requestSubmit();
            else theForm.submit();
          }
        }
      }, { capture: true });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initStepper);
  } else {
    initStepper();
  }

</script>


@if(Auth::check())
<div class="salle-sport-edit">


<div class="it-about-3-area p-relative pt-30 pb-125">
                <img class="it-about-shape-1" src="{{ asset('assets/img/shape/about-1-1.png') }}" alt="">
                <div class="container">
				 <nav class="breadcrumb-nav" aria-label="breadcrumb"> 
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
    <a href="{{ route('dashboard') }}">
        <i class="bi bi-house-fill"></i>
        <span>{{ __('site.financement.breadcrumb.home') }}</span>
    </a>
</li>
<li class="breadcrumb-item">
    <a href="{{ route('doc_fin.index') }}">
        <span>{{ __('site.financement.breadcrumb.index') }}</span>
    </a>
</li>
<li class="breadcrumb-item active" aria-current="page">{{ __('site.financement.breadcrumb.current_form') }}</li>

                        </ol>
                </nav>
                 
            <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">



<form id="financementForm" class="card shadow-sm p-4" action="{{ route('financement.storeAll') }}" method="POST" enctype="multipart/form-data" lang="ar">
    @csrf
    <div class="stepper-wrapper">
        <div class="step-indicator">
            <span class="active" id="step1-indicator">{{ __('site.financement.form.step_1') }}</span>
            <span id="step2-indicator"> {{ __('site.financement.form.step_2') }}</span>
            <span id="step3-indicator"> {{ __('site.financement.form.step_3') }}</span>
        </div>

<div id="step1" class="step-content active">
    <div class="container" >
        <input type="hidden" name="id_association" value="{{ $association->id_association ?? '' }}">
        <input type="hidden" name="id_demande" value="{{ $demande_id ?? '' }}">
        <input type="hidden" name="id_formulaire" value="{{ $formulaire->id_type }}">

        <h4 class="text-center mt-4">{{ __('site.financement.form.step1.title') }} </h4>

        <div class="card mt-4 shadow-sm">
            <div class="card-header text-center bg-white">
                <div class="row mb-3 align-items-center">
                    <label class="col-sm-3 col-form-label" style="color:black;">
                        {{ __('site.financement.form.step1.association_name') }}
                    </label>
                    <div class="col-sm-9">
                        <input type="text" name="nom_association" id="nom_association"
                               class="form-control step1-field @error('nom_association') is-invalid @enderror" maxlength="255"
                               value="{{ old('nom_association', $association->nom_association ?? '') }}" required>
                        @error('nom_association')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="card-header text-center bg-light">
                <h5 class="mb-0">{{ trans_field($formulaire, 'type') }}    </h5>
            </div>

<div class="card-body">
  <div class="row">
    {{-- types of financing --}}
    @php
        $oldTypes = old('types_financement', $selectedTypes ?? []);
        if (!is_array($oldTypes)) $oldTypes = [];
        $hasTypesError = $errors->has('types_financement');
    @endphp

    @foreach($type_financement as $type)
      <div class="col-md-4 col-sm-6 mb-2">
        <div class="form-check d-flex align-items-center">
          <!-- NOTE: removed `required` here -->
          <input
              class="form-check-input me-2 step1-field {{ $hasTypesError ? 'is-invalid' : '' }}"
              type="checkbox"
              name="types_financement[]"
              value="{{ $type->id_type_fin }}"
              {{ in_array($type->id_type_fin, $oldTypes) ? 'checked' : '' }}
          >
          <label class="col-sm-12 col-form-label" style="color:black;">
              {{ trans_field($type, 'type') ?? $type->type_ar }}
          </label>
        </div>
      </div>
    @endforeach
  </div>

  {{-- server-side error (keeps working) --}}
  @if($errors->has('types_financement'))
      <small class="text-danger2 d-block mt-1">{{ $errors->first('types_financement') }}</small>
  @endif

  {{-- client-side error placeholder (used by JS) --}}
  <small id="types-error-client" class="text-danger2 d-none mt-1"></small>
</div>

        </div>

        <div class="card mt-4 shadow-sm">
            <div class="card-header text-center bg-light">
                <h5 class="mb-0">{{ __('site.financement.form.step1.card_association_data') }}</h5>
            </div>

            <div class="card-body">
                <div class="row mb-3 align-items-center">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.address') }}</label>
                    <div class="col-sm-10">
                        <input type="text" name="adresse"  maxlength="255" required
                               class="form-control step1-field @error('adresse') is-invalid @enderror"
                               value="{{ old('adresse', $association->adresse ?? '') }}">
                        @error('adresse')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.postal_code') }}</label>
                    <div class="col-sm-4">
                        <input type="text" name="code_postal" required
                               class="form-control step1-field @error('code_postal') is-invalid @enderror"
                               value="{{ old('code_postal', $association->code_postal ?? '') }}"    pattern="[0-9]{4}" maxlength="4" inputmode="numeric">
                        @error('code_postal')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>

                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.phone') }}</label>
                    <div class="col-sm-4">
                        <input type="text" name="tel" required
                               class="form-control step1-field @error('tel') is-invalid @enderror"
                               value="{{ old('tel', $association->tel ?? '') }}" pattern="[0-9]{8}"  maxlength="8" inputmode="numeric">
                        @error('tel')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.fax') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" pattern="[0-9]{8}" maxlength="8"  name="fax" class="form-control step1-field" value="{{ old('fax', $association->fax ?? '') }}">
                        @error('fax')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>

                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.date_creation') }}</label>
                    <div class="col-sm-4">
                        <input required type="date" name="date_creation" class="form-control step1-field" value="{{ old('date_creation', $association->date_creation ?? '') }}" max="{{ now()->toDateString() }}">
                        @error('date_creation')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.num_visa') }}</label>
                    <div class="col-sm-4">
                        <input required type="number" max="999999999999999" name="num_visa" class="form-control step1-field" value="{{ old('num_visa', $association->num_visa ?? '') }}">
                        @error('num_visa')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>

                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.date_visa') }}</label>
                    <div class="col-sm-4">
                        <input required type="date" name="date_visa" class="form-control step1-field" value="{{ old('date_visa', $association->date_visa ?? '') }}" max="{{ now()->toDateString() }}">
                        @error('date_visa')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.tax_id') }}</label>
                    <div class="col-sm-10">
                        <input required type="text" name="num_identification_fiscale" maxlength="9"
                               class="form-control step1-field @error('num_identification_fiscale') is-invalid @enderror"
                               value="{{ old('num_identification_fiscale', $association->num_identification_fiscale ?? '') }}">
                        @error('num_identification_fiscale')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.current_account') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" name="num_compte_courant" pattern="[0-9]{20}"  maxlength="20"
                               class="form-control step1-field @error('num_compte_courant') is-invalid @enderror"
                               value="{{ old('num_compte_courant', $association->num_compte_courant ?? '') }}">
                        @error('num_compte_courant')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>

                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.bank') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" name="banque" maxlength="255"
                               class="form-control step1-field @error('banque') is-invalid @enderror"
                               value="{{ old('banque', $association->banque ?? '') }}">
                        @error('banque')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.email') }}</label>
                    <div class="col-sm-4">
                        <input required type="email" name="adresse_mail" maxlength="255"
                               class="form-control step1-field @error('adresse_mail') is-invalid @enderror"
                               value="{{ old('adresse_mail', $association->adresse_mail ?? '') }}">
                        @error('adresse_mail')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>

                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.website') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" name="adresse_site_internet" maxlength="2000"
                               class="form-control step1-field @error('adresse_site_internet') is-invalid @enderror"
                               value="{{ old('adresse_site_internet', $association->adresse_site_internet ?? '') }}">
                        @error('adresse_site_internet')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.president_name') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" name="nom_president_association" maxlength="255"
                               class="form-control step1-field @error('nom_president_association') is-invalid @enderror"
                               value="{{ old('nom_president_association', $association->nom_president_association ?? '') }}">
                        @error('nom_president_association')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>

                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.personal_phone') }}</label>
                    <div class="col-sm-4">
                        <input required type="text" name="tel_personnel" pattern="[0-9]{8}"  maxlength="8" inputmode="numeric"
                               class="form-control step1-field @error('tel_personnel') is-invalid @enderror"
                               value="{{ old('tel_personnel', $association->tel_personnel ?? '') }}">
                        @error('tel_personnel')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.num_members_national') }}</label>
                    <div class="col-sm-4">
                        <input required type="number" name="num_membre_bureau_national_a"  max="99999999"
                               class="form-control step1-field @error('num_membre_bureau_national_a') is-invalid @enderror"
                               value="{{ old('num_membre_bureau_national_a', $association->num_membre_bureau_national_a ?? '') }}">
                        @error('num_membre_bureau_national_a')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>

                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.num_regional_offices') }}</label>
                    <div class="col-sm-4">
                        <input required type="number" name="num_bureaux_regionaux"  max="99999999"
                               class="form-control step1-field @error('num_bureaux_regionaux') is-invalid @enderror"
                               value="{{ old('num_bureaux_regionaux', $association->num_bureaux_regionaux ?? '') }}">
                        @error('num_bureaux_regionaux')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label" style="color:black;">{{ __('site.financement.form.step1.total_members') }}</label>
                    <div class="col-sm-4">
                        <input required type="number" name="num_total_membre" max="99999999"
                               class="form-control step1-field @error('num_total_membre') is-invalid @enderror"
                               value="{{ old('num_total_membre', $association->num_total_membre ?? '') }}">
                        @error('num_total_membre')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div id="step2" class="step-content">
    <div class="container" >
        <input type="hidden" name="id_formulaire" value="{{ $formulaire2->id_type }}">
        <input type="hidden" name="id_demande" value="{{ $demande_id }}">

        <h4 class="text-center pt-3">{{ __('site.financement.form.step2.title') }}</h4>
        <br>

        <div class="form-section">
            <h4>{{ __('site.financement.form.step2.pedagogical_data') }}</h4>

            <div class="form-group row mb-3" style="padding-top:20px;">
                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.supervisor_name') }}</label>
                <div class="col-sm-4">
                    <input type="text"
                        class="form-control step2-field @error('nom_prenom_sup') is-invalid @enderror"
                        name="nom_prenom_sup"
                        placeholder="{{ __('site.financement.form.step2.placeholder_supervisor_name') }}"
                        maxlength="100"
                        value="{{ old('nom_prenom_sup') }}" required>
                    @error('nom_prenom_sup')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                    @enderror
                </div>

                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.profession') }}</label>
                <div class="col-sm-4">
                    <input type="text"
                        class="form-control step2-field @error('profession_sup') is-invalid @enderror"
                        name="profession_sup"
                        placeholder="{{ __('site.financement.form.step2.placeholder_profession') }}"
                        maxlength="100"
                        value="{{ old('profession_sup') }}" required>
                    @error('profession_sup')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row align-items-center">
                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.role_in_association') }}</label>
                <div class="col-sm-4">
                    <input type="text"
                        class="form-control step2-field @error('role_sup') is-invalid @enderror"
                        name="role_sup"
                        placeholder="{{ __('site.financement.form.step2.placeholder_role') }}"
                        maxlength="100"
                        value="{{ old('role_sup') }}" required>
                    @error('role_sup')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                    @enderror
                </div>

                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.phone') }}</label>
                <div class="col-sm-4">
                    <input type="text" required
                        class="form-control step2-field @error('tel_sup') is-invalid @enderror"
                        name="tel_sup"
						pattern="[0-9]{8}"
                        maxlength="8"
                        value="{{ old('tel_sup') }}">
                    @error('tel_sup')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.email') }}</label>
                <div class="col-sm-4">
                    <input type="email" required
                        class="form-control step2-field @error('email_sup') is-invalid @enderror"
                        name="email_sup"
                        value="{{ old('email_sup') }}">
                    @error('email_sup')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.project_name') }}</label>
                <div class="col-sm-10">
                    <input type="text" required
                        class="form-control step2-field @error('nom_projet') is-invalid @enderror"
                        name="nom_projet"
                        maxlength="255"
                        value="{{ old('nom_projet') }}">
                    @error('nom_projet')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.justification') }}</label>
                <div class="col-sm-10">
                    <textarea required class="form-control step2-field @error('justification_realisation') is-invalid @enderror"
                            name="justification_realisation"
                            maxlength="255"
                            rows="4"
                            placeholder="{{ __('site.financement.form.step2.placeholder_justification') }}">{{ old('justification_realisation') }}</textarea>
                    @error('justification_realisation')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.objectives') }}</label>
                <div class="col-sm-10">
                    <textarea required class="form-control step2-field @error('objectives') is-invalid @enderror"
                            name="objectives"
							maxlength="255"
                            rows="4"
                            placeholder="{{ __('site.financement.form.step2.placeholder_objectives') }}">{{ old('objectives') }}</textarea>
                    @error('objectives')
                        <small class="text-danger2 d-block mb-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-6 col-form-label">{{ __('site.financement.form.step2.phase_description_label') }}</label>
            </div>

            <div class="form-group row" >
                <table id="phase-table" class="custom-table">
                    <thead>
                        <tr>
                            <th style="width:5%">{{ __('site.number')}}</th>
                            <th style="width:35%">{{ __('site.financement.form.step2.phase_header_description') }}</th>
                            <th style="width:20%">{{ __('site.financement.form.step2.phase_header_date') }}</th>
                            <th style="width:30%">{{ __('site.financement.form.step2.phase_header_location') }}</th>
                            <th style="width:10%">{{ __('site.financement.form.step2.phase_header_action') }}</th>
                        </tr>
                    </thead>

                    @php
                    $oldPhases = old('phases', []);
                    // existing logic preserved...
                    $allEmpty = true;
                    if (is_array($oldPhases) && count($oldPhases) > 0) {
                        foreach($oldPhases as $phase) {
                            if (!empty($phase['description']) || !empty($phase['completion_date']) || !empty($phase['completion_location'])) {
                                $allEmpty = false;
                                break;
                            }
                        }
                    }

                    if (!is_array($oldPhases) || count($oldPhases) === 0 || $allEmpty) {
                        $oldPhases = [
                            ['description' => '', 'completion_date' => '', 'completion_location' => '']
                        ];
                    }
                    @endphp

                    <tbody id="phase-body">
                        @foreach($oldPhases as $i => $p)
                            <tr>
                                <td class="row-number fw-bold">{{ (int)$i + 1 }}</td>
                                <td>
                                    <input required type="text"
                                           name="phases[{{ $i }}][description]"
                                           class="form-control step2-field @error("phases.{$i}.description") is-invalid @enderror"
                                           placeholder="{{ __('site.financement.form.step2.placeholder_phase') }}"
                                           maxlength="200"
                                           value="{{ old("phases.{$i}.description", $p['description'] ?? '') }}">
                                    @if($errors->has("phases.{$i}.description"))
                                        <small class="text-danger2 d-block mt-1">{{ $errors->first("phases.{$i}.description") }}</small>
                                    @endif
                                </td>

                                <td>
                                    <input required type="date"
                                           name="phases[{{ $i }}][completion_date]"
                                           class="form-control step2-field @error("phases.{$i}.completion_date") is-invalid @enderror"
                                           value="{{ old("phases.{$i}.completion_date", $p['completion_date'] ?? '') }}">
                                    @if($errors->has("phases.{$i}.completion_date"))
                                        <small class="text-danger2 d-block mt-1">{{ $errors->first("phases.{$i}.completion_date") }}</small>
                                    @endif
                                </td>

                                <td>
                                    <input type="text" required
                                           name="phases[{{ $i }}][completion_location]"
                                           class="form-control step2-field @error("phases.{$i}.completion_location") is-invalid @enderror"
                                           placeholder="{{ __('site.financement.form.step2.placeholder_phase_location') }}"
                                           maxlength="100"
                                           value="{{ old("phases.{$i}.completion_location", $p['completion_location'] ?? '') }}">
                                    @if($errors->has("phases.{$i}.completion_location"))
                                        <small class="text-danger2 d-block mt-1">{{ $errors->first("phases.{$i}.completion_location") }}</small>
                                    @endif
                                </td>

                             <td class="text-center action-buttons" style="white-space: nowrap;">
    <div class="d-flex gap-2 justify-content-center align-items-center">
        <button type="button"
                class="btn-icon btn-icon--danger" 
                onclick="removePhaseRow(this)"
                title="{{ __('site.financement.actions.remove_row') }}">
            {{ __('site.financement.actions.remove_row') }}
        </button>
    </div>
</td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
                             <div class="mt-2 text-center">
    <button type="button" id="add-phase-btn" class="btn-icon btn-icon--succ" onclick="addPhaseRow()">
        {{ __('site.financement.actions.add_row') }}
    </button>
</div>  
            </div>

<script>
function addPhaseRow() {
    const tbody = document.getElementById('phase-body');
    const rowCount = tbody.rows.length;

    const newRow = document.createElement('tr');
    newRow.innerHTML = `
        <td class="row-number fw-bold">${rowCount + 1}</td>
        <td><input required type="text" name="phases[${rowCount}][description]" class="form-control step2-field" placeholder="${@json(__('site.financement.form.step2.placeholder_phase'))}" maxlength="200"></td>
        <td><input required type="date" name="phases[${rowCount}][completion_date]" class="form-control step2-field"></td>
        <td><input required type="text" name="phases[${rowCount}][completion_location]" class="form-control step2-field" placeholder="${@json(__('site.financement.form.step2.placeholder_phase_location'))}" maxlength="100"></td>
        <td class="text-center action-buttons" style="white-space: nowrap;">
            <div class="d-flex gap-2 justify-content-center align-items-center">
                <button type="button"  class="btn-icon btn-icon--danger"  onclick="removePhaseRow(this)" title="${@json(__('site.financement.actions.remove_row'))}">
                    ${@json(__('site.financement.actions.remove_row'))}
                </button>
            </div>
        </td>
    `;
    tbody.appendChild(newRow);
    updatePhaseRowNumbers();
}

function removePhaseRow(button) {
    const row = button.closest('tr');
    const tbody = row.closest('tbody');
    row.remove();
    updatePhaseRowNumbers();
}

function updatePhaseRowNumbers() {
    const tbody = document.getElementById('phase-body');
    // mettre à jour les numéros visibles
    [...tbody.querySelectorAll('.row-number')].forEach((cell, i) => {
        cell.textContent = i + 1;
    });

    // renommer les name pour indices consécutifs (important pour la validation)
    [...tbody.querySelectorAll('tr')].forEach((tr, i) => {
        const desc = tr.querySelector('input[name*="[description]"]');
        if (desc) desc.name = `phases[${i}][description]`;
        const date = tr.querySelector('input[name*="[completion_date]"]');
        if (date) date.name = `phases[${i}][completion_date]`;
        const loc = tr.querySelector('input[name*="[completion_location]"]');
        if (loc) loc.name = `phases[${i}][completion_location]`;
    });
}

document.addEventListener('DOMContentLoaded', updatePhaseRowNumbers);
</script>
            

            <div class="form-group row mb-3">
                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.public_beneficiaries') }}</label>
                <div class="col-sm-10">
                    <input required type="text" class="form-control step2-field @error('public') is-invalid @enderror"
                           name="public"
                           maxlength="255"
                           value="{{ old('public', $association->public ?? '') }}">
                    @error('public')
                        <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.approx_audience') }}</label>
                <div class="col-sm-10">
                    <input required type="number" class="form-control step2-field @error('nombre_spectateur') is-invalid @enderror"
                           name="nombre_spectateur"
                           value="{{ old('nombre_spectateur', $association->nombre_spectateur ?? '') }}">
                    @error('nombre_spectateur')
                        <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3 align-items-center">
                <label class="col-sm-2 col-form-label">{{ __('site.financement.form.step2.age_group') }}</label>

                <div class="col-sm-5 d-flex align-items-center">
                    <label class="col-form-label mb-0 me-3">{{ __('site.financement.form.step2.age_from') }}</label>
                    <input required type="number" class="form-control step2-field @error('tranch_age_min') is-invalid @enderror"
                           name="tranch_age_min"
                           value="{{ old('tranch_age_min', $association->tranch_age_min ?? '') }}">
                    @error('tranch_age_min')
                        <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-sm-5 d-flex align-items-center">
                    <label class="col-form-label mb-0 me-3">{{ __('site.financement.form.step2.age_to') }}</label>
                    <input required type="number" class="form-control step2-field @error('tranch_age_max') is-invalid @enderror"
                           name="tranch_age_max"
                           value="{{ old('tranch_age_max', $association->tranch_age_max ?? '') }}">
                    @error('tranch_age_max')
                        <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-6 col-form-label">{{ __('site.financement.form.step2.parties_participating') }}</label>
                <div class="col-sm-12">
                    <textarea required class="form-control step2-field @error('parties_realisation') is-invalid @enderror"
                              name="parties_realisation"
                              rows="4">{{ old('parties_realisation', $association->parties_realisation ?? '') }}</textarea>
                    @error('parties_realisation')
                        <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-6 col-form-label">{{ __('site.financement.form.step2.expected_results') }}</label>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-6 col-form-label">1- {{ __('site.financement.form.step2.results_quantitative') }}</label>
                <div class="col-sm-12">
                    <textarea required class="form-control step2-field @error('resultat_quantitatif') is-invalid @enderror"
                              name="resultat_quantitatif"
                              rows="4">{{ old('resultat_quantitatif', $association->resultat_quantitatif ?? '') }}</textarea>
                    @error('resultat_quantitatif')
                        <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-6 col-form-label">2- {{ __('site.financement.form.step2.results_qualitative') }}</label>
                <div class="col-sm-12">
                    <textarea  required class="form-control step2-field @error('resultat_qualitatif') is-invalid @enderror"
                              name="resultat_qualitatif"
                              rows="4">{{ old('resultat_qualitatif', $association->resultat_qualitatif ?? '') }}</textarea>
                    @error('resultat_qualitatif')
                        <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group row mb-3">
                <label class="col-sm-6 col-form-label">{{ __('site.financement.form.step2.perspectives') }}</label>
                <div class="col-sm-12">
                    <textarea required class="form-control step2-field @error('perspectives') is-invalid @enderror"
                              name="perspectives"
                              rows="4">{{ old('perspectives', $association->perspectives ?? '') }}</textarea>
                    @error('perspectives')
                        <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>
            </div>
        </div>

        <div class="form-section">
            <h4>{{ __('site.financement.form.step2.budget_title') }}</h4>
            <label class="col-sm-6 col-form-label">{{ __('site.financement.form.step2.estimated_budget') }}</label>

            <div class="form-group row">
                <table class="custom-table">
                    <thead>
                        <tr>
                            <th rowspan="2">{{ __('site.financement.form.step2.total_estimated_cost') }}<br>({{ __('site.financement.form.step2.tnd') }})</th>
                            <th colspan="2">{{ __('site.financement.form.step2.self_funding') }}</th>
                            <th colspan="2">{{ __('site.financement.form.step2.ministry_support') }}</th>
                        </tr>
                        <tr>
                            <th>{{ __('site.financement.form.step2.percent') }}</th>
                            <th>{{ __('site.financement.form.step2.amount') }}</th>
                            <th>{{ __('site.financement.form.step2.amount') }}</th>
                            <th>{{ __('site.financement.form.step2.percent') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input required type="number" name="budget[0][total_cost]" 
                                    class="form-control step2-field @error('budget.0.total_cost') is-invalid @enderror"
                                    value="{{ old('budget.0.total_cost') }}">
                                @error('budget.0.total_cost')
                                    <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                                @enderror
                            </td>
                            <td>
                                <input required type="number" name="budget[0][self_percent]" 
                                    class="form-control step2-field @error('budget.0.self_percent') is-invalid @enderror"
                                    value="{{ old('budget.0.self_percent') }}">
                                @error('budget.0.self_percent')
                                    <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                                @enderror
                            </td>
                            <td>
                                <input required type="number" name="budget[0][self_amount]" 
                                    class="form-control step2-field @error('budget.0.self_amount') is-invalid @enderror"
                                    value="{{ old('budget.0.self_amount') }}">
                                @error('budget.0.self_amount')
                                    <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                                @enderror
                            </td>
                            <td>
                                <input required type="number" name="budget[0][ministry_amount]" 
                                    class="form-control step2-field @error('budget.0.ministry_amount') is-invalid @enderror"
                                    value="{{ old('budget.0.ministry_amount') }}">
                                @error('budget.0.ministry_amount')
                                    <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                                @enderror
                            </td>
                            <td>
                                <input required type="number" name="budget[0][ministry_percent]" 
                                    class="form-control step2-field @error('budget.0.ministry_percent') is-invalid @enderror"
                                    value="{{ old('budget.0.ministry_percent') }}">
                                @error('budget.0.ministry_percent')
                                    <small class="text-danger2 d-block mt-1">{{ $message }}</small>
                                @enderror
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <label class="col-sm-6 col-form-label fw-bold">{{ __('site.financement.form.step2.supporting_parties') }}</label>

            <div class="form-group row">
                <table id="supporters-table" class="custom-table">
                    <thead>
                        <tr>
                            <th style="width:5%">{{ __('site.number')}}</th>
                            <th style="width: 35%">{{ __('site.financement.form.step2.supporter_name') }}</th>
                            <th style="width: 20%">{{ __('site.financement.form.step2.amount') }}</th>
                            <th style="width: 20%">{{ __('site.financement.form.step2.percent') }}</th>
                            <th style="width: 10%">{{ __('site.financement.form.step2.action') }}</th>
                        </tr>
                    </thead>

                    @php
                    $oldSupporters = old('budget.0.supporters', []);
                    if (!is_array($oldSupporters) || count($oldSupporters) === 0) {
                        $oldSupporters = [
                            ['name' => '', 'amount' => '', 'percent' => '']
                        ];
                    }
                    @endphp

                    <tbody id="supporters-body">
                        @foreach($oldSupporters as $i => $s)
                        <tr>
                            <td class="row-number fw-bold">{{ $i + 1 }}</td>
                            <td>
                                <input required type="text" 
                                       name="budget[0][supporters][{{ $i }}][name]" 
                                       class="form-control step2-field @error("budget.0.supporters.$i.name") is-invalid @enderror" 
                                       placeholder="{{ __('site.financement.form.step2.placeholder_supporter_name') }}"
                                       value="{{ old("budget.0.supporters.$i.name", $s['name'] ?? '') }}">
                                @if($errors->has("budget.0.supporters.$i.name"))
                                    <small class="text-danger2 d-block mt-1">{{ $errors->first("budget.0.supporters.$i.name") }}</small>
                                @endif
                            </td>
                            <td>
                                <input required type="number" 
                                       name="budget[0][supporters][{{ $i }}][amount]" 
                                       class="form-control step2-field @error("budget.0.supporters.$i.amount") is-invalid @enderror" 
                                       placeholder="{{ __('site.financement.form.step2.placeholder_amount') }}"
                                       value="{{ old("budget.0.supporters.$i.amount", $s['amount'] ?? '') }}">
                                @if($errors->has("budget.0.supporters.$i.amount"))
                                    <small class="text-danger2 d-block mt-1">{{ $errors->first("budget.0.supporters.$i.amount") }}</small>
                                @endif
                            </td>
                            <td>
                                <input required type="number" 
                                       name="budget[0][supporters][{{ $i }}][percent]" 
                                       class="form-control step2-field @error("budget.0.supporters.$i.percent") is-invalid @enderror" 
                                       placeholder="{{ __('site.financement.form.step2.placeholder_percent') }}"
                                       value="{{ old("budget.0.supporters.$i.percent", $s['percent'] ?? '') }}">
                                @if($errors->has("budget.0.supporters.$i.percent"))
                                    <small class="text-danger2 d-block mt-1">{{ $errors->first("budget.0.supporters.$i.percent") }}</small>
                                @endif
                            </td>
                          <td class="text-center">
    <div class="d-flex gap-2 justify-content-center align-items-center">
        <button type="button" class="btn-icon btn-icon--danger"  onclick="removeSupporter2Row(this)" title="{{ __('site.financement.actions.remove_row') }}">
            {{ __('site.financement.actions.remove_row') }}
        </button>
    </div>
</td>

                        </tr>
                        @endforeach
                    </tbody>
                </table>
                            <div class="mt-2 text-center">
    <button type="button" id="add-supporter-btn" class="btn-icon btn-icon--succ" onclick="addSupporter2Row(0)">
        {{ __('site.financement.actions.add_row') }}
    </button>
</div>
            </div>

<script>
function addSupporter2Row(index) {
    const tbody = document.getElementById('supporters-body');
    const rowCount = tbody.rows.length;
    const newRow = document.createElement('tr');

    newRow.innerHTML = `
        <td class="row-number fw-bold">${rowCount + 1}</td>
        <td><input required type="text" name="budget[${index}][supporters][${rowCount}][name]" class="form-control step2-field" placeholder="${@json(__('site.financement.form.step2.placeholder_supporter_name'))}"></td>
        <td><input required type="number" name="budget[${index}][supporters][${rowCount}][amount]" class="form-control step2-field" placeholder="${@json(__('site.financement.form.step2.placeholder_amount'))}"></td>
        <td><input required type="number" name="budget[${index}][supporters][${rowCount}][percent]" class="form-control step2-field" placeholder="${@json(__('site.financement.form.step2.placeholder_percent'))}"></td>
        <td class="text-center">
            <div class="d-flex gap-2 justify-content-center align-items-center">
                <button type="button"  class="btn-icon btn-icon--danger" onclick="removeSupporter2Row(this)" title="${@json(__('site.financement.actions.remove_row'))}">
                    ${@json(__('site.financement.actions.remove_row'))}
                </button>
            </div>
        </td>
    `;
    tbody.appendChild(newRow);
}

function removeSupporter2Row(button) {
    const row = button.closest('tr');
    const tbody = row.closest('tbody');
    row.remove();

    // Mise à jour des numéros visibles et des indices
    [...tbody.querySelectorAll('tr')].forEach((tr, i) => {
        tr.querySelector('.row-number').textContent = i + 1;
        tr.querySelector('input[name*="[name]"]').name = `budget[0][supporters][${i}][name]`;
        tr.querySelector('input[name*="[amount]"]').name = `budget[0][supporters][${i}][amount]`;
        tr.querySelector('input[name*="[percent]"]').name = `budget[0][supporters][${i}][percent]`;
    });
}
</script>

        </div>

        <label class="col-sm-6 col-form-label fw-bold">{{ __('site.financement.form.step2.expense_sections') }}</label>

        <div class="form-group row" >
            <table id="depenses-table" class="custom-table">
                <thead>
                    <tr>
                        <th style="width:5%">{{ __('site.number')}}</th>
                        <th style="width:30%">{{ __('site.financement.form.step2.expense_label') }}</th>
                        <th style="width:30%">{{ __('site.financement.form.step2.expense_materials') }}</th>
                        <th style="width:20%">{{ __('site.financement.form.step2.cost') }}</th>
                        <th style="width:5%">{{ __('site.financement.form.step2.action') }}</th>
                    </tr>
                </thead>

                @php
                $oldDepenses = old('depenses', []);
                if (!is_array($oldDepenses) || count($oldDepenses) === 0) {
                    $oldDepenses = [
                        ['libelle_depense' => '', 'description' => '', 'cout' => '']
                    ];
                }
                @endphp

                <tbody id="depenses-body">
                    @foreach($oldDepenses as $i => $d)
                    <tr>
                        <td class="row-number fw-bold">{{ $i + 1 }}</td>

                        <td>
                            <input required type="text" 
                                   name="depenses[{{ $i }}][libelle_depense]" 
                                   class="form-control step2-field @error("depenses.$i.libelle_depense") is-invalid @enderror" 
                                   placeholder="{{ __('site.financement.form.step2.placeholder_expense') }}" 
                                   value="{{ old("depenses.$i.libelle_depense", $d['libelle_depense'] ?? '') }}">
                            @if($errors->has("depenses.$i.libelle_depense"))
                                <small class="text-danger2 d-block mt-1">{{ $errors->first("depenses.$i.libelle_depense") }}</small>
                            @endif
                        </td>

                        <td>
                            <input required type="text" 
                                   name="depenses[{{ $i }}][description]" 
                                   class="form-control step2-field @error("depenses.$i.description") is-invalid @enderror" 
                                   placeholder="{{ __('site.financement.form.step2.placeholder_expense_materials') }}"
                                   value="{{ old("depenses.$i.description", $d['description'] ?? '') }}">
                            @if($errors->has("depenses.$i.description"))
                                <small class="text-danger2 d-block mt-1">{{ $errors->first("depenses.$i.description") }}</small>
                            @endif
                        </td>

                        <td>
                            <input required type="number" 
                                   name="depenses[{{ $i }}][cout]" 
                                   class="form-control step2-field @error("depenses.$i.cout") is-invalid @enderror" 
                                   placeholder="{{ __('site.financement.form.step2.placeholder_cost') }}"
                                   value="{{ old("depenses.$i.cout", $d['cout'] ?? '') }}">
                            @if($errors->has("depenses.$i.cout"))
                                <small class="text-danger2 d-block mt-1">{{ $errors->first("depenses.$i.cout") }}</small>
                            @endif
                        </td>

                        <td style="white-space: nowrap;">
    <div class="d-flex gap-2 justify-content-center align-items-center">
        <button type="button"  class="btn-icon btn-icon--danger" onclick="removeDepenses2Row(this)" title="{{ __('site.financement.actions.remove_row') }}">
            {{ __('site.financement.actions.remove_row') }}
        </button>
    </div>
</td>

                    </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-2 text-center">
    <button type="button" class="btn-icon btn-icon--succ" class="btn btn-sm btn-primary" onclick="addDepenses2Row()">
        {{ __('site.financement.actions.add_row') }}
    </button>
</div>
        </div>

<script>
function addDepenses2Row() {
    const tbody = document.getElementById('depenses-body');
    const rowCount = tbody.rows.length;
    const newRow = document.createElement('tr');

    newRow.innerHTML = `
        <td class="row-number fw-bold">${rowCount + 1}</td>
        <td><input required type="text" name="depenses[${rowCount}][libelle_depense]" class="form-control step2-field" placeholder="${@json(__('site.financement.form.step2.placeholder_expense'))}"></td>
        <td><input required type="text" name="depenses[${rowCount}][description]" class="form-control step2-field" placeholder="${@json(__('site.financement.form.step2.placeholder_expense_materials'))}"></td>
        <td><input required type="number" name="depenses[${rowCount}][cout]" class="form-control step2-field" placeholder="${@json(__('site.financement.form.step2.placeholder_cost'))}"></td>
        <td class="text-center action-buttons">
            <div class="d-flex gap-2 justify-content-center align-items-center">
                <button type="button"  class="btn-icon btn-icon--danger" onclick="removeDepenses2Row(this)" title="${@json(__('site.financement.actions.remove_row'))}">
                    ${@json(__('site.financement.actions.remove_row'))}
                </button>
            </div>
        </td>
    `;
    tbody.appendChild(newRow);
}

function removeDepenses2Row(button) {
    const row = button.closest('tr');
    const tbody = row.closest('tbody');
    row.remove();

    [...tbody.querySelectorAll('.row-number')].forEach((cell, i) => {
        cell.textContent = i + 1;
    });

    // Renommer les inputs pour garder les indices consécutifs
    [...tbody.querySelectorAll('tr')].forEach((tr, i) => {
        tr.querySelector('input[name*="[libelle_depense]"]').name = `depenses[${i}][libelle_depense]`;
        tr.querySelector('input[name*="[description]"]').name = `depenses[${i}][description]`;
        tr.querySelector('input[name*="[cout]"]').name = `depenses[${i}][cout]`;
    });
}
</script>

        <style>
            /* existing CSS preserved exactly — no changes */
            /* Table design */
            #depenses-table { /* ... */ }
            #depenses-table th { /* ... */ }
            #depenses-table td { /* ... */ }
            .btn-circle { /* ... */ }
            .btn-outline-danger.btn-circle { /* ... */ }
            .btn-outline-success.btn-circle { /* ... */ }
            #depenses-table input { /* ... */ }
        </style>

        <span>{{ __('site.financement.form.step2.note_phase_requirements') }}</span>
    </div>
</div>

     


   
<div id="step3" class="step-content">
    <div class="container">
        @php
            $form1_complete = $form1_complete ?? false;
            $form2_complete = $form2_complete ?? false;
        @endphp

        <input type="hidden" name="id_formulaire" value="{{ $formulaire3->id_type }}">
        <input type="hidden" name="id_projet" value="{{ $id_projet }}">

        <br>
        <div class="form-section">
            <div class="form-group row">
                <table id="phase-table" class="custom-table">
                    <thead>
                        <tr>
                             <th style="width:5%">{{ __('site.number')}}</th>
                            <th>{{ __('site.financement.form.step3.table_header_order_docs') }}</th>
                            <th>{{ __('site.financement.form.step3.table_header_docs') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($typedocum as $index => $doc)
                        <tr>
                            <td class="row-number">{{ $index + 1 }}</td>

                            <td data-label="{{ __('site.financement.form.step3.table_header_order_docs') }}">
                                {{-- {{ $doc->type_ar }} --}}
                                {{ trans_field($doc, 'type') }}    
                                <input type="hidden" name="doc_fin[{{ $index }}][id_doc]" value="{{ $doc->id_type_doc }}">
                            </td>

                            <td data-label="{{ __('site.financement.form.step3.table_header_docs') }}">
                                @php
                                    $docExist = $documents->where('id_doc', $doc->id_type_doc)->first();
                                @endphp

                                @if($doc->id_type_doc == 15)
                                    <span class="doc-status" data-step="2">{{ __('site.financement.form.step3.msg_complete_step2') }}</span>

                                @elseif($doc->id_type_doc == 16)
                                    <div style="display:flex; align-items:center; gap:10px;">
                                        <a href="{{ asset('storage/documents_financement/التزام_وتصريح_على_الشرف.pdf') }}"
                                           target="_blank"
                                           class="btn btn-sm btn-secondary"
                                           title="{{ __('site.financement.form.step3.download_document_title') }}">
                                            📤
                                        </a>

                                        <input required type="file"
                                               name="doc_fin[{{ $index }}][file]"
                                               class="form-control @error("doc_fin.$index.file") is-invalid @enderror"
                                               style="flex:1">

                                        @error("doc_fin.$index.file")
                                            <small class="text-danger d-block mt-1">{{ $message }}</small>
                                        @enderror
                                    </div>

                                @elseif($doc->id_type_doc == 17)
                                    <span class="doc-status" data-step="1">{{ __('site.financement.form.step3.msg_complete_step1') }}</span>

                                @else
                                    <input required type="file"
                                           name="doc_fin[{{ $index }}][file]"
                                           class="form-control @error("doc_fin.$index.file") is-invalid @enderror">

                                    @error("doc_fin.$index.file")
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                @endif

                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


    <div class="stepper-nav">
        <button type="button" class="btn btn-retour btn-hidden" id="prevBtn" onclick="prevStep()">{{ __('site.financement.form.prev') }}</button>
        <button type="button" class="btn btn-success btn-visible" id="nextBtn" onclick="nextStep()">{{ __('site.financement.form.next') }}</button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    function checkStepComplete(stepClass) {
        let allFilled = true;
        document.querySelectorAll(stepClass).forEach(input => {
            if (input.value.trim() === '') {
                allFilled = false;
            }
        });
        return allFilled;
    }

    function updateDocMessages() {
        document.querySelectorAll('.doc-status').forEach(el => {
            const step = el.getAttribute('data-step');
if (step === '1' && checkStepComplete('.step1-field')) {
    el.textContent = __finTrans.doc_available;
    el.style.color = 'green';
} 
else if (step === '2' && checkStepComplete('.step2-field')) {
    el.textContent = __finTrans.doc_available;
    el.style.color = 'green';
} 
else if (step === '1') {
    el.textContent = __finTrans.need_complete_step1;
    el.style.color = 'red';
} 
else if (step === '2') {
    el.textContent = __finTrans.need_complete_step2;
    el.style.color = 'red';
}

        });
    }

    document.querySelectorAll('.step1-field, .step2-field').forEach(input => {
        input.addEventListener('input', updateDocMessages);
    });

    updateDocMessages();
});
</script>

<div class="form-group text-center mt-5">
        <input type="hidden" id="brouillon" name="brouillon" value="0">

        <div class="d-flex flex-wrap justify-content-center align-items-center gap-2" style="max-width: 600px; margin: 0 auto;">
            <!-- Enregistrer -->
            <button id="saveBtn" type="submit"
              class="btn btn-success d-flex align-items-center justify-content-center gap-1 flex-fill"
              onclick="document.getElementById('brouillon').value = 0;">
        <i class="bx bx-save"></i> {{ __('site.financement.actions.save') }}
      </button>
	  <!--button id="saveBtn" type="button"
        class="btn btn-success d-flex align-items-center justify-content-center gap-1 flex-fill">
    <i class="bx bx-save"></i> {{ __('site.financement.actions.save') }}
</button-->

            <!-- Enregistrer comme brouillon -->
              <button id="draftBtn" type="button"
              class="btn btn-orange-gradient text-white d-flex align-items-center justify-content-center gap-1 flex-fill"
              onclick="submitAsDraft(event)">
        <i class="bx bx-edit-alt"></i> {{ __('site.financement.actions.save_draft') }}
      </button>

        </div>
    </div>
    
    


<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

<div id="global-block-msg" class="alert alert-danger" style="display:none">

</div>
   
</div>  
</form>
</div>
</div>

<!--script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
(function() {
    const form = document.getElementById('financementForm');
    if (!form) return;

    const brouillonInput = document.getElementById('brouillon');
    const saveBtn = document.getElementById('saveBtn');
    const draftBtn = document.getElementById('draftBtn');
    const nomAssoc = document.getElementById('nom_association');
    const typesErr = document.getElementById('types-error-client');

    // Helper: show/hide types error
    function showTypesError(msg) {
        if (!typesErr) return;
        typesErr.textContent = msg;
        typesErr.classList.remove('d-none');
    }
    function hideTypesError() {
        if (!typesErr) return;
        typesErr.textContent = '';
        typesErr.classList.add('d-none');
    }

    // Validation principale pour "save" (enregistrement normal)
    function validateFormBeforeSubmit() {
        // 1) Vérifier nom association
        const nomVal = nomAssoc ? nomAssoc.value.trim() : '';
        if (!nomVal) {
            if (nomAssoc) {
                nomAssoc.focus();
                if (!nomAssoc.nextElementSibling || !nomAssoc.nextElementSibling.classList.contains('text-danger2')) {
                    const small = document.createElement('small');
                    small.className = 'text-danger2 d-block mb-1';
                    small.textContent = '{{ addslashes(__('site.financement.validation.nom_association_required')) }}';
                    nomAssoc.parentNode.appendChild(small);
                }
            }
            return false;
        }

        // 2) Vérifier types_financement
        const checkedTypes = form.querySelectorAll('input[name="types_financement[]"]:checked').length;
        hideTypesError();
        if (checkedTypes === 0) {
            showTypesError('{{ addslashes(__('site.financement.validation.types_financement_required')) }}');
            const firstType = form.querySelector('input[name="types_financement[]"]');
            if (firstType) firstType.scrollIntoView({ behavior: 'smooth', block: 'center' });
            return false;
        }

        return true;
    }

    // Bouton save → confirmation SweetAlert2
    if (saveBtn) {
        saveBtn.addEventListener('click', function() {
            brouillonInput.value = '0'; // enregistrement normal

            // lancer validation avant SweetAlert
            if (!validateFormBeforeSubmit()) return;

            Swal.fire({
                title: "{{ __('validation.title') }}",
                icon: 'warning',
                width: '800px',
                padding: '1.5rem',
                html: `
                    <div class="swal-text">
                        <p class="mb-2">{{ __('validation.message_main') }}</p>
                        <p class="text-muted">{{ __('validation.message_note') }}</p>
                    </div>
                `,
                showCancelButton: true,
                reverseButtons: true,
                focusCancel: true,
                confirmButtonText: "{{ __('site.confirm') }}",
                cancelButtonText: "{{ __('site.cancel') }}",
                buttonsStyling: false,
                customClass: {
                    popup: 'swal-wide',
                    title: 'swal-title-center',
                    confirmButton: 'btn btn-success px-4',
                    cancelButton: 'btn btn-outline-secondary px-4'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
    }

    // Bouton brouillon → votre fonction existante
    if (draftBtn) {
        draftBtn.addEventListener('click', function(e) {
            e.preventDefault();
            brouillonInput.value = '1';
            // Appeler votre validation partielle si nécessaire
            window.submitAsDraft(e);
        });
    }

})();
</script>

<style>
.swal-wide {
    width: 800px !important;
    max-width: 95vw !important;
}
.swal-title-center {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 600;
}
.swal-text {
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
}
</style!-->

<script>
(function() {
  const form = document.getElementById('financementForm');
  if (!form) return;

  const brouillonInput = document.getElementById('brouillon');
  const draftBtn = document.getElementById('draftBtn');
  const saveBtn = document.getElementById('saveBtn');
  const nomAssoc = document.getElementById('nom_association');
  const typesErr = document.getElementById('types-error-client');

  function showTypesError(msg) {
    if (!typesErr) return;
    typesErr.textContent = msg;
    typesErr.classList.remove('d-none');
  }
  function hideTypesError() {
    if (!typesErr) return;
    typesErr.textContent = '';
    typesErr.classList.add('d-none');
  }

 
  window.submitAsDraft = function(e) {
    e.preventDefault();

    brouillonInput.value = '1';

    
    const nomVal = nomAssoc ? nomAssoc.value.trim() : '';
    if (!nomVal) {
      if (nomAssoc) {
        nomAssoc.focus();
       
        if (!nomAssoc.nextElementSibling || !nomAssoc.nextElementSibling.classList.contains('text-danger2')) {
          const small = document.createElement('small');
          small.className = 'text-danger2 d-block mb-1';
          small.textContent = '{{ addslashes(__('site.financement.validation.nom_association_required')) }}';
          nomAssoc.parentNode.appendChild(small);
        }
      }
      return;
    }

    const checkedTypes = form.querySelectorAll('input[name="types_financement[]"]:checked').length;
    hideTypesError();
    if (checkedTypes === 0) {
      showTypesError('{{ addslashes(__('site.financement.validation.types_financement_required')) }}' || 'Please choose at least one type.');
      const firstType = form.querySelector('input[name="types_financement[]"]');
      if (firstType) firstType.scrollIntoView({ behavior: 'smooth', block: 'center' });
      return;
    }

   
    const requiredEls = Array.from(form.querySelectorAll('[required]'));

    requiredEls.forEach(el => {
      const keep = (el.name === 'nom_association' || el.name === 'types_financement[]' || el.id === 'nom_association');
      if (!keep) {
        el.dataset.wasRequired = '1';
        el.removeAttribute('required');
      }
    });

    hideTypesError();

 
    form.submit();
  };

 
  if (saveBtn) {
    saveBtn.addEventListener('click', function(){ brouillonInput.value = '0'; });
  }

 
  window.addEventListener('load', function() {
 
  });
})();
</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
(function () {

  const form = document.getElementById('financementForm');
  if (!form) return;

  let swalConfirmed = false;

  form.addEventListener('submit', function (e) {

    // 🔒 si déjà confirmé → laisser passer vers storeAll
    if (swalConfirmed) return;

    // ❌ bloquer submit temporairement
    e.preventDefault();

    // 👉 s'assurer que c'est un enregistrement final
    const brouillonInput = document.getElementById('brouillon');
    if (brouillonInput) brouillonInput.value = '0';

    Swal.fire({
      title: "{{ __('validation.title') }}",
      icon: 'warning',
      width: '1000px',
      padding: '1.5rem',

      html: `
        <div class="swal-text">
          <p class="mb-2">
            {{ __('validation.message_main') }}
          </p>
          <p class="text-muted">
            {{ __('validation.message_note') }}
          </p>
        </div>
      `,

      showCancelButton: true,
      reverseButtons: true,
      focusCancel: true,

      confirmButtonText: "{{ __('site.confirm') }}",
      cancelButtonText: "{{ __('site.cancel') }}",

      buttonsStyling: false,
      customClass: {
        popup: 'swal-wide',
        title: 'swal-title-center',
        confirmButton: 'btn btn-danger px-4',
        cancelButton: 'btn btn-outline-secondary px-4'
      }

    }).then((result) => {
      if (result.isConfirmed) {
        swalConfirmed = true; // 🔓 autoriser submit
        form.submit();       // ✅ déclenche storeAll
      }
    });

  });

})();
</script>
<style>

.swal-wide {
    width: 1000px !important;
    max-width: 95vw !important;
}


.swal-title-center {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 600;
}


.swal-text {
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
}
</style>


<script>
function addPhaseRow() {
    const tbody = document.getElementById('phase-body');
    const rowCount = tbody.rows.length;

    const newRow = document.createElement('tr');
    newRow.innerHTML = `
        <td class="row-number fw-bold">${rowCount + 1}</td>
        <td><input required type="text" name="phases[${rowCount}][description]" class="form-control step2-field" placeholder="أدخل الفقرة" maxlength="200"></td>
        <td><input required type="date" name="phases[${rowCount}][completion_date]" class="form-control step2-field"></td>
        <td><input required type="text" name="phases[${rowCount}][completion_location]" class="form-control step2-field" placeholder="أدخل المكان" maxlength="100"></td>
        <td class="text-center action-buttons" style="white-space: nowrap;">
            <div class="d-flex gap-2 justify-content-center align-items-center">
                <button type="button" class="btn-icon btn-icon--danger" onclick="removePhaseRow(this)" title="حذف">
                    {{ __('site.financement.actions.remove_row') }}
                </button>
            
            </div>
        </td>
    `;
    tbody.appendChild(newRow);
}


function removePhaseRow(button) {
    const row = button.closest('tr');
    const tbody = row.closest('tbody');
    row.remove();
    updatePhaseRowNumbers();
}

function updatePhaseRowNumbers() {
    const tbody = document.getElementById('phase-body');
    // mettre à jour les numéros visibles
    [...tbody.querySelectorAll('.row-number')].forEach((cell, i) => {
        cell.textContent = i + 1;
    });

    // renommer les name pour indices consécutifs (important pour la validation)
    [...tbody.querySelectorAll('tr')].forEach((tr, i) => {
        const desc = tr.querySelector('input[name*="[description]"]');
        if (desc) desc.name = `phases[${i}][description]`;
        const date = tr.querySelector('input[name*="[completion_date]"]');
        if (date) date.name = `phases[${i}][completion_date]`;
        const loc = tr.querySelector('input[name*="[completion_location]"]');
        if (loc) loc.name = `phases[${i}][completion_location]`;
    });
}

document.addEventListener('DOMContentLoaded', updatePhaseRowNumbers);
</script> 

<script>
function addSupporter2Row(index) {
    const tbody = document.getElementById('supporters-body');
    const rowCount = tbody.rows.length;
    const newRow = document.createElement('tr');

    newRow.innerHTML = `
        <td class="row-number fw-bold">${rowCount + 1}</td>
        <td><input type="text" name="budget[${index}][supporters][${rowCount}][name]" class="form-control step2-field" placeholder="اسم الطرف"></td>
        <td><input type="number" name="budget[${index}][supporters][${rowCount}][amount]" class="form-control step2-field" placeholder="0.000"></td>
        <td><input type="number" name="budget[${index}][supporters][${rowCount}][percent]" class="form-control step2-field" placeholder="%"></td>
        <td class="text-center">
            <div class="d-flex gap-2 justify-content-center align-items-center">
                <button type="button" class="btn-icon btn-icon--danger" onclick="removeSupporter2Row(this)">
                    {{ __('site.financement.actions.remove_row') }}
                </button>
              
            </div>
        </td>
    `;
    tbody.appendChild(newRow);
}

function removeSupporter2Row(button) {
    const row = button.closest('tr');
    const tbody = row.closest('tbody');
    row.remove();

    // Mise à jour des numéros visibles et des indices
    [...tbody.querySelectorAll('tr')].forEach((tr, i) => {
        tr.querySelector('.row-number').textContent = i + 1;
        tr.querySelector('input[name*="[name]"]').name = `budget[0][supporters][${i}][name]`;
        tr.querySelector('input[name*="[amount]"]').name = `budget[0][supporters][${i}][amount]`;
        tr.querySelector('input[name*="[percent]"]').name = `budget[0][supporters][${i}][percent]`;
    });
}


</script>
@else
    <script>
        window.location.href = "{{ route('login') }}";
    </script>
@endif


<style>
   
    /* Bouton Précédent - masqué par défaut */
    /* Utiliser un sélecteur très spécifique pour surpasser .salle-sport-edit button */
    .salle-sport-edit button.btn-hidden,
    .salle-sport-edit button#prevBtn.btn-hidden,
    button.btn.btn-hidden,
    button#prevBtn.btn-hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .salle-sport-edit button.btn-visible,
    .salle-sport-edit button#prevBtn.btn-visible,
    .salle-sport-edit button#nextBtn.btn-visible,
    button.btn.btn-visible,
    button#prevBtn.btn-visible,
    button#nextBtn.btn-visible {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .text-danger2 {
        color: #dc3545;
        font-size: 15px;
        margin-top: 4px;
        display: block;
        font-weight: 600;
    }

    .is-invalid {
        border-color: #dc3545 !important;
        background-color: #fff5f5 !important;
    }

    .is-invalid:hover {
        border-color: #ff0000 !important;
        background-color: #ffe8e8 !important;
    }
</style>
@endsection