@extends('layouts.default')
@section('content')
<div class="container-fluid">
    <div class="nk-content-inner">
        <div class="nk-content-body">
            <div class="nk-block-head">
                <div class="nk-block-between g-3">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title page-title">STATEMENT DES APPORTEURS D’AFFAIRES</h3>
                        <div class="nk-block-des text-soft">
                            <p>Vous avez au tolal {{count($stataments)}} statements.</p>
                        </div>
                    </div><!-- .nk-block-head-content -->
                    
                </div><!-- .nk-block-between -->
            </div><!-- .nk-block-head -->
            <div class="nk-block">
                <div class="card card-bordered card-stretch">
                    <div class="card-inner-group">
                        <div class="card-inner">
                            <table class="datatable-init-order1-export nowrap table" data-export-title="Export" data-auto-responsive="true">
                                <thead>
                                    <tr class="nk-tb-item nk-tb-head">
                                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Numèro</span></th>
                                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Année</span></th>
                                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Période</span></th>
                                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Nom</span></th>
                                        <th class="nk-tb-col tb-col-md"><span class="sub-text">Montant</span></th>
                                        <th class="nk-tb-col tb-col-md">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach ($stataments as $statament)
                                    <tr class="nk-tb-item">
                                        <td class="nk-tb-col tb-col-md">
                                            <a href="{{ route('detailStatement', ['id' => $statament->id, 'profil' => $statament->typeAdAp]) }}">#{{$statament->numero}}</a>
                                        </td>
                                        <td><span>{{substr($statament->date,0,4)}}</span></td>
                                        <td class="nk-tb-col tb-col-md">
                                            <span>
                                            @if($statament->trimestre == 1)
                                                Trim 1 : Janv - Mars
                                            @elseif($statament->trimestre == 2)
                                                Trim 2 : Avr - Juin
                                            @elseif($statament->trimestre == 3)
                                                Trim 3 : Juil - Sept
                                            @elseif($statament->trimestre == 4)
                                                Trim 4 : Oct - Déc
                                            @endif    
                                            </span>
                                        </td>
                                        
                                        
                                        <td class="nk-tb-col tb-col-md">
                                            <span>{{$statament->nameAdAp}}</span>
                                        </td>
                                        
                                        <td class="nk-tb-col tb-col-md">
                                            <span>€{{ number_format($statament->total, 2) }}</span>
                                        </td>
                                        <!--<td class="nk-tb-col tb-col-md">
                                            <span>€{{ number_format($statament->du, 2) }}</span>
                                        </td>
                                        <td class="nk-tb-col tb-col-md">
                                            <span>€{{$statament->paye}}</span>
                                        </td>
                                        <td class="nk-tb-col tb-col-md">
                                            <span class="tb-odr-status">
                                                @if($statament->statut == 'A payer')
                                                <span class="badge badge-dot badge-danger">A payer</span>
                                                @elseif($statament->statut == 'Payé')
                                                <span class="badge badge-dot badge-success">Payé</span>
                                                @else
                                                <span class="badge badge-dot badge-warning">Partiellement payé</span>
                                                @endif
                                            </span>
                                        </td>-->
                                       
                                       
                                        <td class="nk-tb-col tb-col-md">
                                            <div class="tb-odr-btns d-none d-sm-inline">
                                                <a href="{{ route('printStatement', ['id' => $statament->id, 'profil' => $statament->typeAdAp]) }}" target="_blank" class="btn btn-outline-info btn-icon btn-white btn-dim btn-sm">
                                                    <em class="icon ni ni-printer-fill"></em></a>

                                                    <a class="btn btn-icon btn-lg btn-white btn-dim btn-sm btn-outline-primary" href="#"><em class="icon ni ni-mail-fill"></em></a>
                                                <a href="{{ route('detailStatement', ['id' => $statament->id, 'profil' => $statament->typeAdAp]) }}" class="btn btn-dim btn-sm btn-primary">Voir</a>
                                                <!--<a class="btn btn-dim btn-sm btn-success changeStatut" id_statement="{{$statament->id}}" montant_statement="{{ number_format($statament->du, 2) }}">Payé</a>-->

                                            </div>
                                          
                                        </td>
                                    </tr><!-- .nk-tb-item  -->

                                    @endforeach 
                                    
                                    
                                </tbody>
                            </table>
                        </div><!-- .card-inner -->


                        <div class="modal fade" id="modalForm">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Paiement statement</h5>
                                        <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                                            <em class="icon ni ni-cross"></em>
                                        </a>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-validate is-alter" id="SubmitForm">
                                            <div class="form-group">
                                            <div class="succes-alert" style="display:none; margin-bottom:20px">
                                                <div class="alert alert-fill alert-success alert-icon">
                                                    <em class="icon ni ni-check-circle"></em> 
                                                    <strong>Succès</strong>. 
                                                    <span id="successMsg"></span>
                                                </div>
                                            </div>
                                            <div class="error-alert" style="display:none; margin-bottom:20px">
                                                <div class="alert alert-fill alert-danger alert-icon">
                                                    <em class="icon ni ni-cross-circle"></em> 
                                                    <strong>Erreur</strong>. 
                                                    <span id="errorMsg"></span>
                                                </div>
                                            </div>
                                                <p>Insérez le montant payé, le montant doit être inférieur ou égale à <span class="montant_statement"></span></p>
                                                <label class="form-label" for="pay-amount">Montant payé</label>
                                                <div class="form-control-wrap">
                                                    <input type="hidden" id="token" name="_token" value="{{ csrf_token() }}">
                                                    <input type="hidden" class="form-control" id="id_statement">
                                                    <input type="hidden" class="form-control" id="montant_statement">
                                                    <input type="number" class="form-control" id="pay-amount" min="0" max="100">
                                                    <div class="errorAmount" style="color:red"></div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <button type="submit" class="btn btn-lg btn-primary">Enregistrer</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                      

                    </div><!-- .card-inner-group -->
                </div><!-- .card -->
            </div><!-- .nk-block -->
        </div>
    </div>
</div>
@stop
@section('addedJs')

<script type="text/javascript">
    $(".changeStatut").click(function(){
        var id_statement = $(this).attr( "id_statement" );
        var montant_statement = $(this).attr( "montant_statement" );
        $('.montant_statement').html('€'+montant_statement);
        $('#montant_statement').val(montant_statement);
        $('#id_statement').val(id_statement);

        document.getElementById("pay-amount").setAttribute("max",montant_statement); // set a new value;

        $( "#modalForm" ).modal('show');
    });

    $('#SubmitForm').on('submit',function(e){
        e.preventDefault();

        let montant_statement = $('#montant_statement').val();
        let id_statement = $('#id_statement').val();
        let pay_amount = $('#pay-amount').val();
        let _token = $('#token').val();
        
        $.ajax({
        url: "/statements/changeAmountStatementAp",
        type:"POST",
        data:{
            montant_statement:montant_statement,
            id_statement:id_statement,
            pay_amount:pay_amount,
            _token: _token,
        },
        success:function(response){
            $('#successMsg').text(response.message);
            $(".succes-alert").css("display", "block");
            setTimeout(function(){
                $('#modalForm').modal('hide');
                window.location.replace("{{ route('indexAplineFacture') }}"); 
            }, 3000);
            
            
        },
        error: function(response) {
            $('#errorMsg').text(response.message);
            $(".error-alert").css("display", "block");
        },
        });
    });
</script>
@stop