@extends('student.layouts.layout')
@section('content')
   <!-- @livewire('student.payment-history-list') -->
   <div class="pxp-dashboard-content-details">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h5 class="card-title">Account Balances</h5>
                    <div class="row">
                        <div class="col-md-10">
                            <button class="btn btn-primary ">
                                <p>Apply Credits</p>
                                <svg class="bi bi-cash" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" focusable="false">
                                    <path d="M11 13h2v-2h-2v2zm1-11C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z">
                                    </path>
                                </svg>
                            </button>
                        </div>
                        <div class="col-md-2">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <div class="avatar"></div>
                                    <div class="list-item-text">
                                        <div class="balance">$0.00</div>
                                        <p class="currency">USD</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-12 grid-margin stretch-card mt-3">
            <h5 class="card-title">Transaction List</h5>
            <div class="row">
                <div class="col-md-4">
                    <input wire:model="searchItem" type="text" class="form-control" placeholder="Search Students...">
                </div>
                <div class="col-md-5">
                     <form wire:submit.prevent="render">
                        <div class="row">
                            <div class="col-md-5">
                                <input type="date" class="form-control" wire:model="startDate" id="start_date">
                            </div>
                            <div class="col-md-5">
                                <input type="date" class="form-control" wire:model="endDate" id="end_date">
                            </div>
                            <div class="col-md-2 mt-1">
                                <button wire:click="resetDate" class="btn btn-primary btn-sm">Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="number" class="form-control" min="0" placeholder="Min amount" wire:model="minAmount">
                        </div>
                            <div class="col-md-6">
                                <input type="number" class="form-control" min="0" placeholder="Max amount" wire:model="maxAmount">
                            </div>
                    </div>
                </div>
                
            </div>
            
            <div class="table-responsive">
                <table class="table table table-hover align-middle dataTable no-footer dtr-inline"> 
                    <thead>
                        <tr>
                            <th> # </th>
                            <th> Transaction Ids </th>
                            <th> Payment Method </th>
                            <th> Amount </th>
                            <th> Currency </th>
                            <th> Status </th>
                            <th> Payment Date </th>
                        </tr>
                    </thead>
                    <tbody> 
                        <tr>
                            <td colspan="8" class="text-center">No Data Found</td>
                        </tr>

                            
                    </tbody>
                </table>
            </div>
                    </div>
    </div>

@endsection