{{define "beneficiary_wallet"}}
<div class="py-6"
  x-data="{
    walletdialog: false
  }">
  <div class="py-5 text-center">
    <p class="text-lg">Solde : {{ printf "%.2f" .ViewState.wallet_balance }} €</p>
  <button  @click="walletdialog = !walletdialog"
    class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
    Créditer le compte
  </button>
  <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"
       x-show="walletdialog">
    <div class="fixed inset-0 bg-gray-900 opacity-30 transition-opacity"></div>
                                
    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
        <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
          <div>
            <div class="mt-3 text-center sm:mt-5">
              <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Créditer le compte</h3>
                <div class="mt-2">
                  <p class="text-sm text-gray-500">Créditer le compte mobilité de l'utilisateur</p>
                </div>
              </div>
            </div>
          <form method="POST" action="/app/wallets/{{.ViewState.beneficiary.ID}}/credit" class="my-4">
              <div class="space-y-4">
                <div>
                  <label for="amount" class="block text-sm font-medium text-gray-700">Montant</label>
                  <input type="number" step="0.01" id="amount" name="amount" value="0"
                         class="mt-1 w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-3 py-2 sm:text-sm border-gray-300 rounded-2xl">
                </div>

                <div>
                  <label for="payment_method" class="block text-sm font-medium text-gray-700">Moyen de paiement</label>
                  <select id="payment_method" name="payment_method"
                          class="mt-1 w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-3 py-2 sm:text-sm border-gray-300 rounded-2xl">
                    <option value="Paiement en espèce (MMS)">Paiement en espèce (MMS)</option>
                    <option value="Virement bancaire">Virement bancaire</option>
                    <option value="Autre">Autre</option>
                  </select>
                </div>

                <div>
                  <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                  <textarea id="description" name="description" rows="3" placeholder="Description de l'opération..."
                            class="mt-1 w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-3 py-2 sm:text-sm border-gray-300 rounded-2xl"></textarea>
                </div>
              </div>

              <div class="mt-6 flex flex-col space-y-3">
                <button type="submit" class="inline-flex w-full justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:text-sm">Ajouter</button>
                <button @click="walletdialog=false" type="button" class="inline-flex w-full justify-center bg-white hover:bg-gray-50 border-gray-300 border px-4 py-2 text-gray-700 items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Annuler</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Wallet Operations History -->
  {{if .ViewState.beneficiary.Data.wallet_history}}
  <div class="py-5">
    <h4 class="text-lg font-medium text-gray-900 mb-4 text-center">Historique des opérations</h4>
    <table class="min-w-full divide-y divide-gray-300 border-gray-300 border-t-1">
      <thead class="bg-gray-50">
        <tr>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Date</th>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Crédit</th>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Débit</th>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Moyen de paiement</th>
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Description</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 bg-white">
        <!-- Initial Balance Row -->
        <tr class="bg-gray-50">
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500 italic sm:pl-6">
            Solde initial
          </td>
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
            {{if .ViewState.beneficiary.Data.wallet}}{{ printf "%.2f" .ViewState.beneficiary.Data.wallet }} €{{else}}0.00 €{{end}}
          </td>
          <td class="py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6">
            -
          </td>
          <td class="py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6">
            -
          </td>
          <td class="py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6">
            -
          </td>
        </tr>
        {{range $index, $operation := .ViewState.beneficiary.Data.wallet_history}}
        <tr>
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
            {{if $operation.timestamp}}{{timeFormat $operation.timestamp "02/01/2006 15:04"}}{{end}}
          </td>
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-green-600 sm:pl-6">
            {{if $operation.amount}}
              {{if or (eq $operation.operation_type "credit") (not $operation.operation_type)}}
                {{ printf "%.2f" $operation.amount }} €
              {{end}}
            {{end}}
          </td>
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-red-600 sm:pl-6">
            {{if eq $operation.operation_type "debit"}}
              {{ printf "%.2f" $operation.amount }} €
            {{end}}
          </td>
          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
            {{$operation.payment_method}}
          </td>
          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
            {{$operation.description}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{else}}
  <div class="py-5">
    <p class="text-sm text-gray-500 text-center">Aucune opération enregistrée</p>
  </div>
  {{end}}

</div>
{{end}}