@extends('layouts.app')

@section('title', 'Cheque Books Reports')

@section('content')
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-chart-bar"></i> Cheque Books Reports
                    </h3>
                    <a href="{{ route('cheque-books.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4" style="display: flex; flex-wrap: nowrap;">
        <div class="col mb-3" style="flex: 1; min-width: 0;">
            <a href="{{ route('cheque-books.total-cheque-books') }}" style="text-decoration: none;">
                <div class="card bg-primary text-white h-100">
                    <div class="card-body" style="padding: 1rem;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0" style="font-size: 0.85rem;">Total Cheque Books</h6>
                                <h3 class="mb-0" style="font-size: 1.5rem;">{{ $totalChequeBooks }}</h3>
                            </div>
                            <i class="fas fa-book fa-lg opacity-50"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col mb-3" style="flex: 1; min-width: 0;">
            <a href="{{ route('cheque-books.total-leaves') }}" style="text-decoration: none;">
                <div class="card bg-success text-white h-100">
                    <div class="card-body" style="padding: 1rem;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0" style="font-size: 0.85rem;">Total Leaves</h6>
                                <h3 class="mb-0" style="font-size: 1.5rem;">{{ $totalLeaves }}</h3>
                            </div>
                            <i class="fas fa-file-alt fa-lg opacity-50"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col mb-3" style="flex: 1; min-width: 0;">
            <a href="{{ route('cheque-books.available-leaves') }}" style="text-decoration: none;">
                <div class="card bg-info text-white h-100">
                    <div class="card-body" style="padding: 1rem;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0" style="font-size: 0.85rem;">Available Leaves</h6>
                                <h3 class="mb-0" style="font-size: 1.5rem;">{{ $totalAvailableLeaves }}</h3>
                            </div>
                            <i class="fas fa-check-circle fa-lg opacity-50"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col mb-3" style="flex: 1; min-width: 0;">
            <a href="{{ route('cheque-books.used-leaves') }}" style="text-decoration: none;">
                <div class="card bg-warning text-white h-100">
                    <div class="card-body" style="padding: 1rem;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0" style="font-size: 0.85rem;">Used Leaves</h6>
                                <h3 class="mb-0" style="font-size: 1.5rem;">{{ $totalUsedLeaves }}</h3>
                            </div>
                            <i class="fas fa-check-double fa-lg opacity-50"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col mb-3" style="flex: 1; min-width: 0;">
            <a href="{{ route('cheque-books.total-used-leaves') }}" style="text-decoration: none;">
                <div class="card bg-danger text-white h-100">
                    <div class="card-body" style="padding: 1rem;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0" style="font-size: 0.85rem;">Total Used Leaves</h6>
                                <h3 class="mb-0" style="font-size: 1.5rem;">{{ $calculatedTotalUsedLeaves }}</h3>
                            </div>
                            <i class="fas fa-file-invoice fa-lg opacity-50"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Cheque Usage Statistics -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-pie"></i> Cheque Usage Status</h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Status</th>
                                <th class="text-right">Count</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="badge badge-warning">Pending</span></td>
                                <td class="text-right"><strong>{{ $pendingCheques }}</strong></td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-success">Cleared</span></td>
                                <td class="text-right"><strong>{{ $clearedCheques }}</strong></td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-danger">Bounced</span></td>
                                <td class="text-right"><strong>{{ $bouncedCheques }}</strong></td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-secondary">Cancelled</span></td>
                                <td class="text-right"><strong>{{ $cancelledCheques }}</strong></td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-warning">Stopped</span></td>
                                <td class="text-right"><strong>{{ $stoppedCheques }}</strong></td>
                            </tr>
                            <tr class="table-info">
                                <td><strong>Total</strong></td>
                                <td class="text-right"><strong>{{ $totalIssuedCheques }}</strong></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-money-bill-wave"></i> Amount Statistics</h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Status</th>
                                <th class="text-right">Amount (৳)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="badge badge-warning">Pending</span></td>
                                <td class="text-right"><strong>{{ number_format($pendingAmount, 2) }}</strong></td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-success">Cleared</span></td>
                                <td class="text-right"><strong>{{ number_format($clearedAmount, 2) }}</strong></td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-danger">Bounced</span></td>
                                <td class="text-right"><strong>{{ number_format($bouncedAmount, 2) }}</strong></td>
                            </tr>
                            <tr class="table-info">
                                <td><strong>Total</strong></td>
                                <td class="text-right"><strong>{{ number_format($totalAmount, 2) }}</strong></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Cheque Books Status -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-check-circle"></i> Active Books</h5>
                </div>
                <div class="card-body text-center">
                    <h2 class="text-success">{{ $activeBooks }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-check-double"></i> Completed Books</h5>
                </div>
                <div class="card-body text-center">
                    <h2 class="text-info">{{ $completedBooks }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><i class="fas fa-times-circle"></i> Cancelled Books</h5>
                </div>
                <div class="card-body text-center">
                    <h2 class="text-secondary">{{ $cancelledBooks }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Leaves Status -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-list"></i> Leaves Status Summary</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center p-3 border rounded">
                                <h6 class="text-muted">Available</h6>
                                <h3 class="text-success">{{ $totalAvailableLeaves }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center p-3 border rounded">
                                <h6 class="text-muted">Issued</h6>
                                <h3 class="text-warning">{{ $totalIssuedLeaves }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center p-3 border rounded">
                                <h6 class="text-muted">Used</h6>
                                <h3 class="text-info">{{ $totalUsedLeaves }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center p-3 border rounded">
                                <h6 class="text-muted">Cancelled/Spoiled/Lost</h6>
                                <h3 class="text-secondary">{{ $totalCancelledLeaves }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Usage -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-history"></i> Recent Cheque Usage</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Cheque Number</th>
                                    <th>Bank Account</th>
                                    <th>Payee Name</th>
                                    <th>Amount</th>
                                    <th>Issue Date</th>
                                    <th>Clearing Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentUsage as $usage)
                                    <tr>
                                        <td>{{ $usage->chequeLeaf->cheque_number ?? 'N/A' }}</td>
                                        <td>
                                            {{ $usage->chequeLeaf->chequeBook->bankAccount->bank_name ?? 'N/A' }}<br>
                                            <small class="text-muted">{{ $usage->chequeLeaf->chequeBook->bankAccount->account_number ?? 'N/A' }}</small>
                                        </td>
                                        <td>{{ $usage->payee_name ?? 'N/A' }}</td>
                                        <td>৳{{ number_format($usage->amount ?? 0, 2) }}</td>
                                        <td>{{ $usage->issue_date ? $usage->issue_date->format('Y-m-d') : 'N/A' }}</td>
                                        <td>
                                            @if($usage->clearing_status == 'pending')
                                                <span class="badge badge-warning">Pending</span>
                                            @elseif($usage->clearing_status == 'cleared')
                                                <span class="badge badge-success">Cleared</span>
                                            @elseif($usage->clearing_status == 'bounced')
                                                <span class="badge badge-danger">Bounced</span>
                                            @elseif($usage->clearing_status == 'cancelled')
                                                <span class="badge badge-secondary">Cancelled</span>
                                            @elseif($usage->clearing_status == 'stopped')
                                                <span class="badge badge-warning">Stopped</span>
                                            @else
                                                <span class="badge badge-secondary">{{ ucfirst($usage->clearing_status) }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">No recent usage found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Cheque Books by Bank Account -->
    @if($booksByBank->count() > 0)
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-university"></i> Cheque Books by Bank Account</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Bank Name</th>
                                    <th>Account Number</th>
                                    <th class="text-right">Total Books</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($booksByBank as $bank)
                                    <tr>
                                        <td>{{ $bank->bankAccount->bank_name ?? 'N/A' }}</td>
                                        <td>{{ $bank->bankAccount->account_number ?? 'N/A' }}</td>
                                        <td class="text-right"><strong>{{ $bank->total }}</strong></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

@push('styles')
<style>
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
    }
    
    a[style*="text-decoration: none"] .card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
</style>
@endpush
@endsection