@extends('agent.layouts.layout')
@section('content')
    <div class="pxp-dashboard-content-details">
        <div class="row">
            <div class="col-md-6">
                <h1>Transaction List</h1>
                <p class="pxp-text-light">Detailed list of your Transaction List.</p>
            </div>
            <div class="col-md-6" style="text-align: right;">
               <a href="{{route('agent.program.export')}}" class="btn btn-block btn-success">Export</a>
            </div>
            

        </div>

        <div class="mt-lg-5 mb-4">
            <div class="row">
                <div class="col-md-3">
                    <div class="pxp-candidate-dashboard-jobs-search-search-form">
                        <div class="input-group">
                            <span class="input-group-text"><span class="fa fa-search"></span></span>
                            <input type="text" class="form-control" placeholder="Search Program title...">
                        </div>
                    </div>                    
                </div>
                <div class="col-md-3">
                     <input type="date" class="form-control flatpickr-input" wire:model="startDate" id="start_date" style="">              
                </div>
                <div class="col-md-3">
                     <input type="date" class="form-control flatpickr-input" wire:model="startDate" id="start_date" style="">              
                </div>
                
            </div>
            <div class="table-responsive mt-4">
                <table id="example2" class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Program Title</th>
                            <th>Currency</th>
                            <th>Program Fees</th>
                            <th>Commission</th>
                            <th>Amount</th>
                            <th>Payment Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody> 
                        @forelse ($transactions ?? [] as $transaction)
                            <tr>
                                <td class="py-1">
                                    {{ $loop->iteration }}
                                </td>
                               
                                <td> 
                                {{ $transaction->Program->program_title_limit }}</td>
                                <td> {{ get_currency($transaction->country_id) }}</td>
                                <td> {{ $transaction->program_fees }}</td>
                                <td> {{ $transaction->commission . '%' ?? '' }}</td>
                                <td> {{ $transaction->amount }} </td>
                                <td> {{ ($transaction->payment_date != NULL) ? date('M d, Y', strtotime($transaction->payment_date)) : "-" }}</td>
                                <td>-</td>
                            </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('pagescriptcode')
<script type="text/javascript">
    $(function () {
                 $("#example2").DataTable({
                   "responsive": true, 
                   "lengthChange": false,
                    "autoWidth": false,
                    "aaSorting":[[0, 'asc']],
                 });
             });
</script>
@endsection