@extends('layouts.admin')
@section('content')
    <style type="text/css">
        .address-details p {
            margin-bottom: 0;
            font-size: 15px;
        }
    </style>

    <div class="container-fluid">
        <div class="row">


            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-print-none">
                        <div class="row">
                            <div class="col-md-6">
                                <h5>Monthly Agent Commission Sheet   </h5>
                            </div>
                        </div>

                    </div>
                    <div class="card-body">
                        <div class="row">

                            <div class="col-md-12 d-print-none" >

                                <form method="GET" action="{{ url()->current() }}">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group ">
                                                <label for="name" class="col-form-label pt-0">Start Date</label>
                                                <input class="form-control" readonly type="text" value="{{ old('start_date') }}" name="start_date" id="start_date" placeholder="Search Date" >
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group ">
                                                <label for="name" class="col-form-label pt-0">End Date</label>
                                                <input class="form-control" readonly type="text" value="{{ old('end_date') }}" name="end_date" id="end_date" placeholder="End Date" >
                                            </div>
                                        </div>
                                        <div class="col-md-4" style="margin-top: 23px">
                                            <div class="form-group">
                                                <button class="btn btn-primary">Search</button>
                                                <a href="{{ url()->current() }}" class="btn btn-danger">Clear</a>

                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            
                            
                            
                            
                            <hr>
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table id="datatable-buttons-alllist" class="table table-striped table-bordered w-100">
                                        <thead>
                                        <tr>
                                            <th>Agent Name</th>
                                            <th>Total Amount  </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($trans as $tran)
                                            <tr>
                                                <td>{{ @$tran->agent->name }} ({{ @$tran->agent->user_id }})</td>
                                                <td>{{ number_format($tran->total_amount) }}</td>
                                            </tr>
                                            
                                            
                                            
                                              
                                                                                
                                            
                                            
                                            
                                        @endforeach
                                        </tbody>
                                      
                                        
                                        
                                        <tr>
                                            <td align='right'> <font face='arial' size='4'>  <b> Total Amount   </b> </font> </td>
                                            <td> <font face='arial' size='4'>  <b> 0.00   </b> </font> </td>
                                            
                                        </tr>    
                                                                                
                                        
                                        
                                        
                                        
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end col -->
        </div><!--end row-->

    </div> <!-- container-fluid -->

    @push('alljs')
        <script src="{{asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>

        <script type="text/javascript">
            $('#start_date').datepicker({
                format: 'dd-mm-yyyy',
                autoclose:!0,
                todayHighlight:!0
            });
            $('#end_date').datepicker({
                format: 'dd-mm-yyyy',
                autoclose:!0,
                todayHighlight:!0
            });
        </script>
    @endpush
@endsection