@extends('layouts.rti-layout')

@section('title', 'KSRTC- RTI - Dashboard')

@section('content')
    <!-- Page Title -->
    <div class="mb-3 row align-items-center justify-content-between">
        <div class="col-md-12">
            <h1 class="h3 d-inline align-middle">RTI Dashboard</h1>
            <p class="text-muted">Overview of RTI applications and statistics.</p>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-1 text-muted">Total Applications</p>
                            <h3 class="mb-0">{{ $stats['total_applications'] }}</h3>
                        </div>
                        <div class="bg-primary bg-opacity-10 p-3 rounded">
                            <i class="fa fa-file-alt text-primary fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-1 text-muted">Approved</p>
                            <h3 class="mb-0 text-success">{{ $stats['approved'] }}</h3>
                        </div>
                        <div class="bg-success bg-opacity-10 p-3 rounded">
                            <i class="fa fa-check-circle text-success fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-1 text-muted">Pending</p>
                            <h3 class="mb-0 text-warning">{{ $stats['pending'] }}</h3>
                        </div>
                        <div class="bg-warning bg-opacity-10 p-3 rounded">
                            <i class="fa fa-clock text-warning fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-1 text-muted">Rejected</p>
                            <h3 class="mb-0 text-danger">{{ $stats['rejected'] }}</h3>
                        </div>
                        <div class="bg-danger bg-opacity-10 p-3 rounded">
                            <i class="fa fa-times-circle text-danger fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter Section -->
    <div class="row">
        <div class="col-12">
            <!-- Filter Card -->
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" for="search">Search</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white border-end-0">
                                    <i class="fa fa-search"></i>
                                </span>
                                <input type="text" 
                                       class="form-control border-start-0" 
                                       id="search" 
                                       placeholder="Search by Applicant or ID..">
                            </div>
                        </div>
                        
                        <div class="col-md-3">
                            <label class="form-label" for="application_type">Application Type</label>
                            <select id="application_type" class="form-select">
                                <option selected>All Types</option>
                                @foreach($applicationTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="col-md-3">
                            <label class="form-label" for="status">Status</label>
                            <select id="status" class="form-select">
                                <option selected>All Status</option>
                                <option value="approved">Approved</option>
                                <option value="pending">Pending</option>
                                <option value="rejected">Rejected</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-12 text-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-search"></i> Filter
                            </button>
                            <button type="reset" class="btn btn-secondary">
                                <i class="fa fa-times"></i> Reset
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Applications Table -->
            <div class="card mt-4">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover text-wrap mb-0">
                            <thead>
                                <tr>
                                    <th width="15%">Application ID</th>
                                    <th width="20%">Applicant</th>
                                    <th width="20%">Society</th>
                                    <th class="text-end" width="15%">Amount (Rec.)</th>
                                    <th width="15%">Status</th>
                                    <th width="10%" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($applications as $app)
                                <tr>
                                    <td><strong>{{ $app['id'] }}</strong></td>
                                    <td>
                                        <div>{{ $app['applicant_name'] }}</div>
                                        <small class="text-muted">{{ $app['applicant_email'] }}</small>
                                    </td>
                                    <td>{{ $app['society_name'] }}</td>
                                    <td class="text-end fw-bold">₹{{ number_format($app['amount']) }}</td>
                                    <td>
                                        <span class="{{ $app['status_class'] }}">{{ $app['status'] }}</span>
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" class="form-check-input application-checkbox" 
                                               data-amount="{{ $app['amount'] }}" 
                                               data-society="{{ $app['society_name'] }}">
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="mt-3">
                        <nav>
                            <ul class="pagination justify-content-end">
                                <li class="page-item disabled">
                                    <span class="page-link">Previous</span>
                                </li>
                                <li class="page-item active"><span class="page-link">1</span></li>
                                <li class="page-item"><span class="page-link">2</span></li>
                                <li class="page-item"><span class="page-link">3</span></li>
                                <li class="page-item">
                                    <span class="page-link">Next</span>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Summary Cards -->
            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <p class="mb-1 text-muted">Total Selected</p>
                            <h3 class="text-success" id="totalSelected">0</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <p class="mb-1 text-muted">Society Count</p>
                            <h3 class="text-success" id="societyCount">0</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <p class="mb-1 text-muted">Batch Total</p>
                            <h3 class="text-success" id="batchTotal">₹0</h3>
                        </div>
                    </div>
                </div>

                <div class="col-12 text-end mt-3">
                    <button type="button" class="btn btn-primary me-2" onclick="createBatch()">
                        <i class="fa fa-plus"></i> Create Batch
                    </button>
                    <button type="button" class="btn btn-secondary me-2">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Update summary on checkbox change
        $('.application-checkbox').on('change', function() {
            updateSummary();
        });

        function updateSummary() {
            const selected = $('.application-checkbox:checked');
            const totalSelected = selected.length;
            
            let totalAmount = 0;
            let societies = new Set();
            
            selected.each(function() {
                totalAmount += parseInt($(this).data('amount'));
                societies.add($(this).data('society'));
            });
            
            $('#totalSelected').text(totalSelected);
            $('#societyCount').text(societies.size);
            $('#batchTotal').text('₹' + totalAmount.toLocaleString('en-IN'));
        }

        // Auto-submit on enter key
        $('#search').on('keypress', function(e) {
            if (e.which === 13) {
                alert('Search for: ' + $(this).val());
            }
        });

        // Filter button click
        $('.btn-primary').on('click', function() {
            if ($(this).text().trim() === 'Filter') {
                alert('Filter applied!');
            }
        });
    });

    function createBatch() {
        const selected = $('.application-checkbox:checked');
        if (selected.length === 0) {
            alert('Please select at least one application.');
            return;
        }
        alert('Batch created successfully with ' + selected.length + ' applications!');
    }
</script>
@endpush