@extends('dealer_layouts.dealer_master')

@section('page-title') 
    Dealer | {{ $page_title }}
@endsection

@section('page-content')
<div class="row">
    <!-- Top Statistics Panel -->
    <div class="col-lg-12">
        <div class="hpanel">
            <div class="panel-heading">                    
                Dashboard information and statistics
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3 text-center">
                        <div class="small">
                            <i class="fa fa-bolt"></i> Current Balance 
                        </div>
                        <div>
                            <h1 class="font-extra-bold m-t-xl m-b-xs text-info">
                                {{ $organisation->currency ?? "" }} {{ number_format(($organisation->balance ?? 0) ?: 0, 2) }}

                            </h1>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <!-- Space for future charts or metrics -->
                    </div>
                    
                    <div class="col-md-3 text-center">
                        <div class="small">
                            <i class="fa fa-money"></i> Total Sales (Overall)
                        </div>
                        <div>
                            <h1 class="font-extra-bold m-t-xl m-b-xs text-info">
                                {{ $organisation->currency ?? "" }} {{ number_format($merchant_topups->sum('amount'), 2) }}
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Merchant Top Up Form -->
    <div class="col-md-6">
        <div class="hpanel hblue">
            <div class="panel-heading hbuilt">Merchant Top Up</div>
            <div class="panel-body">
                <form action="{{ route('dealer.topup') }}" method="POST" class="form-horizontal" id="dealerTopForm">
                    @csrf
                    <div class="col-md-12" style="padding-bottom: 10px;">
                        @include('commons.notifications')
                    </div>
                    
                    <div class="form-group">
                        <label class="col-md-3 control-label">Select Merchant</label>
                        <div class="col-md-7">
                            <select required class="form-control" name="merchant" id="merchant">
                                <option value="">-- Select Account --</option>
                                @foreach ($merchants as $row)
                                    <option value="{{ $row->id }}">{{ $row->fullname ?? "" }} ({{ $row->phone }})</option>
                                @endforeach
                            </select>
                        </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 btn-lg" id="topFormBtn" type="submit">
                                <i class="fa fa-money"></i> Top Up Merchant
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Recent Transactions Table -->
    <div class="col-md-6">
        <div class="hpanel hblue">
            <div class="panel-heading hbuilt">Recent Transactions</div>
            <div class="panel-body">
                <div class="table-responsive" style="height: 250px; overflow-y: auto;">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr class="bg-info">
                                <th>Recipient Merchant</th>
                                <th>Amount ({{ $organisation->currency ?? "" }})</th>
                                <th>Payment Method</th>
                                <th>Status</th>
                                <th>Sale Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($merchant_topups as $row)
                            <tr>
                                <td>{{ optional($row->merchantInfo)->fullname ?? 'N/A' }}</td>
                                <td>{{ number_format($row->amount, 2) }}</td>
                                <td>{{ $row->payment_method }}</td>
                                <td>{{ $row->status }}</td>
                                <td>{{ \Carbon\Carbon::parse($row->created_at)->format('F d, Y') }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center">No Data Available</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-js')
<script src="{{ asset('public/js/dealer_landing.js') }}"></script>
<script>
$(function () {
    // Custom page scripts can go here
});
</script>
@endsection