@php
$customizerHidden = 'customizer-hide';
$configData = Helper::appClasses();
@endphp
@extends('layouts.horizontalLayout')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/select2/select2.scss',
'resources/assets/vendor/libs/@form-validation/form-validation.scss',
'resources/assets/vendor/libs/animate-css/animate.scss',
'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
])
@endsection

@section('page-style')
{{-- <style>
  /* Application de la police professionnelle */
  body {
    font-family: 'Roboto', sans-serif;
    /* Police plus professionnelle */
  }

  /* Style de la carte */
  .card {
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    /* Bordure plus douce */
  }

  /* Boutons */
  .btn-primary {
    background-color: #24b364;
    border-color: #24b364;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }

  .btn-primary:hover {
    background-color: #1a9a4f;
    /* Teinte plus foncée au survol */
    border-color: #1a9a4f;
  }

  .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }

  .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #5a6268;
  }

  /* Groupes de saisie */
  .input-group {
    border-radius: 8px;
    margin-bottom: 1.5rem;
    /* Espacement entre les champs */
  }

  .input-group-prepend {
    border-radius: 8px 0 0 8px;
  }

  .input-group-prepend i {
    padding: 10px;
    color: #495057;
  }

  .input-group input {
    border-radius: 0 8px 8px 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
    padding: 10px;
    font-size: 1rem;
  }

  .form-group {
    margin-bottom: 1.75rem;
    /* Espacement plus grand entre les groupes */
  }

  .form-group label {
    font-weight: 600;
    margin-bottom: 0.75rem;
    /* Espacement entre le label et l'input */
    color: #495057;
  }

  .form-group input,
  .form-group select {
    border-radius: 8px;
    border: 1px solid #ced4da;
    padding: 10px;
    width: 100%;
    box-shadow: none;
    font-size: 1rem;
  }

  .form-group input:focus,
  .form-group select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25);
  }

  .invalid-feedback {
    font-size: 0.875rem;
    color: #dc3545;
  }

  /* Espace entre le bouton et l'input */
  .text-center button {
    border-radius: 50px;
    padding: 12px 30px;
    font-size: 1rem;
    margin: 10px;
  }

  /* Responsive adjustment */
  @media (max-width: 768px) {
    .col-md-6 {
      max-width: 100%;
      width: 100%;
    }
  }
</style> --}}
@endsection

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/select2/select2.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/animate-css/animate.scss',
'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
@endsection
@section('page-script')
<script>
  document.addEventListener('DOMContentLoaded', function (e) {
      $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      const Toast = Swal.mixin({
        toast: true,
        position: "top-end",
        showConfirmButton: false,
        showCloseButton: true,
        timer: 30000,
        width: '60%',
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.onmouseenter = Swal.stopTimer;
            toast.onmouseleave = Swal.resumeTimer;
        }
      });

      const minMensualite = $('#montant_rembourser').val();
      console.log('MIN_MENSUALITE ', minMensualite);
      $('#montant_rembourser').on('change', function() {
        console.log('TARGET ', $(this).val());
        const newMensualite = $(this).val();
        if(newMensualite < minMensualite) {
          Toast.fire({
            icon: "warning",
            title: 'Le montant de remboursement ne doit pas être inferieur à la mensualité prévue dans l\'engagement [' + minMensualite + '].'
          });
        }
      })

      document.getElementById('remboursement-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const eventId = $("input[name=event_id]").val();
        const formData = new FormData(this);

        let data = Object.fromEntries(formData);

        $.ajax({
            type: "post",
            url: "{{route('remboursementsRedevables.store')}}",
            data: data,
            dataType: 'json',
            cache: false,
            timeout: 5000,
            success: function (data) {
                console.log("RESPONSE ", data);
                if(data.code == 200){
                    Toast.fire({
                        icon: "success",
                        title: data.msg
                    });
                    if (data.payLink != "") {
                        window.open(data.payLink, '_self');
                    }
                }else{
                    Toast.fire({
                        icon: "warning",
                        title: data.msg
                    });
                }
            },
            error: function (e) {
              console.log('EEEEEEEEEEE ', e);
                if('responseJSON' in e ) {
                    Toast.fire({
                        icon: "warning",
                        title: e.responseJSON.message
                    });
                }
            }
        })
      });
    })
</script>
@endsection

@section('content')
<section class="content-header">
  <div class="container-fluid">
    <h4 class="py-3 mb-4">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-white px-0">
          <li class="breadcrumb-item"><a href="#">Accueil</a></li>
          <li class="breadcrumb-item"><a href="#">Remboursement</a></li>
          <li class="breadcrumb-item active" aria-current="page">Ajouter un remboursement</li>
        </ol>
      </nav>
    </h4>
  </div>
</section>

<div class="container">
  <div class="row justify-content-center mb-5">
    <div class="col-lg-6">
      <div class="card shadow rounded-4 border-0">
        <div class="card-header bg-white border-bottom-0 text-center pt-4">
          <h5 class="mb-2 text-primary">
            <i class="fas fa-credit-card mr-2"></i> Initiation de paiement
          </h5>
          <p class="text-muted mb-0">Vérifiez les détails avant de continuer</p>
        </div>

        <div class="card-body p-4">

          {{-- Résumé des paiements --}}
          <div class="mb-4">
            <div class="row text-center">
              <div class="col-4">
                <div class="h6 text-muted">Total dû</div>
                <div class="h5 text-default">{{ number_format($redevable->montant_du , 0, ',', ' ') }} FCFA</div>
              </div>
              <div class="col-4">
                <div class="h6 text-muted">Déjà payé</div>
                <div class="h5 text-success">{{ number_format($montant_rembourse, 0, ',', ' ') }} FCFA</div>
              </div>
              <div class="col-4">
                <div class="h6 text-muted">Reste à payer</div>
                <div class="h5 text-danger">{{ number_format($redevable->montant_restant, 0, ',', ' ') }} FCFA</div>
              </div>
            </div>
            <hr class="my-4">
          </div>

          {{-- Formulaire de paiement --}}
          <form id="remboursement-form" method="POST" enctype="multipart/form-data">
            @csrf

            {{-- Montant --}}
            <div class="form-group mb-4">
              <label for="montant_rembourser" class="form-label text-muted">Montant à rembourser</label>
              <div class="input-group">
                <input type="number" name="montant_rembourser" id="montant_rembourser"
                  class="form-control form-control-lg @error('montant_rembourser') is-invalid @enderror"
                  placeholder="Ex : 10 000" value="{{ $mensualite }}" required max="{{ $redevable->montant_restant }}"
                  min="{{ $mensualite }}"><span class="input-group-text">CFA</span>
              </div>
              @error('montant_rembourser')
              <div class="invalid-feedback d-block">{{ $message }}</div>
              @enderror
            </div>

            @include('adminlte-templates::common.errors')

            {{-- Boutons --}}
            <div class="text-center mt-4">
              <button type="submit" class="btn btn-success px-5" id="submitBtn">
                <span id="btnText">Initier le paiement</span>
                <div id="spinner" class="spinner-border spinner-border-sm d-none" role="status"></div>
              </button>
              <a href="{{ route('remboursementsRedevables.index') }}" class="btn btn-outline-secondary ms-3">Annuler</a>
            </div>
          </form>

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

@push('scripts')
<script>
  document.getElementById('remboursement-form').addEventListener('submit', function () {
        const btn = document.getElementById('submitBtn');
        const spinner = document.getElementById('spinner');
        const btnText = document.getElementById('btnText');

        btn.disabled = true;
        spinner.classList.remove('d-none');
        btnText.textContent = "Traitement...";
    });
</script>
@endpush
@endsection