@extends('layouts.app')

@section('title', 'View Collector Deposit')

@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 Deposit Details</h3>
                    <div class="btn-group">
                        <a href="{{ route('collector-deposits.edit', $collectorDeposit) }}" class="btn btn-warning">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <a href="{{ route('collector-deposits.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Deposit ID</label>
                                        <p class="form-control-plaintext">{{ $collectorDeposit->deposit_id }}</p>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Amount</label>
                                        <p class="form-control-plaintext text-success fs-5">৳{{ number_format($collectorDeposit->amount, 2) }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Collector</label>
                                        <p class="form-control-plaintext">
                                            {{ $collectorDeposit->collector->name ?? 'N/A' }}
                                            @if($collectorDeposit->collector)
                                                <br><small class="text-muted">ID: {{ $collectorDeposit->collector_id }}</small>
                                            @endif
                                        </p>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Deposit Date</label>
                                        <p class="form-control-plaintext">{{ $collectorDeposit->deposit_date->format('d M Y') }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Payment Method</label>
                                        <p class="form-control-plaintext">
                                            @if($collectorDeposit->method)
                                                <span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $collectorDeposit->method)) }}</span>
                                            @else
                                                <span class="text-muted">Not specified</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Received By</label>
                                        <p class="form-control-plaintext">
                                            {{ $collectorDeposit->receiver->name ?? 'N/A' }}
                                            @if($collectorDeposit->receiver)
                                                <br><small class="text-muted">ID: {{ $collectorDeposit->received_by }}</small>
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Status</label>
                                        <p class="form-control-plaintext">
                                            @if($collectorDeposit->is_approved)
                                                <span class="badge bg-success fs-6">Approved</span>
                                            @else
                                                <span class="badge bg-warning fs-6">Pending</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>

                                @if($collectorDeposit->is_approved)
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label fw-bold">Approved By</label>
                                            <p class="form-control-plaintext">
                                                {{ $collectorDeposit->approver->name ?? 'N/A' }}
                                                @if($collectorDeposit->approver)
                                                    <br><small class="text-muted">ID: {{ $collectorDeposit->approved_by }}</small>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            @if($collectorDeposit->approved_at)
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label fw-bold">Approved At</label>
                                            <p class="form-control-plaintext">{{ $collectorDeposit->approved_at->format('d M Y, h:i A') }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if($collectorDeposit->reference_note)
                                <div class="row">
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label class="form-label fw-bold">Reference Note</label>
                                            <div class="border rounded p-3 bg-light">
                                                {{ $collectorDeposit->reference_note }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Quick Actions</h5>
                                </div>
                                <div class="card-body">
                                    @if(!$collectorDeposit->is_approved)
                                        <button type="button" class="btn btn-success w-100 mb-2" 
                                                onclick="approveDeposit({{ $collectorDeposit->deposit_id }})">
                                            <i class="fas fa-check"></i> Approve Deposit
                                        </button>
                                    @else
                                        <button type="button" class="btn btn-danger w-100 mb-2" 
                                                onclick="rejectDeposit({{ $collectorDeposit->deposit_id }})">
                                            <i class="fas fa-times"></i> Reject Deposit
                                        </button>
                                    @endif

                                    <form action="{{ route('collector-deposits.destroy', $collectorDeposit) }}" 
                                          method="POST" class="d-inline w-100"
                                          onsubmit="return confirm('Are you sure you want to delete this deposit?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger w-100">
                                            <i class="fas fa-trash"></i> Delete Deposit
                                        </button>
                                    </form>
                                </div>
                            </div>

                            <div class="card mt-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Timestamps</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-2">
                                        <small class="text-muted">Created:</small><br>
                                        {{ $collectorDeposit->created_at->format('d M Y, h:i A') }}
                                    </div>
                                    <div class="mb-2">
                                        <small class="text-muted">Last Updated:</small><br>
                                        {{ $collectorDeposit->updated_at->format('d M Y, h:i A') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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>
function approveDeposit(depositId) {
    document.getElementById('approveForm').action = `/collector-deposits/${depositId}/approve`;
    new bootstrap.Modal(document.getElementById('approveModal')).show();
}

function rejectDeposit(depositId) {
    if (confirm('Are you sure you want to reject this deposit?')) {
        fetch(`/collector-deposits/${depositId}/reject`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error rejecting deposit');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error rejecting deposit');
        });
    }
}
</script>
@endpush