@extends('layoutclient')
@section('title','Transfert')
@section('content')
<link rel="stylesheet" href="css/modal.css">

<div class="container">
    <br>
    <div class="links">
        <a href="{{asset('liste_tranfert_externe')}}" class="btn btn-primary">Mes transferts</a>
    </div>

    <br>
<div class="links">
    <div style="display: flex;">
        <div>
            <a href="{{asset('transinter_compte')}}" class="btn btn-primary">TRANSFERT</a>

        </div>
        <div style="margin-left: 10px;border-bottom: 4px solid #f9b115;padding:4px"><a href="{{asset('transfert_externe')}}" class="btn btn-primary">TRANSFERT VERS NON MEMBRE</a></div>
    </div>
   </div>
    <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>Transfert à partir de</label>
                    <select name="compte_id" class="form-select" type="text" id="compte_id" required class="form-control">
                        <option value="{{Auth::user()->num_compte}}">{{Auth::user()->num_compte}} ({{Auth::user()->nom}})
                        </option>

                    </select>
                </div>
                <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()" 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 fsubmit() {
    $('#loading').show();
    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},
          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>