@extends('wallet.layouts.master')
@section('title','Deposit History')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('materio/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
@endsection
@section('content')
    <div class="heading d-flex justify-content-between align-items-center gap-3 mt-5 px-1">
            <h2 class='fw-bold fs-2'>Deposit History</h2>
        </div>
        <div class="bg-line-dark rounded-4 shadow p-3 mt-32">

                @if(!$transactions->isEmpty())
                    <div class="table-responsive">
                        <table class="display table table-bordered" id="deafult_ordering_table"
                               style="width:100%">
                            <thead>
                            <tr>
                                @if(Auth::user()->hasRole('Company'))
                                    <th scope="col">Client</th>
                                @endif
                                <th scope="col">Transaction id</th>
                                <th scope="col">Type</th>
                                <th scope="col">Amount</th>
                                <th scope="col">USD Amount</th>
                                <th scope="col">Coin</th>
                                <th scope="col">Wallet id</th>
                                <th scope="col">Wallet name</th>
                                <th scope="col">Address</th>
                                <th scope="col">Address label</th>
                                <th scope="col">Confirmations</th>
                                <th scope="col">Payment date</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($transactions as $trans)
                                <tr>
                                    @if(Auth::user()->hasRole('Company'))
                                        <td>
                                            <a class="text-black text-decoration-underline"
                                               href="{{route('user_details',['id' => $trans->user_id])}}">{{$trans->user->fname ?? ''}}</a>
                                        </td>
                                    @endif
                                    <td class="text-white fw-bold" onclick="view_trx_id(`{{$trans->payment_id}}`)">
                                        @if($trans->payment_id)
                                            View
                                        @endif
                                    </td>
                                    <td>
                                        @if($trans->type == 'Deposit')
                                            <span class="bg-success p-1 rounded-3">Deposit</span>
                                        @else
                                            <span class="bg-danger p-1 rounded-3">Withdrawal</span>
                                        @endif
                                    </td>
                                    <td>

                                        <span>{{$trans->type == 'Deposit' ? '+' : '-'}} </span> {{$trans->amount}}

                                    </td>
                                    <td>{{$trans->usd_amount}}</td>
                                    <td>{{$trans->coin_short_name}}</td>
                                    <td>{{$trans->wallet_id}}</td>
                                    <td>{{$trans->wallet_name}}</td>
                                    <td class="text-white fw-bold" onclick="view_address(`{{$trans->address}}`)">View</td>
                                    <td>{{$trans->address_label}}</td>
                                    <td>{{$trans->confirmations}}</td>
                                    <td>{{$trans->date}}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class='no-found text-center opacity-50 pt-32 pb-32'>
                        <img class='w-250 object-fit-contain' src="{{asset('wallet_d/assets/images/you_lost.png')}}"
                             alt="you lost">
                        <h4 class='fw-bold'>Oops! Nothing is here.</h4>
                        <p class='fw-500'>We couldn't find any transactions.</p>
                    </div>
                @endif

        </div>
        <!------Modals------>
        <div class="modal fade" id="show_message_model" tabindex="-1" aria-labelledby="show_message_modelLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content p-8">
                    <div class="modal-header border-0 pb-2">
                        <h6 class="modal-title fw-bold" id="show_message_modelLabel">Notes</h6>
                        <button type="button" class="btn-close invert" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body pt-0">
                        <div class="py-3">
                            <p id="show_message"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection
@section('script')
    <script src="{{ asset('dashboard_d/assets/js/vendor/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            // $("#deposit_history-page").addClass('active')
            // ordering or sorting
            $('#deafult_ordering_table').DataTable({
                // "order": [
                //     [1, "ASC"]
                // ]
            });
        });

        function showMessage(message) {
            $("#show_message").text(message);
            $("#show_message_model").modal('show');
        };
        $(document).ready(function () {
            $('.basic-single').select2();
        });
    </script>

@endsection