@extends('layouts.app')
@section('content')
<div class="container-fluid py-3">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-hand-holding-dollar me-2"></i>Edit/Delete Loans</h5>
                </div>
                <div class="card-body">
                    <!-- Search Form -->
                    <form method="GET" action="{{ route('loans.edit-delete') }}" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="loan_number" class="form-label"><strong>Loan Number</strong></label>
                                <input type="text" class="form-control" id="loan_number" name="loan_number" 
                                       value="{{ request('loan_number') }}" placeholder="Enter loan number">
                            </div>
                            <div class="col-md-4">
                                <label for="client_name" class="form-label"><strong>Client Name</strong></label>
                                <input type="text" class="form-control" id="client_name" name="client_name" 
                                       value="{{ request('client_name') }}" placeholder="Enter client name">
                            </div>
                            <div class="col-md-4">
                                <label for="status" class="form-label"><strong>Status</strong></label>
                                <select class="form-control" id="status" name="status">
                                    <option value="">All Status</option>
                                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                    <option value="disbursed" {{ request('status') == 'disbursed' ? 'selected' : '' }}>Disbursed</option>
                                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                    <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-search"></i> Search
                                </button>
                                <a href="{{ route('loans.edit-delete') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times"></i> Clear
                                </a>
                            </div>
                        </div>
                    </form>

                    <!-- Results Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="bg-success text-white">
                                <tr>
                                    <th>ID</th>
                                    <th>Loan Number</th>
                                    <th>Client Name</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Application Date</th>
                                    <th style="width:180px">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($loans as $loan)
                                    <tr>
                                        <td>{{ $loan->id }}</td>
                                        <td>{{ $loan->loan_number }}</td>
                                        <td>{{ $loan->client->first_name }} {{ $loan->client->last_name }}</td>
                                        <td>KSh {{ number_format($loan->amount, 2) }}</td>
                                        <td>
                                            @php
                                                $badgeColor = 'secondary';
                                                if ($loan->status == 'approved') $badgeColor = 'success';
                                                elseif ($loan->status == 'pending') $badgeColor = 'warning';
                                                elseif ($loan->status == 'rejected') $badgeColor = 'danger';
                                                elseif ($loan->status == 'disbursed') $badgeColor = 'info';
                                                elseif ($loan->status == 'active') $badgeColor = 'primary';
                                                elseif ($loan->status == 'completed') $badgeColor = 'secondary';
                                            @endphp
                                            <span class="badge bg-{{ $badgeColor }}">
                                                {{ ucfirst($loan->status) }}
                                            </span>
                                        </td>
                                        <td>{{ $loan->application_date->format('Y-m-d') }}</td>
                                        <td class="text-center">
                                            <a href="{{ route('loans.edit', $loan) }}" 
                                               class="btn btn-sm btn-success">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>
                                            <button class="btn btn-sm btn-danger deleteBtn"
                                                    data-id="{{ $loan->id }}"
                                                    data-loan="{{ $loan->loan_number }}">
                                                <i class="fas fa-trash"></i> Delete
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-4">No loans found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    <div class="mt-3">
                        {{ $loans->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete loan <strong id="loanNumberDisplay"></strong>?</p>
                <p class="text-danger"><small>This action cannot be undone and will remove all associated loan data.</small></p>
            </div>
            <div class="modal-footer">
                <button id="cancelDeleteBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" action="" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const deleteButtons = document.querySelectorAll('.deleteBtn');
        const deleteForm = document.getElementById('deleteForm');
        const loanNumberDisplay = document.getElementById('loanNumberDisplay');
        const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));

        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const loanId = this.getAttribute('data-id');
                const loanNumber = this.getAttribute('data-loan');
                const actionUrl = "{{ route('loans.destroy', ':id') }}".replace(':id', loanId);

                loanNumberDisplay.textContent = loanNumber;
                deleteForm.action = actionUrl;
                modal.show();
            });
        });

        // Close modal when cancel button is clicked
        document.getElementById('cancelDeleteBtn').addEventListener('click', function() {
            modal.hide();
        });
    });
</script>

<style>
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.table th {
    background-color: #f8f9fa;
}
.badge {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
}
.pagination {
    margin-bottom: 0;
}
</style>
@endsection