@include('user.header')
@include('sweetalert::alert')
<style>
    /* Custom Styles */
.page-title {
    font-size: 24px;
    font-weight: 600;
}

.card {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: #f5f5f5;
    border-bottom: 2px solid #ddd;
}

.card-body {
    padding: 20px;
}

.alert {
    font-size: 16px;
    padding: 15px;
    border-radius: 8px;
}

</style>

<div class="page-wrapper">
    <div class="content container-fluid">

        <!-- Page Header -->
        <div class="page-header">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Welcome, {{ Auth::user()->name }}!</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="">Home</a></li>
                            <li class="breadcrumb-item active">User Dashboard</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Page Header -->

        <!-- User Details -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div style="background-color:orange; " class="card-header">
                        <h5  class="card-title">User Details</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled">
                            <li><strong>Name:</strong> {{ Auth::user()->name }}</li>
                            <li style="color:blue ;"><strong >Email:</strong> {{ Auth::user()->email }}</li>
                            <li><strong>Phone:</strong> {{ Auth::user()->phone ?? 'Not Provided' }}</li>
                            <li><strong>Address:</strong> {{ Auth::user()->address ?? 'Not Provided' }}</li>
                            <li><strong>Role:</strong> {{ ucfirst(Auth::user()->role) }}</li>
                            <li>
                                <strong>Status:</strong>
                                @if(Auth::user()->approved == 0)
                                    <span class="text-warning">Pending</span>
                                @elseif(Auth::user()->approved == 1)
                                    <span class="text-success">Approved</span>
                                @else
                                    <span class="text-danger">Disqualified</span>
                                @endif
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Approval Notice -->
      <!-- Approval Notice -->
<div class="row">
    <div class="col-lg-12">
        @if(Auth::user()->approved == 0)
            <div class="alert alert-warning mt-4">
                <strong>Notice:</strong> Your account is pending approval by an Admin. Once approved, you will be able to apply for loans.
            </div>
        @elseif(Auth::user()->approved == 1)
            @if(empty(Auth::user()->vac_number))
                <div class="alert alert-info mt-4">
                    <strong>Notice:</strong> Your account is approved, but you don't have a bank account yet.
                    <p>
                      <div style="display:flex; justify-content: flex-end;">
                            <a href="{{ route('account') }}"  class="btn btn-primary btn-sm mt-1">
                                Click to Apply for Account
                            </a>
                            
                        </div> 
                    </p>
                </div>
            @else
            <style>
                /* Custom Styles for Cards */
                .card {
                    border-radius: 10px;
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                    margin-bottom: 20px;
                    overflow: hidden;
                }
                
                .card-header {
                    background-color: #007bff;
                    color: #fff;
                    padding: 15px;
                    font-size: 18px;
                    font-weight: 600;
                    border-bottom: 2px solid #0056b3;
                }
                
                .card-body {
                    padding: 20px;
                    background-color: #f9f9f9;
                }
                
                .card-body ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }
                
                .card-body ul li {
                    padding: 10px 0;
                    border-bottom: 1px solid #e0e0e0;
                    font-size: 16px;
                }
                
                .card-body ul li:last-child {
                    border-bottom: none;
                }
                
                .card-body ul li strong {
                    color: #333;
                }
                
                .card-body ul li span {
                    font-weight: 500;
                    color: #555;
                }
                
                .card-body ul li span.balance {
                    color: #28a745;
                    font-size: 18px;
                    font-weight: bold;
                }
                
                </style>
                
                <div class="card mt-4">
                    <div style="background-color:rgb(148, 144, 138); " class="card-header">
                        <h5 class="card-title mb-0">Bank Account Details</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled">
                            <li><strong>Bank Name:</strong> <span>{{ Auth::user()->bank_name ?? 'Not Provided' }}</span></li>
                            <li><strong>Cooperative Account Number:</strong> <span>{{ Auth::user()->approved_account_number  }}</span></li>
                            <li  style="colo:green;"><strong>Vactual Account Number:</strong> <span class="balance" >{{ Auth::user()->vac_number  }}</span></li> 
                            <li ><strong>Account Type:</strong> <span>{{ Auth::user()->account_type ?? 'Not Provided' }}</span></li>
                        </ul>
                    </div>
                </div>
                
                <div class="card mt-4">
                    <div style="background-color:rgb(130, 249, 50); "style="background-color:orange; " class="card-header">
                        <h5 class="card-title mb-0">Loan & Contributions</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled">
                            <li>
                                <strong>My Contribution | Available Balance:</strong> 
                                <span class="balance">₦{{ number_format(Auth::user()->contribution_balance ?? 0, 2) }}</span>
                            </li>
                            <li>
                                <strong>Loan | Balance to Pay:</strong> 
                                <span class="balance">₦{{ number_format(Auth::user()->loan_balance ?? 0, 2) }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
            @endif
        @else
            <div class="alert alert-danger mt-4">
                <strong>Notice:</strong> Your account has been disqualified. You cannot apply for loans.
            </div>
        @endif
    </div>
</div>


      
    </div>


   <!-- Modal -->
{{-- <div class="modal fade" id="applyAccountModal" tabindex="-1" aria-labelledby="applyAccountModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="applyAccountModalLabel">A virtual Account Number with be Generated for you...</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('apply-for-account') }}">
                    @csrf
                    <button type="submit" class="btn btn-primary">Generate Account</button>
                </form>
            </div>
        </div>
    </div>
</div> --}}

    
       <!-- Footer -->
    <footer class="footer mt-4">
        <p class="text-center">Copyright © 2024 SATO-tech. All Rights Reserved.</p>
    </footer>
</div>

<!-- Scripts -->
<script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/feather.min.js') }}"></script>
<script src="{{ asset('assets/plugins/slimscroll/jquery.slimscroll.min.js') }}"></script>
<script src="{{ asset('assets/plugins/apexchart/apexcharts.min.js') }}"></script>
<script src="{{ asset('assets/plugins/apexchart/chart-data.js') }}"></script>
<script src="{{ asset('assets/js/script.js') }}"></script>
<script>
    // Show/hide loan details based on loan servicing selection
    document.querySelectorAll('input[name="servicing_loan"]').forEach((input) => {
        input.addEventListener('change', (e) => {
            const loanDetails = document.getElementById('loan_details');
            loanDetails.style.display = e.target.value === 'yes' ? 'block' : 'none';
        });
    });
</script>
<!-- JavaScript -->
<script>
// Enable/disable submit button based on checkbox
const acceptTerms = document.getElementById('accept_terms');
const submitButton = document.getElementById('submit_button');

acceptTerms.addEventListener('change', () => {
    submitButton.disabled = !acceptTerms.checked;
});

// Show/hide loan details based on loan servicing selection
document.querySelectorAll('input[name="servicing_loan"]').forEach((input) => {
    input.addEventListener('change', (e) => {
        const loanDetails = document.getElementById('loan_details');
        loanDetails.style.display = e.target.value === 'yes' ? 'block' : 'none';
    });
});
</script>