@extends('layout.emapp')
@section('content')
    <style>
        .text-capitalize-m {
            padding-top: 4em;
        }

        @media(max-width: 712px) {
            .elementsContainerr {
                font-size: 12px;
            }

            .text-capitalize-m {
                padding-top: 0em;
            }

        }


        @media(max-width:575px) {
            .blnc {
                font-size: 11px;
                padding-top: 2em;

            }

            .buybtn {
                font-size: 12px;


            }

            .buybtn1 {

                text-align: center;
                padding-top: 2px important;
            }

            .cardimg {
                height: 100px;
                width: auto;
            }

            .blnc {
                text-align: center;
            }

        }


        @media(min-width:575.98px) {

            .cardimg {
                height: 150px;
                width: auto;
            }

            .blnc {
                text-align: center;
                padding-top: 4.5rem !important;
            }

            .buybtn1 {

                text-align: center;

            }
        }

        .pagination>li.active>a,
        .pagination>li.active>span {
            color: white !important;
        }
    </style>
    <section class="home">
        <div class="container pt-4">
            <div class="row">

                <div class="col-2"></div>
                <div class="col-8">
                    @if (Session::has('status'))
                        <div class="alert alert-success">
                            <ul>
                                <li>{{ Session::get('status') }}</li>
                            </ul>
                        </div>
                    @endif
                    @if (Session::has('error'))
                        <div class="alert alert-danger">
                            <ul>
                                <li>{{ Session::get('error') }}</li>
                            </ul>
                        </div>
                    @endif
                </div>
                <div class="col-2"></div>
            </div>
            <div class="row">

                <div class="col-12 pt-4">
                    <h3 style="font-weight:bold" class="pb-3">{{ __('My Wallet') }}</h3>

                </div>
            </div>

            <div class="row">
                <div class="col-md-5 col-12 text-center" style="padding-top:2em;">
                    <img class="img-responsive cardimg" src="{{ asset('employer-con/images/card-1.png') }}" height="100"
                        width="auto" alt="">
                </div>
                <div class="col-md-5 col-12 blnc" style="">
                    <h4>{{ __('Balance') }} &nbsp : &nbsp KWD @if ($wallet)
                                                        {{ $int }}.<span style="color: grey; font-size: 20px;">{{ $dec }}</span>
                        @else
                            00
                        @endif
                    </h4>
                    <div class="buybtn1" style="padding-top:2em;">
                        <a href="buy-em"> <button class="buybtn btn btn-primaryy text-uppercase shadow"
                                style="border-radius: 10px;">{{ __('buy credit') }}</button></a>

                    </div>


                </div>
                <div class="col-md-2"></div>
            </div>

            <!--    </div>-->
            <!--<div class="container">-->
            <div class="row pt-4">
                <div class="col-md-12 text-capitalize-m">
                    <h4 class="text-capitalize">{{ __('Transaction history') }}</h4>
                </div>
            </div>
            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="elementsContainerr  shadow">
                        <div class="table-responsive ">
                            <table class="table table-borderless " id="dataTable">

                                <thead>
                                    <!--<tr class="" style="border-bottom: 1px solid #CCCCCC;">-->
                                    <tr>
                                        <th>{{ __('Transaction id') }}</th>
                                        <th>{{ __('Name') }}</th>
                                        <th>{{ __('Payment Method') }}</th>
                                        <th>{{ __('Date') }}</th>
                                        <th>{{ __('Status') }}</th>
                                        <th class="text-center">{{ __('Download') }}</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($transaction as $item)
                                        <tr>
                                            <th scope="row">{{ $item['random_no'] }}</th>
                                            <td>{{ session()->get('employer')['name'] }}</td>
                                            <td>{{ $item['payment_method'] }}</td>
                                            <td>{{ $item['created_at'] }}</td>
                                            @if ($item['status'] == 1)
                                                <td class"text-secondary" style="color:green;">{{ __('received') }}</td>
                                            @elseif($item['status'] == 0)
                                                <td class"text-danger" style="color:red;">{{ __('Cancel') }}</td>
                                            @else
                                                <td class"text-danger" style="color:blue;">{{ __('refund') }}</td>
                                            @endif
                                            <td class="text-center"><a href="invoice/{{ $item['id'] }}" target="_blank">
                                                    <i class="fa-solid fa-download"style="color:#25575c;"></i></a></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- container -->

    </section>
@endsection
@section('script')
    <script src="{{ asset('admindic/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('admindic/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
    {{-- <script src="{{asset('admindic/js/demo/datatables-demo.js')}}"></script> --}}
    <script>
        $(document).ready(function() {
            var table = $('#dataTable').DataTable({
                pageLength: 5,
                lengthMenu: [
                    [5, 8],
                    [5, 8]
                ],
                "bLengthChange": false,
                "aaSorting": []
            })
        });
    </script>
@endsection