@extends('layouts.app')

@section('title', 'Cashier Dashboard')

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Page Header -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold flex items-center">
                    <i class="fas fa-cash-register mr-2"></i> Cashier Dashboard
                </h2>
                <div class="inline-flex items-center px-3 py-1 bg-white text-indigo-600 rounded-full text-sm font-medium">
                    <i class="fas fa-user mr-1"></i>{{ Auth::user()->name }}
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Options Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- Individual Loan Payment -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition-shadow duration-300">
            <div class="px-6 py-4 border-b border-gray-200 bg-blue-600 text-white">
                <h3 class="text-lg font-semibold flex items-center">
                    <i class="fas fa-user-plus mr-2"></i> Individual Loan Payment
                </h3>
            </div>
            <div class="p-6">
                <p class="text-gray-600 mb-4">Process payments for individual loans (Business, Lease, or Micro loans).</p>
                <a href="{{ route('cashier.individual-payment') }}" class="inline-flex items-center px-6 py-3 bg-blue-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <i class="fas fa-arrow-right mr-2"></i> Start Individual Payment
                </a>
            </div>
        </div>

        <!-- Bulk Micro Loan Payment -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition-shadow duration-300">
            <div class="px-6 py-4 border-b border-gray-200 bg-green-600 text-white">
                <h3 class="text-lg font-semibold flex items-center">
                    <i class="fas fa-users mr-2"></i> Bulk Micro Loan Payment
                </h3>
            </div>
            <div class="p-6">
                <p class="text-gray-600 mb-4">Process multiple micro loan payments for a CBO group at once.</p>
                <a href="{{ route('cashier.bulk-micro-loan-payment') }}" class="inline-flex items-center px-6 py-3 bg-green-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <i class="fas fa-arrow-right mr-2"></i> Start Bulk Payment
                </a>
            </div>
        </div>

        <!-- Early Loan Settlement -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition-shadow duration-300">
            <div class="px-6 py-4 border-b border-gray-200 bg-yellow-600 text-white">
                <h3 class="text-lg font-semibold flex items-center">
                    <i class="fas fa-handshake mr-2"></i> Early Loan Settlement
                </h3>
            </div>
            <div class="p-6">
                <p class="text-gray-600 mb-4">Process early settlement for loans with interest waiver options.</p>
                <a href="{{ route('cashier.early-settlement') }}" class="inline-flex items-center px-6 py-3 bg-yellow-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <i class="fas fa-arrow-right mr-2"></i> Start Early Settlement
                </a>
            </div>
        </div>

        <!-- Payment Reports -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition-shadow duration-300">
            <div class="px-6 py-4 border-b border-gray-200 bg-indigo-600 text-white">
                <h3 class="text-lg font-semibold flex items-center">
                    <i class="fas fa-chart-line mr-2"></i> Payment Reports
                </h3>
            </div>
            <div class="p-6">
                <p class="text-gray-600 mb-4">View payment history, reports, and transaction details.</p>
                <a href="{{ route('payments.index') }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <i class="fas fa-arrow-right mr-2"></i> View Reports
                </a>
            </div>
        </div>
    </div>

    <!-- Today's Payment Summary -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                <i class="fas fa-chart-bar mr-2 text-indigo-600"></i> Today's Payment Summary
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="text-center">
                    <div class="text-3xl font-bold text-blue-600">{{ $todayPaymentsCount ?? 0 }}</div>
                    <div class="text-sm text-gray-600 mt-1">Total Payments</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold text-green-600">Rs. {{ number_format($todayTotalAmount ?? 0, 2) }}</div>
                    <div class="text-sm text-gray-600 mt-1">Total Amount</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold text-yellow-600">{{ $todayMicroLoansCount ?? 0 }}</div>
                    <div class="text-sm text-gray-600 mt-1">Micro Loans</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold text-indigo-600">{{ $todayOtherLoansCount ?? 0 }}</div>
                    <div class="text-sm text-gray-600 mt-1">Other Loans</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection