@extends('merch_layouts.merch_master')
@section('page-title') 
    Merchant | {{ $page_title }}
@endsection
@section('page-content')
<div class="row">
        <div class="col-lg-12">
            <div class="hpanel">
                <div class="panel-heading">                        
                    Dashboard information and statistics
                </div>
                <!-- style="height: 150px !important;" -->
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-3 text-center">
                            <div class="small">
                                <i class="fa fa-bolt"></i> Current Balanace 
                            </div>
                            <div>
                                <h1 class="font-extra-bold m-t-xl m-b-xs text-<?php echo ($current_balance > 2000) ? "success" : "danger"; ?>     ">
                                    {{ $merchant->currency  }} {{ number_format($current_balance) }}
                                </h1>
                                <small></small>
                            </div>
                            <div class="small m-t-xl">
                                <!-- <i class="fa fa-clock-o"></i> Data from January -->
                            </div>
                        </div>
                        <div class="col-md-6">
                            <!-- <div class="text-center small">
                                <i class="fa fa-laptop"></i> Transactions in current month ({{ date("F") }})
                            </div>
                            <div class="flot-chart" style="height: 160px">
                                <div class="flot-chart-content" id="flot-line-chart"></div>
                            </div> -->
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="small">
                                <i class="fa fa-clock-o"></i> Total Sales (Overall)
                            </div>
                            <div>
                                <h1 class="font-extra-bold m-t-xl m-b-xs text-info">
                                    {{ number_format($transaction_sum) }}
                                </h1>
                                <!-- <small>And four weeks</small> -->
                            </div>
                            <div class="small m-t-xl">
                                <!-- <i class="fa fa-clock-o"></i> Last active in 12.10.2015 -->
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
   
        <div class="col-md-6">
            <div class="hpanel">
                <div class="panel-heading">Customer Top Up</div>
                    <div class="panel-body">
                        <form action="{{ url('merchant/topup') }}" method="POST" class="form-horizontal" id="merchantTopForm">
                            {{csrf_field()}}
                            <div class="col-md-12" style="padding-bottom: 10px;">
                                @include('commons.notifications')
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">Phone Number</label>
                                <div class="col-md-7">
                                    <input type="number" class="form-control" name="phone_number" placeholder="phone number" required>
                                    <!-- <p class="text-warning" style="padding-top: 10px;">Minimum Amounts - TNM: 1MWK |  Airtel : 10MWK  </p> -->
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">Amount</label>
                                <div class="col-md-7">
                                    <input type="number" name="amount" class="form-control" id="amount" placeholder="Top Up Amount" required>
                                </div>
                            </div>
                    
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                            <div class="col-sm-12 ">
                                <button class="btn btn-info btn-block" type="submit"><i class="fa fa-send"></i> Submit</button>
                            </div>
                            </div>
                        </form>
                    </div>
            </div>
        </div>
        <div class="col-md-6">
                <div class="hpanel">
                    <div class="panel-heading">Recent Transactions</div>
                        <div class="panel-body">
                            <div class="table-responsive" style="height:550px; overflow: scroll; ">
                                <table cellpadding="1" cellspacing="1" class="table table-bordered table-striped">
                                    <thead>
                                    <tr class="bg-info">
                                        <th>Phone</th>
                                        <th>Amount ({{ $merchant->currency  }})</th>
                                        <th>Status</th>
                                        <th>Sale Date </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse ($transactions as $row)
                                    <tr>
                                        <td>{{ $row->msisdn }}</td>
                                        <td>{{ number_format($row->amount) }}</td>
                                        <td>{{ $row->status }}</td>
                                        <td>{{ Carbon\Carbon::parse($row->created_at)->format('F d, Y') }}</td>
                                    </tr>
                                    @empty
                                        <tr>                      
                                            <td colspan="4">No Data</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                </div>
            </form>
        </div>
    
@endsection
@section('page-js')

<script src="{{ url('public/theme_assets/vendor/jquery-flot/jquery.flot.js') }}"></script>
<script src="{{ url('public/theme_assets/vendor/jquery-flot/jquery.flot.resize.js') }}"></script>
<script src="{{ url('public/theme_assets/vendor/jquery-flot/jquery.flot.pie.js') }}"></script>
<script src="{{ url('public/theme_assets/vendor/flot.curvedlines/curvedLines.js') }}"></script>
<script src="{{ url('public/theme_assets/vendor/jquery.flot.spline/index.js') }}"></script>

<script src="{{ url('public/js/merchant_landing.js') }}"></script>
<script>
$(function () {

/**
 * Flot charts data and options
 */
/*
    var data1 = [ [0, 55], [1, 48], [2, 40], [3, 36], [4, 40], [5, 60], [6, 50], [7, 51] ];

    var chartUsersOptions = {
        series: {
            splines: {
                show: true,
                tension: 0.4,
                lineWidth: 1,
                fill: 0.4
            },
        },
        grid: {
            tickColor: "#f0f0f0",
            borderWidth: 1,
            borderColor: 'f0f0f0',
            color: '#6a6c6f'
        },
        colors: [ "#62cb31", "#efefef"],
    };

    $.plot($("#flot-line-chart"), [data1], chartUsersOptions);
    */

});
</script>
@endsection