@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-piggy-bank me-2"></i>Edit/Delete Savings Accounts</h5>
                </div>
                <div class="card-body">
                    <!-- Search Form -->
                    <form method="GET" action="{{ route('savings.accounts.edit-delete') }}" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="account_number" class="form-label"><strong>Account Number</strong></label>
                                <input type="text" class="form-control" id="account_number" name="account_number"
                                       value="{{ request('account_number') }}" placeholder="Enter account 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="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>Closed</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('savings.accounts.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>Account Number</th>
                                    <th>Client Name</th>
                                    <th>Product Name</th>
                                    <th>Current Balance</th>
                                    <th>Status</th>
                                    <th style="width:180px">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($savingsAccounts as $account)
                                    <tr>
                                        <td>{{ $account->id }}</td>
                                        <td>{{ $account->account_number }}</td>
                                        <td>{{ $account->client->first_name }} {{ $account->client->last_name }}</td>
                                        <td>{{ $account->product_name }}</td>
                                        <td>USD {{ number_format($account->current_balance, 2) }}</td>
                                        <td>
                                            <span class="badge bg-{{ $account->status == 'active' ? 'success' : ($account->status == 'inactive' ? 'warning' : 'secondary') }}">
                                                {{ ucfirst($account->status) }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <a href="{{ route('savings.accounts.edit', $account) }}"
                                               class="btn btn-sm btn-success">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>
                                            <button class="btn btn-sm btn-danger deleteBtn"
                                                    data-id="{{ $account->id }}"
                                                    data-account="{{ $account->account_number }}">
                                                <i class="fas fa-trash"></i> Delete
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-4">No savings accounts found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="mt-3">
                        {{ $savingsAccounts->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 savings account <strong id="accountNumberDisplay"></strong>?</p>
                <p class="text-danger"><small>This action cannot be undone.</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 accountNumberDisplay = document.getElementById('accountNumberDisplay');
        const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));

        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const accountId = this.getAttribute('data-id');
                const accountNumber = this.getAttribute('data-account');
                const actionUrl = "{{ route('savings.accounts.destroy', ':id') }}".replace(':id', accountId);

                accountNumberDisplay.textContent = accountNumber;
                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