@extends('layouts.admin')
@section('content')
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <x-page.header>Duplicated Recharge Transactions</x-page.header>
            <div class="row">
                <div class="col-md-12 col-lg-12">
                    <div class="tab-content details-tab-content">
                        {{-- Tab-1 --}}
                        <div class="tab-pane fade show active" id="tab-1">
                            {{-- Eshra7ly Transactions --}}
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title"> Recharge Transactions List</h3>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive" id="transactions">
                                        <table
                                            class="data-table table card-table table-striped table-bordered border-top table-vcenter text-nowrap" id="transactions_table">
                                            <thead>
                                                <tr>
                                                    <th style="text-align: center;">id</th>
                                                    <th style="text-align: center;">Student</th>
                                                    <th style="text-align: center;">date</th>
                                                    <th style="text-align: center;">Added By</th>
                                                    <th style="text-align: center;">amount</th>
                                                    <th style="text-align: center;">balance</th>
                                                    <th style="text-align: center;">description</th>
                                                    <th style="text-align: center;">payment method</th>
                                                    <th style="text-align: center;">transaction id</th>
                                                    <th style="text-align: center;">reference</th>
                                                    <th style="text-align: center;">status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                $count=0
                                                @endphp
                                            @forelse ($transactions as $transaction)
                                                <tr class="text-center">
                                                    <td>{{ ++$count }}</td>
                                                    <td>{{ $transaction->user->first_name . ' '. $transaction->user->last_name }}</td>
                                                    <td>
                                                        <i class="fa fa-calendar"></i>
                                                        {{ $transaction->created_at->format('d-m-Y') . ' / '}}
                                                        <i class="fa fa-clock-o"></i>
                                                        {{date('h:i A', strtotime($transaction->created_at))}}
                                                    </td>
                                                   @if ($transaction->added_by)
                                                    <td>{{ $transaction->addedBy->first_name . ' '. $transaction->addedBy->last_name}}</td>
                                                   @else
                                                   <td>Student him self</td>
                                                   @endif

                                                    <td>{{ $transaction->amount }}</td>
                                                    <td>{{ $transaction->balance }}</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>{{ $transaction->payment_method }}</td>
                                                    <td>{{$transaction->transactionId}}</td>
                                                    <td>{{$transaction->reference}}</td>
                                                    <td>
                                                        <span class="badge badge-danger">
                                                            {{ $transaction->status }}
                                                        </span>
                                                    </td>

                                                </tr>
                                                @empty
                                                <tr>
                                                    <td colspan="11">
                                                        <img src="{{env('SECURE_ASSETS').'/images/media/empty_table.svg'}}" class="mx-auto d-block" width="100" alt="empty table">
                                                        <p class="text-primary font-weight-bold text-center mt-3">There is no data!</p>
                                                    </td>
                                                </tr>
                                            @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                    {{-- <div class="mt-4">
                                        {{ $eshra7ly_transactions->links('inc.paginate') }}
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- @endif --}}
        </div>
    </div>
@endsection

@section('admin-js')
{{-- draw all data tables --}}
<script>
$(document).ready(function(){
	$('#transactions_table').dataTable( {
		"drawCallback": function( settings ) {
		}
	})
})
</script>
@endsection