@extends('layouts.merchant')

@section('page-title')
    Merchant | Dashboard
@endsection

@section('page-content')

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <form class="form-inline">
                    <div class="form-group">
                        <!-- <div class="input-group">
                            <input type="text" class="form-control form-control-light" id="dash-daterange">
                            <div class="input-group-append">
                                <span class="input-group-text bg-info border-info text-white">
                                    <i class="mdi mdi-calendar-range font-13"></i>
                                </span>
                            </div>
                        </div> -->
                    </div>
                </form>
            </div>
            <h4 class="page-title">Dashboard</h4>
        </div>
    </div>
</div>
<!-- end page title -->

{{-- Alert --}}
@include('layouts.alert')

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="dropdown float-right">
                <h6 id="transaction-data" class="d-none">{{ $transactions_graph }}</h6>
                </div>
                <h3 class="header-title mb-3" style="padding: 15px; background: gainsboro; color: #000;">Current Balance {{ number_format($current_balance) }}</h3>
                <hr>
                <h4 class="header-title mb-3">Instant Top Up</h4>

                <form action="{{ url('merchant/topup') }}" method="POST" id="merchantTopUpForm" >
                    {{csrf_field()}}
                    
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="phoneNumber" class="col-form-label">Phone Number</label>
                            <input type="text" required class="form-control" name="phone_number" value="{{ old('phone_number') }}" id="phoneNumber" placeholder="Phone Number">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="amount" class="col-form-label">Amount</label>
                            <input type="number" required class="form-control" name="amount" value="{{ old('amount') }}" id="amount" placeholder="Amount">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Submit </button>
                    <button type="reset" class="btn btn-danger btn-block">Reset</button>

                </form>

            </div> 
        </div>
        <!-- <a href="{{url('merchant/showtopup')}}" class="btn btn-lg btn-success">Top Up A Number <i class="mdi mdi-send"></i></a> -->
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                {{-- <a href="" class="btn btn-sm btn-link float-right mb-3">Export
                    <i class="mdi mdi-download ml-1"></i>
                </a> --}}
                <h3 class="header-title mt-2">Total Transactions : {{ $transaction_count }}</h3>
                <h4 class="header-title mt-2">Recent Transactions</h4>

                <div class="table-responsive">
                    <table class="table table-centered table-nowrap table-hover mb-0">
                        <tbody>

                            @forelse ($transactions as $transaction)
                            <tr>
                                
                                <td>
                                <h5 class="font-14 my-1 font-weight-normal">{{ $transaction->msisdn }}</h5>
                                    <span class="text-muted font-13"><strong>Phone Number</strong></span>
                                </td>
                                <td>
                                <h5 class="font-14 my-1 font-weight-normal">K {{$transaction->amount}}</h5>
                                    <span class="text-muted font-13"><strong>Amount</strong></span>
                                </td>
                                <td>
                                    <h5 class="font-14 my-1 font-weight-normal">{{$transaction->status}}</h5>
                                        <span class="text-muted font-13"><strong>Status</strong></span>
                                    </td>
                                <td>
                                <!-- <h5 class="font-14 my-1 font-weight-normal">{{ Carbon\Carbon::parse($transaction->created_at)->format('F dS Y') }}</h5> -->
                                <h5 class="font-14 my-1 font-weight-normal">{{ $transaction->created_at }}</h5>
                                    <span class="text-muted font-13"><strong>Date</strong></span>
                                </td>
                                
                            </tr>
                            @empty
                                
                            @endforelse
                            
                        
                        </tbody>
                    </table>
                </div> <!-- end table-responsive-->
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->

   

</div>
<!-- end row -->
@endsection

@section('page-js')

<!-- third party js -->
<!-- <script src="{{ url('public/assets/js/vendor/apexcharts.min.js')}}"></script> -->
<!-- <script src="{{ url('public/assets/js/vendor/jquery-jvectormap-1.2.2.min.js')}}"></script> -->
<!-- <script src="{{ url('public/assets/js/vendor/jquery-jvectormap-world-mill-en.js')}}"></script> -->
<!-- third party js ends -->

<!-- demo app -->
<!-- <script src="{{ url('public/assets/js/pages/demo.dashboard.js')}}"></script> -->
<!-- end demo js-->
<script>
$(document).ready(function(){
    $("#merchantTopUpForm").submit(function(evt){
        
        var userAction = confirm('You are about to submit this top up');
        if(userAction == false){
            evt.preventDefault();
        }

    });
});

</script>
    
@endsection