@extends('layout')
@section('title','Transfert')
@section('content')
<link href="library/bootstrap-5/bootstrap.min.css" rel="stylesheet" />
<script src="library/bootstrap-5/bootstrap.bundle.min.js"></script>
<script src="library/dselect.js"></script>
@if (session('status'))
<div class="alert alert-success">
    {{(session('status'))}}
</div>

@endif

@if (session('dange'))
<div class="alert alert-danger">
    {{(session('dange'))}}
</div>

@endif
<div class="container">
    <div class="text-center" style="margin: 30px">
        <a href="{{asset('listetranssemi')}}" style="width: 100%" class="btn btn-primary"> <i class="fas fa-filex"></i> Liste des transferts</a>
    </div>
    <h1 align="center">TRANSFERT COMPTE VERS NON MEMBRE</h1><br />
    <br>
    <div class="card" style="padding:50px">
        <div class="box">
                <div class="form-group">
                    <label for="image">Code de Transfert:</label>
                    <input style="background-color: #3b3b3b;color:#fff" type="text" readonly name="code" id="code" class="form-control"
                        value="{{rand(10000000000,99999999999)}}" />

                </div>
                <br>
                <div class="form-group">
                    <label>Agence du compte origine</label>
                    <select name="agence1"  class="form-control select2bs4" id="agence1" onchange="check_agence1()">
                        <option value="">Choisissez une agence...</option>
                        @foreach ($agences as $ag)

                        <option value="{{$ag->code_agence}}">{{$ag->libelle_agence}} Code: {{$ag->code_agence}}
                        </option>
                        @endforeach

                    </select>
                </div>
                <div class="form-group">
                    <label>Compte origine</label>
                    <select name="compte_id" id="compte_id"  class="form-control select2bs4">
                        <option value="">Veuillez choisir l'agence.</option>
                    </select>
                </div>
                <input type="hidden" value="" name="code_agence1" id="code_agence1">
                <br>

                <div class="form-group">
                    <label>Montant</label>
                    <input type="number" min="0" placeholder="Montant du transfert" id="mtrans" onchange="auto_frais()"
                        name="mtrans" required data-parsley-trigger="keyup" class="form-control" />

                </div>

                <div class="from-group">
                    <label for="">Frais de transfert</label>

                    <div id="frais">

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


                <div class="form-group">
                    <label>Nom et prénon du récepteur</label>
                    <input type="text" placeholder="Nom et prenon du Recepteur" name="nom_recep" id="nom_recep" required
                        data-parsley-trigger="keyup" class="form-control" />
                </div>
                <br>

                <div class="form-group">
                    <label>Contact</label>
                    <input type="text" placeholder="Téléphone" name="ad_recep" id="ad_recep" required
                        data-parsley-trigger="keyup" class="form-control" />
                </div>
                <br>
                <div class="form-group">
                    <label>Date de Transfert</label>
                    <input type="date" value="{{date('Y-m-d')}}" @readonly(true)  name="date_trans" id="date_trans" required class="form-control" />
                </div>
                <br>
                <div class="form-group text-center">
                        <button id="sub_btn" onclick="fsubmit()" disabled class="btn btn-primary">VALIDER</button>
                </div>


        </div>

    </div>


</div>
<div id="bottom-sheet" tabindex="-1" class="overlay_mdl">
    <aside class="social" role="dialog" aria-labelledby="modal-label" id="show_message" aria-hidden="true">

    </aside>
<a href="#" class="btn-close_mdl" aria-hidden="true"><span class="mdi mdi-close">FERMER</span><span class="sr-only">Close</span></a>
</div>

@stop



<script>
    function auto_frais(){
        var montant=document.getElementById('mtrans').value;
        var taux={{$frais->taux}};
        document.getElementById('frais').innerHTML=(montant*taux)/100+" FCFA<input type='hidden' name='frais' value='"+(montant*taux)/100+"' >";
    }


    function check_agence1() {
 $('#loading').show();
 var agence1=document.getElementById("agence1").value;
 $.ajax({
       type:"POST",
       url:"{{ asset('check_agence') }}",
       data:{_token: '{{ csrf_token() }}',agence:agence1},
       success:function(data){
           var data = $.parseJSON(data);
           if(data.type == 'success'){
               document.getElementById("compte_id").innerHTML=data.message;
               document.getElementById("sub_btn").disabled=false;
               document.getElementById("code_agence1").value=data.code_agence;
               $('#loading').hide();
     }
     else{
         $('#loading').hide();
         alert(data.message)
         document.getElementById("sub_btn").disabled=true;

     }
   }
 }
 );
}



function fsubmit() {
    $('#loading').show();
    var code_agence1=document.getElementById("code_agence1").value;
    var compte_id=document.getElementById("compte_id").value;
    var code=document.getElementById("code").value;
    var mtrans=document.getElementById("mtrans").value;
    var nom_recep=document.getElementById("nom_recep").value;
    var ad_recep=document.getElementById("ad_recep").value;
    var frais=document.getElementById("frais").value;
    var date_trans=document.getElementById("date_trans").value;

    document.getElementById("sub_btn").disabled=true;
    $.ajax({
          type:"POST",
          url:"{{ asset('store_transfert_externe') }}",
          data:{_token: '{{ csrf_token() }}',mtrans:mtrans,compte_id:compte_id,nom_recep:nom_recep,ad_recep:ad_recep,code:code,date_trans:date_trans,frais:frais,code_agence1:code_agence1},
          success:function(data){
              var data = $.parseJSON(data);
              if(data.type == 'success'){
                $('#loading').hide();
                document.getElementById("show_message").innerHTML='<div class="text-center"><i class="fas fa-check-circle fa-6x" style="color: green"></i></div><div class="text-center"><b>'+data.message+'</b></div><table class="table"><tr><td>Montant</td><td>'+data.mtrans+' FCFA</td></tr><tr><td>Bénéficiaire</td><td>'+data.name+'</td></tr><tr><td>Numéro</td><td>'+data.phone+'</td></tr><tr><td>Date</td><td>'+data.date_trans+'</td></tr><tr><td>CODE</td><td>'+data.code+' </td></tr></table><div class="text-center"><a href="#" class="btn btn-primary" style="width: 100%">Fermer</a></div><br><div class="text-center"><button class="btn" onclick="saveDiv(\'show_message\',\'NEKACAECE\')"><i class="fas fa-download fa-3x"></i></button></div>';
                document.getElementById("sub_btn").disabled=false;
                document.getElementById("ad_recep").innerHTML="";
                document.getElementById("mtrans").value="";
                window.location.hash = "#bottom-sheet";
        }
        else{
            $('#loading').hide();
            document.getElementById("show_message").innerHTML='<div class="text-center"><i class="fas fa-exclamation-circle fa-6x" style="color: red"></i></div><div class="text-center">'+data.message+'</div><div class="text-center"><a href="#" class="btn btn-primary" style="width: 100%">Fermer</a></div>';
            document.getElementById("sub_btn").disabled=false;
                document.getElementById("ad_recep").innerHTML="";
                window.location.hash = "#bottom-sheet";



        }
      }
    }
    );
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

<script>
var doc = new jsPDF();

function saveDiv(divId, title) {
doc.fromHTML(`<html><head><title>${title}</title></head><body>` + document.getElementById(divId).innerHTML + `</body></html>`);
doc.save('NEKACAECE.pdf');
}

</script>