@extends('layouts.appadmin')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.5.1/css/dataTables.dateTime.min.css">
@section('content')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">fiche client : {{$client->nom}} </h1>

          
       
          <span>total creances : </span>
          <span class="badge badge-pill badge-warning" style="font-size:20px;"> {{$client->monton}}Dh</span>
            <form method="get" action="{{asset('date_client/'.$client->id)}}">
  <div class="form-row">
    <div class="col">
      <input type="date" name="debut" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="date" name="fin" class="form-control" placeholder="State">
    </div>
    <div class="col">
    <button type="submit" class="btn btn-primary">Filter</button>
    </div>
  </div>
</form>
            @if(session()->has('success1'))
    <div class="alert alert-success">
        {{ session()->get('success1') }}
    </div>
@endif
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Starter Page</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">
   


 
        <div class="row">
          <div class="col-12 col-sm-12">
            <div class="card card-info card-tabs">
              <div class="card-header p-0 pt-1">
                <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">facture</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-one-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">reglement effectué</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-one-messages-tab" data-toggle="pill" href="#custom-tabs-one-messages" role="tab" aria-controls="custom-tabs-one-messages" aria-selected="false">pofile du client</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-one-settings-tab" data-toggle="pill" href="#custom-tabs-one-settings" role="tab" aria-controls="custom-tabs-one-settings" aria-selected="false">reglement en cumule</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-one-regle-tab" data-toggle="pill" href="#custom-tabs-one-regle" role="tab" aria-controls="custom-tabs-one-regle" aria-selected="false">reglement multiselecte</a>
                  </li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content" id="custom-tabs-one-tabContent">
                  <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">

            <!-- /.card-header -->
            <div class="card-body">
              <table border="0" cellspacing="5" cellpadding="5" >
        <tbody><tr>
            <td>Minimum date:</td>
            <td><input type="text" id="min" name="min"></td>
        </tr>
        <tr>
            <td>Maximum date:</td>
            <td><input type="text" id="max" name="max"></td>
        </tr>
    </tbody></table>

                  <div class="card-body">
                  <div class="table-responsive">
              <table id="example1" class="table table-bordered table-striped text-center">
                <p id="tot"></p>
                <thead>
                <tr>
           
                  <th>Ref facture</th>
                  <th>client</th>
                  <th>date</th>
                  <th>Mode réglement</th>
                  <th>total</th>
                  <th>avance</th>
                  <th>rest TTC</th>
                  <th>Etat</th>
                
                  <th width="100">action</th>
             
                </tr>
                </thead>
                <tbody>
                    @foreach($ventes as $vente)
                    <tr>
                 
                      <td>{{$vente->id}} </td>

             <td class="text-primary font-weight-bold"> <a href="">{{$vente->client->nom}}</a>   </td> 
             <td>{{date('d-m-Y', strtotime($vente->created_at))}}  </td> 
                <td> {{$vente->modepayement->mode}} </td> 
              <td class=" active text-success font-weight-bold"> {{$vente->prixtotal}} DH</td> 
              <td class="text-primary font-weight-bold"> {{$vente->avance}} DH</td> 
              <td class="text-danger font-weight-bold"> {{$vente->rest}} DH</td> 
             <td> {{$vente->encour->etat}} </td> 
             
             <td>     
              
             @if($vente->rest > 0)
             <a  data-toggle="modal" data-target="#exampleModal{{$vente->id}}" class="btn btn-info btn-sm" href="#">
                              <i class="fas fa-pencil-alt">
                              </i>
                              regler credit
                          </a>
               @endif         
            <!-- Modal -->
<div class="modal fade" id="exampleModal{{$vente->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-success font-weight-bold" id="exampleModalLabel ">changer etat facture :{{$vente->id}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        cette factur doit etre régiée avant le {{$vente->dateecheance}} (11)
      {{$vente->id}}
      <h2>Mntant de Facture: {{$vente->prixtotal}} DH</h2>  
    <h2>Avance: {{$vente->avance}} DH</h2>  
    <h2>rest: {{$vente->rest}} DH</h2>  
    <form method="POST" action="{{asset('modiffacture/'.$vente->id)}}" enctype="multipart/form-data">   
    @csrf     
  <div class="form-group">
    <label for="exampleInputEmail1">Nouveau vercement</label>
    <input name="monton" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter">
    </div>  


        <button type="submit" class="btn btn-primary">Save changes</button>
</form>
      </div>
      <div class="modal-footer">

    
      </div>
    </div>
  </div>
</div>            
                        
                        
                        
                        
                        </td>
            
      
            </tr>
             @endforeach
          </tbody>
          <tfoot>
            <tr>
            <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th width="100"></th>
             
            </tr>
        </tfoot>
        </table>

</div>

                </div>













                  </div> </div>
                  <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                  
                  <div class="card-body">
                  <div class="table-responsive">
                  <table id="example2" class="table table-bordered table-striped text-center">
                <thead>
                <tr>
                  <th>Ref reglement</th>
                  <th>client</th>
                  <th>date</th>
                  <th>facture</th>
                  <th>total facture</th>
                  <th>montant de reglement</th>
               
                  <th>rest</th>
                  <th>actiion</th>
             
                </tr>
                </thead>
                <tbody>
                    @foreach($reglements as $regle)
                    <tr>
                      <td>{{$regle->id}} </td>

             <td class="text-primary font-weight-bold"> <a href="">{{$regle->client->nom}}</a>   </td> 
             <td>{{date('d-m-Y', strtotime($regle->created_at))}}  </td> 
                <td> {{$regle->vente_id}} </td> 
          
            
             <td> {{$regle->vente->prixtotal}} </td> 
             <td> {{$regle->montant}} </td> 
           
             <td> {{$regle->rest}} </td> 
            
             <td>
              <!-- Button trigger modal -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal{{$regle->id}}">
<i class="fas fa-edit"></i> modifier reglement
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal{{$regle->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form action="{{asset('modiif_reglement/'.$regle->id)}}" method="POST">
             @csrf 
             <input value="{{$regle->montant}}" type="text" name="monton">
             <br>
                  <button  type="submit" class="btn btn-primary">modifier</button>
                </form>
      </div>

    </div>
  </div>
</div>
                 </td> 
    
            </tr>
             @endforeach
          </tbody>
          <tfoot>
            <tr>
            <th></th>
                  <th></th>
                 
                 <th></th>
                  <th>total</th>
                     <th></th> 
              
                    <th></th>
            
             
            </tr>
        </tfoot>
        </table>


</div>
                </div>



















                  </div>
                  <div class="tab-pane fade" id="custom-tabs-one-messages" role="tabpanel" aria-labelledby="custom-tabs-one-messages-tab">
                  <div class="table-responsive">
                   <table class="table  font-weight-bold" >

  <tbody style="font-size: 17px;">
  <tr class="table-info">
    
      <td>nom</td>
      <td>{{$client->nom}} </td>
    
    </tr>
    <tr class="table-info">
    
      <td>solde</td>
      <td>{{$client->monton}} </td>
 
    </tr>
    <tr class="table-info">
     
      <td>statut</td>
      <td>  8</td>
    
    </tr>
 
  <tr class="table-info">
   
    <td>ville</td>
    <td> {{$client->ville->ville}} </td>
  
  </tr>
  <tr class="table-info">
    
    <td>date d enregistremnt</td>
    <td> {{$client->created_at}}</td>

  </tr>
  <tr class="table-info">
   
    <td>telephone</td>
    <td>    {{$client->tele}} </td> 
</tr>

  </tbody>

</table>

           
       
     
   

 
  </tbody>
</table></div>
                  </div>
                  <div class="tab-pane fade" id="custom-tabs-one-settings" role="tabpanel" aria-labelledby="custom-tabs-one-settings-tab">
                  <h3> entrer le montant de reglement  les factures vont etres liquder autmatiquement selan le montant saisie :
                 </h3>    <br>


                    <form method="POST" action="{{asset('liquidation/'.$client->id)}}" enctype="multipart/form-data"> 
@csrf     
  <div class="form-group">
    <label for="exampleInputEmail1"></label>


    <input name="monton" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter">
    </div>  
    <button class="btn btn-info" type="submit">liquider</button>
</form>



                  </div>
                  <div class="tab-pane fade" id="custom-tabs-one-regle" role="tabpanel" aria-labelledby="custom-tabs-one-regle-tab">
                  <h3> coché les factures que vous voullez lquider et click sur liquider:
                 </h3>               
                
                  <div class="card-body">
                  <form method="POST" action="{{asset('reglevente')}}" enctype="multipart/form-data">

@csrf  
            <!-- /.card-header -->
            <button  class=" btn btn-info float-right mb-2" type="submit">liquider</button>
            <div class="table-responsive">
              <table id="example3" class="table table-bordered table-striped text-center">
                <thead>
                <tr>
                <td> <input type="checkbox" name="select_all" id="selectall"> </td>
                  <th>Ref facture</th>
                  <th>client</th>
                  <th>date</th>
                  <th>Mode réglement</th>
                  <th>Total TTC</th>
                  <th>avance</th>
                  <th>rest TTC</th>
                  <th>Etat</th>
            
         
             
                </tr>
                </thead>
                <tbody>
                    @foreach($ventes_liquidation as $vente)
                    <tr>
                    <td> <input type="checkbox" name="ids[{{$vente->id}}]" value="{{$vente->id}}"> </td> 
                      <td>{{$vente->id}} </td>

             <td class="text-primary font-weight-bold"> <a href="">{{$vente->client->nom}}</a>   </td> 
             <td>{{date('d-m-Y', strtotime($vente->created_at))}}  </td> 
                <td> {{$vente->modepayement->mode}} </td> 
              <td class="text-success font-weight-bold"> {{$vente->prixtotal}} DH</td> 
              <td class="text-primary font-weight-bold"> {{$vente->avance}} DH</td> 
              <td class="text-danger font-weight-bold"> {{$vente->rest}} DH</td> 
             <td> {{$vente->encour->etat}} </td> 
       
                      
                        
                        
                        
                      
            
   
            </tr>
             @endforeach
          </tbody>
          <tfoot>
            <tr>
            <th></th>
                  <th></th>
                  <th></th>
                   <th></th> 
                  <th></th>
                   <th></th>
              
                   <th></th>
                   <th></th> 
                  <th></th>
                   <th></th>
            
             
            </tr>
        </tfoot>
        </table>
    </div>
    </div>
    </form>

            
                </div>






                </div>
              </div>
              <!-- /.card -->


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

                </section>
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  
        @endsection


        
        <script src="{{asset('dash/plugins/jquery/jquery.min.js')}}"></script>
        <script src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>

<script src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>






<script>
/*$(document).ready( function () {
    $('#example1').DataTable();
    $('#example2').DataTable();
 
} );*/
$(document).ready(function() {
   $('#example1').DataTable( {

    "footerCallback": function( tfoot, data, start, end, display ) {
    var api = this.api();
    $( api.column( 5 ).footer() ).html(
        api.column( 5 ).data().reduce( function ( a, b ) {
          $('#tot').html(parseInt(a) + parseInt(b));
            return parseInt(a) + parseInt(b);
        }, 0 )
    );
    var api2 = this.api();
    $( api2.column( 4 ).footer() ).html(
        api2.column( 4 ).data().reduce( function ( a, b ) {
          $('#tot').html(parseInt(a) + parseInt(b));
            return parseInt(a) + parseInt(b);
        }, 0 )
    );
    var api3 = this.api();
    $( api3.column( 6).footer() ).html(
        api3.column( 6 ).data().reduce( function ( a, b ) {
          $('#tot').html(parseInt(a) + parseInt(b));
            return parseInt(a) + parseInt(b);
        }, 0 )
    );
  } ,






 
      dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        dom: 'Bfrtip',     
    buttons: [      
           
         {
            extend: 'excelHtml5',
            title: 'Report',
       
         },
        {
            extend: 'pdfHtml5',
            footer: true ,
            title: 'facture du client : {{$client->nom}} ',
            exportOptions: {
                    columns: [ 0, 1, 2,3,4,5,6,7 ]
                }
        },
        {
          extend:'print'  ,
            footer: true ,
            title: 'facture du client : {{$client->nom}} ',
            exportOptions: {
                    columns: [  0, 1, 2,3,4,5,6,7 ]
                }         
        }
 
    ]   

    
    } );
    let minDate, maxDate;
 
 // Custom filtering function which will search data in column four between two values
 DataTable.ext.search.push(function (settings, data, dataIndex) {
     let min = minDate.val();
     let max = maxDate.val();
     let date = new Date(data[4]);
  
     if (
         (min === null && max === null) ||
         (min === null && date <= max) ||
         (min <= date && max === null) ||
         (min <= date && date <= max)
     ) {
         return true;
     }
     return false;
 });
  
 // Create date inputs
 minDate = new DateTime('#min', {
     format: 'MMMM Do YYYY'
 });
 maxDate = new DateTime('#max', {
     format: 'MMMM Do YYYY'
 });
  
 // DataTables initialisation
 let table = new DataTable('#example');
  
 // Refilter the table
 document.querySelectorAll('#min, #max').forEach((el) => {
     el.addEventListener('change', () => table.draw());
 });




    $('#example1').DataTable( {

"footerCallback": function( tfoot, data, start, end, display ) {
var api = this.api();
$( api.column( 4 ).footer() ).html(
    api.column( 4 ).data().reduce( function ( a, b ) {
      $('#tot').html(parseInt(a) + parseInt(b));
        return parseInt(a) + parseInt(b);
    }, 0 )
);
var api2 = this.api();
    $( api2.column(5 ).footer() ).html(
        api2.column( 5 ).data().reduce( function ( a, b ) {
          $('#tot').html(parseInt(a) + parseInt(b));
            return parseInt(a) + parseInt(b);
        }, 0 )
    );

} ,







  dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    dom: 'Bfrtip',     
buttons: [      
       
     {
        extend: 'excelHtml5',
        title: 'Report',
   
     },
    {
        extend: 'pdfHtml5',
        footer: true ,
        title: 'facture du client : {{$client->nom}} ',
        exportOptions: {
                columns: [ 0, 1, 2,3,4,5,6,7 ]
            }
    },
    {
        extend:'print'             
    }

]   


} );
    $('#example3').DataTable( {

"footerCallback": function( tfoot, data, start, end, display ) {
var api = this.api();
$( api.column( 5 ).footer() ).html(
    api.column( 5 ).data().reduce( function ( a, b ) {
      $('#tot').html(parseInt(a) + parseInt(b));
        return parseInt(a) + parseInt(b);
    }, 0 )
);
var api2 = this.api();
$( api2.column( 6 ).footer() ).html(
    api2.column(6 ).data().reduce( function ( a, b ) {
      $('#tot').html(parseInt(a) + parseInt(b));
        return parseInt(a) + parseInt(b);
    }, 0 )
);
var api3 = this.api();
$( api3.column(7 ).footer() ).html(
    api3.column( 5 ).data().reduce( function ( a, b ) {
      $('#tot').html(parseInt(a) + parseInt(b));
        return parseInt(a) + parseInt(b);
    }, 0 )
);
} ,







  dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    dom: 'Bfrtip',     
buttons: [      
       
     {
        extend: 'excelHtml5',
        title: 'Report',
   
     },
    {
        extend: 'pdfHtml5',
        footer: true ,
        title: 'fiche reglement  du client : {{$client->nom}} ',
        exportOptions: {
                columns: [ 0, 1, 2,3,4,5,6,7 ]
            }
    },
    {
        extend:'print'             
    }

]   


} );
} );
</script>






</body>
</html>