@extends('layouts.student')
@section('content')
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <x-page.header>@lang('student.transactions.recharge transactions')</x-page.header>
             <!-- Search Section -->
             <form action="{{ route('student.recharge-transactions.search') }}" method="get">
                <div class="mb-5">
                    <div class="">
                        <div class="p-5 bg-white">
                            <div class="mt-3 item2-gl-nav">
                                <div class="d-block ">
                                    <h5 class="mb-2 mt-0">@lang('student.filter by')</h5>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="mt-3 mb-sm-1"> from: </label>
                                            <div>
                                            <input type="date" class="form-control" name="start_date" id="from" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="mt-3 mb-sm-1"> to: </label>
                                            <div>
                                            <input type="date" class="form-control" name="end_date" id="to" required>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="mt-4">
                                    <input type="submit" id="submit" class="btn btn-primary br-te-7 br-be-7 d-block mx-auto"
                                        value="Apply Filter">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!--End Search Section -->
            @if (request()->start_date ||request()->end_date )
            <div class="row">
                <div class="col-md-12 col-lg-12">
                    <div class="tab-content details-tab-content">
                        <div class="tab-pane fade show active " id="tab-1">
                            {{-- Eshra7ly Transactions --}}
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title"> @lang('student.transactions.recharge transactions list')</h3>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive" id="transactions">
                                        <table
                                            class="table table-striped table-bordered table-vcenter text-nowrap" id="transactions_table">
                                            <thead>
                                                <tr>
                                                    <th style="text-align: center;">@lang('student.table.id')</th>
                                                    <th style="text-align: center;">@lang('student.table.date')</th>
                                                    <th style="text-align: center;">@lang('student.table.amount')</th>
                                                    <th style="text-align: center;">@lang('student.table.balance')</th>
                                                    <th style="text-align: center;">currency</th>
                                                    <th style="text-align: center;">@lang('student.table.desc')</th>
                                                    <th style="text-align: center;">@lang('student.table.status')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($eshra7ly_transactions as $key=>$transaction)
                                                <tr class="text-center">
                                                    <td>{{ ++$key }}</td>
                                                    <td>{{ $transaction->created_at }}</td>
                                                    <td>{{ $transaction->currency == 2 ? $transaction->amount : $transaction->amount_aed}}</td>
                                                    <td>{{ $transaction->currency == 2 ? $transaction->balance :  $transaction->balance_aed }}</td>
                                                    <td>
                                                        <span class="badge badge-{{ $transaction->currency == 2 ? 'danger' : 'primary' }}">
                                                            {{ $transaction->currency == 2 ? 'EGP' : 'AED' }}
                                                        </span>
                                                    </td>
                                                    <td style="text-align: center;">
                                                        <i class="mdi mdi-information-outline leading-loose" data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                                        data-bs-original-title="{{ $transaction->reason }}"></i>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-danger">
                                                            {{ $transaction->status }}
                                                        </span>
                                                    </td>

                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
@endsection
@section('student-js')
{{-- draw all data tables --}}
<script>
$(document).ready(function(){
	$('#transactions_table').dataTable( {
		"drawCallback": function( settings ) {
		}
	})
})
</script>
@endsection