@extends('layouts.app')

@section('title', 'Collector Collection & Deposits')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Collector Collection & Deposits</h3>
                    <a href="{{ route('collector-deposits.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Add New Deposit
                    </a>
                </div>

                <!-- Filter Form -->
                <div class="card-body">
                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h6 class="card-title mb-0">
                                <i class="fas fa-filter me-2"></i>Filter Options
                            </h6>
                        </div>
                        <div class="card-body">
                            <form method="GET" action="{{ route('collector-deposits.index') }}" id="filterForm">
                                <div class="row g-2 align-items-end">
                                    @if($currentUser->role !== 'collector')
                                    <div class="col-md-2">
                                        <label for="collector_id" class="form-label fw-bold mb-1">
                                            <i class="fas fa-user me-1"></i>Collector<br>
                                        </label>
                                        <select name="collector_id" id="collector_id" class="form-select form-select-sm">
                                            <option value="">All Collectors</option>
                                            @foreach($collectors as $collector)
                                                <option value="{{ $collector->id }}" 
                                                    {{ request('collector_id') == $collector->id ? 'selected' : '' }}>
                                                    {{ $collector->name }} ({{ $collector->employeeRecord->employee_id ?? 'N/A' }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @endif
                                    <div class="col-md-{{ $currentUser->role === 'collector' ? '2' : '2' }}">
                                        <label for="is_approved" class="form-label fw-bold mb-1">
                                            <i class="fas fa-check-circle me-1"></i>Status
                                        </label><br>
                                        <select name="is_approved" id="is_approved" class="form-select form-select-sm">
                                            <option value="">All Status</option>
                                            <option value="1" {{ request('is_approved') === '1' ? 'selected' : '' }}>Approved</option>
                                            <option value="0" {{ request('is_approved') === '0' ? 'selected' : '' }}>Pending</option>
                                        </select>
                                    </div>
                                    <div class="col-md-{{ $currentUser->role === 'collector' ? '2' : '2' }}">
                                        <label for="min_amount" class="form-label fw-bold mb-1">
                                            <i class="fas fa-dollar-sign me-1"></i>Min Amount<br>
                                        </label>
                                        <input type="number" name="min_amount" id="min_amount" class="form-control form-control-sm" 
                                               value="{{ request('min_amount') }}" step="0.01" placeholder="0.00">
                                    </div>
                                    <div class="col-md-{{ $currentUser->role === 'collector' ? '2' : '2' }}">
                                        <label for="start_date" class="form-label fw-bold mb-1">
                                            <i class="fas fa-calendar-alt me-1"></i>Start Date<br>
                                        </label>
                                        <input type="date" name="start_date" id="start_date" class="form-control form-control-sm" 
                                               value="{{ request('start_date') }}">
                                    </div>
                                    <div class="col-md-{{ $currentUser->role === 'collector' ? '2' : '2' }}">
                                        <label for="end_date" class="form-label fw-bold mb-1">
                                            <i class="fas fa-calendar-alt me-1"></i>End Date<br>
                                        </label>
                                        <input type="date" name="end_date" id="end_date" class="form-control form-control-sm" 
                                               value="{{ request('end_date') }}">
                                    </div>
                                    <div class="col-md-{{ $currentUser->role === 'collector' ? '2' : '2' }}">
                                        <div class="d-flex gap-1">
                                            <button type="submit" class="btn btn-primary btn-sm flex-fill">
                                                <i class="fas fa-search"></i>
                                            </button>
                                            <a href="{{ route('collector-deposits.index') }}" class="btn btn-secondary btn-sm">
                                                <i class="fas fa-times"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Statistics Cards -->
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <div class="card bg-success text-white h-100">
                                <div class="card-body py-2 d-flex flex-column justify-content-center text-center">
                                    <small class="card-title mb-1">Total Collection <small>(Paid bills)</small></small>
                                    <h6 class="mb-0">৳{{ number_format($filteredStats['total_collection'], 2) }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-dark text-white h-100">
                                <div class="card-body py-2 d-flex flex-column justify-content-center text-center">
                                    <small class="card-title mb-1">Cash In Hand</small>
                                    <h6 class="mb-0">৳{{ number_format($filteredStats['cash_in_hand'], 2) }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-primary text-white h-100">
                                <div class="card-body py-2 d-flex flex-column justify-content-center text-center">
                                    <small class="card-title mb-1">Total Deposits</small>
                                    <h6 class="mb-0">{{ $filteredStats['total_deposits'] }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-info text-white h-100">
                                <div class="card-body py-2 d-flex flex-column justify-content-center text-center">
                                    <small class="card-title mb-1">Approved</small>
                                    <h6 class="mb-0">{{ $filteredStats['approved_count'] }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-warning text-white h-100">
                                <div class="card-body py-2 d-flex flex-column justify-content-center text-center">
                                    <small class="card-title mb-1">Pending</small>
                                    <h6 class="mb-0">{{ $filteredStats['pending_count'] }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-secondary text-white h-100">
                                <div class="card-body py-2 d-flex flex-column justify-content-center text-center">
                                    <small class="card-title mb-1">Total Amount</small>
                                    <h6 class="mb-0">৳{{ number_format($filteredStats['total_amount'], 2) }}</h6>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Deposits Table -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>ID</th>
                                    <th>Collector</th>
                                    <th>Amount</th>
                                    <th>Date</th>
                                    <th>Method</th>
                                    <th>Received By</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($deposits as $deposit)
                                    <tr>
                                        <td>{{ $deposit->deposit_id }}</td>
                                        <td>
                                            {{ $deposit->collector->name ?? 'N/A' }}
                                            <br><small class="text-muted">{{ $deposit->collector_id }}</small>
                                        </td>
                                        <td>৳{{ number_format($deposit->amount, 2) }}</td>
                                        <td>{{ $deposit->deposit_date->format('d M Y') }}</td>
                                        <td>{{ $deposit->method ?? 'N/A' }}</td>
                                        <td>
                                            {{ $deposit->receiver->name ?? 'N/A' }}
                                            @if($deposit->receiver)
                                                <br><small class="text-muted">{{ $deposit->received_by }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            @if($deposit->is_approved)
                                                <span class="badge bg-success">Approved</span>
                                                @if($deposit->approved_at)
                                                    <br><small class="text-muted">{{ $deposit->approved_at->format('d M Y') }}</small>
                                                @endif
                                            @else
                                                <span class="badge bg-warning">Pending</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('collector-deposits.show', $deposit) }}" 
                                                   class="btn btn-sm btn-info" title="View">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('collector-deposits.edit', $deposit) }}" 
                                                   class="btn btn-sm btn-warning" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                @if(!$deposit->is_approved && in_array($currentUser->role, ['manager', 'admin', 'super_admin']))
                                                    <button type="button" class="btn btn-sm btn-success" 
                                                            onclick="approveDeposit({{ $deposit->deposit_id }})" title="Approve">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                @elseif($deposit->is_approved && in_array($currentUser->role, ['manager', 'admin', 'super_admin']))
                                                    <button type="button" class="btn btn-sm btn-danger" 
                                                            onclick="rejectDeposit({{ $deposit->deposit_id }})" title="Reject">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                @endif
                                                @if(in_array($currentUser->role, ['admin', 'super_admin']))
                                                    <form action="{{ route('collector-deposits.destroy', $deposit) }}" 
                                                          method="POST" class="d-inline"
                                                          onsubmit="return confirm('Are you sure you want to delete this deposit?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">No deposits found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-center">
                        {{ $deposits->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Approve Modal -->
<div class="modal fade" id="approveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Approve Deposit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="approveForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="approved_by" class="form-label">Approved By</label>
                        <select name="approved_by" id="approved_by" class="form-select" required>
                            <option value="">Select Approver</option>
                            @foreach($collectors as $collector)
                                <option value="{{ $collector->employee_id }}">
                                    {{ $collector->name }} ({{ $collector->employee_id }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Approve</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit form when filters change
    const filterForm = document.getElementById('filterForm');
    const filterInputs = filterForm.querySelectorAll('select, input[type="date"], input[type="number"]');
    
    filterInputs.forEach(input => {
        input.addEventListener('change', function() {
            // Add a small delay to prevent multiple rapid submissions
            setTimeout(() => {
                filterForm.submit();
            }, 300);
        });
    });
    
    // Add loading state to submit button
    filterForm.addEventListener('submit', function() {
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalHTML = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        submitBtn.disabled = true;
        
        // Re-enable after 3 seconds as fallback
        setTimeout(() => {
            submitBtn.innerHTML = originalHTML;
            submitBtn.disabled = false;
        }, 3000);
    });
    
    // Add active filter indicators
    function updateActiveFilters() {
        const activeFilters = [];
        const collectorSelect = document.getElementById('collector_id');
        const statusSelect = document.getElementById('is_approved');
        const startDate = document.getElementById('start_date');
        const endDate = document.getElementById('end_date');
        const minAmount = document.getElementById('min_amount');
        
        if (collectorSelect && collectorSelect.value) {
            activeFilters.push(`Collector: ${collectorSelect.options[collectorSelect.selectedIndex].text}`);
        }
        if (statusSelect.value) {
            activeFilters.push(`Status: ${statusSelect.options[statusSelect.selectedIndex].text}`);
        }
        if (startDate.value) {
            activeFilters.push(`From: ${startDate.value}`);
        }
        if (endDate.value) {
            activeFilters.push(`To: ${endDate.value}`);
        }
        if (minAmount.value) {
            activeFilters.push(`Min: ৳${minAmount.value}`);
        }
        
        // Update filter summary if there are active filters
        if (activeFilters.length > 0) {
            const filterSummary = document.createElement('div');
            filterSummary.className = 'alert alert-info alert-sm mt-2';
            filterSummary.innerHTML = `
                <i class="fas fa-filter me-1"></i>
                <strong>Active Filters:</strong> ${activeFilters.join(' | ')}
                <button type="button" class="btn btn-sm btn-outline-secondary ms-2" onclick="window.location.href='{{ route('collector-deposits.index') }}'">
                    <i class="fas fa-times"></i> Clear All
                </button>
            `;
            
            // Remove existing summary
            const existingSummary = document.querySelector('.alert-info');
            if (existingSummary) {
                existingSummary.remove();
            }
            
            // Add new summary after the filter form
            filterForm.parentNode.appendChild(filterSummary);
        }
    }
    
    // Update active filters on page load
    updateActiveFilters();
});

// Approval functions
function approveDeposit(depositId) {
    if (confirm('Are you sure you want to approve this deposit?')) {
        fetch(`/collector-deposits/${depositId}/approve`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + (data.error || 'Failed to approve deposit'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while approving the deposit.');
        });
    }
}

function rejectDeposit(depositId) {
    const reason = prompt('Please provide a reason for rejection:');
    if (reason !== null && reason.trim() !== '') {
        fetch(`/collector-deposits/${depositId}/reject`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ reason: reason })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + (data.error || 'Failed to reject deposit'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while rejecting the deposit.');
        });
    }
}
</script>
@endpush