@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')

<div class="d-flex justify-content-between align-items-center">

    <h1>
        Dashboard
    </h1>
      
      <a href="{{ route('collections.create') }}"
        class="btn btn-success">

        <i class="fas fa-plus"></i>

        New Collection

    </a>

</div>



@stop

@section('css')

<style>
    .dashboard-card {
        border-radius: 18px;
        color: #fff;
        padding: 25px;
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        transition: 0.3s;
    }

    .dashboard-card:hover {
        transform: translateY(-5px);
    }

    .dashboard-card h2 {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .dashboard-card p {
        margin: 0;
        font-size: 16px;
        opacity: 0.95;
    }

    .dashboard-icon {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 55px;
        opacity: 0.2;
    }

    .bg-blue {
        background: linear-gradient(45deg, #1E3C72, #2A5298);
    }

    .bg-green {
        background: linear-gradient(45deg, #11998e, #38ef7d);
    }

    .bg-orange {
        background: linear-gradient(45deg, #f46b45, #eea849);
    }

    .bg-red {
        background: linear-gradient(45deg, #cb2d3e, #ef473a);
    }

    .bg-pink {
        background: linear-gradient(45deg, #721e6c, #962a98);
    }

    .dashboard-table th {
        font-weight: 600;
    }

    .card-title {
        font-weight: 600;
    }

    .table td,
    .table th {
        vertical-align: middle;
    }
</style>

@stop

@section('content')

<div class="row">

    <!-- Total Accounts -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('accounts.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-blue">
                <i class="fas fa-users dashboard-icon"></i>
                <h2>{{ $totalAccounts }}</h2>
                <p>Total Accounts</p>
            </div>
        </a>
    </div>

    <!-- Active Accounts -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('accounts.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-orange">
                <i class="fas fa-user-check dashboard-icon"></i>
                <h2>{{ $activeAccounts }}</h2>
                <p>Active Accounts</p>
            </div>
        </a>
    </div>

    <!-- Today's Accounts -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('accounts.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-red">
                <i class="fas fa-user-plus dashboard-icon"></i>
                <h2>{{ $todayAccounts }}</h2>
                <p>Today's Accounts</p>
            </div>
        </a>
    </div>

    <!-- Today's Collection -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('collections.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-info">
                <i class="fas fa-wallet dashboard-icon"></i>
                <h2>₹ {{ number_format($todayCollection,2) }}</h2>
                <p>Today's Collection</p>
            </div>
        </a>
    </div>

    <!-- Today's Principal -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('collections.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-success">
                <i class="fas fa-coins dashboard-icon"></i>
                <h2>₹ {{ number_format($todayPrincipal,2) }}</h2>
                <p>Today's Principal</p>
            </div>
        </a>
    </div>

    <!-- Today's Interest -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('collections.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-danger">
                <i class="fas fa-percentage dashboard-icon"></i>
                <h2>₹ {{ number_format($todayInterest,2) }}</h2>
                <p>Today's Interest</p>
            </div>
        </a>
    </div>

    <!-- Total Loan Disbursed -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('loans.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-pink">
                <i class="fas fa-hand-holding-usd dashboard-icon"></i>
                <h2>₹ {{ number_format($totalLoanDisbursed,2) }}</h2>
                <p>Total Loan Disbursed</p>
            </div>
        </a>
    </div>

    <!-- Total Pending -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('loans.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-warning">
                <i class="fas fa-hourglass-half dashboard-icon"></i>
                <h2>₹ {{ number_format($totalPending,2) }}</h2>
                <p>Total Pending</p>
            </div>
        </a>
    </div>

    <!-- Total Collection -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('collections.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-primary">
                <i class="fas fa-wallet dashboard-icon"></i>
                <h2>₹ {{ number_format($totalCollection,2) }}</h2>
                <p>Total Collection</p>
            </div>
        </a>
    </div>

    <!-- Total Principal Collected -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('collections.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-success">
                <i class="fas fa-money-bill-wave dashboard-icon"></i>
                <h2>₹ {{ number_format($totalPrincipalCollected,2) }}</h2>
                <p>Total Principal Collected</p>
            </div>
        </a>
    </div>

    <!-- Total Interest Collected -->
    <div class="col-lg-3 col-md-6">
        <a href="{{ route('collections.index') }}" class="text-decoration-none">
            <div class="dashboard-card bg-secondary">
                <i class="fas fa-chart-line dashboard-icon"></i>
                <h2>₹ {{ number_format($totalInterestCollected,2) }}</h2>
                <p>Total Interest Collected</p>
            </div>
        </a>
    </div>

</div>
<div class="row">

    <div class="col-md-6">

        <div class="card card-primary card-outline shadow">

            <div class="card-header">

                <h3 class="card-title">

                    <i class="fas fa-users"></i>

                    Recent Accounts

                </h3>
                

            </div>

            <div class="card-body p-0">

                <table class="table table-hover dashboard-table">

                    <thead class="bg-light">

                        <tr>

                            <th>Account No</th>
                            <th>Name</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($recentAccounts as $account)

                        <tr>

                            <td>

                                <span class="badge badge-primary">

                                    {{ $account->account_no }}

                                </span>

                            </td>

                            <td>

                                {{ $account->customer_name }}

                            </td>

                           

                        </tr>

                        @empty

                        <tr>

                            <td colspan="3"
                                class="text-center text-danger">

                                No Accounts Found

                            </td>

                        </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

    <div class="col-md-6">

        <div class="card card-success card-outline shadow">

            <div class="card-header">

                <h3 class="card-title">

                    <i class="fas fa-money-check-alt"></i>

                    Recent Collections

                </h3>

            </div>

            <div class="card-body p-0">

                <table class="table table-hover dashboard-table">

                    <thead class="bg-light">

                        <tr>

                            <th>Receipt</th>
                            <th>Customer</th>
                            <th>Amount</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($recentCollections as $collection)

                        <tr>

                            <td>

                                <span class="badge badge-success">

                                    {{ $collection->receipt_no }}

                                </span>

                            </td>

                            <td>

                                {{ $collection->account->customer_name ?? '-' }}

                            </td>

                            <td>

                                ₹ {{ number_format($collection->amount,2) }}

                            </td>

                        </tr>

                        @empty

                        <tr>

                            <td colspan="3"
                                class="text-center text-danger">

                                No Collections Found

                            </td>

                        </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>



@stop