@extends('layouts.admin')
@section('content')
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <x-page.header>Duplicated 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"> 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;">Student_id</th>
                                                    <th style="text-align: center;">count</th>
                                                    <th style="text-align: center;">meeting</th>
                                                    <th style="text-align: center;">coffid</th>
                                                    <th style="text-align: center;">amount</th>
                                                    <th style="text-align: center;">date</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            @forelse ($duplicated_transaction_by_lesson as $key=>$transaction)
                                                <tr class="text-center">
                                                    <td>{{ ++$key }}</td>
                                                    <td>{{ $transaction->first_name . ' '. $transaction->last_name }}</td>
                                                    <td>{{ $transaction->user_id }}</td>
                                                    <td>{{ $transaction->count }}</td>
                                                    <td>{{ $transaction->mid }}</td>
                                                    <td>{{ $transaction->coffid }}</td>

                                                    <td>{{ $transaction->amount_due }}</td>

                                                    <td>
                                                        <i class="fa fa-calendar"></i>
                                                        {{ date('Y-m-d', strtotime($transaction->created_at)) . ' / '}}
                                                        <i class="fa fa-clock-o"></i>
                                                        {{date('h:i A', strtotime($transaction->created_at))}}
                                                    </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>
                            </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